feat(toggle): add helper and error text to the ionic theme (#30281)

- Adds design for helper and error text to the toggle for the ionic theme
- Updates tests to add screenshots for ionic theme

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

core/src/components/toggle/test/bottom-content/toggle.e2e.ts

@@ -89,7 +89,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 /**
  * Rendering is different across modes
  */
-configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: helper text rendering'), () => {
     // Check the default label placement, end, and stacked
     [undefined, 'end', 'stacked'].forEach((labelPlacement) => {

core/src/components/toggle/toggle.common.scss

@@ -117,21 +117,13 @@ input {
 // ----------------------------------------------------------------
 
 .toggle-bottom {
-  @include padding(4px, null, null, null);
-
   display: flex;
 
   justify-content: space-between;
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
-:host(.toggle-label-placement-stacked) .toggle-bottom {
-  font-size: dynamic-font(16px);
-}
-
 // Toggle Hint Text
 // ----------------------------------------------------------------
 
@@ -142,14 +134,10 @@ input {
  */
 .toggle-bottom .error-text {
   display: none;
-
-  color: ion-color(danger, base);
 }
 
 .toggle-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .toggle-bottom .error-text {

core/src/components/toggle/toggle.ionic.scss

@@ -54,6 +54,24 @@
   background: globals.current-color(base);
 }
 
+// Toggle Bottom Content
+// ----------------------------------------------------------------
+
+.toggle-bottom {
+  @include globals.typography(globals.$ion-body-md-regular);
+}
+
+// Toggle Hint Text
+// ----------------------------------------------------------------
+
+.toggle-bottom .error-text {
+  color: globals.$ion-semantics-danger-800;
+}
+
+.toggle-bottom .helper-text {
+  color: globals.$ion-primitives-neutral-800;
+}
+
 // Toggle Native Wrapper: Focused
 // ----------------------------------------------------------------
 

core/src/components/toggle/toggle.native.scss

@@ -17,6 +17,30 @@
   @include margin(null, null, $toggle-item-label-margin-bottom, null);
 }
 
+// Toggle Bottom Content
+// ----------------------------------------------------------------
+
+.toggle-bottom {
+  @include padding(4px, null, null, null);
+
+  font-size: dynamic-font(12px);
+}
+
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: dynamic-font(16px);
+}
+
+// Toggle Hint Text
+// ----------------------------------------------------------------
+
+.toggle-bottom .error-text {
+  color: ion-color(danger, base);
+}
+
+.toggle-bottom .helper-text {
+  color: $text-color-step-300;
+}
+
 // Input Label
 // ----------------------------------------------------------------