chore: update components to use custom properties from tokens

PiperOrigin-RevId: 601597083

Author: asyncliz

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

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

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

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;

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;

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');

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

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

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

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