fix(select): Update colors to match latest guidance. (#2617)

material-components · Apr 20, 2018 · 5aa7ec7 · 5aa7ec7
1 parent 0f5af21
commit 5aa7ec7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/demos/select.scss b/demos/select.scss
@@ -21,7 +21,7 @@
 // stylelint-disable selector-class-pattern
 .demo-select-custom-colors {
   @include mdc-select-ink-color(blue);
-  @include mdc-select-label-color(blue, .6);
+  @include mdc-select-label-color(rgba(blue, .6));
   @include mdc-select-bottom-line-color(rgba(blue, .5));
 
   // Focused colors

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
@@ -164,8 +164,8 @@ Mixin | Description
 --- | ---
 `mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select.
 `mdc-select-container-fill-color($color)` | Customizes the background color of the select.
-`mdc-select-label-color($color, $opacity: 1)` | Customizes the label color of the select in the unfocused state.
-`mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional.
+`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state.
+`mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
 `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
 `mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
 `mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when select is hovered.

diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -32,10 +32,10 @@
   }
 }
 
-@mixin mdc-select-focused-label-color($color, $opacity: .87) {
+@mixin mdc-select-focused-label-color($color) {
   &:not(.mdc-select--disabled) {
     .mdc-select__native-control:focus ~ .mdc-floating-label {
-      @include mdc-floating-label-ink-color(rgba(mdc-theme-prop-value($color), $opacity));
+      @include mdc-floating-label-ink-color(mdc-theme-prop-value($color));
     }
   }
 }
@@ -58,9 +58,9 @@
   }
 }
 
-@mixin mdc-select-label-color($color, $opacity: 1) {
+@mixin mdc-select-label-color($color) {
   &:not(.mdc-select--disabled) .mdc-floating-label {
-    @include mdc-floating-label-ink-color(rgba(mdc-theme-prop-value($color), $opacity));
+    @include mdc-floating-label-ink-color($color);
   }
 }
 

diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
@@ -18,3 +18,16 @@
 
 $mdc-select-arrow-padding: 26px;
 $mdc-select-label-padding: 16px;
+
+$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
+
+$mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);
+$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37);
+
+$mdc-select-bottom-line-idle-color: rgba(mdc-theme-prop-value(on-surface), .42);
+$mdc-select-bottom-line-hover-color: rgba(mdc-theme-prop-value(on-surface), .87);
+
+$mdc-select-box-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%);
+$mdc-select-box-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%);
diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -30,16 +30,16 @@
   @include mdc-typography-base;
   @include mdc-select-container-fill-color(transparent);
   @include mdc-select-dd-arrow-svg-bg_;
-  @include mdc-select-ink-color(text-primary-on-light);
-  @include mdc-select-label-color(black, .6);
-  @include mdc-select-bottom-line-color(rgba(black, .5));
+  @include mdc-select-ink-color($mdc-select-ink-color);
+  @include mdc-select-label-color($mdc-select-label-color);
+  @include mdc-select-bottom-line-color($mdc-select-bottom-line-idle-color);
 
   // Focused state colors
   @include mdc-select-focused-bottom-line-color(primary);
-  @include mdc-select-focused-label-color(primary);
+  @include mdc-select-focused-label-color($mdc-select-focused-label-color);
 
   // Hover state colors
-  @include mdc-select-hover-bottom-line-color(rgba(black, .87));
+  @include mdc-select-hover-bottom-line-color($mdc-select-bottom-line-hover-color);
 
   display: inline-flex;
   position: relative;
@@ -93,14 +93,14 @@
 }
 
 .mdc-select--box {
-  @include mdc-select-container-fill-color(rgba(black, .04));
+  @include mdc-select-container-fill-color($mdc-select-box-fill-color);
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
   // Select Box intentionally omits press ripple, so each state needs to be specified individually
-  @include mdc-states-base-color(text-primary-on-background);
-  @include mdc-states-hover-opacity(mdc-states-opacity(text-primary-on-background, hover));
+  @include mdc-states-base-color($mdc-select-ink-color);
+  @include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
   @include mdc-states-focus-opacity(
-    mdc-states-opacity(text-primary-on-background, focus),
+    mdc-states-opacity($mdc-select-ink-color, focus),
     $has-nested-focusable-element: true
   );
 
@@ -135,11 +135,14 @@
 }
 
 .mdc-select--disabled {
-  @include mdc-select-dd-arrow-svg-bg_(000000, .38);
-  @include mdc-select-container-fill-color_(transparent);
+  @include mdc-select-dd-arrow-svg-bg_($mdc-select-disabled-ink-color);
+
+  &.mdc-select--box {
+    @include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color);
+  }
 
   .mdc-floating-label {
-    @include mdc-floating-label-ink-color(text-disabled-on-light);
+    @include mdc-floating-label-ink-color($mdc-select-disabled-label-color);
   }
 
   // stylelint-disable plugin/selector-bem-pattern