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`

src/components/fab/fab.ios.scss

@@ -12,14 +12,15 @@ $fab-ios-text-color:                          color-contrast($colors-ios, $fab-i
 /// @prop - Background color of the activated button
 $fab-ios-background-color-activated:              color-shade($fab-ios-background-color) !default;
 
-/// @prop - Background color of the button
+/// @prop - Background color of the button in a list
-$fab-ios-in-list-background-color:            color($colors-ios, light) !default;
+$fab-ios-list-button-background-color:            $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
+/// @prop - Text color of the button in a list
-$fab-ios-in-list-text-color:                  color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
+$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;
+  color: $fab-ios-list-button-text-color;
-  background-color: $fab-ios-in-list-background-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;
 }
 
 

src/components/fab/fab.md.scss

@@ -18,14 +18,14 @@ $fab-md-text-color:                         color-contrast($colors-md, $fab-md-b
 /// @prop - Background color of the activated button
 $fab-md-background-color-activated:               color-shade($fab-md-background-color) !default;
 
-/// @prop - Background color of the button
+/// @prop - Background color of the button in a list
-$fab-md-in-list-background-color:           color($colors-md, light) !default;
+$fab-md-list-button-background-color:             $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
+/// @prop - Text color of the button in a list
-$fab-md-in-list-text-color:                 color-contrast($colors-md, $fab-md-in-list-background-color) !default;
+$fab-md-list-button-text-color:                   color-contrast($colors-md, $fab-md-list-button-background-color) !default;
 
-/// @prop - Background color of the activated button
+/// @prop - Background color of the activated button in a list
-$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
+$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;
+  color: $fab-md-list-button-text-color;
-  background-color: $fab-md-in-list-background-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;
 }
 
 

src/components/fab/fab.scss

@@ -15,6 +15,9 @@ $fab-content-margin:  10px !default;
 /// @prop - Margin of the FAB List
 $fab-list-margin:                       10px !default;
 
+/// @prop - Background color of the button in a list
+$fab-list-button-background-color:      #f4f4f4 !default;
+
 
 .fab {
   @include appearance(none);

src/components/fab/fab.wp.scss

@@ -12,14 +12,14 @@ $fab-wp-text-color:                         color-contrast($colors-wp, $fab-wp-b
 /// @prop - Background color of the activated button
 $fab-wp-background-color-activated:               color-shade($fab-wp-background-color) !default;
 
-/// @prop - Background color of the button
+/// @prop - Background color of the button in a list
-$fab-wp-in-list-background-color:           color($colors-wp, light) !default;
+$fab-wp-list-button-background-color:             $fab-list-button-background-color !default;
 
-/// @prop - Text color of the button
+/// @prop - Text color of the button in a list
-$fab-wp-in-list-text-color:                 color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
+$fab-wp-list-button-text-color:                   color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
 
-/// @prop - Background color of the activated button
+/// @prop - Background color of the activated button in a list
-$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
+$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;
+  color: $fab-wp-list-button-text-color;
-  background-color: $fab-wp-in-list-background-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;
 }
 
 

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

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

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

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

src/themes/ionic.functions.scss

@@ -76,8 +76,8 @@
   @return mix($shade, $color-value, $amount);
 }
 
-@function color-error($color-value) {
+@function color-error($color-value, $color-name: null) {
-  @error "
+  $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,9 +180,13 @@
     }
   }
 
-  // If it isn't a map then return the 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
 // if it doesn't exist then return the value

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;

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

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;

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