fix(sass): remove usage of colors other than primary, improve error (#…

…8907) * fix(sass): remove usage of colors other than primary, improve error fixes #8266 * refactor(sass): add variables to override all modes for fab and input * refactor(fab): rename Sass variable from in-list to list-button BREAKING CHANGE: - `$fab-<mode>-in-list-background-color` -> `$fab-<mode>-list-button-background-color` - `$fab-<mode>-in-list-text-color` -> `$fab-<mode>-list-button-text-color` - `$fab-<mode>-in-list-background-color-activated` -> `$fab-<mode>-list-button-background-color-activated`
ionic-team · Nov 7, 2016 · eb0b05d · eb0b05d
1 parent a98284a
commit eb0b05d
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 60 deletions.
diff --git a/src/components/fab/fab.ios.scss b/src/components/fab/fab.ios.scss
@@ -4,22 +4,23 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the button
-$fab-ios-background-color:                    color($colors-ios, primary) !default;
+$fab-ios-background-color:                        color($colors-ios, primary) !default;
 
 /// @prop - Text color of the button
-$fab-ios-text-color:                          color-contrast($colors-ios, $fab-ios-background-color) !default;
+$fab-ios-text-color:                              color-contrast($colors-ios, $fab-ios-background-color) !default;
 
 /// @prop - Background color of the activated button
-$fab-ios-background-color-activated:          color-shade($fab-ios-background-color) !default;
+$fab-ios-background-color-activated:              color-shade($fab-ios-background-color) !default;
 
-/// @prop - Background color of the button
-$fab-ios-in-list-background-color:            color($colors-ios, light) !default;
+/// @prop - Background color of the button in a list
+$fab-ios-list-button-background-color:            $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
-$fab-ios-in-list-text-color:                  color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
+/// @prop - Text color of the button in a list
+$fab-ios-list-button-text-color:                  color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
+
+/// @prop - Background color of the activated button in a list
+$fab-ios-list-button-background-color-activated:  color-shade($fab-ios-list-button-background-color) !default;
 
