fix(checkbox, input, select, textarea): uniform invalid border color for ionic theme (#30838)

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

This pull request updates the error text color handling for several form
components to use a consistent variable, improving maintainability and
visual consistency. The changes also update the focus ring color for
invalid checkboxes to align with the new variable naming.

**Error text color standardization:**

* Updated `.error-text` color in `checkbox.ionic.scss` to use
`globals.$ion-text-danger` instead of
`globals.$ion-semantics-danger-800`.
* Added `.error-text` color rule using `globals.$ion-text-danger` to
`input.ionic.scss`, `select.ionic.scss`, and `textarea.ionic.scss`.
[[1]](diffhunk://#diff-4d89e41650632cecdd15dbe6b2ef5ad30d100788ecd786dd97a990aaf1ab08d9R274-R277)
[[2]](diffhunk://#diff-030647f0cfb9ca6f042e9d7114611c7076a7c01af73076d1db05cc881b40ddf7R39-R42)
[[3]](diffhunk://#diff-45914a3d091d2c33732c1bdfbd74ce4375d12c6b23811c211a038d829e110886R149-R152)

**Focus ring color update:**

* Changed the invalid checkbox focus ring color variable from
`globals.$ion-border-focus-error` to
`globals.$ion-border-danger-default` in `checkbox.ionic.scss`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
José Rio
2025-12-04 16:54:15 +00:00
committed by GitHub
parent b9ced5522a
commit e8d52aec7c
10 changed files with 14 additions and 2 deletions

View File

@@ -117,7 +117,7 @@ input {
}
.checkbox-bottom .error-text {
color: globals.$ion-semantics-danger-800;
color: globals.$ion-text-danger;
}
.checkbox-bottom .helper-text {
@@ -198,7 +198,7 @@ input {
// Ionic Design Checkbox Invalid
// --------------------------------------------------
:host(.ion-invalid) {
--focus-ring-color: #{globals.$ion-border-focus-error};
--focus-ring-color: #{globals.$ion-border-danger-default};
}
:host(.ion-invalid:not(.checkbox-checked)),

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@@ -271,6 +271,10 @@
color: globals.$ion-primitives-neutral-800;
}
.input-bottom .error-text {
color: globals.$ion-text-danger;
}
:host(.has-focus.ion-valid) .helper-text {
color: var(--highlight-color-valid);
}

View File

@@ -36,6 +36,10 @@
color: globals.$ion-primitives-neutral-800;
}
.select-bottom .error-text {
color: globals.$ion-text-danger;
}
.select-text {
min-width: globals.$ion-space-400;

View File

@@ -146,6 +146,10 @@ ion-icon {
color: globals.$ion-text-subtlest;
}
.textarea-bottom .error-text {
color: globals.$ion-text-danger;
}
:host(.has-focus.ion-valid) .helper-text {
color: var(--highlight-color-valid);
}