fix(checkbox, input, textarea, toggle): fixed color and sizes for helper and error text

joselrio · joselrio · commit fe46ad8ffead · 2025-12-30T12:02:53.000Z
diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
@@ -113,16 +113,15 @@ input {
 // ----------------------------------------------------------------
 
 .checkbox-bottom {
-  @include globals.typography(globals.$ion-body-md-regular);
+  @include globals.typography(globals.$ion-body-sm-medium);
 }
 
 .checkbox-bottom .error-text {
   color: globals.$ion-text-danger;
 }
 
 .checkbox-bottom .helper-text {
-  @include globals.typography(globals.$ion-body-sm-medium);
-  color: globals.$ion-primitives-neutral-800;
+  color: globals.$ion-text-subtlest;
 }
 
 // Label Placement - Start
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
@@ -266,15 +266,15 @@
   @include globals.typography(globals.$ion-body-sm-medium);
 }
 
-.input-bottom .helper-text,
-.input-bottom .counter {
-  color: globals.$ion-primitives-neutral-800;
-}
-
 .input-bottom .error-text {
   color: globals.$ion-text-danger;
 }
 
+.input-bottom .helper-text,
+.input-bottom .counter {
+  color: globals.$ion-text-subtlest;
+}
+
 :host(.has-focus.ion-valid) .helper-text {
   color: var(--highlight-color-valid);
 }
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
@@ -141,15 +141,15 @@ ion-icon {
   @include globals.typography(globals.$ion-body-sm-medium);
 }
 
+.textarea-bottom .error-text {
+  color: globals.$ion-text-danger;
+}
+
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
   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);
 }
diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss
@@ -56,19 +56,18 @@
 // ----------------------------------------------------------------
 
 .toggle-bottom {
-  @include globals.typography(globals.$ion-body-md-regular);
+  @include globals.typography(globals.$ion-body-sm-medium);
 }
 
 // Toggle Hint Text
 // ----------------------------------------------------------------
 
 .toggle-bottom .error-text {
-  color: globals.$ion-semantics-danger-900;
+  color: globals.$ion-text-danger;
 }
 
 .toggle-bottom .helper-text {
-  @include globals.typography(globals.$ion-body-sm-medium);
-  color: globals.$ion-primitives-neutral-800;
+  color: globals.$ion-text-subtlest;
 }
 
 // Toggle Native Wrapper: Focused

Original file line number	Diff line number	Diff line change
`@@ -113,16 +113,15 @@ input {`
`113`	`113`	`// ----------------------------------------------------------------`
`114`	`114`
`115`	`115`	`.checkbox-bottom {`
`116`		`- @include globals.typography(globals.$ion-body-md-regular);`
	`116`	`+ @include globals.typography(globals.$ion-body-sm-medium);`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`.checkbox-bottom .error-text {`
`120`	`120`	`color: globals.$ion-text-danger;`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`.checkbox-bottom .helper-text {`
`124`		`- @include globals.typography(globals.$ion-body-sm-medium);`
`125`		`- color: globals.$ion-primitives-neutral-800;`
	`124`	`+ color: globals.$ion-text-subtlest;`
`126`	`125`	`}`
`127`	`126`
`128`	`127`	`// Label Placement - Start`
Original file line number	Diff line number	Diff line change
`@@ -266,15 +266,15 @@`
`266`	`266`	`@include globals.typography(globals.$ion-body-sm-medium);`
`267`	`267`	`}`
`268`	`268`
`269`		`-.input-bottom .helper-text,`
`270`		`-.input-bottom .counter {`
`271`		`- color: globals.$ion-primitives-neutral-800;`
`272`		`-}`
`273`		`-`
`274`	`269`	`.input-bottom .error-text {`
`275`	`270`	`color: globals.$ion-text-danger;`
`276`	`271`	`}`
`277`	`272`
	`273`	`+.input-bottom .helper-text,`
	`274`	`+.input-bottom .counter {`
	`275`	`+ color: globals.$ion-text-subtlest;`
	`276`	`+}`
	`277`	`+`
`278`	`278`	`:host(.has-focus.ion-valid) .helper-text {`
`279`	`279`	`color: var(--highlight-color-valid);`
`280`	`280`	`}`
Original file line number	Diff line number	Diff line change
`@@ -141,15 +141,15 @@ ion-icon {`
`141`	`141`	`@include globals.typography(globals.$ion-body-sm-medium);`
`142`	`142`	`}`
`143`	`143`
	`144`	`+.textarea-bottom .error-text {`
	`145`	`+ color: globals.$ion-text-danger;`
	`146`	`+}`
	`147`	`+`
`144`	`148`	`.textarea-bottom .helper-text,`
`145`	`149`	`.textarea-bottom .counter {`
`146`	`150`	`color: globals.$ion-text-subtlest;`
`147`	`151`	`}`
`148`	`152`
`149`		`-.textarea-bottom .error-text {`
`150`		`- color: globals.$ion-text-danger;`
`151`		`-}`
`152`		`-`
`153`	`153`	`:host(.has-focus.ion-valid) .helper-text {`
`154`	`154`	`color: var(--highlight-color-valid);`
`155`	`155`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,19 +56,18 @@`
`56`	`56`	`// ----------------------------------------------------------------`
`57`	`57`
`58`	`58`	`.toggle-bottom {`
`59`		`- @include globals.typography(globals.$ion-body-md-regular);`
	`59`	`+ @include globals.typography(globals.$ion-body-sm-medium);`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`// Toggle Hint Text`
`63`	`63`	`// ----------------------------------------------------------------`
`64`	`64`
`65`	`65`	`.toggle-bottom .error-text {`
`66`		`- color: globals.$ion-semantics-danger-900;`
	`66`	`+ color: globals.$ion-text-danger;`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`.toggle-bottom .helper-text {`
`70`		`- @include globals.typography(globals.$ion-body-sm-medium);`
`71`		`- color: globals.$ion-primitives-neutral-800;`
	`70`	`+ color: globals.$ion-text-subtlest;`
`72`	`71`	`}`
`73`	`72`
`74`	`73`	`// Toggle Native Wrapper: Focused`