-/// @prop - Background color of the activated button
-$fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-background-color) !default;
 
 .fab-ios {
   color: $fab-ios-text-color;
@@ -31,12 +32,12 @@ $fab-ios-in-list-background-color-activated:  color-shade($fab-ios-in-list-backg
 }
 
 .fab-ios.fab-in-list {
-  color: $fab-ios-in-list-text-color;
-  background-color: $fab-ios-in-list-background-color;
+  color: $fab-ios-list-button-text-color;
+  background-color: $fab-ios-list-button-background-color;
 }
 
 .fab-ios.fab-in-list.activated {
-  background-color: $fab-ios-in-list-background-color-activated;
+  background-color: $fab-ios-list-button-background-color-activated;
 }
 
 

diff --git a/src/components/fab/fab.md.scss b/src/components/fab/fab.md.scss
@@ -4,28 +4,28 @@
 // --------------------------------------------------
 
 /// @prop - Box shadow of the FAB button
-$fab-md-box-shadow:                         0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow:                               0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
 
 /// @prop - Box shadow of the activated FAB button
-$fab-md-box-shadow-activated:               0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+$fab-md-box-shadow-activated:                     0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
 
 /// @prop - Background color of the button
-$fab-md-background-color:                   color($colors-md, primary) !default;
+$fab-md-background-color:                         color($colors-md, primary) !default;
 
 /// @prop - Text color of the button
-$fab-md-text-color:                         color-contrast($colors-md, $fab-md-background-color) !default;
+$fab-md-text-color:                               color-contrast($colors-md, $fab-md-background-color) !default;
 
 /// @prop - Background color of the activated button
-$fab-md-background-color-activated:         color-shade($fab-md-background-color) !default;
+$fab-md-background-color-activated:               color-shade($fab-md-background-color) !default;
 
-/// @prop - Background color of the button
-$fab-md-in-list-background-color:           color($colors-md, light) !default;
+/// @prop - Background color of the button in a list
+$fab-md-list-button-background-color:             $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
-$fab-md-in-list-text-color:                 color-contrast($colors-md, $fab-md-in-list-background-color) !default;
+/// @prop - Text color of the button in a list
+$fab-md-list-button-text-color:                   color-contrast($colors-md, $fab-md-list-button-background-color) !default;
 
-/// @prop - Background color of the activated button
-$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
+/// @prop - Background color of the activated button in a list
+$fab-md-list-button-background-color-activated:   color-shade($fab-md-list-button-background-color) !default;
 
 
 .fab-md {
@@ -45,12 +45,12 @@ $fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-backgrou
 }
 
 .fab-md.fab-in-list {
-  color: $fab-md-in-list-text-color;
-  background-color: $fab-md-in-list-background-color;
+  color: $fab-md-list-button-text-color;
+  background-color: $fab-md-list-button-background-color;
 }
 
 .fab-md.fab-wp.fab-in-list.activated {
-  background-color: $fab-md-in-list-background-color-activated;
+  background-color: $fab-md-list-button-background-color-activated;
 }
 
 

diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
@@ -4,16 +4,19 @@
 // --------------------------------------------------
 
 /// @prop - Width and height of the FAB button
-$fab-size:            56px !default;
+$fab-size:                              56px !default;
 
 /// @prop - Width and height of the FAB button mini
-$fab-mini-size:       40px !default;
+$fab-mini-size:                         40px !default;
 
 /// @prop - Margin of the FAB Container
-$fab-content-margin:  10px !default;
+$fab-content-margin:                    10px !default;
 
 /// @prop - Margin of the FAB List
-$fab-list-margin:     10px !default;
+$fab-list-margin:                       10px !default;
+
+/// @prop - Background color of the button in a list
+$fab-list-button-background-color:      #f4f4f4 !default;
 
 
 .fab {

diff --git a/src/components/fab/fab.wp.scss b/src/components/fab/fab.wp.scss
@@ -4,22 +4,22 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the button
-$fab-wp-background-color:                   color($colors-wp, primary) !default;
+$fab-wp-background-color:                         color($colors-wp, primary) !default;
 
 /// @prop - Text color of the button
-$fab-wp-text-color:                         color-contrast($colors-wp, $fab-wp-background-color) !default;
+$fab-wp-text-color:                               color-contrast($colors-wp, $fab-wp-background-color) !default;
 
 /// @prop - Background color of the activated button
-$fab-wp-background-color-activated:         color-shade($fab-wp-background-color) !default;
+$fab-wp-background-color-activated:               color-shade($fab-wp-background-color) !default;
 
-/// @prop - Background color of the button
-$fab-wp-in-list-background-color:           color($colors-wp, light) !default;
+/// @prop - Background color of the button in a list
+$fab-wp-list-button-background-color:             $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
-$fab-wp-in-list-text-color:                 color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
+/// @prop - Text color of the button in a list
+$fab-wp-list-button-text-color:                   color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
 
-/// @prop - Background color of the activated button
-$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
+/// @prop - Background color of the activated button in a list
+$fab-wp-list-button-background-color-activated:   color-shade($fab-wp-list-button-background-color) !default;
 
 
 .fab-wp {
@@ -32,12 +32,12 @@ $fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-backgrou
 }
 
 .fab-wp.fab-in-list {
-  color: $fab-wp-in-list-text-color;
-  background-color: $fab-wp-in-list-background-color;
+  color: $fab-wp-list-button-text-color;
+  background-color: $fab-wp-list-button-background-color;
 }
 
 .fab-wp.fab-in-list.activated {
-  background-color: $fab-wp-in-list-background-color-activated;
+  background-color: $fab-wp-list-button-background-color-activated;
 }
 
 

diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss
@@ -43,10 +43,10 @@ $text-input-ios-show-invalid-highlight:    $text-input-ios-show-focus-highlight
 $text-input-ios-highlight-color:           color($colors-ios, primary) !default;
 
 /// @prop - Color of the input highlight when valid
-$text-input-ios-highlight-color-valid:     color($colors-ios, secondary) !default;
+$text-input-ios-highlight-color-valid:     $text-input-highlight-color-valid !default;
 
 /// @prop - Color of the input highlight when invalid
-$text-input-ios-highlight-color-invalid:   color($colors-ios, danger) !default;
+$text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !default;
 
 
 // iOS Default Input

diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss
@@ -43,10 +43,10 @@ $text-input-md-show-invalid-highlight:      $text-input-md-show-focus-highlight
 $text-input-md-highlight-color:             color($colors-md, primary) !default;
 
 /// @prop - Color of the input highlight when valid
-$text-input-md-highlight-color-valid:       color($colors-md, secondary) !default;
+$text-input-md-highlight-color-valid:       $text-input-highlight-color-valid !default;
 
 /// @prop - Color of the input highlight when invalid
-$text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
+$text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid !default;
 
 
 // Material Design Default Input

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -1,5 +1,15 @@
 @import "../../themes/ionic.globals";
 
+// Input
+// --------------------------------------------------
+
+/// @prop - Color of the input highlight when valid
+$text-input-highlight-color-valid:       #32db64 !default;
+
+/// @prop - Color of the input highlight when invalid
+$text-input-highlight-color-invalid:     #f53d3d !default;
+
+
 // Input/Textarea Wrapper
 // --------------------------------------------------
 

diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss
@@ -58,10 +58,10 @@ $text-input-wp-show-invalid-highlight:      $text-input-wp-show-focus-highlight
 $text-input-wp-highlight-color:             color($colors-wp, primary) !default;
 
 /// @prop - Color of the input highlight when valid
-$text-input-wp-highlight-color-valid:       color($colors-wp, secondary) !default;
+$text-input-wp-highlight-color-valid:       $text-input-highlight-color-valid !default;
 
 /// @prop - Color of the input highlight when invalid
-$text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
+$text-input-wp-highlight-color-invalid:     $text-input-highlight-color-invalid !default;
 
 
 // Windows Default Input

diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss
@@ -76,8 +76,8 @@
   @return mix($shade, $color-value, $amount);
 }
 
-@function color-error($color-value) {
-  @error "
+@function color-error($color-value, $color-name: null) {
+  $error-msg: "
 
   The value `#{$color-value}` must be a color.
   If you are setting the value as a map make sure
@@ -90,7 +90,25 @@
     secondary:  (base: #32db64, contrast: #000),
   );";
 
-  @return false;
+  // If there was a name passed it means the value doesn't exist
+  // so error that the value isn't defined
+  @if ($color-name) {
+    $error-msg: "
+
+    The map color `#{$color-name}` is not defined.
+    Please make sure the color exists in your
+    `$colors` map.
+
+    For example:
+
+    $colors: (
+      #{$color-name}:    #327eff
+    );";
+  }
+
+  @error $error-msg;
+
+  @return null;
 }
 
 // Copy Colors Map
@@ -162,8 +180,12 @@
     }
   }
 
