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

Author: brandyscarney

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
 // ----------------------------------------------------------------