From 045bc59b75be70065e3a4358b35e434156c0ab4d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 Jul 2019 17:31:42 -0400 Subject: [PATCH] fix(theming): update components to use the proper colors for dark themes (#18735) references #18713 --- .../action-sheet/action-sheet.ios.vars.scss | 6 +- .../action-sheet/action-sheet.md.vars.scss | 2 +- core/src/components/alert/alert.ios.vars.scss | 4 +- .../src/components/button/button.md.vars.scss | 6 +- .../checkbox/checkbox.ios.vars.scss | 2 +- .../components/checkbox/checkbox.md.vars.scss | 2 +- core/src/components/chip/chip.scss | 12 +- .../fab-button/fab-button.md.vars.scss | 2 +- core/src/components/item/item.ios.vars.scss | 2 +- core/src/components/item/item.md.vars.scss | 2 +- .../components/loading/loading.ios.vars.scss | 2 +- core/src/components/range/range.ios.vars.scss | 6 +- .../searchbar/searchbar.ios.vars.scss | 2 +- .../segment-button.md.vars.scss | 2 +- .../skeleton-text/skeleton-text.vars.scss | 4 +- .../components/slides/slides.ios.vars.scss | 6 +- .../src/components/slides/slides.md.vars.scss | 6 +- core/src/components/toggle/toggle.ios.scss | 21 +- .../components/toggle/toggle.ios.vars.scss | 7 +- .../src/components/toggle/toggle.md.vars.scss | 4 +- core/src/themes/ionic.theme.default.ios.scss | 6 +- core/src/themes/ionic.theme.default.md.scss | 2 +- core/src/themes/ionic.theme.default.scss | 3 +- .../themes/test/css-variables/css/dark.css | 162 +++++++-- core/src/themes/test/css-variables/index.html | 338 ++++++++++-------- 25 files changed, 362 insertions(+), 249 deletions(-) diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 17948a86cc..6c5a13182c 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/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; diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index 5d1575ccc7..43e3b257be 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/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; diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index a6f7d4e6e4..15c968754c 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/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; diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index b8ce02f6a5..a5af53c952 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/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; diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index 8a7ff09321..545b24a35a 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/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; diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index 135b2e0132..fb875fe275 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/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; diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 3dae8fdf1e..980b6e5ac2 100644 --- a/core/src/components/chip/chip.scss +++ b/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,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); } } diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index 58f64611d4..2c936f002c 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/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; diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index e96d9a961d..08fbfcc00c 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/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; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 21aea057a8..1c2a532c46 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/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; diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 75a48e85db..0fa4c0a4df 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/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; diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index b292e7b3cf..d3e5dd28f9 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/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; diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index 3a1ab6001a..58a5d21883 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/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; diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss index 4a1783e271..0457b1c7ff 100644 --- a/core/src/components/segment-button/segment-button.md.vars.scss +++ b/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; diff --git a/core/src/components/skeleton-text/skeleton-text.vars.scss b/core/src/components/skeleton-text/skeleton-text.vars.scss index 8200e02782..3ebd68d936 100644 --- a/core/src/components/skeleton-text/skeleton-text.vars.scss +++ b/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; diff --git a/core/src/components/slides/slides.ios.vars.scss b/core/src/components/slides/slides.ios.vars.scss index 103cb67fe6..73aec90e3e 100644 --- a/core/src/components/slides/slides.ios.vars.scss +++ b/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; diff --git a/core/src/components/slides/slides.md.vars.scss b/core/src/components/slides/slides.md.vars.scss index 12635df4d6..906f31ddeb 100644 --- a/core/src/components/slides/slides.md.vars.scss +++ b/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; diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index 3e18b766cc..ac5bc5b3f5 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/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 // ----------------------------------------- diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index d567f6c404..37324cde65 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/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; diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 5a14c183ef..6b9c0f94f8 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/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; diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index 513b1aada1..1b5912cf76 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/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-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, #c8c7cc))) !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-250, #c8c7cc))) !default; $item-ios-color: var(--ion-item-color, $text-color) !default; \ No newline at end of file diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index fd42d418d2..cb829216f9 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/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; diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 3ab8a4db47..0e68c133e5 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/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 // ------------------------------------------------------------------------------------------- diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css index 0b836b752e..45cd19e991 100644 --- a/core/src/themes/test/css-variables/css/dark.css +++ b/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-toolbar-color-checked: limegreen; + --ion-background-color: #000000; + --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-toolbar-color-checked: #fff; + --ion-background-color: #121212; + --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; */ } \ No newline at end of file diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index f196071576..7a8bb6cee0 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -4,7 +4,8 @@ CSS Variable - Basic - + @@ -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 @@ - Favorites - All - Disabled - Active + + Favorites + + + All + + + Disabled + + + Active + @@ -115,7 +128,8 @@ - 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. @@ -156,11 +170,11 @@
- + Pokémon Yellow Note - + Super Metroid Note @@ -177,40 +191,56 @@ Note - Super Mario World + +

Super Mario World

+

Featuring Luigi

+ Note - Street Fighter II + +

Street Fighter II

+

The Sequel

+ Note Sliding Items - Half Life + + Half Life + More - Final Fantasy VII + + Final Fantasy VII + More - Tetris + + Tetris + More - Donkey Kong III + + Donkey Kong III + More - Goldeneye 007 + + Goldeneye 007 + More @@ -219,125 +249,134 @@
- - - Fruits - + + + + Fruits + + + Apple + + + + + Grape, checked, disabled + + + + + Cherry + + + + + + + + + Veggies + + + Celery + + + + + Lettuce, checked, disabled + + + + + Onion + + + + + + - Apple - + - Grape, checked, disabled - + - Cherry - - - - - - - Veggies - - - Celery - + - Lettuce, checked, disabled - + + - - Onion - - - - - - - - - - - - - - - - - - -
- - Default - - - - Primary - - - - Secondary - - - - Warning - - - - Danger - - - - Light - - - - Dark - - - - Unchecked by Default - - - - Disabled - - + + + Default + + + + Primary + + + + Secondary + + + + Warning + + + + Danger + + + + Light + + + + Dark + + + + Unchecked by Default + + + + Disabled + + - - - Blueberry - + + + Blueberry + - - - Lettuce - + + + Lettuce + - - - Apple - + + + Apple + - - - Radish - + + + Radish + - - - Blackberry - + + + Blackberry + +
@@ -370,6 +409,7 @@ Warning Clear Danger Light + Dark Medium Outline Dark Clear

@@ -382,6 +422,7 @@ Warning Clear Danger Light + Dark Medium Outline Dark Clear

@@ -406,7 +447,8 @@ - Map + Map + Round Outline Clear @@ -718,38 +760,38 @@
- - - Present Alert - - - Present Action Sheet - - - Present Loading - - - Present Modal - - - Present Popover - - - Present Toast - - - Datetime - - - - Select - - 1 - 2 - 3 - - - + + + Present Alert + + + Present Action Sheet + + + Present Loading + + + Present Modal + + + Present Popover + + + Present Toast + + + Datetime + + + + Select + + 1 + 2 + 3 + + +
@@ -948,4 +990,4 @@ - \ No newline at end of file +