fix(theming): update components to use the proper colors for themes

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -65,7 +65,7 @@ $action-sheet-ios-title-border-style:                             solid !default
 $action-sheet-ios-title-border-color-alpha:                       .08 !default;
 
 /// @prop - Border color of the action sheet title
-$action-sheet-ios-title-border-color:                             rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default;
+$action-sheet-ios-title-border-color:                             rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
 
 
 // Action Sheet Subtitle
@@ -124,7 +124,7 @@ $action-sheet-ios-button-border-style:                            solid !default
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;
 
 /// @prop - Border color of the action sheet button
-$action-sheet-ios-button-border-color:                            rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default;
+$action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
 
 /// @prop - Background color of the action sheet button
 $action-sheet-ios-button-background:                              transparent !default;
@@ -133,7 +133,7 @@ $action-sheet-ios-button-background:                              transparent !d
 $action-sheet-ios-button-background-alpha-activated:              .08 !default;
 
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:                    rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default;
+$action-sheet-ios-button-background-activated:                    rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default;
 
 /// @prop - Background color of the selected action sheet button
 $action-sheet-ios-button-background-selected:                     $background-color !default;

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -23,7 +23,7 @@ $action-sheet-md-padding-bottom:                        0 !default;
 $action-sheet-md-title-height:                          60px !default;
 
 /// @prop - Color of the action sheet title
-$action-sheet-md-title-color:                           rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
+$action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-md-title-font-size:                       16px !default;

core/src/components/alert/alert.ios.vars.scss

@@ -152,7 +152,7 @@ $alert-ios-button-background-color:                     transparent !default;
 $alert-ios-button-background-color-alpha-activated:     .1 !default;
 
 /// @prop - Background color of the alert activated button
-$alert-ios-button-background-color-activated:           rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-background-color-alpha-activated) !default;
+$alert-ios-button-background-color-activated:           rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default;
 
 /// @prop - Border width of the alert button
 $alert-ios-button-border-width:                         $hairlines-width !default;
@@ -164,7 +164,7 @@ $alert-ios-button-border-style:                         solid !default;
 $alert-ios-button-border-color-alpha:                   .2 !default;
 
 /// @prop - Border color of the alert button
-$alert-ios-button-border-color:                         rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-border-color-alpha) !default;
+$alert-ios-button-border-color:                         rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default;
 
 /// @prop - Border radius of the alert button
 $alert-ios-button-border-radius:                        0 !default;

core/src/components/button/button.md.vars.scss

@@ -122,7 +122,7 @@ $button-md-outline-box-shadow:                          none !default;
 $button-md-outline-background-color-alpha-hover:        .1 !default;
 
 /// @prop - Background color of the outline button on hover
-$button-md-outline-background-color-hover:              rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-outline-background-color-alpha-hover) !default;
+$button-md-outline-background-color-hover:              rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
 
 /// @prop - Background color of the activated outline button
 $button-md-outline-background-color-activated:          transparent !default;
@@ -158,7 +158,7 @@ $button-md-clear-opacity:                               1 !default;
 $button-md-clear-background-color-alpha-activated:      .1 !default;
 
 /// @prop - Background color of the activated clear button
-$button-md-clear-background-color-activated:            rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-activated) !default;
+$button-md-clear-background-color-activated:            rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
 
 /// @prop - Box shadow of the activated clear button
 $button-md-clear-box-shadow-activated:                  $button-md-clear-box-shadow !default;
@@ -167,7 +167,7 @@ $button-md-clear-box-shadow-activated:                  $button-md-clear-box-sha
 $button-md-clear-background-color-alpha-hover:          .1 !default;
 
 /// @prop - Background color of the clear button on hover
-$button-md-clear-background-color-hover:                rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-hover) !default;
+$button-md-clear-background-color-hover:                rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
 
 /// @prop - Background color of the ripple on the clear button
 $button-md-clear-ripple-background-color:               $text-color-step-600 !default;

core/src/components/checkbox/checkbox.ios.vars.scss

@@ -17,7 +17,7 @@ $checkbox-ios-background-color-focused:   ion-color(primary, tint) !default;
 $checkbox-ios-icon-size:                  26px !default;
 
 /// @prop - Border color of the checkbox icon when off
