feat(select): Added theme mixins to MDC select

PiperOrigin-RevId: 436262455

Author: abhiomkar

packages/mdc-line-ripple/_mixins.scss

@@ -46,8 +46,9 @@
         content: '';
       }
 
+      @include height(1px);
+
       &::before {
-        border-bottom-width: 1px;
         z-index: 1;
       }
 
@@ -81,6 +82,12 @@
   }
 }
 
+@mixin height($height) {
+  &::before {
+    border-bottom-width: $height;
+  }
+}
+
 @mixin active-color($color, $query: feature-targeting.all()) {
   $feat-color: feature-targeting.create-target($query, color);
 

packages/mdc-list/_evolution-mixins.scss

@@ -509,10 +509,10 @@
   );
 
   @include divider-color($divider-color, $query: $query);
+  @include divider-height(1px, $query: $query);
 
   .mdc-list-divider {
     @include feature-targeting.targets($feat-structure) {
-      height: 1px;
       padding: 0;
 
       // Allows the use of padding to specify leading and trailing insets
@@ -632,6 +632,14 @@
   }
 }
 
+@mixin list-item-height($height) {
+  &.mdc-list-item--with-one-line,
+  &.mdc-list-item--with-two-lines,
+  &.mdc-list-item--with-three-lines {
+    height: $height;
+  }
+}
+
 @mixin item-spacing(
   $leading,
   $trailing: $leading,
@@ -801,6 +809,18 @@
   }
 }
 
+@mixin list-item-selected-container-color($color) {
+  &.mdc-list-item--selected {
+    @include theme.property(background-color, $color);
+  }
+}
+
+@mixin list-primary-text-typography($typography-theme) {
+  .mdc-list-item__primary-text {
+    @include typography.theme-styles($typography-theme);
+  }
+}
+
 @mixin list-primary-text-ink-color($color, $query: feature-targeting.all()) {
   $feat-color: feature-targeting.create-target($query, color);
 
@@ -821,6 +841,12 @@
   }
 }
 
+@mixin list-secondary-text-typography($typography-theme) {
+  .mdc-list-item__secondary-text {
+    @include typography.theme-styles($typography-theme);
+  }
+}
+
 @mixin list-overline-text-ink-color($color, $query: feature-targeting.all()) {
   $feat-color: feature-targeting.create-target($query, color);
 
@@ -1060,6 +1086,16 @@
   }
 }
 
+@mixin divider-height($height, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  .mdc-list-divider {
+    @include feature-targeting.targets($feat-structure) {
+      @include theme.property(height, $height);
+    }
+  }
+}
+
 @mixin divider-leading-inset($inset, $query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
   &.mdc-list-divider--with-leading-inset {

packages/mdc-select/_filled-select-theme.scss

@@ -56,6 +56,8 @@ $_light-theme: (
   text-field-trailing-icon-color: null,
   text-field-trailing-icon-size: null,
   text-field-caret-color: null,
+  text-field-hover-caret-color: null,
+  text-field-focus-caret-color: null,
   menu-container-color: null,
   menu-container-elevation: null,
   menu-container-shadow-color: null,
@@ -120,6 +122,8 @@ $_light-theme: (
   text-field-error-focus-supporting-text-color: null,
   text-field-error-focus-leading-icon-color: null,
   text-field-error-focus-trailing-icon-color: null,
+  text-field-error-caret-color: null,
+  text-field-error-hover-caret-color: null,
   text-field-error-focus-caret-color: null,
   text-field-error-hover-active-indicator-color: null,
   text-field-error-hover-label-text-color: null,
@@ -134,4 +138,14 @@ $_light-theme: (
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
   @include select-theme.theme-styles($theme, $resolvers: $resolvers);
+  @if map.get($theme, text-field-container-height) {
+    @include select-theme.filled-height(
+      map.get($theme, text-field-container-height)
+    );
+  }
+  @if map.get($theme, text-field-container-shape) {
+    @include select-theme.filled-shape-radius(
+      map.get($theme, text-field-container-shape)
+    );
+  }
 }

packages/mdc-select/_outlined-select-theme.scss

@@ -20,6 +20,10 @@
 // THE SOFTWARE.
 //
 
+// Selector '.mdc-*' should only be used in this project.
+// stylelint-disable selector-class-pattern --
+// NOTE: this is the implementation of the aforementioned classes.
+
 @use 'sass:map';
 @use '@material/theme/theme';
 @use '@material/tokens/resolvers';
@@ -48,6 +52,8 @@ $_light-theme: (
   menu-list-item-with-trailing-icon-trailing-icon-color: null,
   menu-list-item-with-trailing-icon-trailing-icon-size: null,
   text-field-caret-color: null,
+  text-field-hover-caret-color: null,
+  text-field-focus-caret-color: null,
   text-field-container-color: null,
   text-field-container-height: null,
   text-field-container-shape: null,
@@ -64,6 +70,8 @@ $_light-theme: (
   text-field-disabled-supporting-text-opacity: null,
   text-field-disabled-trailing-icon-color: null,
   text-field-disabled-trailing-icon-opacity: null,
+  text-field-error-caret-color: null,
+  text-field-error-hover-caret-color: null,
   text-field-error-focus-caret-color: null,
   text-field-error-focus-input-text-color: null,
   text-field-error-focus-label-text-color: null,
@@ -132,4 +140,20 @@ $_light-theme: (
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
   @include select-theme.theme-styles($theme, $resolvers: $resolvers);
+  @if map.get($theme, text-field-container-height) {
+    @include select-theme.outlined-height(
+      map.get($theme, text-field-container-height)
+    );
+    &.mdc-select--with-leading-icon {
+      @include select-theme.outlined-with-leading-icon-height(
+        map.get($theme, text-field-container-height)
+      );
+    }
+  }
+  @if map.get($theme, text-field-container-shape) {
+    @include select-theme.outline-shape-radius(
+      map.get($theme, text-field-container-shape),
+      $height: map.get($theme, text-field-container-height)
+    );
+  }
 }