fix(tokens)!: tokens.md-comp-*-values() include custom properties b…

…y default BREAKING CHANGE: Sass component tokens, such as `tokens.md-comp-checkbox-values()`, return `var(--md-<component>, <value>)` instead of just the CSS value. Use `$exclude-custom-properties: true` to remove them. PiperOrigin-RevId: 652550625
material-components · Jul 15, 2024 · 55b4650 · 55b4650
1 parent a2aa5a3
commit 55b4650
Show file tree

Hide file tree

Showing 90 changed files with 134 additions and 267 deletions.
diff --git a/button/internal/_elevated-button.scss b/button/internal/_elevated-button.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevated-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-elevated-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/button/internal/_filled-button.scss b/button/internal/_filled-button.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/button/internal/_filled-tonal-button.scss b/button/internal/_filled-tonal-button.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-tonal-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/button/internal/_outlined-button.scss b/button/internal/_outlined-button.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/button/internal/_text-button.scss b/button/internal/_text-button.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-text-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-text-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/checkbox/internal/_checkbox.scss b/checkbox/internal/_checkbox.scss
@@ -38,9 +38,7 @@ $_checkmark-bottom-left: 7px, -14px;
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-checkbox-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-checkbox-values();
 
   :host {
     border-start-start-radius: map.get($tokens, 'container-shape-start-start');

diff --git a/chips/internal/_assist-chip.scss b/chips/internal/_assist-chip.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-assist-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-assist-chip-values();
 
   :host {
     // Only use the logical properties.

diff --git a/chips/internal/_filter-chip.scss b/chips/internal/_filter-chip.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filter-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filter-chip-values();
 
   :host {
     // Only use the logical properties.

diff --git a/chips/internal/_input-chip.scss b/chips/internal/_input-chip.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-input-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-input-chip-values();
 
   :host {
     // Only use the logical properties.

diff --git a/chips/internal/_suggestion-chip.scss b/chips/internal/_suggestion-chip.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-suggestion-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-suggestion-chip-values();
 
   :host {
     // Only use the logical properties.

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -27,9 +27,7 @@
 @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(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-dialog-values();
 
   :host {
     border-start-start-radius: map.get($tokens, 'container-shape-start-start');

diff --git a/divider/internal/_divider.scss b/divider/internal/_divider.scss
@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-divider-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-divider-values();
 
   :host {
     box-sizing: border-box;

diff --git a/elevation/internal/_elevation.scss b/elevation/internal/_elevation.scss
@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevation-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-elevation-values();
 
   :host,
   .shadow,

diff --git a/fab/internal/_fab-branded.scss b/fab/internal/_fab-branded.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-fab-branded-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-fab-branded-values();
 
   :host {
     // Only use the logical properties.

diff --git a/fab/internal/_fab.scss b/fab/internal/_fab.scss
@@ -27,9 +27,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-fab-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-fab-values();
 
   :host {
     // Only use the logical properties.

diff --git a/field/internal/_filled-field.scss b/field/internal/_filled-field.scss
@@ -41,9 +41,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-field-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-field-values();
 
   @layer styles {
     :host {

diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss
@@ -36,9 +36,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-field-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-field-values();
 
   @layer styles {
     :host {

diff --git a/focus/internal/_focus-ring.scss b/focus/internal/_focus-ring.scss
@@ -27,9 +27,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-focus-ring-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-focus-ring-values();
 
   $active-width: map.get($tokens, 'active-width');
   $color: map.get($tokens, 'color');

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

diff --git a/iconbutton/internal/_filled-icon-button.scss b/iconbutton/internal/_filled-icon-button.scss
@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-icon-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/iconbutton/internal/_filled-tonal-icon-button.scss b/iconbutton/internal/_filled-tonal-icon-button.scss
@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/iconbutton/internal/_icon-button.scss b/iconbutton/internal/_icon-button.scss
@@ -28,9 +28,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-icon-button-values();
 
   :host {
     @each $token, $value in $tokens {

diff --git a/iconbutton/internal/_outlined-icon-button.scss b/iconbutton/internal/_outlined-icon-button.scss
@@ -27,9 +27,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-icon-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/labs/card/internal/_elevated-card.scss b/labs/card/internal/_elevated-card.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevated-card-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-elevated-card-values();
 
   :host {
     @each $token, $value in $tokens {

diff --git a/labs/card/internal/_filled-card.scss b/labs/card/internal/_filled-card.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-card-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-card-values();
 
   :host {
     @each $token, $value in $tokens {

diff --git a/labs/card/internal/_outlined-card.scss b/labs/card/internal/_outlined-card.scss
@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-card-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-card-values();
 
   :host {
     @each $token, $value in $tokens {

diff --git a/labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss b/labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss
@@ -28,9 +28,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-segmented-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-segmented-button-values();
 
   :host {
     // Only use the logical properties.

diff --git a/list/internal/_list.scss b/list/internal/_list.scss
@@ -27,9 +27,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-list-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-list-values();
 
   :host {
     background: map.get($tokens, 'container-color');

diff --git a/list/internal/listitem/_list-item.scss b/list/internal/listitem/_list-item.scss
@@ -29,9 +29,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-list-item-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-list-item-values();
 
   :host {
     border-radius: map.get($tokens, 'container-shape');

diff --git a/menu/internal/_menu.scss b/menu/internal/_menu.scss
@@ -31,9 +31,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-menu-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-menu-values();
 
   :host {
     @include elevation.theme(

diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss
@@ -31,9 +31,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-menu-item-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-menu-item-values();
 
   :host {
     border-radius: map.get($tokens, 'container-shape');

diff --git a/migrations/v2/README.md b/migrations/v2/README.md
@@ -39,3 +39,48 @@ const agreeCheckbox = document.querySelector(
 
 Note: Element APIs, such as `element.getAttribute('role')` and
 `element.ariaLabel` will continue to work as expected.
+
+## Sass `tokens.md-comp-*-values()` include custom properties by default
+
+**What changed?**
+
+Sass component token functions return a `var()` with the component's custom
+property, instead of just a value.
+
+```scss
+@use '@material/web/tokens';
+
+$checkbox-tokens: tokens.md-comp-checkbox-values();
+// (
+//   // 'icon-size': 18px, // Before
+//   'icon-size': var(--md-checkbox-icon-size, 18px), // After
+// )
+```
+
+**What broke?**
+
+Sass token values from `tokens.md-comp-*-values()` functions are `var()`
+functions instead of CSS values. This may introduce additional unnecessary CSS
+or break Sass.
+
+```scss
+@use '@material/web/tokens';
+
+$checkbox-tokens: tokens.md-comp-checkbox-values();
+
+$double-icon-size: math.mult(map.get($checkbox-tokens, 'icon-size'), 2);
+// @error var(--md-checkbox-icon-size, 18px) is not a number.
+```
+
+**How to fix?**
+
+Add the parameter `$exclude-custom-properties: true` to the values function.
+
+```scss
+@use '@material/web/tokens';
+
+$checkbox-tokens: tokens.md-comp-checkbox-values($exclude-custom-properties: true);
+// (
+//   'icon-size': 18px,
+// )
+```