chore: update components to use custom properties from tokens

PiperOrigin-RevId: 601597083
material-components · Jan 26, 2024 · 84536d7 · 84536d7
1 parent feff721
commit 84536d7
Show file tree

Hide file tree

Showing 43 changed files with 208 additions and 150 deletions.
diff --git a/button/internal/_elevated-button.scss b/button/internal/_elevated-button.scss
@@ -34,11 +34,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevated-button-values();
+  $tokens: tokens.md-comp-elevated-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-elevated-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/button/internal/_filled-button.scss b/button/internal/_filled-button.scss
@@ -34,11 +34,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-button-values();
+  $tokens: tokens.md-comp-filled-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filled-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/button/internal/_filled-tonal-button.scss b/button/internal/_filled-tonal-button.scss
@@ -34,11 +34,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-button-values();
+  $tokens: tokens.md-comp-filled-tonal-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/button/internal/_outlined-button.scss b/button/internal/_outlined-button.scss
@@ -34,11 +34,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-button-values();
+  $tokens: tokens.md-comp-outlined-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     --_container-color: none;

diff --git a/button/internal/_text-button.scss b/button/internal/_text-button.scss
@@ -34,11 +34,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-text-button-values();
+  $tokens: tokens.md-comp-text-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-text-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     --_container-color: none;

diff --git a/checkbox/internal/_checkbox.scss b/checkbox/internal/_checkbox.scss
@@ -47,35 +47,26 @@ $_checkmark-bottom-left: 7px, -14px;
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-checkbox-values();
+  $tokens: tokens.md-comp-checkbox-values(
+    $exclude-custom-properties: false,
+  );
 
   // Support logical shape properties
   $container-shape: map.get($tokens, 'container-shape');