-$checkbox-ios-icon-border-color-off:      $item-ios-border-color !default;
+$checkbox-ios-icon-border-color-off:      rgba($text-color-rgb, 0.23) !default;
 
 /// @prop - Border color of the checkbox icon when on
 $checkbox-ios-icon-border-color-on:       $checkbox-ios-background-color-on !default;

core/src/components/checkbox/checkbox.md.vars.scss

@@ -38,7 +38,7 @@ $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 
 /// @prop - Border color of the checkbox icon when off
-$checkbox-md-icon-border-color-off:      rgba(0, 0, 0, .54) !default;
+$checkbox-md-icon-border-color-off:      rgba($text-color-rgb, .51) !default;
 
 /// @prop - Border color of the checkbox icon when on
 $checkbox-md-icon-border-color-on:       ion-color(primary, base) !default;

core/src/components/chip/chip.scss

@@ -5,8 +5,8 @@
    * @prop --background: Background of the chip
    * @prop --color: Color of the chip
    */
-  --background: rgba(0, 0, 0, .12);
-  --color: rgba(0, 0, 0, .87);
+  --background: #{rgba($text-color-rgb, .12)};
+  --color: #{rgba($text-color-rgb, .87)};
 
   @include border-radius(16px);
   @include font-smoothing();
@@ -128,15 +128,15 @@
 }
 
 :host(:focus) {
-  --background: rgba(0, 0, 0, .16);
+  --background: #{rgba($text-color-rgb, .16)};
 }
 
 
 // Chip: Activated
 // ---------------------------------------------
 
 :host(.activated) {
-  --background: rgba(0, 0, 0, .20);
+  --background: #{rgba($text-color-rgb, .20)};
 }
 
 
@@ -145,14 +145,14 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --background: rgba(0, 0, 0, .16);
+    --background: #{rgba($text-color-rgb, .16)};
   }
 
   :host(.ion-color:hover) {
     background: current-color(base, .12);
   }
 
   :host(.chip-outline:not(.ion-color):hover) {
-    background: rgba(0, 0, 0, .04);
+    background: rgba($text-color-rgb, .04);
   }
 }

core/src/components/fab-button/fab-button.md.vars.scss

@@ -31,7 +31,7 @@ $fab-md-list-button-background-color-activated:   ion-color(light, shade) !defau
 $fab-md-list-button-background-color-hover:       ion-color(light, tint) !default;
 
 /// @prop - Text color of the button in a list
-$fab-md-list-button-text-color:                   rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
+$fab-md-list-button-text-color:                   rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the button icon in a list
 $fab-md-list-button-icon-font-size:               18px !default;

core/src/components/item/item.ios.vars.scss

@@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start:            $item-ios-paragraph-margin-end !def
 $item-ios-paragraph-font-size:               14px !default;
 
 /// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color:              $text-color-step-600 !default;
+$item-ios-paragraph-text-color:              rgba($text-color-rgb, .4) !default;
 
 /// @prop - Width of the avatar in the item
 $item-ios-avatar-width:                      36px !default;

core/src/components/item/item.md.vars.scss

@@ -133,7 +133,7 @@ $item-md-icon-end-slot-margin-start:        16px !default;
 $item-md-icon-end-slot-margin-end:          null !default;
 
 /// @prop - Color for an icon in the start/end slot
-$item-md-icon-slot-color:                   rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
+$item-md-icon-slot-color:                   rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of an icon in the start/end slot
 $item-md-icon-slot-font-size:                  24px !default;

core/src/components/loading/loading.ios.vars.scss

@@ -31,7 +31,7 @@ $loading-ios-border-radius:                         8px !default;
 $loading-ios-text-color:                            $text-color !default;
 
 /// @prop - Background of the loading wrapper
-$loading-ios-background-color:                      $background-color-step-50 !default;
+$loading-ios-background-color:                      $overlay-ios-background-color !default;
 
 /// @prop - Background color alpha of the translucent loading wrapper
 $loading-ios-translucent-background-color-alpha:    .8 !default;

core/src/components/range/range.ios.vars.scss

@@ -19,10 +19,10 @@ $range-ios-hit-width:                         42px !default;
 $range-ios-hit-height:                        $range-ios-slider-height !default;
 
 /// @prop - Height of the range bar
