fix(button): remove font shorthand tokens

BREAKING CHANGE: replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563153211
material-components · Sep 6, 2023 · 8894c20 · 8894c20
1 parent c864d3b
commit 8894c20
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 90 deletions.
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
@@ -16,6 +16,10 @@
     display: inline-flex;
     height: var(--_container-height);
     outline: none;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
     -webkit-tap-highlight-color: transparent;
     // Override vertical-align with shortest value "top". Vertical-align's
     // default "baseline" value causes buttons to be misaligned next to each
@@ -69,7 +73,7 @@
     position: relative;
     z-index: 0; // Place content on top of elevation and ripple
     height: 100%;
-    font: var(--_label-text-type);
+    font: inherit;
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
     padding-inline-start: var(--_leading-space);

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -408,11 +408,11 @@ of color, typography, and shape.
 ### Elevated button tokens
 
 Token                                   | Default value
---------------------------------------- | -------------------------------
+--------------------------------------- | -------------------------------------
 `--md-elevated-button-container-color`  | `--md-sys-color-surface`
 `--md-elevated-button-container-shape`  | `9999px`
 `--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
-`--md-elevated-button-label-text-type`  | `500 0.875rem/1.25rem "Roboto"`
+`--md-elevated-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)
     <!-- {.external} -->
@@ -438,7 +438,7 @@ Token                                   | Default value
       .styled-example {
         background-color: white;
         --md-elevated-button-container-shape: 0px;
-        --md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-elevated-button-label-text-font: system-ui;
         --md-sys-color-surface-container-low: #FAFDFC;
         --md-sys-color-primary: #191C1C;
       }
@@ -456,7 +456,7 @@ Token                                   | Default value
 <style>
 :root {
   --md-elevated-button-container-shape: 0px;
-  --md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+  --md-elevated-button-label-text-font: system-ui;
   --md-sys-color-surface-container-low: #FAFDFC;
   --md-sys-color-primary: #191C1C;
 }
@@ -468,11 +468,11 @@ Token                                   | Default value
 ### Filled button tokens
 
 Token                                 | Default value
-------------------------------------- | -------------------------------
+------------------------------------- | -------------------------------------
 `--md-filled-button-container-color`  | `--md-sys-color-primary`
 `--md-filled-button-container-shape`  | `9999px`
 `--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
-`--md-filled-button-label-text-type`  | `500 0.875rem/1.25rem "Roboto"`
+`--md-filled-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)
     <!-- {.external} -->
@@ -498,7 +498,7 @@ Token                                 | Default value
       .styled-example {
         background-color: white;
         --md-filled-button-container-shape: 0px;
-        --md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-filled-button-label-text-font: system-ui;
         --md-sys-color-primary: #006A6A;
         --md-sys-color-on-primary: #FFFFFF;
       }
@@ -516,7 +516,7 @@ Token                                 | Default value
 <style>
 :root {
   --md-filled-button-container-shape: 0px;
-  --md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+  --md-filled-button-label-text-font: system-ui;
   --md-sys-color-primary: #006A6A;
   --md-sys-color-on-primary: #FFFFFF;
 }
@@ -532,7 +532,7 @@ Token                                       | Default value
 `--md-filled-tonal-button-container-color`  | `--md-sys-color-secondary-container`
 `--md-filled-tonal-button-container-shape`  | `9999px`
 `--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
-`--md-filled-tonal-button-label-text-type`  | `500 0.875rem/1.25rem "Roboto"`
+`--md-filled-tonal-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
     <!-- {.external} -->
@@ -558,7 +558,7 @@ Token                                       | Default value
       .styled-example {
         background-color: white;
         --md-filled-tonal-button-container-shape: 0px;
-        --md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-filled-tonal-button-label-text-font: system-ui;
         --md-sys-color-secondary-container: #CCE8E7;
         --md-sys-color-on-secondary-container: #051F1F;
       }
