feat(sass): add config, theme, and token support libs

PiperOrigin-RevId: 401868592

Author: asyncliz

components/field/lib/_content-theme.scss

@@ -10,7 +10,6 @@
 @use 'sass:map';
 @use '@material/theme/color-palette';
 @use '@material/theme/state';
-@use '@material/theme/theme';
 @use './field-theme';
 
 $_selectors: field-theme.$selectors;
@@ -49,7 +48,7 @@ $light-theme: (
   // Content elements provided to the field (such as <input>) may use
   // `currentColor` to inherit this property.
   .mdc-field__content {
-    @include theme.property(color, $color);
+    color: $color;
   }
 }
 
@@ -65,6 +64,6 @@ $light-theme: (
 
 @mixin _set-content-opacity($opacity) {
   .mdc-field__content {
-    @include theme.property(opacity, $opacity);
+    opacity: $opacity;
   }
 }

components/field/lib/_field-theme.scss

@@ -5,7 +5,6 @@
  */
 
 @use 'sass:map';
-@use '@material/theme/theme';
 
 $light-theme: (
   container-height: 56px,
@@ -24,5 +23,5 @@ $selectors: (
 }
 
 @mixin _container-height($height) {
-  @include theme.property(min-height, $height);
+  min-height: $height;
 }

components/field/lib/_filled-field-theme.scss

@@ -11,10 +11,10 @@
 @use 'sass:map';
 @use '@material/theme/color-palette';
 @use '@material/shape/shape';
-@use '@material/theme/keys';
 @use '@material/theme/state';
 @use '@material/theme/theme-color';
-@use '@material/theme/theme';
+@use '@material/mwc-../sass/theme';
+@use '@material/mwc-../sass/var';
 @use './content-theme';
 @use './field-theme';
 @use './label-theme';
@@ -48,21 +48,26 @@ $light-theme: map.merge(
     hover-state-layer-color: color-palette.$grey-800,
     hover-state-layer-opacity: 0.08,
     hover-stroke-color: color-palette.$grey-900,
-    shape: small,
+    shape: shape.$small-component-radius,
     stroke-color: color-palette.$grey-700,
     stroke-width: 1px,
   )
 );
 
 @mixin theme($theme) {
-  @include theme.validate-theme($light-theme, $theme);
-  @include keys.declare-custom-properties($theme, filled-field);
+  $theme: theme.create-theme-vars(
+    theme.validate-theme($light-theme, $theme),
+    filled-field
+  );
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme) {
-  @include theme.validate-theme($light-theme, $theme);
-
-  $theme: keys.create-theme-properties($theme, filled-field);
+  $theme: theme.create-theme-vars(
+    theme.validate-theme-tokens($light-theme, $theme),
+    filled-field
+  );
 
   @include field-theme.theme-styles($theme);
   @include content-theme.theme-styles($theme);
@@ -135,15 +140,15 @@ $light-theme: map.merge(
 @mixin _set-container-color($color) {
   .mdc-field__container {
     &::before {
-      @include theme.property(background, $color);
+      background: $color;
     }
   }
 }
 
 @mixin _set-container-hover-color($color) {
   .mdc-field__container {
     &::after {
-      @include theme.property(background, $color);
+      background: $color;
     }
   }
 }
@@ -164,52 +169,48 @@ $light-theme: map.merge(
 @mixin _set-container-opacity($opacity) {
   .mdc-field__container {
     &::before {
-      @include theme.property(opacity, $opacity);
+      opacity: $opacity;
     }
   }
 }
 
 @mixin _set-container-hover-opacity($opacity) {
   .mdc-field__container {
     &::after {
-      @include theme.property(opacity, $opacity);
+      opacity: $opacity;
     }
   }
 }
 
 @mixin _container-padding-horizontal($padding) {
   .mdc-field__start {
-    @include theme.property(padding-inline-start, $padding);
+    padding-inline-start: $padding;
   }
 
   .mdc-field__end {
-    @include theme.property(padding-inline-end, $padding);
+    padding-inline-end: $padding;
   }
 }
 
 @mixin _container-padding-vertical($padding) {
   .mdc-field__container {
-    @include theme.property(padding-top, $padding);
-    @include theme.property(padding-bottom, $padding);
+    padding-top: $padding;
+    padding-bottom: $padding;
   }
 }
 
 @mixin _floating-label-text-line-height($line-height) {
   &:not(.mdc-field--no-label) {
     .mdc-field__middle {
-      @include theme.property(padding-top, $line-height);
+      padding-top: $line-height;
     }
   }
 }
 
 @mixin _shape($shape) {
   .mdc-field__container {
-    // TODO(b/177368168): support percentages relative to density
-    @include shape.radius(
-      shape.mask-radius($shape, 1 1 0 0),
-      $rtl-reflexive: true,
-      $component-height: 56px
-    );
+    border-start-start-radius: $shape;
+    broder-start-end-radius: $shape;
   }
 }
 
@@ -234,13 +235,13 @@ $light-theme: map.merge(
 
 @mixin _set-stroke-color($color) {
   .mdc-field__stroke::before {
-    @include theme.property(border-bottom-color, $color);
+    border-bottom-color: $color;
   }
 }
 
 @mixin _set-stroke-focus-color($color) {
   .mdc-field__stroke::after {
-    @include theme.property(border-bottom-color, $color);
+    border-bottom-color: $color;
   }
 }
 
@@ -262,25 +263,19 @@ $light-theme: map.merge(
 
 @mixin _set-stroke-opacity($opacity) {
   .mdc-field__stroke::before {
-    @include theme.property(opacity, $opacity);
+    opacity: $opacity;
   }
 }
 
 @mixin _stroke-width($widths) {
   .mdc-field__stroke {
     // Default/focus are on different elements and do not need state selectors
     &::before {
-      @include theme.property(
-        border-bottom-width,
-        state.get-default-state($widths)
-      );
+      border-bottom-width: state.get-default-state($widths);
     }
 
     &::after {
-      @include theme.property(
-        border-bottom-width,
-        state.get-focus-state($widths)
-      );
+      border-bottom-width: state.get-focus-state($widths);
     }
   }
 }

components/field/lib/_label-theme.scss

@@ -8,7 +8,6 @@
 // Selector '.mdc-*' should only be used in this project.
 
 @use 'sass:map';
-@use '@material/theme/theme';
 
 $light-theme: (
   label-text-line-height: 24px,
@@ -45,6 +44,6 @@ $light-theme: (
 }
 
 @mixin _set-label-text-font($font) {
-  @include theme.property(font-size, map.get($font, size));
-  @include theme.property(line-height, map.get($font, line-height));
+  font-size: map.get($font, size);
+  line-height: map.get($font, line-height);
 }