-  // If it isn't a map then return the value
-  @return $color-value;
+  // If the value is a color then return the value
+  // otherwise we need to error with the name
+  @if (type-of($color-value) == color) {
+    @return $color-value;
+  }
+  @return color-error($color-value, $color-name);
 }
 
 // Get the color map key based on the value

diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss
@@ -27,7 +27,7 @@ $card-ios-header-color:                #ddd !default;
 // iOS Note
 // --------------------------------------------------
 
-$item-ios-note-color:                  color($colors-ios, light) !default;
+$item-ios-note-color:                  #f4f4f4 !default;
 
 
 // iOS Toolbar
@@ -72,4 +72,4 @@ $item-ios-padding-icon-bottom:        9px !default;
 // iOS Toggle
 // --------------------------------------------------
 
-$toggle-ios-handle-background-color:  color($colors-ios, light) !default;
+$toggle-ios-handle-background-color:  #f4f4f4 !default;
diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss
@@ -55,12 +55,12 @@ $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:               color($colors-md, light) !default;
+$item-md-divider-color:               #f4f4f4 !default;
 
 
 // Material Design Toggle
 // ---------------------------------------------------
-$toggle-md-handle-background-color-off: color($colors-md, light) !default;
+$toggle-md-handle-background-color-off: #f4f4f4 !default;
 
 
 // Ripple Color

diff --git a/src/themes/ionic.theme.dark.scss b/src/themes/ionic.theme.dark.scss
@@ -27,7 +27,7 @@ $content-padding:            16px !default;
 $content-margin:             16px !default;
 
 $toolbar-background:         #151515 !default;
-$toolbar-border-color:       color($colors, dark) !default;
+$toolbar-border-color:       #222 !default;
 $toolbar-text-color:         $text-color !default;
 $toolbar-active-color:       $link-color !default;
 $toolbar-inactive-color:     #8c8c8c !default;

diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss
@@ -55,12 +55,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:               color($colors-wp, light) !default;
+$item-wp-divider-color:               #f4f4f4 !default;
 
 
 // Windows Toggle
 // ---------------------------------------------------
-$toggle-wp-handle-background-color-off: color($colors-wp, light) !default;
+$toggle-wp-handle-background-color-off: #f4f4f4 !default;
 
 
 // Windows Input