feat(select): Move colors for default select to mixins

demos/select.html

@@ -215,7 +215,7 @@ <h2>Select Multiple - CSS Only</h2>
           }
         });
         alternateColorsCb.addEventListener('change', function() {
-          boxDemoWrapper.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors');
+          root.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors');
         });
         disabledCb.addEventListener('change', function() {
           select.disabled = disabledCb.checked;

demos/select.scss

@@ -21,7 +21,7 @@
 
 // stylelint-disable selector-class-pattern
 .demo-select-custom-colors {
-  @include mdc-select-fill-color(rgba(blue, .1));
+  @include mdc-select-container-fill-color(rgba(blue, .1));
   @include mdc-select-ink-color(blue);
   @include mdc-select-label-color(rgba(blue, .6));
   @include mdc-select-bottom-line-color(rgba(blue, .5));

packages/mdc-select/README.md

@@ -276,16 +276,14 @@ these mixins within CSS selectors like `.foo-select` to apply styling.
 
 Mixin | Description
 --- | ---
-`mdc-select-ink-color($color)` | Customizes the text entered into the select.* 
-`mdc-select-fill-color($color)` | Customizes the background color of the select. 
+`mdc-select-ink-color($color)` | Customizes the text entered into the select. This style applies only to the css version.  
+`mdc-select-container-fill-color($color)` | Customizes the background color of the select. 
 `mdc-select-label-color($color)` | 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-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-selected-text-color($color)` | Customizes the color of the option that has been selected. 
 
->_NOTE_: * - This style applies to the css only version.
-
 ### MDC Select Component API
 
 The MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and

packages/mdc-select/_mixins.scss

@@ -17,14 +17,14 @@
 // Public
 
 @mixin mdc-select-ink-color($color) {
-  :not(.mdc-select--disabled) {
+  &:not(.mdc-select--disabled) {
     @include mdc-select-ink-color_($color);
   }
 }
 
-@mixin mdc-select-fill-color($color) {
-  :not(.mdc-select--disabled) {
-    @include mdc-select-fill-color_($color);
+@mixin mdc-select-container-fill-color($color) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-container-fill-color_($color);
   }
 }
 
@@ -58,6 +58,14 @@
   }
 }
 
+@mixin mdc-select-focused-bottom-line {
+  // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure
+  .mdc-select__surface:focus .mdc-select__bottom-line,
+  .mdc-select__surface:focus ~ .mdc-select__bottom-line {
+    @content;
+  }
+}
+
 // Private
 
 @mixin mdc-select-ink-color_($color) {
@@ -66,7 +74,7 @@
   }
 }
 
-@mixin mdc-select-fill-color_($color) {
+@mixin mdc-select-container-fill-color_($color) {
   .mdc-select__surface {
     @include mdc-theme-prop(background-color, $color);
   }
@@ -98,12 +106,11 @@
 }
 
 @mixin mdc-select-focused-bottom-line-color_($color) {
-  .mdc-select__surface:focus .mdc-select__bottom-line,
-  .mdc-select__surface:focus ~ .mdc-select__bottom-line {
+  @include mdc-select-focused-bottom-line {
     @include mdc-theme-prop(background-color, $color);
   }
 
-  .mdc-select--open .mdc-select__bottom-line {
+  &.mdc-select--open .mdc-select__bottom-line {
     @include mdc-theme-prop(background-color, $color);
   }
 }

packages/mdc-select/mdc-select.scss

@@ -27,21 +27,18 @@ $mdc-select-arrow-padding: 26px;
 $mdc-select-label-padding: 16px;
 $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function;
 
+// postcss-bem-linter: define select
 .mdc-select {
   @include mdc-select-dd-arrow-svg-bg_;
-  @include mdc-select-fill-color(rgba(white, .1));
-  @include mdc-select-ink-color(primary);
+  @include mdc-select-container-fill-color(rgba(white, .1));
+  @include mdc-select-ink-color(text-primary-on-light);
   @include mdc-select-label-color(rgba(black, .6));
   @include mdc-select-bottom-line-color(rgba(black, .5));
   @include mdc-select-selected-text-color(text-primary-on-light);
 
   // Focused state colors
   @include mdc-select-focused-bottom-line-color(primary);
   @include mdc-select-focused-label-color(primary);
-}
-
-// postcss-bem-linter: define select
-.mdc-select {
   @include mdc-typography(subheading2);
 
   display: inline-flex;
@@ -160,9 +157,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
     }
   }
 
-  // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure
-  &__surface:focus .mdc-select__bottom-line,
-  &__surface:focus ~ .mdc-select__bottom-line {
+  @include mdc-select-focused-bottom-line {
     transform: scaleY(2);
 
     &::after {