-$range-ios-bar-height:                        1px !default;
+$range-ios-bar-height:                        2px !default;
 
 /// @prop - Background of the range bar
-$range-ios-bar-background-color:              $background-color-step-250 !default;
+$range-ios-bar-background-color:              rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default;
 
 /// @prop - Background of the active range bar
 $range-ios-bar-active-background-color:       current-color(base) !default;
@@ -40,7 +40,7 @@ $range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, .1), 0 4px
 $range-ios-knob-border-radius:                50% !default;
 
 /// @prop - Background of the range knob
-$range-ios-knob-background-color:             $background-color !default;
+$range-ios-knob-background-color:             #ffffff !default;
 
 /// @prop - Width of the range tick
 $range-ios-tick-width:                        $range-ios-bar-height !default;

core/src/components/searchbar/searchbar.ios.vars.scss

@@ -46,7 +46,7 @@ $searchbar-ios-input-text-color:                  $text-color !default;
 $searchbar-ios-input-background-color-alpha:      .07 !default;
 
 /// @prop - Background color of the searchbar input
-$searchbar-ios-input-background-color:            rgba(var(--ion-text-color-rgb, $text-color-rgb), $searchbar-ios-input-background-color-alpha) !default;
+$searchbar-ios-input-background-color:            rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default;
 
 /// @prop - Transition of the searchbar input
 $searchbar-ios-input-transition:                  all 300ms ease !default;

core/src/components/segment-button/segment-button.md.vars.scss

@@ -7,7 +7,7 @@
 $segment-button-md-opacity:                           .6 !default;
 
 /// @prop - Text color of the segment button
-$segment-button-md-text-color:                        rgba(var(--ion-text-color-rgb, $text-color-rgb), $segment-button-md-opacity) !default;
+$segment-button-md-text-color:                        rgba($text-color-rgb, $segment-button-md-opacity) !default;
 
 /// @prop - Background of the segment button
 $segment-button-md-background:                        none !default;

core/src/components/skeleton-text/skeleton-text.vars.scss

@@ -7,10 +7,10 @@
 $skeleton-text-background-alpha:            .065 !default;
 
 /// @prop - Background color of the skeleton text
-$skeleton-text-background:                  rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-alpha) !default;
+$skeleton-text-background:                  rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default;
 
 /// @prop - Background color alpha of the skeleton text animation
 $skeleton-text-background-animated-alpha:   .135 !default;
 
 /// @prop - Background color of the skeleton text animation
-$skeleton-text-background-animated:         rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-animated-alpha) !default;
+$skeleton-text-background-animated:         rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default;

core/src/components/slides/slides.ios.vars.scss

@@ -10,7 +10,7 @@ $slides-ios-bullet-background-active:             ion-color(primary, base) !defa
 $slides-ios-progress-bar-background-alpha:        .25 !default;
 
 /// @prop - Background color of the progress bar
-$slides-ios-progress-bar-background:              rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-progress-bar-background-alpha) !default;
+$slides-ios-progress-bar-background:              rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default;
 
 /// @prop - Background color of the active progress bar
 $slides-ios-progress-bar-background-active:       ion-color(primary, shade) !default;
@@ -19,10 +19,10 @@ $slides-ios-progress-bar-background-active:       ion-color(primary, shade) !def
 $slides-ios-scroll-bar-background-alpha:          .1 !default;
 
 /// @prop - Background color of the scroll bar
-$slides-ios-scroll-bar-background:                rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-background-alpha) !default;
+$slides-ios-scroll-bar-background:                rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default;
 
 /// @prop - Alpha to use for the background color of the scroll bar while dragging
 $slides-ios-scroll-bar-drag-background-alpha:     .5 !default;
 
 /// @prop - Background color of the scroll bar drag handle
-$slides-ios-scroll-bar-drag-background:           rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-drag-background-alpha) !default;
+$slides-ios-scroll-bar-drag-background:           rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default;

core/src/components/slides/slides.md.vars.scss

@@ -10,7 +10,7 @@ $slides-md-bullet-background-active:            ion-color(primary, base) !defaul
 $slides-md-progress-bar-background-alpha:       .25 !default;
 
 /// @prop - Background color of the progress
