Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandyscarney committed May 14, 2019
1 parent 578108d commit 051198928e87fe8106151e96eb3fac703d1e9fc2
@@ -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))};
}
@@ -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);
@@ -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);
}


@@ -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))};
}
@@ -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
@@ -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))};
@@ -21,6 +21,7 @@
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid">Solid</ion-button>
<ion-button fill="outline">Outline</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="clear">Clear</ion-button>
@@ -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;
}
} */
@@ -73,6 +73,7 @@
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-button>Default</ion-button>
<ion-button fill="solid">Solid</ion-button>
<ion-button fill="clear">Clear</ion-button>

0 comments on commit 0511989

Please sign in to comment.
You can’t perform that action at this time.