From 051198928e87fe8106151e96eb3fac703d1e9fc2 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 14 May 2019 18:02:30 -0400 Subject: [PATCH] fix(buttons): use theme/color toolbar colors for buttons (#18191) - Updates the iOS buttons in a toolbar to use the proper global theming variables - Updates the iOS segment to use the correct background variable when checked - Updates the iOS back button and menu button to use the proper color in a toolbar - Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected - Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color fixes #18184, fixes #17840 --- .../components/back-button/back-button.scss | 7 +++ core/src/components/buttons/buttons.ios.scss | 58 +++++++++++++++++-- core/src/components/buttons/buttons.md.scss | 31 +++++++++- .../components/menu-button/menu-button.scss | 7 +++ core/src/components/segment/segment.ios.scss | 8 ++- core/src/components/segment/segment.md.scss | 4 +- .../components/toolbar/test/colors/index.html | 1 + .../themes/test/css-variables/css/default.css | 4 +- core/src/themes/test/css-variables/index.html | 1 + 9 files changed, 106 insertions(+), 15 deletions(-) diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 49707b9aa7..47aba075f3 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -148,3 +148,10 @@ ion-icon { pointer-events: none; } + +// Back Button in Toolbar: Global Theming +// -------------------------------------------------- + +:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) { + color: #{var(--ion-toolbar-color, var(--color))}; +} \ No newline at end of file diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 7e09552c38..37b6613fb9 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -21,27 +21,75 @@ --border-radius: #{$toolbar-ios-button-border-radius}; } -// iOS Toolbar with Color Default Button +// iOS Toolbar with Color: Default Buttons // -------------------------------------------------- :host-context(.ion-color)::slotted(*) .button { --color: initial; + --border-color: initial; --color-activated: initial; } +:host-context(.ion-color)::slotted(*) .button-solid { + --background: #{current-color(contrast)}; + --background-activated: #{current-color(contrast, .8)}; + --background-focused: #{current-color(contrast, .6)}; + --color: #{current-color(base)}; + --color-focused: #{current-color(base)}; +} + +:host-context(.ion-color)::slotted(*) .button-clear { + --background-focused: #{current-color(contrast, .1)}; + --color-activated: #{current-color(contrast)}; + --color-focused: #{current-color(contrast)}; +} + +:host-context(.ion-color)::slotted(*) .button-outline { + --background-activated: #{current-color(contrast)}; + --background-focused: #{current-color(contrast, .1)}; + --color-activated: #{current-color(base)}; + --color-focused: #{current-color(contrast)}; +} + + +// iOS Toolbar Button Clear +// -------------------------------------------------- + +:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear { + --color: #{var(--ion-toolbar-color, ion-color(primary, base))}; + --color-activated: #{$toolbar-ios-color-activated}; + --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))}; +} + + +// iOS Toolbar Button Outline +// -------------------------------------------------- + +:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline { + --color: #{var(--ion-toolbar-color, ion-color(primary, base))}; + --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))}; + --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))}; + --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))}; + --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))}; +} + // iOS Toolbar Button Solid // -------------------------------------------------- -@media (any-hover: hover) { - ::slotted(*) .button-solid-ios:hover { - opacity: .4; - } +:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid { + --color: #{$toolbar-ios-background}; + --color-activated: #{$toolbar-ios-background}; + --color-focused: #{$toolbar-ios-background}; + --background: #{var(--ion-toolbar-color, ion-color(primary, base))}; + --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))}; + --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))}; } // iOS Toolbar Button Icon // -------------------------------------------------- + ::slotted(*) ion-icon[slot="start"] { @include margin(0); @include margin-horizontal(null, .3em); diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index a16f551c3d..16ef447952 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -22,14 +22,35 @@ } -// Material Design Toolbar w/ Color Default Button +// Material Design Toolbar w/ Color: Default Buttons // -------------------------------------------------- :host-context(.ion-color)::slotted(*) .button { --color: initial; --color-activated: initial; --color-focused: initial; - --background-focused: #{ion-color(primary, contrast, 0.1)}; + --background-focused: #{current-color(contrast, .1)}; +} + +:host-context(.ion-color)::slotted(*) .button-solid { + --background: #{current-color(contrast)}; + --background-activated: #{current-color(contrast)}; + --background-focused: #{current-color(contrast, .9)}; + --color: #{current-color(base)}; + --color-focused: #{current-color(base)}; +} + +:host-context(.ion-color)::slotted(*) .button-outline { + --border-color: #{current-color(contrast)}; +} + + +// Material Design Toolbar Default Button +// -------------------------------------------------- + +::slotted(*) .button { + --color-focused: #{$toolbar-md-color}; + --background-focused: rgba(66, 66, 66, 0.1); } @@ -39,8 +60,10 @@ ::slotted(*) .button-solid { --color: #{$toolbar-md-background}; --color-activated: #{$toolbar-md-background}; + --color-focused: #{$toolbar-md-background}; --background: #{$toolbar-md-color}; --background-activated: #{$toolbar-md-color}; + --background-focused: #{$toolbar-md-color-activated}; } @@ -50,9 +73,11 @@ ::slotted(*) .button-outline { --color: initial; --color-activated: currentColor; + --color-focused: #{$toolbar-md-color}; --background: transparent; --background-activated: transparent; - --border-color: currentColor; + --border-color: #{$toolbar-md-color}; + --background-focused: rgba(66, 66, 66, 0.1); } diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss index d693234c72..b647ea2bad 100644 --- a/core/src/components/menu-button/menu-button.scss +++ b/core/src/components/menu-button/menu-button.scss @@ -70,3 +70,10 @@ ion-icon { :host(.ion-color) .button-native { color: current-color(base); } + +// Menu Button in Toolbar: Global Theming +// -------------------------------------------------- + +:host-context(ion-toolbar:not(.ion-color)) { + color: #{var(--ion-toolbar-color, var(--color))}; +} diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss index 4ea60b026a..56f4ff5800 100644 --- a/core/src/components/segment/segment.ios.scss +++ b/core/src/components/segment/segment.ios.scss @@ -64,14 +64,16 @@ line-height: $segment-button-ios-toolbar-line-height; } -:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) { +:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) { border-color: #{var(--ion-toolbar-color-checked, var(--border-color))}; color: #{var(--ion-toolbar-color-unchecked, var(--color))}; } -:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) { - color: #{var(--ion-toolbar-color-checked, var(--color-checked))}; +:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) { + background: #{var(--ion-toolbar-color-checked, var(--background-checked))}; + + color: #{var(--ion-toolbar-background, var(--color-checked))}; } // Segment: Color Toolbar diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index 7df1f94103..73e0b44d6a 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -44,11 +44,11 @@ // Segment: Default Toolbar // -------------------------------------------------- -:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) { +:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) { color: #{var(--ion-toolbar-color-unchecked, var(--color))}; } -:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) { +:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) { --indicator-color-checked: #{var(--ion-toolbar-color-checked, var(--color-checked))}; color: #{var(--ion-toolbar-color-checked, var(--color-checked))}; diff --git a/core/src/components/toolbar/test/colors/index.html b/core/src/components/toolbar/test/colors/index.html index e3f62ca3ca..db4627d52a 100644 --- a/core/src/components/toolbar/test/colors/index.html +++ b/core/src/components/toolbar/test/colors/index.html @@ -21,6 +21,7 @@ Solid + Outline Clear diff --git a/core/src/themes/test/css-variables/css/default.css b/core/src/themes/test/css-variables/css/default.css index c668f82d6b..0428edac38 100644 --- a/core/src/themes/test/css-variables/css/default.css +++ b/core/src/themes/test/css-variables/css/default.css @@ -9,7 +9,7 @@ * https://ionicframework.com/docs/theming/color-generator **/ -:root { +/* :root { --ion-color-primary: #3880ff; --ion-color-primary-rgb: 56,128,255; --ion-color-primary-contrast: #ffffff; @@ -72,4 +72,4 @@ --ion-color-light-contrast-rgb: 0,0,0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; -} +} */ diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index 661bcb3f03..39b02f30df 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -73,6 +73,7 @@ + Default Solid Clear