-$slides-md-progress-bar-background:             rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-progress-bar-background-alpha) !default;
+$slides-md-progress-bar-background:             rgba($text-color-rgb, $slides-md-progress-bar-background-alpha) !default;
 
 /// @prop - Background color of the progress bar
 $slides-md-progress-bar-background-active:      ion-color(primary, shade) !default;
@@ -19,10 +19,10 @@ $slides-md-progress-bar-background-active:      ion-color(primary, shade) !defau
 $slides-md-scroll-bar-background-alpha:         .1 !default;
 
 /// @prop - Background color of the scroll bar
-$slides-md-scroll-bar-background:               rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-background-alpha) !default;
+$slides-md-scroll-bar-background:               rgba($text-color-rgb, $slides-md-scroll-bar-background-alpha) !default;
 
 /// @prop - Alpha to use for the background color of the scroll bar while dragging
 $slides-md-scroll-bar-drag-background-alpha:    .5 !default;
 
 /// @prop - Background color of the scroll bar drag handle
-$slides-md-scroll-bar-drag-background:          rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-drag-background-alpha) !default;
+$slides-md-scroll-bar-drag-background:          rgba($text-color-rgb, $slides-md-scroll-bar-drag-background-alpha) !default;

core/src/components/toggle/toggle.ios.scss

@@ -43,32 +43,13 @@
 
   transition: background-color $toggle-ios-transition-duration;
 
-  background-color: $toggle-ios-border-color-off;
+  background-color: $toggle-ios-background-color-off;
 
   overflow: hidden;
   pointer-events: none;
 }
 
 
-// iOS Toggle Background Oval: Unchecked
-// -----------------------------------------
-
-.toggle-icon::before {
-  @include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
-  @include border-radius($toggle-ios-border-radius);
-
-  position: absolute;
-
-  transform: scale3d(1, 1, 1);
-
-  transition: transform $toggle-ios-transition-duration;
-
-  background: var(--background);
-
-  content: "";
-}
-
-
 // iOS Toggle Inner Knob: Unchecked
 // -----------------------------------------
 

core/src/components/toggle/toggle.ios.vars.scss

@@ -17,10 +17,7 @@ $toggle-ios-border-width:              2px !default;
 $toggle-ios-border-radius:             $toggle-ios-height / 2 !default;
 
 /// @prop - Background color of the unchecked toggle
-$toggle-ios-background-color-off:      $item-ios-background !default;
-
-/// @prop - Border color of the unchecked toggle
-$toggle-ios-border-color-off:          $background-color-step-50 !default;
+$toggle-ios-background-color-off:      rgba($text-color-rgb, .088) !default;
 
 /// @prop - Background color of the checked toggle
 $toggle-ios-background-color-on:       ion-color(primary, base) !default;
@@ -38,7 +35,7 @@ $toggle-ios-handle-border-radius:      $toggle-ios-handle-height / 2 !default;
 $toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
 
 /// @prop - Background color of the toggle handle
-$toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
+$toggle-ios-handle-background-color:   #ffffff !default;
 
 /// @prop - Margin of the toggle handle
 $toggle-ios-media-margin:              0 !default;

core/src/components/toggle/toggle.md.vars.scss

@@ -14,7 +14,7 @@ $toggle-md-track-width:                           36px !default;
 $toggle-md-track-height:                          14px !default;
 
 /// @prop - Background color of the toggle track
-$toggle-md-track-background-color-off:            ion-color(medium, tint) !default;
+$toggle-md-track-background-color-off:            rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.3) !default;
 
 /// @prop - Background color alpha of the checked toggle track
 $toggle-md-track-background-color-alpha-on:       .5 !default;
@@ -35,7 +35,7 @@ $toggle-md-handle-border-radius:                  50% !default;
 $toggle-md-handle-box-shadow:                     0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
 /// @prop - Background color of the toggle handle
-$toggle-md-handle-background-color-off:           $background-color !default;
+$toggle-md-handle-background-color-off:           #ffffff !default;
 
 /// @prop - Background color of the checked toggle handle
 $toggle-md-handle-background-color-on:            $toggle-md-active-color !default;