feat(select): Create additional state mixins

PiperOrigin-RevId: 311465029

packages/mdc-select/README.md

@@ -563,10 +563,14 @@ Mixin | Description
 `container-fill-color($color)` | Customizes the background color of the select.
 `disabled-container-fill-color($color)` | Customizes the background color of the select when disabled.
 `dropdown-icon-color($color)` | Customizes the dropdown icon color of the select.
+`hover-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when hovered.
 `focused-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when focused.
 `disabled-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when disabled.
 `label-color($color)` | Customizes the label color of the select in the unfocused state.
+`hover-label-color($color)` | Customizes the label color of the select when hovered.
 `focused-label-color($color)` | Customizes the label color of the select when focused.
+`label-floating-color($color)` | Customizes the label color of the select when the label is floated, but the select is not necessarily focused.
+`hover-label-floating-color($color)` | Customizes the label color of the select when hovered and label is floated.
 `disabled-label-color($color)` | Customizes the label color of the select when disabled.
 `bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
 `hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.

packages/mdc-select/_mixins.scss

@@ -270,6 +270,14 @@
   }
 }
 
+@mixin hover-dropdown-icon-color($color, $query: feature-targeting-functions.all()) {
+  @include _if-enabled {
+    &:not(.mdc-select--focused):hover {
+      @include _dropdown-icon-color($color, $query: $query);
+    }
+  }
+}
+
 @mixin focused-dropdown-icon-color($color, $query: feature-targeting-functions.all()) {
   @include _if-enabled {
     &.mdc-select--focused {
@@ -286,6 +294,22 @@
   }
 }
 
+@mixin label-floating-color($color, $query: feature-targeting-functions.all()) {
+  @include _if-enabled {
+    .mdc-floating-label--float-above {
+      @include floating-label-mixins.ink-color(theme-variables.prop-value($color), $query: $query);
+    }
+  }
+}
+
+@mixin hover-label-floating-color($color, $query: feature-targeting-functions.all()) {
+  @include _if-enabled {
+    &:not(.mdc-select--focused):hover .mdc-floating-label--float-above {
+      @include floating-label-mixins.ink-color(theme-variables.prop-value($color), $query: $query);
+    }
+  }
+}
+
 @mixin bottom-line-color($color, $query: feature-targeting-functions.all()) {
   @include _if-enabled {
     @include bottom-line-color_($color, $query: $query);
@@ -320,6 +344,14 @@
   }
 }
 
+@mixin hover-label-color($color, $query: feature-targeting-functions.all()) {
+  @include _if-enabled {
+    &:not(.mdc-select--focused):hover .mdc-floating-label {
+      @include floating-label-mixins.ink-color(theme-variables.prop-value($color), $query: $query);
+    }
+  }
+}
+
 @mixin disabled-label-color($color, $query: feature-targeting-functions.all()) {
   @include _if-disabled {
     .mdc-floating-label {

packages/mdc-select/helper-text/README.md

@@ -103,6 +103,7 @@ Mixin | Description
 `helper-text-color($color)` | Customizes the color of the helper text following a select.
 `disabled-helper-text-color($color)` | Customizes the color of the helper text following a select when disabled.
 `helper-text-validation-color($color)` | Customizes the color of the helper text validation message when the select is invalid.
+`hover-helper-text-validation-color($color)` | Customizes the color of the helper text validation message when the select is invalid and hovered.
 
 ## `MDCSelectHelperText` properties and methods
 

packages/mdc-select/helper-text/_mixins.scss

@@ -77,6 +77,12 @@
   }
 }
 
+@mixin hover-helper-text-validation-color($color, $query: feature-targeting-functions.all()) {
+  &:not(.mdc-select--disabled):not(.mdc-select--focused):hover {
+    @include helper-text-validation-color_($color, $query: $query);
+  }
+}
+
 // Private mixins
 
 @mixin helper-text-color_($color, $query: feature-targeting-functions.all()) {