@@ -576,7 +576,7 @@ Token                                       | Default value
 <style>
 :root {
   --md-filled-tonal-button-container-shape: 0px;
-  --md-filled-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+  --md-filled-tonal-button-label-text-font: system-ui;
   --md-sys-color-secondary-container: #CCE8E7;
   --md-sys-color-on-secondary-container: #051F1F;
 }
@@ -588,11 +588,11 @@ Token                                       | Default value
 ### Outlined button tokens
 
 Token                                   | Default value
---------------------------------------- | -------------------------------
+--------------------------------------- | -------------------------------------
 `--md-outlined-button-outline-color`    | `--md-sys-color-outline`
 `--md-outlined-button-container-shape`  | `9999px`
 `--md-outlined-button-label-text-color` | `--md-sys-color-primary`
-`--md-outlined-button-label-text-type`  | `500 0.875rem/1.25rem "Roboto"`
+`--md-outlined-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)
     <!-- {.external} -->
@@ -618,7 +618,7 @@ Token                                   | Default value
       .styled-example {
         background-color: white;
         --md-outlined-button-container-shape: 0px;
-        --md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-outlined-button-label-text-font: system-ui;
         --md-sys-color-primary: #006A6A;
         --md-sys-color-outline: #6F7979;
       }
@@ -636,7 +636,7 @@ Token                                   | Default value
 <style>
 :root {
   --md-outlined-button-container-shape: 0px;
-  --md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+  --md-outlined-button-label-text-font: system-ui;
   --md-sys-color-primary: #006A6A;
   --md-sys-color-outline: #6F7979;
 }
@@ -648,9 +648,9 @@ Token                                   | Default value
 ### Text button tokens
 
 Token                               | Default value
------------------------------------ | -------------------------------
+----------------------------------- | -------------------------------------
 `--md-text-button-label-text-color` | `--md-sys-color-primary`
-`--md-text-button-label-text-type`  | `500 0.875rem/1.25rem "Roboto"`
+`--md-text-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)
     <!-- {.external} -->
@@ -675,7 +675,7 @@ Token                               | Default value
     <style>
       .styled-example {
         background-color: white;
-        --md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-text-button-label-text-font: system-ui;
         --md-sys-color-primary: #006A6A;
       }
     </style>
@@ -691,7 +691,7 @@ Token                               | Default value
 ```html
 <style>
 :root {
-  --md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
+  --md-text-button-label-text-font: system-ui;
   --md-sys-color-primary: #006A6A;
 }
 </style>

diff --git a/tokens/_md-comp-elevated-button.scss b/tokens/_md-comp-elevated-button.scss
@@ -41,7 +41,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
@@ -60,11 +63,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -108,13 +108,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-comp-filled-button.scss b/tokens/_md-comp-filled-button.scss
@@ -41,7 +41,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
@@ -60,11 +63,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -108,13 +108,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-comp-filled-tonal-button.scss b/tokens/_md-comp-filled-tonal-button.scss
@@ -41,7 +41,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'pressed-container-elevation',
   'pressed-icon-color',
@@ -60,11 +63,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -108,13 +108,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-comp-outlined-button.scss b/tokens/_md-comp-outlined-button.scss
@@ -34,7 +34,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'outline-color',
   'outline-width',
@@ -57,11 +60,8 @@ $unsupported-tokens: (
   'focus-state-layer-color',
   'focus-state-layer-opacity',
   'hover-outline-color',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -104,13 +104,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-comp-text-button.scss b/tokens/_md-comp-text-button.scss
@@ -32,7 +32,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'pressed-icon-color',
   'pressed-label-text-color',
@@ -50,11 +53,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -97,13 +97,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove this when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-ref-typeface.scss b/tokens/_md-ref-typeface.scss
@@ -14,6 +14,9 @@ $supported-tokens: (
   // go/keep-sorted start
   'brand',
   'plain',
+  'weight-bold',
+  'weight-medium',
+  'weight-regular',
   // go/keep-sorted end
 );