From 5f2e737904a842311c893d2d7ced7359fd0741ad Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 22 Mar 2016 18:07:59 -0400 Subject: [PATCH] feat(sass): add support for contrast in color map for wp mode BREAKING CHANGE: Can now pass contrast to the colors map: ``` $colors-wp: ( primary: ( base: #327eff, contrast: yellow ), secondary: ( base: #32db64, contrast: hotpink ), danger: #d91e18, light: #f4f4f4, dark: #222 ) !default; ``` references #5445 --- ionic/components/alert/alert.wp.scss | 10 ++-- ionic/components/app/app.wp.scss | 4 +- ionic/components/badge/badge.wp.scss | 11 ++-- ionic/components/button/button.wp.scss | 26 ++++----- ionic/components/checkbox/checkbox.wp.scss | 18 +++---- ionic/components/chip/chip.wp.scss | 6 +-- ionic/components/input/input.wp.scss | 6 +-- ionic/components/item/item.wp.scss | 6 +-- ionic/components/label/label.wp.scss | 6 +-- ionic/components/radio/radio.wp.scss | 10 ++-- ionic/components/searchbar/searchbar.wp.scss | 6 +-- ionic/components/segment/segment.wp.scss | 12 ++--- ionic/components/tabs/tabs.wp.scss | 14 ++--- ionic/components/toggle/toggle.wp.scss | 16 +++--- ionic/components/toolbar/toolbar.wp.scss | 55 ++++++++++---------- ionic/themes/dark.wp.scss | 8 +-- ionic/themes/default.wp.scss | 2 +- 17 files changed, 109 insertions(+), 107 deletions(-) diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss index 725ed39d77..b4ddada502 100644 --- a/ionic/components/alert/alert.wp.scss +++ b/ionic/components/alert/alert.wp.scss @@ -10,7 +10,7 @@ $alert-wp-width: 100% !default; $alert-wp-max-width: 520px !default; $alert-wp-border-width: 1px !default; $alert-wp-border-style: solid !default; -$alert-wp-border-color: map-get($colors-wp, primary) !default; +$alert-wp-border-color: color($colors-wp, primary) !default; $alert-wp-border-radius: 0 !default; $alert-wp-background: #e6e6e6 !default; @@ -34,7 +34,7 @@ $alert-wp-input-padding: 0 8px !default; $alert-wp-input-border-width: 2px !default; $alert-wp-input-border-style: $alert-wp-border-style !default; $alert-wp-input-border-color: $input-wp-border-color !default; -$alert-wp-input-border-color-focused: map-get($colors-wp, primary) !default; +$alert-wp-input-border-color-focused: color($colors-wp, primary) !default; $alert-wp-input-line-height: 3rem !default; $alert-wp-input-text-color: #000 !default; @@ -54,7 +54,7 @@ $alert-wp-button-group-flex-wrap: wrap-reverse !default; $alert-wp-button-group-vertical-width: 100% !default; $alert-wp-button-group-vertical-margin-top: 5px !default; -$alert-wp-radio-background: map-get($colors-wp, primary) !default; +$alert-wp-radio-background: color($colors-wp, primary) !default; $alert-wp-radio-border-color: $input-wp-border-color !default; $alert-wp-radio-label-padding: 13px 26px !default; @@ -85,7 +85,7 @@ $alert-wp-checkbox-border-style: solid !default; $alert-wp-checkbox-border-radius: 0 !default; $alert-wp-checkbox-border-color: $input-wp-border-color !default; $alert-wp-checkbox-background-off: transparent !default; -$alert-wp-checkbox-background-on: map-get($colors-wp, primary) !default; +$alert-wp-checkbox-background-on: color($colors-wp, primary) !default; $alert-wp-checkbox-icon-top: -2px !default; $alert-wp-checkbox-icon-left: 3px !default; @@ -93,7 +93,7 @@ $alert-wp-checkbox-icon-width: 6px !default; $alert-wp-checkbox-icon-height: 12px !default; $alert-wp-checkbox-icon-border-width: 1px !default; $alert-wp-checkbox-icon-border-style: solid !default; -$alert-wp-checkbox-icon-border-color: $alert-wp-background !default; +$alert-wp-checkbox-icon-border-color: color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default; $alert-wp-checkbox-icon-transform: rotate(45deg) !default; diff --git a/ionic/components/app/app.wp.scss b/ionic/components/app/app.wp.scss index c9ddd64080..c25afde972 100644 --- a/ionic/components/app/app.wp.scss +++ b/ionic/components/app/app.wp.scss @@ -19,7 +19,7 @@ hr { background-color: rgba(0, 0, 0, .08); } -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { h1, h2, h3, @@ -38,7 +38,7 @@ hr { sup, ion-icon { &[#{$color-name}] { - color: $color-value; + color: $color-base; } } } diff --git a/ionic/components/badge/badge.wp.scss b/ionic/components/badge/badge.wp.scss index a3adcd5c18..95de6fa411 100644 --- a/ionic/components/badge/badge.wp.scss +++ b/ionic/components/badge/badge.wp.scss @@ -4,12 +4,13 @@ // -------------------------------------------------- $badge-wp-border-radius: 0 !default; -$badge-wp-background-color: map-get($colors-wp, primary) !default; +$badge-wp-background-color: color($colors-wp, primary) !default; +$badge-wp-text-color: color-contrast($colors-wp, $badge-wp-background-color) !default; ion-badge { border-radius: $badge-wp-border-radius; - color: color-inverse($badge-wp-background-color); + color: $badge-wp-text-color; background-color: $badge-wp-background-color; } @@ -17,11 +18,11 @@ ion-badge { // Generate Windows Badge Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { .badge-#{$color-name} { - color: color-inverse($color-value); - background-color: $color-value; + color: $color-contrast; + background-color: $color-base; } } diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss index 17fa32824a..cad97df1b4 100644 --- a/ionic/components/button/button.wp.scss +++ b/ionic/components/button/button.wp.scss @@ -13,9 +13,9 @@ $button-wp-border-width: 3px !default; $button-wp-border-radius: 0 !default; // Regular button -$button-wp-background-color: map-get($colors-wp, primary) !default; +$button-wp-background-color: color($colors-wp, primary) !default; $button-wp-background-color-activated: color-shade($button-wp-background-color) !default; -$button-wp-text-color: color-inverse($button-wp-background-color) !default; +$button-wp-text-color: color-contrast($colors-wp, $button-wp-background-color) !default; // Clear button $button-wp-clear-background-color-hover: rgba(158, 158, 158, .1) !default; @@ -76,12 +76,12 @@ $button-wp-fab-border-radius: 50% !default; // Windows Default Button Color Mixin // -------------------------------------------------- -@mixin wp-button-default($color-name, $color-value) { +@mixin wp-button-default($color-name, $color-base, $color-contrast) { .button-#{$color-name} { - $bg-color: $color-value; + $bg-color: $color-base; $bg-color-activated: color-shade($bg-color); - $fg-color: color-inverse($bg-color); + $fg-color: $color-contrast; color: $fg-color; background-color: $bg-color; @@ -165,10 +165,10 @@ $button-wp-fab-border-radius: 50% !default; // Windows Outline Button Color Mixin // -------------------------------------------------- -@mixin wp-button-outline($color-name, $color-value) { +@mixin wp-button-outline($color-name, $color-base, $color-contrast) { .button-outline-#{$color-name} { - $fg-color: color-shade($color-value, 5%); + $fg-color: color-shade($color-base, 5%); border-color: $fg-color; color: $fg-color; @@ -205,10 +205,10 @@ $button-wp-fab-border-radius: 50% !default; // Windows Clear Button Color Mixin // -------------------------------------------------- -@mixin wp-button-clear($color-name, $color-value) { +@mixin wp-button-clear($color-name, $color-base, $color-contrast) { .button-clear-#{$color-name} { - $fg-color: $color-value; + $fg-color: $color-base; color: $fg-color; &.activated { @@ -251,10 +251,10 @@ ion-button-effect { // Generate Windows Button Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { - @include wp-button-default($color-name, $color-value); - @include wp-button-outline($color-name, $color-value); - @include wp-button-clear($color-name, $color-value); +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include wp-button-default($color-name, $color-base, $color-contrast); + @include wp-button-outline($color-name, $color-base, $color-contrast); + @include wp-button-clear($color-name, $color-base, $color-contrast); } diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss index 9459b8a815..0bcba2fd8f 100644 --- a/ionic/components/checkbox/checkbox.wp.scss +++ b/ionic/components/checkbox/checkbox.wp.scss @@ -12,18 +12,18 @@ $checkbox-wp-media-margin: $item-wp-padding-media-top $item-wp-pad $checkbox-wp-disabled-opacity: .3 !default; $checkbox-wp-icon-background-color-off: $list-wp-background-color !default; -$checkbox-wp-icon-background-color-on: map-get($colors-wp, primary) !default; +$checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default; $checkbox-wp-icon-size: 16px !default; $checkbox-wp-icon-checkmark-width: 1px !default; $checkbox-wp-icon-checkmark-style: solid !default; -$checkbox-wp-icon-checkmark-color: $background-wp-color !default; +$checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default; $checkbox-wp-icon-border-width: 2px !default; $checkbox-wp-icon-border-style: solid !default; $checkbox-wp-icon-border-radius: 0 !default; $checkbox-wp-icon-border-color-off: #333 !default; -$checkbox-wp-icon-border-color-on: map-get($colors-wp, primary) !default; +$checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; ion-checkbox { @@ -107,14 +107,14 @@ ion-checkbox + .item-inner ion-label { // Windows Checkbox Color Mixin // -------------------------------------------------- -@mixin checkbox-theme-wp($color-name, $bg-on) { +@mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) { ion-checkbox[#{$color-name}] .checkbox-checked { - border-color: $bg-on; - background-color: $bg-on; + border-color: $color-base; + background-color: $color-base; .checkbox-inner { - border-color: color-inverse($bg-on); + border-color: $color-contrast; } } @@ -124,6 +124,6 @@ ion-checkbox + .item-inner ion-label { // Generate Windows Checkbox Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { - @include checkbox-theme-wp($color-name, $color-value); +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include checkbox-theme-wp($color-name, $color-base, $color-contrast); } diff --git a/ionic/components/chip/chip.wp.scss b/ionic/components/chip/chip.wp.scss index 8e0a342833..34981b1f3a 100644 --- a/ionic/components/chip/chip.wp.scss +++ b/ionic/components/chip/chip.wp.scss @@ -7,12 +7,12 @@ // Generate Windows Chip Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { ion-chip { ion-icon[#{$color-name}] { - color: color-inverse($color-value); - background-color: $color-value; + color: $color-contrast; + background-color: $color-base; } } diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss index 88834912fd..cb71558a36 100644 --- a/ionic/components/input/input.wp.scss +++ b/ionic/components/input/input.wp.scss @@ -16,9 +16,9 @@ $text-input-wp-padding-vertical: 0 !default; $text-input-wp-padding-horizontal: 8px !default; $text-input-wp-line-height: 3rem !default; -$text-input-wp-highlight-color: map-get($colors-wp, primary) !default; -$text-input-wp-hightlight-color-valid: map-get($colors-wp, secondary) !default; -$text-input-wp-hightlight-color-invalid: map-get($colors-wp, danger) !default; +$text-input-wp-highlight-color: color($colors-wp, primary) !default; +$text-input-wp-hightlight-color-valid: color($colors-wp, secondary) !default; +$text-input-wp-hightlight-color-invalid: color($colors-wp, danger) !default; $text-input-wp-input-clear-icon-width: 30px !default; $text-input-wp-input-clear-icon-color: $input-wp-border-color !default; diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss index ced06a1c76..d6f7f240d1 100644 --- a/ionic/components/item/item.wp.scss +++ b/ionic/components/item/item.wp.scss @@ -174,10 +174,10 @@ ion-item-divider { // Generate Windows Item Divider Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { ion-item-divider[#{$color-name}] { - color: color-inverse($color-value); - background-color: $color-value; + color: $color-contrast; + background-color: $color-base; } } diff --git a/ionic/components/label/label.wp.scss b/ionic/components/label/label.wp.scss index 04b773b9f3..767ed567aa 100644 --- a/ionic/components/label/label.wp.scss +++ b/ionic/components/label/label.wp.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- $label-wp-text-color: #999 !default; -$label-wp-text-color-focused: map-get($colors-wp, primary) !default; +$label-wp-text-color-focused: color($colors-wp, primary) !default; // Windows Default Label @@ -63,10 +63,10 @@ ion-label[floating] { // Generate Windows Label colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { ion-label[#{$color-name}] { - color: $color-value; + color: $color-base; } } diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss index ef1220158b..8ab04053d6 100644 --- a/ionic/components/radio/radio.wp.scss +++ b/ionic/components/radio/radio.wp.scss @@ -3,7 +3,7 @@ // Windows Radio // -------------------------------------------------- -$radio-wp-color-on: map-get($colors-wp, primary) !default; +$radio-wp-color-on: color($colors-wp, primary) !default; $radio-wp-color-off: #333 !default; // Places radio icon on the left of the item @@ -110,12 +110,12 @@ ion-radio { // Windows Radio Color Mixin // -------------------------------------------------- -@mixin radio-theme-wp($color-name, $color-value) { +@mixin radio-theme-wp($color-name, $color-base) { ion-radio[#{$color-name}] { .radio-checked { - border-color: $color-value; + border-color: $color-base; } } @@ -126,8 +126,8 @@ ion-radio { // Generate Windows Radio Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include radio-theme-wp($color-name, $color-value); + @include radio-theme-wp($color-name, $color-base); } diff --git a/ionic/components/searchbar/searchbar.wp.scss b/ionic/components/searchbar/searchbar.wp.scss index b513a4e211..8f23aa20cc 100644 --- a/ionic/components/searchbar/searchbar.wp.scss +++ b/ionic/components/searchbar/searchbar.wp.scss @@ -8,7 +8,7 @@ $searchbar-wp-padding: 0 !default; $searchbar-wp-background-color: transparent !default; $searchbar-wp-border-width: 2px !default; $searchbar-wp-border-color: $input-wp-border-color !default; -$searchbar-wp-border-color-focused: map-get($colors-wp, primary) !default; +$searchbar-wp-border-color-focused: color($colors-wp, primary) !default; $searchbar-wp-input-search-icon-color: #858585 !default; $searchbar-wp-input-search-icon-svg: "" !default; @@ -145,10 +145,10 @@ ion-searchbar { // Generate Default Windows Search Bar Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { ion-searchbar[#{$color-name}].searchbar-focused { - border-color: $color-value; + border-color: $color-base; } } diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss index 7bf14b6cd5..bfc00f377a 100644 --- a/ionic/components/segment/segment.wp.scss +++ b/ionic/components/segment/segment.wp.scss @@ -63,15 +63,15 @@ ion-segment { // Windows Segment Button Mixin // -------------------------------------------------- -@mixin wp-segment-button($color-name, $color-value) { +@mixin wp-segment-button($color-name, $color-base) { ion-segment[#{$color-name}] .segment-button { - color: $color-value; + color: $color-base; &.activated, &.segment-activated { - border-color: $color-value; - color: $color-value; + border-color: $color-base; + color: $color-base; opacity: $segment-button-wp-opacity-activated; } } @@ -82,6 +82,6 @@ ion-segment { // Windows Segment Color Generation // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { - @include wp-segment-button($color-name, $color-value); +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include wp-segment-button($color-name, $color-base); } diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss index 64302d464f..0ba15bd8c3 100644 --- a/ionic/components/tabs/tabs.wp.scss +++ b/ionic/components/tabs/tabs.wp.scss @@ -79,19 +79,19 @@ tabbar { // Windows Tabbar Color Mixin // -------------------------------------------------- -@mixin tabbar-wp($color-name, $color-value) { +@mixin tabbar-wp($color-name, $color-base) { ion-tabs[#{$color-name}] tabbar { - background-color: $color-value; + background-color: $color-base; .tab-button { - color: color-inverse($color-value); + color: $color-contrast; } .tab-button:hover:not(.disable-hover), .tab-button[aria-selected=true] { - border-color: color-inverse($color-value); - color: color-inverse($color-value); + border-color: $color-contrast; + color: $color-contrast; } } @@ -101,6 +101,6 @@ tabbar { // Windows Tabbar Color Generation // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { - @include tabbar-wp($color-name, $color-value); +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include tabbar-wp($color-name, $color-base); } diff --git a/ionic/components/toggle/toggle.wp.scss b/ionic/components/toggle/toggle.wp.scss index 58f2bf6160..823fa834ae 100644 --- a/ionic/components/toggle/toggle.wp.scss +++ b/ionic/components/toggle/toggle.wp.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- $toggle-wp-inactive-color: #323232 !default; -$toggle-wp-active-color: map-get($colors-wp, primary) !default; +$toggle-wp-active-color: color($colors-wp, primary) !default; $toggle-wp-track-width: 40px !default; $toggle-wp-track-height: 18px !default; @@ -20,7 +20,7 @@ $toggle-wp-handle-height: 10px !default; $toggle-wp-handle-top: 2px !default; $toggle-wp-handle-left: 2px !default; $toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default; -$toggle-wp-handle-background-color-on: color-inverse($toggle-wp-active-color) !default; +$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default; $toggle-wp-handle-border-radius: 50% !default; $toggle-wp-media-margin: 0 !default; @@ -123,17 +123,17 @@ ion-toggle { // Windows Color Mixin // -------------------------------------------------- -@mixin toggle-theme-wp($color-name, $color-value) { +@mixin toggle-theme-wp($color-name, $color-base) { ion-toggle[#{$color-name}] { .toggle-checked { - border-color: $color-value; - background-color: $color-value; + border-color: $color-base; + background-color: $color-base; } .toggle-checked .toggle-inner { - background-color: color-inverse($color-value); + background-color: $color-contrast; } } @@ -144,8 +144,8 @@ ion-toggle { // Generate Windows Toggle Auxiliary Colors // -------------------------------------------------- -@each $color-name, $color-value in $colors-wp { +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - @include toggle-theme-wp($color-name, $color-value); + @include toggle-theme-wp($color-name, $color-base); } diff --git a/ionic/components/toolbar/toolbar.wp.scss b/ionic/components/toolbar/toolbar.wp.scss index 4c83f65774..3d09747895 100644 --- a/ionic/components/toolbar/toolbar.wp.scss +++ b/ionic/components/toolbar/toolbar.wp.scss @@ -69,12 +69,12 @@ ion-navbar-section { color: $toolbar-wp-text-color; } -@mixin wp-toolbar-theme($color-name, $color-value) { +@mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) { .toolbar[#{$color-name}] { - $fg-color: color-inverse($color-value); + $fg-color: $color-contrast; .toolbar-background { - background: $color-value; + background: $color-base; } .bar-button-default, @@ -94,10 +94,10 @@ ion-navbar-section { border-color: $fg-color; } - @each $color-name, $color-value in $colors-wp { - @include wp-bar-button-default($color-name, $color-value); - @include wp-bar-button-outline($color-name, $color-value); - @include wp-bar-button-solid($color-name, $color-value); + @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include wp-bar-button-default($color-name, $color-base, $color-contrast); + @include wp-bar-button-outline($color-name, $color-base, $color-contrast); + @include wp-bar-button-solid($color-name, $color-base, $color-contrast); } } } @@ -158,14 +158,14 @@ ion-buttons[right] { overflow: hidden; } -@mixin wp-bar-button-default($color-name, $color-value) { +@mixin wp-bar-button-default($color-name, $color-base, $color-contrast) { .bar-button-#{$color-name} { - color: $color-value; + color: $color-base; background-color: transparent; &:hover:not(.disable-hover) { - color: $color-value; + color: $color-base; } } @@ -187,21 +187,21 @@ ion-buttons[right] { } &.activated { - color: color-inverse($bar-button-wp-color); + color: color-contrast($colors-wp, $bar-button-wp-color); background-color: $bar-button-wp-color; } } -@mixin wp-bar-button-outline($color-name, $color-value) { +@mixin wp-bar-button-outline($color-name, $color-base, $color-contrast) { .bar-button-outline-#{$color-name} { - $fg-color: color-shade($color-value); + $fg-color: color-shade($color-base); border-color: $fg-color; color: $fg-color; background-color: transparent; &.activated { - color: color-inverse($fg-color); + color: $color-contrast; background-color: $fg-color; } } @@ -213,27 +213,28 @@ ion-buttons[right] { // -------------------------------------------------- .bar-button-solid { - color: color-inverse($bar-button-wp-color); + color: color-contrast($colors-wp, $bar-button-wp-color); background-color: $bar-button-wp-color; &:hover:not(.disable-hover) { - color: color-inverse($bar-button-wp-color); + color: color-contrast($colors-wp, $bar-button-wp-color); } &.activated { - color: color-inverse($bar-button-wp-color); + color: color-contrast($colors-wp, $bar-button-wp-color); background-color: color-shade($bar-button-wp-color); } } -@mixin wp-bar-button-solid($color-name, $color-value) { +@mixin wp-bar-button-solid($color-name, $color-base, $color-contrast) { .bar-button-solid-#{$color-name} { - color: color-inverse($color-value); - background-color: $color-value; + color: $color-contrast; + background-color: $color-base; &.activated { - background-color: color-shade($color-value); + color: $color-contrast; + background-color: color-shade($color-base); } } @@ -328,11 +329,11 @@ ion-buttons[right] { // Windows Toolbar Color Generation // -------------------------------------------------- -@include wp-bar-button-default(default, $bar-button-wp-color); +@include wp-bar-button-default(default, $bar-button-wp-color, color-contrast($colors-wp, $bar-button-wp-color)); -@each $color-name, $color-value in $colors-wp { - @include wp-toolbar-theme($color-name, $color-value); - @include wp-bar-button-default($color-name, $color-value); - @include wp-bar-button-outline($color-name, $color-value); - @include wp-bar-button-solid($color-name, $color-value); +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + @include wp-toolbar-theme($color-name, $color-base, $color-contrast); + @include wp-bar-button-default($color-name, $color-base, $color-contrast); + @include wp-bar-button-outline($color-name, $color-base, $color-contrast); + @include wp-bar-button-solid($color-name, $color-base, $color-contrast); } diff --git a/ionic/themes/dark.wp.scss b/ionic/themes/dark.wp.scss index cca0233e0f..01b97e3166 100644 --- a/ionic/themes/dark.wp.scss +++ b/ionic/themes/dark.wp.scss @@ -3,12 +3,12 @@ // Windows Dark Theme // ---------------------------------- -$colors-wp: map-merge($colors, ()) !default; +$colors-wp: copy-colors($colors) !default; $text-wp-color: $text-color !default; $paragraph-wp-color: $paragraph-color !default; -$link-wp-color: map-get($colors-wp, primary) !default; +$link-wp-color: color($colors-wp, primary) !default; $background-wp-color: $background-color !default; $subdued-text-wp-color: $subdued-text-color !default; @@ -58,12 +58,12 @@ $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; $item-wp-padding-icon-bottom: 10px !default; $item-wp-divider-background: #151515 !default; -$item-wp-divider-color: map-get($colors-wp, light) !default; +$item-wp-divider-color: color($colors-wp, light) !default; // Windows Toggle // --------------------------------------------------- -$toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default; +$toggle-wp-handle-background-color-off: color($colors-wp, light) !default; // Windows Input diff --git a/ionic/themes/default.wp.scss b/ionic/themes/default.wp.scss index 09f94f97c3..4a05f104f3 100644 --- a/ionic/themes/default.wp.scss +++ b/ionic/themes/default.wp.scss @@ -8,7 +8,7 @@ $colors-wp: copy-colors($colors) !default; $text-wp-color: $text-color !default; $paragraph-wp-color: $paragraph-color !default; -$link-wp-color: map-get($colors-wp, primary) !default; +$link-wp-color: color($colors-wp, primary) !default; $background-wp-color: $background-color !default; $subdued-text-wp-color: $subdued-text-color !default;