javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(sass): add support for contrast in color map for wp mode

Browse Source 
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
This commit is contained in:
Brandy Carney
2016-03-22 18:07:59 -04:00
parent 9efa3ea3e6
commit 5f2e737904
17 changed files with 109 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ionic/components/alert/alert.wp.scss
View File

@ -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;

4
ionic/components/app/app.wp.scss
View File

@ -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;
}
}
}

11
ionic/components/badge/badge.wp.scss
View File

@ -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;
}
}

26
ionic/components/button/button.wp.scss
View File

@ -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);
}

18
ionic/components/checkbox/checkbox.wp.scss
View File

@ -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);
}

6
ionic/components/chip/chip.wp.scss
View File

@ -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;
}
}

6
ionic/components/input/input.wp.scss
View File

@ -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;

6
ionic/components/item/item.wp.scss
View File

@ -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;
}
}

6
ionic/components/label/label.wp.scss
View File

@ -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;
}
}

10
ionic/components/radio/radio.wp.scss
View File

@ -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);
}

6
ionic/components/searchbar/searchbar.wp.scss
View File

@ -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: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></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;
}
}

12
ionic/components/segment/segment.wp.scss
View File

@ -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);
}

14
ionic/components/tabs/tabs.wp.scss
View File

@ -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);
}

16
ionic/components/toggle/toggle.wp.scss
View File

@ -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);
}

55
ionic/components/toolbar/toolbar.wp.scss
View File

@ -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);
}

8
ionic/themes/dark.wp.scss
View File

@ -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

2
ionic/themes/default.wp.scss
View File

@ -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;