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

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

Browse Source 
BREAKING CHANGE:

Can now pass contrast to the colors map:

```
$colors-md: (

  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 17:53:08 -04:00
parent ff1a8ac6c7
commit 9efa3ea3e6
18 changed files with 109 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/alert/alert.md.scss
View File

@@ -31,7 +31,7 @@ $alert-md-input-text-color: #000 !default;
$alert-md-input-border-width-focused: 2px !default;
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
$alert-md-input-border-color-focused: map-get($colors-md, primary) !default;
$alert-md-input-border-color-focused: color($colors-md, primary) !default;
$alert-md-input-margin-top: 5px !default;
$alert-md-input-margin-right: 0 !default;
@@ -45,7 +45,7 @@ $alert-md-button-group-justify-content: flex-end !default;
$alert-md-button-padding: 10px !default;
$alert-md-button-margin: 0 8px 0 0 !default;
$alert-md-button-font-weight: 500 !default;
$alert-md-button-text-color: map-get($colors-md, primary) !default;
$alert-md-button-text-color: color($colors-md, primary) !default;
$alert-md-button-background-color: transparent !default;
$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default;
$alert-md-button-border-radius: 2px !default;
@@ -94,9 +94,9 @@ $alert-md-checkbox-icon-width: 6px !default;
$alert-md-checkbox-icon-height: 10px !default;
$alert-md-checkbox-icon-border-width: 2px !default;
$alert-md-checkbox-icon-border-style: solid !default;
$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
$alert-md-checkbox-icon-transform: rotate(45deg) !default;
.alert-wrapper {
max-width: $alert-md-max-width;
@@ -304,7 +304,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
border-top-width: 0;
border-left-width: 0;
border-style: $alert-md-checkbox-icon-border-style;
border-color: $alert-md-background-color;
border-color: $alert-md-checkbox-icon-border-color;
transform: $alert-md-checkbox-icon-transform;
}

1
ionic/components/app/app.ios.scss
View File

@@ -25,7 +25,6 @@ hr {
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
h1,
h2,
h3,

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

@@ -19,7 +19,7 @@ hr {
background-color: rgba(0, 0, 0, .08);
}
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
h1,
h2,
h3,
@@ -38,7 +38,7 @@ hr {
sup,
ion-icon {
&[#{$color-name}] {
color: $color-value;
color: $color-base;
}
}
}

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

@@ -4,12 +4,13 @@
// --------------------------------------------------
$badge-md-border-radius: 4px !default;
$badge-md-background-color: map-get($colors-md, primary) !default;
$badge-md-background-color: color($colors-md, primary) !default;
$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default;
ion-badge {
border-radius: $badge-md-border-radius;
color: color-inverse($badge-md-background-color);
color: $badge-md-text-color;
background-color: $badge-md-background-color;
}
@@ -17,11 +18,11 @@ ion-badge {
// Generate Material Design Badge Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.badge-#{$color-name} {
color: color-inverse($color-value);
background-color: $color-value;
color: $color-contrast;
background-color: $color-base;
}
}

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

@@ -22,9 +22,9 @@ $button-md-clear-ripple-background-color: #999 !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
$button-md-color: map-get($colors-md, primary) !default;
$button-md-color: color($colors-md, primary) !default;
$button-md-color-activated: color-shade($button-md-color) !default;
$button-md-text-color: color-inverse($button-md-color) !default;
$button-md-text-color: color-contrast($colors-md, $button-md-color) !default;
$button-md-hover-opacity: .8 !default;
$button-md-large-font-size: 2rem !default;
@@ -77,12 +77,12 @@ $button-md-small-icon-font-size: 1.4em !default;
// Material Design Default Button Color Mixin
// --------------------------------------------------
@mixin md-button-default($color-name, $color-value) {
@mixin md-button-default($color-name, $color-base, $color-contrast) {
.button-#{$color-name} {
$background-color: $color-value;
$background-color: $color-base;
$background-color-activated: color-shade($background-color);
$fg-color: color-inverse($background-color);
$fg-color: $color-contrast;
color: $fg-color;
background-color: $background-color;
@@ -177,10 +177,10 @@ $button-md-small-icon-font-size: 1.4em !default;
// Material Design Outline Button Color Mixin
// --------------------------------------------------
@mixin md-button-outline($color-name, $color-value) {
@mixin md-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;
background-color: transparent;
@@ -229,10 +229,10 @@ $button-md-small-icon-font-size: 1.4em !default;
// Material Design Clear Button Color Mixin
// --------------------------------------------------
@mixin md-button-clear($color-name, $color-value) {
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
.button-clear-#{$color-name} {
$fg-color: $color-value;
$fg-color: $color-base;
border-color: transparent;
color: $fg-color;
background-color: transparent;
@@ -304,10 +304,10 @@ ion-button-effect {
// Generate Material Design Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include md-button-default($color-name, $color-value);
@include md-button-outline($color-name, $color-value);
@include md-button-clear($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-button-default($color-name, $color-base, $color-contrast);
@include md-button-outline($color-name, $color-base, $color-contrast);
@include md-button-clear($color-name, $color-base, $color-contrast);
}

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

@@ -12,18 +12,18 @@ $checkbox-md-media-margin: $item-md-padding-media-top 36px $item-m
$checkbox-md-disabled-opacity: .3 !default;
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
$checkbox-md-icon-background-color-on: map-get($colors-md, primary) !default;
$checkbox-md-icon-background-color-on: color($colors-md, primary) !default;
$checkbox-md-icon-size: 16px !default;
$checkbox-md-icon-checkmark-width: 2px !default;
$checkbox-md-icon-checkmark-style: solid !default;
$checkbox-md-icon-checkmark-color: $background-md-color !default;
$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
$checkbox-md-icon-border-width: 2px !default;
$checkbox-md-icon-border-style: solid !default;
$checkbox-md-icon-border-radius: 2px !default;
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
$checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default;
$checkbox-md-icon-border-color-on: color($colors-md, primary) !default;
$checkbox-md-transition-duration: 280ms !default;
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
@@ -114,14 +114,14 @@ ion-checkbox + .item-inner ion-label {
// Material Design Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-md($color-name, $bg-on) {
@mixin checkbox-theme-md($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;
}
}
@@ -131,6 +131,6 @@ ion-checkbox + .item-inner ion-label {
// Generate Material Design Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include checkbox-theme-md($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include checkbox-theme-md($color-name, $color-base, $color-contrast);
}

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

@@ -7,12 +7,12 @@
// Generate Material Design Chip Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
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.md.scss
View File

@@ -5,9 +5,9 @@
// --------------------------------------------------
$text-input-md-background-color: $list-md-background-color !default;
$text-input-md-highlight-color: map-get($colors-md, primary) !default;
$text-input-md-hightlight-color-valid: map-get($colors-md, secondary) !default;
$text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default;
$text-input-md-highlight-color: color($colors-md, primary) !default;
$text-input-md-hightlight-color-valid: color($colors-md, secondary) !default;
$text-input-md-hightlight-color-invalid: color($colors-md, danger) !default;
$text-input-md-margin-top: $item-md-padding-top !default;
$text-input-md-margin-right: ($item-md-padding-right / 2) !default;

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

@@ -168,10 +168,10 @@ ion-item-divider {
// Generate Material Design Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
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.md.scss
View File

@@ -5,7 +5,7 @@
// --------------------------------------------------
$label-md-text-color: #999 !default;
$label-md-text-color-focused: map-get($colors-md, primary) !default;
$label-md-text-color-focused: color($colors-md, primary) !default;
$label-md-margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
@@ -69,10 +69,10 @@ ion-label[floating] {
// Generate Material Design Label colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
ion-label[#{$color-name}] {
color: $color-value;
color: $color-base;
}
}

12
ionic/components/radio/radio.md.scss
View File

@@ -3,7 +3,7 @@
// Material Design Radio
// --------------------------------------------------
$radio-md-color-on: map-get($colors-md, primary) !default;
$radio-md-color-on: color($colors-md, primary) !default;
$radio-md-color-off: darken($list-md-border-color, 40%) !default;
$radio-md-icon-width: 16px !default;
@@ -116,16 +116,16 @@ ion-radio {
// Material Design Radio Color Mixin
// --------------------------------------------------
@mixin radio-theme-md($color-name, $color-value) {
@mixin radio-theme-md($color-name, $color-base, $color-contrast) {
ion-radio[#{$color-name}] {
.radio-checked {
border-color: $color-value;
border-color: $color-base;
}
.radio-inner {
background-color: $color-value;
background-color: $color-base;
}
}
@@ -136,8 +136,8 @@ ion-radio {
// Generate Material Design Radio Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include radio-theme-md($color-name, $color-value);
@include radio-theme-md($color-name, $color-base, $color-contrast);
}

13
ionic/components/segment/segment.md.scss
View File

@@ -47,6 +47,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
&.activated,
&.segment-activated {
opacity: 1;
border-color: $segment-button-md-border-color-activated;
}
}
@@ -68,15 +69,15 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
// Material Design Segment Button Mixin
// --------------------------------------------------
@mixin md-segment-button($color-name, $color-value) {
@mixin md-segment-button($color-name, $color-base, $color-contrast) {
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: 1;
}
}
@@ -87,6 +88,6 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
// Material Design Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include md-segment-button($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-segment-button($color-name, $color-base, $color-contrast);
}

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

@@ -99,22 +99,22 @@ tab-highlight {
// Material Design Tabbar Color Mixin
// --------------------------------------------------
@mixin tabbar-md($color-name, $color-value) {
@mixin tabbar-md($color-name, $color-base, $color-contrast) {
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] {
color: color-inverse($color-value);
color: $color-contrast;
}
tab-highlight {
background: color-inverse($color-value);
background: $color-contrast;
}
}
@@ -124,6 +124,6 @@ tab-highlight {
// Material Design Tabbar Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include tabbar-md($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include tabbar-md($color-name, $color-base, $color-contrast);
}

12
ionic/components/toggle/toggle.md.scss
View File

@@ -3,7 +3,7 @@
// Material Design Toggle
// --------------------------------------------------
$toggle-md-active-color: map-get($colors-md, primary) !default;
$toggle-md-active-color: color($colors-md, primary) !default;
$toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
@@ -123,16 +123,16 @@ ion-toggle {
// Material Design Color Mixin
// --------------------------------------------------
@mixin toggle-theme-md($color-name, $color-value) {
@mixin toggle-theme-md($color-name, $color-base) {
ion-toggle[#{$color-name}] {
.toggle-checked {
background-color: lighten($color-value, 25%);
background-color: lighten($color-base, 25%);
}
.toggle-checked .toggle-inner {
background-color: $color-value;
background-color: $color-base;
}
}
@@ -143,8 +143,8 @@ ion-toggle {
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include toggle-theme-md($color-name, $color-value);
@include toggle-theme-md($color-name, $color-base);
}

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

@@ -65,12 +65,12 @@ ion-navbar-section {
color: $toolbar-md-text-color;
}
@mixin md-toolbar-theme($color-name, $color-value) {
@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
.toolbar[#{$color-name}] {
$fg-color: toolbar-button-inverse($color-value);
$fg-color: color-contrast($colors-md, $color-base, true);
.toolbar-background {
background: $color-value;
background: $color-base;
}
.bar-button-default,
@@ -90,10 +90,10 @@ ion-navbar-section {
border-color: $fg-color;
}
@each $color-name, $color-value in $colors-md {
@include md-bar-button-default($color-name, $color-value);
@include md-bar-button-outline($color-name, $color-value);
@include md-bar-button-solid($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-bar-button-default($color-name, $color-base, $color-contrast);
@include md-bar-button-outline($color-name, $color-base, $color-contrast);
@include md-bar-button-solid($color-name, $color-base, $color-contrast);
}
}
}
@@ -154,14 +154,14 @@ ion-buttons[right] {
overflow: hidden;
}
@mixin md-bar-button-default($color-name, $color-value) {
@mixin md-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;
}
}
@@ -183,21 +183,21 @@ ion-buttons[right] {
}
&.activated {
color: color-inverse($bar-button-md-color);
color: color-contrast($colors-md, $bar-button-md-color);
background-color: $bar-button-md-color;
}
}
@mixin md-bar-button-outline($color-name, $color-value) {
@mixin md-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;
}
}
@@ -209,27 +209,28 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-solid {
color: color-inverse($bar-button-md-color);
color: color-contrast($colors-md, $bar-button-md-color);
background-color: $bar-button-md-color;
&:hover:not(.disable-hover) {
color: color-inverse($bar-button-md-color);
color: color-contrast($colors-md, $bar-button-md-color);
}
&.activated {
color: color-inverse($bar-button-md-color);
color: color-contrast($colors-md, $bar-button-md-color);
background-color: color-shade($bar-button-md-color);
}
}
@mixin md-bar-button-solid($color-name, $color-value) {
@mixin md-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);
}
}
@@ -324,11 +325,11 @@ ion-buttons[right] {
// Material Design Toolbar Color Generation
// --------------------------------------------------
@include md-bar-button-default(default, $bar-button-md-color);
@include md-bar-button-default(default, $bar-button-md-color, color-contrast($colors-md, $bar-button-md-color));
@each $color-name, $color-value in $colors-md {
@include md-toolbar-theme($color-name, $color-value);
@include md-bar-button-default($color-name, $color-value);
@include md-bar-button-outline($color-name, $color-value);
@include md-bar-button-solid($color-name, $color-value);
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-toolbar-theme($color-name, $color-base, $color-contrast);
@include md-bar-button-default($color-name, $color-base, $color-contrast);
@include md-bar-button-outline($color-name, $color-base, $color-contrast);
@include md-bar-button-solid($color-name, $color-base, $color-contrast);
}

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

@@ -3,12 +3,12 @@
// Material Design Dark Theme
// ----------------------------------
$colors-md: map-merge($colors, ()) !default;
$colors-md: copy-colors($colors) !default;
$text-md-color: $text-color !default;
$paragraph-md-color: $paragraph-color !default;
$link-md-color: map-get($colors-md, primary) !default;
$link-md-color: color($colors-md, primary) !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;
@@ -58,11 +58,11 @@ $item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default;
$item-md-divider-background: #151515 !default;
$item-md-divider-color: map-get($colors-md, light) !default;
$item-md-divider-color: color($colors-md, light) !default;
// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: map-get($colors-md, light) !default;
$toggle-md-handle-background-color-off: color($colors-md, light) !default;
// Ripple Color

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

@@ -8,7 +8,7 @@ $colors-md: copy-colors($colors) !default;
$text-md-color: $text-color !default;
$paragraph-md-color: $paragraph-color !default;
$link-md-color: map-get($colors-md, primary) !default;
$link-md-color: color($colors-md, primary) !default;
$background-md-color: $background-color !default;
$subdued-text-md-color: $subdued-text-color !default;

5
ionic/util/functions.scss
View File

@@ -141,9 +141,10 @@
// map key | map value | hex color not in map
// --------------------------------------------------
//
// @param {Boolean} $toolbar-button - MD toolbar button
// @return {Color}
// --------------------------------------------------
@function color-contrast($colors, $value) {
@function color-contrast($colors, $value, $toolbar-button: null) {
$color-value: null;
// If the value is a color (i.e. #fff)
@@ -162,6 +163,8 @@
// If the value is a map
@if(type-of($color-value) == map) {
$color-value: map-get($color-value, contrast);
} @elseif ($toolbar-button) {
$color-value: toolbar-button-inverse($color-value);
} @else {
$color-value: color-inverse($color-value);
}