@material/web 1.2.0 → 1.2.1-nightly.84536d7.0

package/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

package/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

package/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

package/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;

package/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;

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

package/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

package/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

package/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

package/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

package/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(

package/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;

package/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;

package/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

package/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

package/field/internal/_filled-field.scss

@@ -41,7 +41,9 @@ $_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 {
@@ -49,6 +51,15 @@ $_md-sys-motion: tokens.md-sys-motion-values();
         @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};
         }
       }
     }

package/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

package/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 {

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

package/iconbutton/internal/_filled-icon-button.scss

@@ -35,11 +35,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-icon-button-values();
+  $tokens: tokens.md-comp-filled-icon-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filled-icon-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

package/iconbutton/internal/_filled-tonal-icon-button.scss

@@ -37,11 +37,13 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
+  $tokens: tokens.md-comp-filled-tonal-icon-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filled-tonal-icon-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

package/iconbutton/internal/_icon-button.scss

@@ -28,11 +28,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-icon-button-values();
+  $tokens: tokens.md-comp-icon-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-icon-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // These custom properties are not used, so set defaults so token tests pass

package/iconbutton/internal/_outlined-icon-button.scss

@@ -36,11 +36,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-icon-button-values();
+  $tokens: tokens.md-comp-outlined-icon-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-icon-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

package/labs/card/internal/_elevated-card.scss

@@ -25,11 +25,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevated-card-values();
+  $tokens: tokens.md-comp-elevated-card-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-elevated-card-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
   }
 }

package/labs/card/internal/_filled-card.scss

@@ -25,11 +25,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-card-values();
+  $tokens: tokens.md-comp-filled-card-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-filled-card-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
   }
 }

package/labs/card/internal/_outlined-card.scss

@@ -25,11 +25,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-card-values();
+  $tokens: tokens.md-comp-outlined-card-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-card-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
   }
 

package/labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss

@@ -25,11 +25,13 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-segmented-button-values();
+  $tokens: tokens.md-comp-outlined-segmented-button-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-segmented-button-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     // Support logical shape properties

package/list/internal/_list.scss

@@ -27,10 +27,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-list-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-list-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     background: map.get($tokens, 'container-color');

package/list/internal/listitem/_list-item.scss

@@ -29,10 +29,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-list-item-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-list-item-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-list-item-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     border-radius: map.get($tokens, 'container-shape');

package/menu/internal/_menu.scss

@@ -31,10 +31,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-menu-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-menu-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @include elevation.theme(

package/menu/internal/menuitem/_menu-item.scss

@@ -31,10 +31,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-menu-item-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-menu-item-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     border-radius: map.get($tokens, 'container-shape');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "1.2.0",
+  "version": "1.2.1-nightly.84536d7.0",
   "publishConfig": {
     "access": "public"
   },

package/progress/internal/_circular-progress.scss

@@ -24,7 +24,9 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-circular-progress-values();
+  $tokens: tokens.md-comp-circular-progress-values(
+    $exclude-custom-properties: false,
+  );
 
   // If changing this value, make sure to change $size-without-padding in the
   // circular-progress tokens.
@@ -50,7 +52,7 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-circular-progress-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     display: inline-flex;

package/progress/internal/_linear-progress.scss

@@ -31,11 +31,13 @@ $_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
 $_indeterminate-duration: 2s;
 
 @mixin styles() {
-  $tokens: tokens.md-comp-linear-progress-values();
+  $tokens: tokens.md-comp-linear-progress-values(
+    $exclude-custom-properties: false,
+  );
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-linear-progress-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     border-radius: var(--_track-shape);

package/radio/internal/_radio.scss

@@ -31,10 +31,9 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-radio-values();
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));
-  }
+  $tokens: tokens.md-comp-radio-values(
+    $exclude-custom-properties: false,
+  );
 
   @layer {
     :host {