Skip to content

Commit e8d52ae

Browse files
joselrioIonitron
andauthored
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 <[email protected]>
1 parent b9ced55 commit e8d52ae

10 files changed

+14
-2
lines changed

core/src/components/checkbox/checkbox.ionic.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ input {
117117
}
118118

119119
.checkbox-bottom .error-text {
120-
color: globals.$ion-semantics-danger-800;
120+
color: globals.$ion-text-danger;
121121
}
122122

123123
.checkbox-bottom .helper-text {
@@ -198,7 +198,7 @@ input {
198198
// Ionic Design Checkbox Invalid
199199
// --------------------------------------------------
200200
:host(.ion-invalid) {
201-
--focus-ring-color: #{globals.$ion-border-focus-error};
201+
--focus-ring-color: #{globals.$ion-border-danger-default};
202202
}
203203

204204
:host(.ion-invalid:not(.checkbox-checked)),
2 Bytes
Loading
50 Bytes
Loading
59 Bytes
Loading
57 Bytes
Loading
37 Bytes
Loading
90 Bytes
Loading

core/src/components/input/input.ionic.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,10 @@
271271
color: globals.$ion-primitives-neutral-800;
272272
}
273273

274+
.input-bottom .error-text {
275+
color: globals.$ion-text-danger;
276+
}
277+
274278
:host(.has-focus.ion-valid) .helper-text {
275279
color: var(--highlight-color-valid);
276280
}

core/src/components/select/select.ionic.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
color: globals.$ion-primitives-neutral-800;
3737
}
3838

39+
.select-bottom .error-text {
40+
color: globals.$ion-text-danger;
41+
}
42+
3943
.select-text {
4044
min-width: globals.$ion-space-400;
4145

core/src/components/textarea/textarea.ionic.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@ ion-icon {
146146
color: globals.$ion-text-subtlest;
147147
}
148148

149+
.textarea-bottom .error-text {
150+
color: globals.$ion-text-danger;
151+
}
152+
149153
:host(.has-focus.ion-valid) .helper-text {
150154
color: var(--highlight-color-valid);
151155
}

0 commit comments

Comments
 (0)