-  $tokens: map.set(
-    $tokens,
-    'container-shape-start-start',
-    var(--md-checkbox-container-shape, #{$container-shape})
-  );
-  $tokens: map.set(
-    $tokens,
-    'container-shape-start-end',
-    var(--md-checkbox-container-shape, #{$container-shape})
-  );
-  $tokens: map.set(
-    $tokens,
-    'container-shape-end-end',
-    var(--md-checkbox-container-shape, #{$container-shape})
-  );
-  $tokens: map.set(
+  $tokens: map.merge(
     $tokens,
-    'container-shape-end-start',
-    var(--md-checkbox-container-shape, #{$container-shape})
+    (
+      'container-shape-start-start':
+        var(--md-checkbox-container-shape-start-start, #{$container-shape}),
+      'container-shape-start-end':
+        var(--md-checkbox-container-shape-start-end, #{$container-shape}),
+      'container-shape-end-end':
+        var(--md-checkbox-container-shape-end-end, #{$container-shape}),
+      'container-shape-end-start':
+        var(--md-checkbox-container-shape-end-start, #{$container-shape}),
+    )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-checkbox-#{$token}, #{$value}));
-  }
-
   :host {
     border-start-start-radius: map.get($tokens, 'container-shape-start-start');
     border-start-end-radius: map.get($tokens, 'container-shape-start-end');

diff --git a/chips/internal/_assist-chip.scss b/chips/internal/_assist-chip.scss
@@ -33,11 +33,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-assist-chip-values();
+  $tokens: tokens.md-comp-assist-chip-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-assist-chip-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/chips/internal/_filter-chip.scss b/chips/internal/_filter-chip.scss
@@ -33,11 +33,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filter-chip-values();
+  $tokens: tokens.md-comp-filter-chip-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filter-chip-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/chips/internal/_input-chip.scss b/chips/internal/_input-chip.scss
@@ -33,11 +33,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-input-chip-values();
+  $tokens: tokens.md-comp-input-chip-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-input-chip-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/chips/internal/_suggestion-chip.scss b/chips/internal/_suggestion-chip.scss
@@ -33,11 +33,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-suggestion-chip-values();
+  $tokens: tokens.md-comp-suggestion-chip-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-suggestion-chip-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -36,10 +36,9 @@
 @mixin styles() {
   $md-sys-color: tokens.md-sys-color-values-light();
   $md-sys-motion: tokens.md-sys-motion-values();
-  $tokens: tokens.md-comp-dialog-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-dialog-values(
+    $exclude-custom-properties: false,
+  );
 
   // Support logical shape properties
   $tokens: map.merge(

diff --git a/divider/internal/_divider.scss b/divider/internal/_divider.scss
@@ -26,10 +26,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-divider-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-divider-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-divider-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     box-sizing: border-box;

diff --git a/elevation/internal/_elevation.scss b/elevation/internal/_elevation.scss
@@ -26,10 +26,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevation-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-elevation-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-elevation-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     display: flex;

diff --git a/fab/internal/_fab-branded.scss b/fab/internal/_fab-branded.scss
@@ -37,11 +37,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-fab-branded-values();
+  $tokens: tokens.md-comp-fab-branded-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-fab-branded-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/fab/internal/_fab.scss b/fab/internal/_fab.scss
@@ -44,11 +44,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-fab-values();
+  $tokens: tokens.md-comp-fab-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-fab-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

diff --git a/field/internal/_filled-field.scss b/field/internal/_filled-field.scss
@@ -41,14 +41,25 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-field-values();
+  $tokens: tokens.md-comp-filled-field-values(
+    $exclude-custom-properties: false,
+  );
 
   @layer styles {
     :host {
       @each $token, $value in $tokens {
         @if $token == 'container-shape' {
           // Support logical shape properties. Filled field has a default oblong
           // shape, which is why the fallback value is unique per corner.
+
+          // Get the raw value without the container-shape custom property.
+          $value: map.get(
+            tokens.md-comp-filled-field-values(
+              $exclude-custom-properties: true,
+            ),
+            'container-shape'
+          );
+
           --_container-shape-start-start: var(
             --md-filled-field-container-shape-start-start,
             var(--md-filled-field-container-shape, #{list.nth($value, 1)})
@@ -66,7 +77,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
             var(--md-filled-field-container-shape, #{list.nth($value, 4)})
           );
         } @else {
-          --_#{$token}: var(--md-filled-field-#{$token}, #{$value});
+          --_#{$token}: #{$value};
         }
       }
     }

diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss
@@ -36,12 +36,14 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-field-values();
+  $tokens: tokens.md-comp-outlined-field-values(
+    $exclude-custom-properties: false,
+  );
 
   @layer styles {
     :host {
       @each $token, $value in $tokens {
-        --_#{$token}: var(--md-outlined-field-#{$token}, #{$value});
+        --_#{$token}: #{$value};
       }
 
       // Support logical shape properties

diff --git a/focus/internal/_focus-ring.scss b/focus/internal/_focus-ring.scss
@@ -31,39 +31,29 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-focus-ring-values();
-
-  $active-width: var(
-    --md-focus-ring-active-width,
-    #{map.get($tokens, 'active-width')}
-  );
-  $color: var(--md-focus-ring-color, #{map.get($tokens, 'color')});
-  $duration: var(--md-focus-ring-duration, #{map.get($tokens, 'duration')});
-  $width: var(--md-focus-ring-width, #{map.get($tokens, 'width')});
-  $inward-offset: var(
-    --md-focus-ring-inward-offset,
-    #{map.get($tokens, 'inward-offset')}
-  );
-  $outward-offset: var(
-    --md-focus-ring-outward-offset,
-    #{map.get($tokens, 'outward-offset')}
+  $tokens: tokens.md-comp-focus-ring-values(
+    $exclude-custom-properties: false,
   );
+
+  $active-width: map.get($tokens, 'active-width');
+  $color: map.get($tokens, 'color');
+  $duration: map.get($tokens, 'duration');
+  $width: map.get($tokens, 'width');
+  $inward-offset: map.get($tokens, 'inward-offset');
+  $outward-offset: map.get($tokens, 'outward-offset');
   // Support logical shape properties
   $start-start: var(
     --md-focus-ring-shape-start-start,
-    var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
+    #{map.get($tokens, 'shape')}
   );
   $start-end: var(
     --md-focus-ring-shape-start-end,
-    var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
-  );
-  $end-end: var(
-    --md-focus-ring-shape-end-end,
-    var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
+    #{map.get($tokens, 'shape')}
   );
+  $end-end: var(--md-focus-ring-shape-end-end, #{map.get($tokens, 'shape')});
   $end-start: var(
     --md-focus-ring-shape-end-start,
-    var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
+    #{map.get($tokens, 'shape')}
   );
 
   :host {

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
@@ -26,10 +26,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-icon-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-icon-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     font-size: map.get($tokens, 'size');