Skip to content

Commit

Permalink
fix(toolbar): add the mode to the inverse function for a toolbar
Browse files Browse the repository at this point in the history 
Use the mode instead of the sass variable to determine which color the
buttons in a toolbar should be based on the background color. Added
error messages when anything other than a color is passed and more
comments.

BREAKING CHANGES: ios mode `$toolbar-ios-button-color` now has a
default value of `color-contrast($colors-ios, $toolbar-ios-background,
ios)` which will evaluate to the primary color for light background
toolbars and white for dark background toolbars.

fixes #6364
  • Loading branch information
@brandyscarney
brandyscarney committed May 10, 2016
1 parent 90d4c1d commit 3ca3027
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 27 deletions.
4 changes: 2 additions & 2 deletions ionic/components/toolbar/toolbar.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ $toolbar-ios-title-font-weight: 600 !default;
$toolbar-ios-title-text-align: center !default;
$toolbar-ios-title-text-color: color-contrast($colors-ios, $toolbar-ios-background) !default;

$toolbar-ios-button-color: $toolbar-ios-active-color !default;
$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default;
$toolbar-ios-button-border-radius: 4px !default;

$navbar-ios-height: $toolbar-ios-height !default;
Expand Down Expand Up @@ -340,7 +340,7 @@ ion-buttons[right] {
// iOS Toolbar Color Generation
// --------------------------------------------------

@include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color));
@include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-toolbar-theme($color-name, $color-base, $color-contrast);
Expand Down
12 changes: 6 additions & 6 deletions ionic/components/toolbar/toolbar.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $toolbar-order-md: (
$toolbar-md-padding: 4px !default;
$toolbar-md-height: 5.6rem !default;
$toolbar-md-title-font-size: 2rem !default;
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, true) !default;
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default;

$toolbar-md-button-font-size: 1.4rem !default;

Expand Down Expand Up @@ -70,7 +70,7 @@ ion-navbar-section {

@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
.toolbar[#{$color-name}] {
$fg-color: color-contrast($colors-md, $color-base, true);
$fg-color: color-contrast($colors-md, $color-base, md);

.toolbar-background {
background: $color-base;
Expand Down Expand Up @@ -218,15 +218,15 @@ ion-buttons[right] {
// --------------------------------------------------

.bar-button-solid {
color: color-contrast($colors-md, $toolbar-md-button-color, true);
color: color-contrast($colors-md, $toolbar-md-button-color, md);
background-color: $toolbar-md-button-color;

&:hover:not(.disable-hover) {
color: color-contrast($colors-md, $toolbar-md-button-color, true);
color: color-contrast($colors-md, $toolbar-md-button-color, md);
}

&.activated {
color: color-contrast($colors-md, $toolbar-md-button-color, true);
color: color-contrast($colors-md, $toolbar-md-button-color, md);
background-color: color-shade($toolbar-md-button-color);
}
}
Expand Down Expand Up @@ -335,7 +335,7 @@ ion-buttons[right] {
// Material Design Toolbar Color Generation
// --------------------------------------------------

@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, true));
@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-toolbar-theme($color-name, $color-base, $color-contrast);
Expand Down
14 changes: 7 additions & 7 deletions ionic/components/toolbar/toolbar.wp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ $toolbar-wp-title-padding: 0 6px !default;
$toolbar-wp-title-font-size: 1.5rem !default;
$toolbar-wp-title-font-weight: bold !default;
$toolbar-wp-title-text-transform: uppercase !default;
$toolbar-wp-title-text-color: color-contrast($colors-wp, $toolbar-wp-background) !default;
$toolbar-wp-title-text-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default;

$toolbar-wp-button-font-size: 1.4rem !default;
$toolbar-wp-button-color: color-contrast($colors-wp, $toolbar-wp-background) !default;
$toolbar-wp-button-color: color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
$toolbar-wp-button-border-radius: 2px !default;

$navbar-wp-height: $toolbar-wp-height !default;
Expand Down Expand Up @@ -189,7 +189,7 @@ ion-buttons[right] {
}

&.activated {
color: color-contrast($colors-wp, $toolbar-wp-button-color);
color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
background-color: $toolbar-wp-button-color;
}
}
Expand All @@ -215,15 +215,15 @@ ion-buttons[right] {
// --------------------------------------------------

.bar-button-solid {
color: color-contrast($colors-wp, $toolbar-wp-button-color);
color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
background-color: $toolbar-wp-button-color;

&:hover:not(.disable-hover) {
color: color-contrast($colors-wp, $toolbar-wp-button-color);
color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
}

&.activated {
color: color-contrast($colors-wp, $toolbar-wp-button-color);
color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
background-color: color-shade($toolbar-wp-button-color);
}
}
Expand Down Expand Up @@ -332,7 +332,7 @@ ion-buttons[right] {
// Windows Toolbar Color Generation
// --------------------------------------------------

@include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color));
@include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp));

