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
2024-08-17 01:20:23 +03:00 · 2023-09-06 10:55:45 -07:00 · 2023-09-06 10:55:45 -07:00 · 8894c20c6b
commit 8894c20c6b
parent c864d3b638
9 changed files with 131 additions and 103 deletions
--- 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);
--- 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>
--- 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;
 }
--- 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;
 }
--- 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;
 }
--- 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;
 }
--- 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;
 }
--- 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
 );

--- a/tokens/_md-sys-typescale.scss
+++ b/tokens/_md-sys-typescale.scss
@ -11,26 +11,87 @@
@use './v0_172/md-sys-typescale';
 // go/keep-sorted end

-$_default: (
-  'md-ref-typeface': md-ref-typeface.values(),
+$supported-tokens: (
+  // go/keep-sorted start
+  'body-large',
+  'body-large-font',
+  'body-large-line-height',
+  'body-large-size',
+  'body-large-weight',
+  'body-medium',
+  'body-medium-font',
+  'body-medium-line-height',
+  'body-medium-size',
+  'body-small',
+  'body-small-font',
+  'body-small-line-height',
+  'body-small-size',
+  'body-small-weight',
+  'display-large',
+  'display-large-font',
+  'display-large-line-height',
+  'display-large-size',
+  'display-large-weight',
+  'display-medium',
+  'display-medium-font',
+  'display-medium-line-height',
+  'display-medium-size',
+  'display-medium-weight',
+  'display-small',
+  'display-small-font',
+  'display-small-line-height',
+  'display-small-size',
+  'display-small-weight',
+  'headline-large',
+  'headline-large-font',
+  'headline-large-line-height',
+  'headline-large-size',
+  'headline-large-weight',
+  'headline-medium',
+  'headline-medium-font',
+  'headline-medium-line-height',
+  'headline-medium-size',
+  'headline-medium-weight',
+  'headline-small',
+  'headline-small-font',
+  'headline-small-line-height',
+  'headline-small-size',
+  'headline-small-weight',
+  'label-large',
+  'label-large-font',
+  'label-large-line-height',
+  'label-large-size',
+  'label-large-weight',
+  'label-medium',
+  'label-medium-font',
+  'label-medium-line-height',
+  'label-medium-size',
+  'label-medium-weight',
+  'label-small',
+  'label-small-font',
+  'label-small-line-height',
+  'label-small-size',
+  'label-small-weight',
+  'title-large',
+  'title-large-font',
+  'title-large-line-height',
+  'title-large-size',
+  'title-large-weight',
+  'title-medium',
+  'title-medium-font',
+  'title-medium-line-height',
+  'title-medium-size',
+  'title-medium-weight',
+  'title-small',
+  'title-small-font',
+  'title-small-line-height',
+  'title-small-size',
+  'title-small-weight',
+  // go/keep-sorted end
 );

-$supported-tokens: (
-  'body-large',
-  'body-medium',
-  'body-small',
-  'display-large',
-  'display-medium',
-  'display-small',
-  'headline-large',
-  'headline-medium',
-  'headline-small',
-  'label-large',
-  'label-medium',
-  'label-small',
-  'title-large',
-  'title-medium',
-  'title-small'
+$_default: (
+  'md-ref-typeface': md-ref-typeface.values(),
 );

@function values($deps: $_default, $exclude-hardcoded-values: false) {