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

references #18713

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);
+  --background: #{rgba($text-color-rgb, .12)};
-  --color: rgba(0, 0, 0, .87);
+  --color: #{rgba($text-color-rgb, .87)};
 
   @include border-radius(16px);
   @include font-smoothing();
@@ -128,7 +128,7 @@
 }
 
 :host(:focus) {
-  --background: rgba(0, 0, 0, .16);
+  --background: #{rgba($text-color-rgb, .16)};
 }
 
 
@@ -136,7 +136,7 @@
 // ---------------------------------------------
 
 :host(.activated) {
-  --background: rgba(0, 0, 0, .20);
+  --background: #{rgba($text-color-rgb, .20)};
 }
 
 
@@ -145,7 +145,7 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --background: rgba(0, 0, 0, .16);
+    --background: #{rgba($text-color-rgb, .16)};
   }
 
   :host(.ion-color:hover) {
@@ -153,6 +153,6 @@
   }
 
   :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;
+$toggle-ios-background-color-off:      rgba($text-color-rgb, .088) !default;
-
-/// @prop - Border color of the unchecked toggle
-$toggle-ios-border-color-off:          $background-color-step-50 !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;

core/src/themes/ionic.theme.default.ios.scss

@@ -9,7 +9,7 @@
 $backdrop-ios-color:                        var(--ion-backdrop-color, #000) !default;
 $border-ios-color:                          var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
 $box-shadow-ios-color:                      var(--ion-box-shadow-color, #000) !default;
-$overlay-ios-background-color:              var(--ion-overlay-background-color, var(--ion-color-step-50, #f9f9f9)) !default;
+$overlay-ios-background-color:              var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
 
 // iOS Tabs & Tab bar
 // --------------------------------------------------
@@ -31,6 +31,6 @@ $toolbar-ios-color-activated:               var(--ion-toolbar-color-activated, i
 $item-ios-background:                       var(--ion-item-background, $background-color) !default;
 $item-ios-background-activated:             var(--ion-item-background-activated, var(--ion-color-step-150, #d9d9d9)) !default;
 $item-ios-background-focused:               var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
-$item-ios-background-hover:                 var(--ion-item-background-hover, var(--ion-color-step-50, #f5f5f5)) !default;
+$item-ios-background-hover:                 var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
-$item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, #c8c7cc))) !default;
+$item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
 $item-ios-color:                            var(--ion-item-color, $text-color) !default;

core/src/themes/ionic.theme.default.md.scss

@@ -32,6 +32,6 @@ $toolbar-md-color-activated:                var(--ion-toolbar-color-activated, #
 $item-md-background:                        var(--ion-item-background, $background-color) !default;
 // activated item background does not exist in MD as it uses the ripple color
 $item-md-background-focused:                var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
-$item-md-background-hover:                  var(--ion-item-background-hover, var(--ion-color-step-50, #f5f5f5)) !default;
+$item-md-background-hover:                  var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
 $item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
 $item-md-color:                             var(--ion-item-color, $text-color) !default;

core/src/themes/ionic.theme.default.scss

@@ -87,11 +87,12 @@ $background-color-value:            #fff !default;
 $background-color-rgb-value:        255, 255, 255 !default;
 
 $text-color-value:                  #000 !default;
-$text-color-rgb:                    0, 0, 0 !default;
+$text-color-rgb-value:              0, 0, 0 !default;
 
 $background-color:                  var(--ion-background-color, $background-color-value) !default;
 $background-color-rgb:              var(--ion-background-color-rgb, $background-color-rgb-value) !default;
 $text-color:                        var(--ion-text-color, $text-color-value) !default;
+$text-color-rgb:                    var(--ion-text-color-rgb, $text-color-rgb-value) !default;
 
 // Default Foreground and Background Step Colors
 // -------------------------------------------------------------------------------------------

core/src/themes/test/css-variables/css/dark.css

@@ -1,47 +1,139 @@
 :root {
-  --ion-background-color: #171717;
-  --ion-text-color: #ffffff;
-  --ion-color-step-50: #232323;
-  --ion-color-step-100: #2e2e2e;
-  --ion-color-step-150: #3a3a3a;
-  --ion-color-step-200: #454545;
-  --ion-color-step-250: #515151;
-  --ion-color-step-300: #5d5d5d;
-  --ion-color-step-350: #686868;
-  --ion-color-step-400: #747474;
-  --ion-color-step-450: #7f7f7f;
-  --ion-color-step-500: #8b8b8b;
-  --ion-color-step-550: #979797;
-  --ion-color-step-600: #a2a2a2;
-  --ion-color-step-650: #aeaeae;
-  --ion-color-step-700: #b9b9b9;
-  --ion-color-step-750: #c5c5c5;
-  --ion-color-step-800: #d1d1d1;
-  --ion-color-step-850: #dcdcdc;
-  --ion-color-step-900: #e8e8e8;
-  --ion-color-step-950: #f3f3f3;
-
-  --ion-background-color-rgb: 23,23,23;
-  --ion-background-color-rgb: 0,0,0;
-  --ion-text-color-rgb: 255,255,255;
-
-  --ion-item-background: #1b2025;
-  --ion-item-background-activated: #051b35;
-
   /* Custom Toolbar CSS (optional) */
-  --ion-toolbar-background: #000;
+  /* --ion-toolbar-background: #000;
   --ion-toolbar-border-color: #333;
   --ion-toolbar-color: limegreen;
-  --ion-toolbar-color-activated: rgb(35, 156, 35);
+  --ion-toolbar-color-activated: rgb(35, 156, 35); */
+
+  --ion-color-primary: #428CFF;
+  --ion-color-primary-rgb: 66,140,255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255,255,255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50C8FF;
+  --ion-color-secondary-rgb: 80,200,255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255,255,255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6A64FF;
+  --ion-color-tertiary-rgb: 106,100,255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2FDF75;
+  --ion-color-success-rgb: 47,223,117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0,0,0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #FFD534;
+  --ion-color-warning-rgb: 255,213,52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0,0,0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #FF4961;
+  --ion-color-danger-rgb: 255,73,97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #F4F5F8;
+  --ion-color-dark-rgb: 244,245,248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0,0,0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989AA2;
+  --ion-color-medium-rgb: 152,154,162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0,0,0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34,36,40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255,255,255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
 }
 
 /* Customize the Toolbar Segment by Mode */
 .ios {
-  --ion-toolbar-color-unchecked: limegreen;
+  --ion-background-color: #000000;
-  --ion-toolbar-color-checked: limegreen;
+  --ion-background-color-rgb: 0,0,0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255,255,255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-item-background: #1c1c1c;
+  --ion-item-background-activated: #313131;
+
+  /* --ion-toolbar-color-unchecked: limegreen;
+  --ion-toolbar-color-checked: limegreen; */
 }
 
 .md {
-  --ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
+  --ion-background-color: #121212;
-  --ion-toolbar-color-checked: #fff;
+  --ion-background-color-rgb: 18,18,18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255,255,255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1A1B1E;
+  /* --ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
+  --ion-toolbar-color-checked: #fff; */
 }

core/src/themes/test/css-variables/index.html

@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <title>CSS Variable - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
 
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@@ -43,6 +44,10 @@
       margin-bottom: 8px;
     }
 
+    ion-toolbar ion-segment {
+      margin-bottom: 0;
+    }
+
     .icon-section ion-icon {
       font-size: 48px;
     }
@@ -98,10 +103,18 @@
           </ion-toolbar>
           <ion-toolbar>
             <ion-segment>
-              <ion-segment-button><ion-label>Favorites</ion-label></ion-segment-button>
+              <ion-segment-button>
-              <ion-segment-button><ion-label>All</ion-label></ion-segment-button>
+                <ion-label>Favorites</ion-label>
-              <ion-segment-button disabled><ion-label>Disabled</ion-label></ion-segment-button>
+              </ion-segment-button>
-              <ion-segment-button checked><ion-label>Active</ion-label></ion-segment-button>
+              <ion-segment-button>
+                <ion-label>All</ion-label>
+              </ion-segment-button>
+              <ion-segment-button disabled>
+                <ion-label>Disabled</ion-label>
+              </ion-segment-button>
+              <ion-segment-button checked>
+                <ion-label>Active</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -115,7 +128,8 @@
                 </ion-card-header>
 
                 <ion-card-content>
-                  Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods.
+                  Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a
+                  week in the woods.
                   Wash your spirit clean.
                 </ion-card-content>
               </ion-card>
@@ -156,11 +170,11 @@
 
             <section>
               <ion-list>
-                <ion-item>
+                <ion-item button>
                   <ion-label>Pokémon Yellow</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
-                <ion-item>
+                <ion-item button>
                   <ion-label>Super Metroid</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
@@ -177,40 +191,56 @@
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
                 <ion-item>
-                  <ion-label>Super Mario World</ion-label>
+                  <ion-label>
+                    <h2>Super Mario World</h2>
+                    <p>Featuring Luigi</p>
+                  </ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
                 <ion-item>
-                  <ion-label>Street Fighter II</ion-label>
+                  <ion-label>
+                    <h2>Street Fighter II</h2>
+                    <p>The Sequel</p>
+                  </ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
                 <ion-item-divider>Sliding Items</ion-item-divider>
                 <ion-item-sliding>
-                  <ion-item><ion-label>Half Life</ion-label></ion-item>
+                  <ion-item>
+                    <ion-label>Half Life</ion-label>
+                  </ion-item>
                   <ion-item-options>
                     <ion-item-option>More</ion-item-option>
                   </ion-item-options>
                 </ion-item-sliding>
                 <ion-item-sliding>
-                  <ion-item color="secondary"><ion-label>Final Fantasy VII</ion-label></ion-item>
+                  <ion-item color="secondary">
+                    <ion-label>Final Fantasy VII</ion-label>
+                  </ion-item>
                   <ion-item-options>
                     <ion-item-option>More</ion-item-option>
                   </ion-item-options>
                 </ion-item-sliding>
                 <ion-item-sliding>
-                  <ion-item><ion-label>Tetris</ion-label></ion-item>
+                  <ion-item>
+                    <ion-label>Tetris</ion-label>
+                  </ion-item>
                   <ion-item-options>
                     <ion-item-option>More</ion-item-option>
                   </ion-item-options>
                 </ion-item-sliding>
                 <ion-item-sliding>
-                  <ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
+                  <ion-item>
+                    <ion-label>Donkey Kong III</ion-label>
+                  </ion-item>
                   <ion-item-options>
                     <ion-item-option>More</ion-item-option>
                   </ion-item-options>
                 </ion-item-sliding>
                 <ion-item-sliding>
-                  <ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
+                  <ion-item>
+                    <ion-label>Goldeneye 007</ion-label>
+                  </ion-item>
                   <ion-item-options>
                     <ion-item-option disabled="true">More</ion-item-option>
                   </ion-item-options>
@@ -219,6 +249,7 @@
             </section>
 
             <section>
+              <ion-list>
                 <ion-radio-group id="fruitRadio">
                   <ion-item-divider>
                     <ion-label>Fruits</ion-label>
@@ -238,7 +269,9 @@
                     <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
                   </ion-item>
                 </ion-radio-group>
+              </ion-list>
 
+              <ion-list>
                 <ion-radio-group id="fruitRadio">
                   <ion-item-divider>
                     <ion-label>Veggies</ion-label>
@@ -258,7 +291,9 @@
                     <ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
                   </ion-item>
                 </ion-radio-group>
+              </ion-list>
 
+              <ion-list>
                 <ion-item>
                   <ion-range value="20"></ion-range>
                 </ion-item>
@@ -274,9 +309,12 @@
                 <ion-item>
                   <ion-range color="danger" value="20"></ion-range>
                 </ion-item>
+              </ion-list>
+
             </section>
 
             <section>
+              <ion-list>
                 <ion-item>
                   <ion-label>Default</ion-label>
                   <ion-checkbox slot="end" checked></ion-checkbox>
@@ -338,6 +376,7 @@
                   <ion-toggle color="dark" slot="start" checked></ion-toggle>
                   <ion-label>Blackberry</ion-label>
                 </ion-item>
+              </ion-list>
             </section>
           </div>
         </ion-content>
@@ -370,6 +409,7 @@
                 <ion-button fill="clear" color="warning">Warning Clear</ion-button>
                 <ion-button color="danger">Danger</ion-button>
                 <ion-button color="light">Light</ion-button>
+                <ion-button color="dark">Dark</ion-button>
                 <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                 <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
               </p>
@@ -382,6 +422,7 @@
                 <ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button>
                 <ion-button class="ion-focused" color="danger">Danger</ion-button>
                 <ion-button class="ion-focused" color="light">Light</ion-button>
+                <ion-button class="ion-focused" color="dark">Dark</ion-button>
                 <ion-button class="ion-focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
                 <ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
               </p>
@@ -406,7 +447,8 @@
                   <ion-icon slot="icon-only" name="star"></ion-icon>
                 </ion-button>
                 <ion-button>
-                  <ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
+                  <ion-icon slot="start" name="pin"></ion-icon>Map
+                </ion-button>
                 <ion-button shape="round">Round</ion-button>
                 <ion-button fill="outline">Outline</ion-button>
                 <ion-button fill="clear">Clear</ion-button>