@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@include wp-toolbar-theme($color-name, $color-base, $color-contrast);
Expand Down
94 changes: 82 additions & 12 deletions ionic/util/functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,19 @@
// --------------------------------------------------

@function color-brightness($color-value) {
@if (type-of($color-value) != color) {
@return color-error($color-value);
}

@return (red($color-value) * .299 + green($color-value) * .587 + blue($color-value) * .114) / 255 * 100%;
}


@function color-inverse($color-value, $dark: #000, $light: #fff) {
@if (type-of($color-value) != color) {
@return color-error($color-value);
}

$brightness: color-brightness($color-value);
$red: red($color-value);
$green: green($color-value);
Expand All @@ -27,13 +35,36 @@
@return $light;
}

// Pass dark and light colors based on the mode
// this is mostly used for toolbar buttons/titles
//
// @param {String} $color-value - color to get the inverse of
// @param {Boolean} $custom-contrast-mode - the mode to use
// in order to pass the custom colors
//
// @return {Color}
// --------------------------------------------------
@function mode-inverse($color-value, $custom-contrast-mode) {
$dark: #000;
$light: #fff;

@if ($custom-contrast-mode == md) {
$dark: #424242;
$light: #fff;
} @else if ($custom-contrast-mode == ios) {
$dark: color($colors-ios, primary);
$light: #fff;
}

@function toolbar-button-inverse($color-value) {
@return color-inverse($color-value, $dark: #424242, $light: #fff);
@return color-inverse($color-value, $dark, $light);
}


@function color-shade($color-value, $amount:8%) {
@if (type-of($color-value) != color) {
@return color-error($color-value);
}

$lightness: lightness($color-value);

$shade: #fff;
Expand All @@ -45,6 +76,22 @@
@return mix($shade, $color-value, $amount);
}

@function color-error($color-value) {
@error "
The value `#{$color-value}` must be a color.
If you are setting the value as a map make sure
both the base and contrast are defined as colors.
For example:
$colors: (
primary: #327eff,
secondary: (base: #32db64, contrast: #000),
);";

@return false;
}

// Copy Colors Map
// --------------------------------------------------
Expand Down Expand Up @@ -141,34 +188,57 @@
// map key | map value | hex color not in map
// --------------------------------------------------
//
// @param {Boolean} $toolbar-button - MD toolbar button
// @param {Boolean} $custom-contrast-mode - use custom
// contrast function
// @return {Color}
// --------------------------------------------------
@function color-contrast($colors, $value, $toolbar-button: null) {
@function color-contrast($colors, $value, $custom-contrast-mode: null) {
$color-value: null;

// If the value is a color (i.e. #fff)
// If the value is a color (e.g. #fff)
// we need to call color-key to see if
// it exists in the color map or not
@if(type-of($value) == color) {
@if (type-of($value) == color) {
$color-value: color-key($colors, $value);

// If the value is a string (i.e. primary)
// If the value is a string (e.g. primary)
// we want to get the value from the map
// where it is the key
} @else {
$color-value: map-get($colors, $value);
}

// 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);
// If the value is a map then get the contrast
// from the map (e.g. (base: #327eff, contrast: blue))
@if (type-of($color-value) == map) {
// If the map has the contrast key then use that
// otherwise it is a map with just a base so get
// the inverse of that base color
@if map-has-key($color-value, contrast) {
$color-value: map-get($color-value, contrast);
} @else {
$color-value: color-inverse(map-get($color-value, base));
}

// If a mode was passed we need to call
// the custom inverse function to get the inverse
// color based on the mode
} @elseif ($custom-contrast-mode) {
$color-value: mode-inverse($color-value, $custom-contrast-mode);

// Otherwise we were passed a color and can use the
// function to get the inverse of that color
// (e.g. #f4f4f4)
} @else {
$color-value: color-inverse($color-value);
}

// If the final value being returned is not a color
// we should error
@if (type-of($color-value) != color) {
@return color-error($color-value);
}

@return $color-value;
}

Expand Down

0 comments on commit 3ca3027

Please sign in to comment.