fix(chips): remove font shorthand tokens

BREAKING CHANGE: replace `label-text-type` tokens with `label-text-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563161436
material-components · Sep 6, 2023 · 87ad1da · 87ad1da
1 parent 0c5a2a2
commit 87ad1da
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 65 deletions.
diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
@@ -141,7 +141,10 @@
     align-items: center;
     color: var(--_label-text-color);
     display: flex;
-    font: var(--_label-text-type);
+    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);
     height: 100%;
     text-overflow: ellipsis;
     user-select: none;

diff --git a/docs/components/chip.md b/docs/components/chip.md
@@ -348,12 +348,12 @@ of color, typography, and shape.
 ### Assist chip tokens
 
 Token                               | Default value
------------------------------------ | --------------------------------
+----------------------------------- | -------------------------------------
 `--md-assist-chip-outline-color`    | `--md-sys-color-outline`
 `--md-assist-chip-container-shape`  | `8px`
 `--md-assist-chip-icon-size`        | `18px`
 `--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
-`--md-assist-chip-label-text-type`  | `--md-sys-typescale-label-large`
+`--md-assist-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-assist-chip.scss)
     <!-- {.external} -->
@@ -369,7 +369,7 @@ Token                               | Default value
 <style>
 :root {
   --md-assist-chip-container-shape: 0px;
-  --md-assist-chip-label-text-type: 400 1rem system-ui;
+  --md-assist-chip-label-text-font: system-ui;
   --md-sys-color-outline: #6F7979;
   --md-sys-color-on-surface: #191C1C;
 }
@@ -387,7 +387,7 @@ Token                                       | Default value
 `--md-filter-chip-container-shape`          | `8px`
 `--md-filter-chip-icon-size`                | `18px`
 `--md-filter-chip-label-text-color`         | `--md-sys-color-on-surface`
-`--md-filter-chip-label-text-type`          | `--md-sys-typescale-label-large`
+`--md-filter-chip-label-text-font`          | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filter-chip.scss)
     <!-- {.external} -->
@@ -403,7 +403,7 @@ Token                                       | Default value
 <style>
 :root {
   --md-filter-chip-container-shape: 0px;
-  --md-filter-chip-label-text-type: 400 1rem system-ui;
+  --md-filter-chip-label-text-font: system-ui;
   --md-sys-color-outline: #6f7979;
   --md-sys-color-on-surface: #191c1c;
   --md-sys-color-secondary-container: #cce8e7;
@@ -416,12 +416,12 @@ Token                                       | Default value
 ### Input chip tokens
 
 Token                              | Default value
----------------------------------- | --------------------------------
+---------------------------------- | -------------------------------------
 `--md-input-chip-outline-color`    | `--md-sys-color-outline`
 `--md-input-chip-container-shape`  | `8px`
 `--md-input-chip-icon-size`        | `18px`
 `--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
-`--md-input-chip-label-text-type`  | `--md-sys-typescale-label-large`
+`--md-input-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-input-chip.scss)
     <!-- {.external} -->
@@ -437,7 +437,7 @@ Token                              | Default value
 <style>
 :root {
   --md-input-chip-container-shape: 0px;
-  --md-input-chip-label-text-type: 400 1rem system-ui;
+  --md-input-chip-label-text-font: system-ui;
   --md-sys-color-outline: #6f7979;
   --md-sys-color-on-surface: #191c1c;
 }
@@ -449,12 +449,12 @@ Token                              | Default value
 ### Suggestion chip tokens
 
 Token                                   | Default value
---------------------------------------- | --------------------------------
+--------------------------------------- | -------------------------------------
 `--md-suggestion-chip-outline-color`    | `--md-sys-color-outline`
 `--md-suggestion-chip-container-shape`  | `8px`
 `--md-suggestion-chip-icon-size`        | `18px`
 `--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
-`--md-suggestion-chip-label-text-type`  | `--md-sys-typescale-label-large`
+`--md-suggestion-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-suggestion-chip.scss)
     <!-- {.external} -->
@@ -470,7 +470,7 @@ Token                                   | Default value
 <style>
 :root {
   --md-suggestion-chip-container-shape: 0px;
-  --md-suggestion-chip-label-text-type: 400 1rem system-ui;
+  --md-suggestion-chip-label-text-font: system-ui;
   --md-sys-color-outline: #6f7979;
   --md-sys-color-on-surface: #191c1c;
 }

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -1,7 +1,7 @@
+//
 // Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
-//
 
 // go/keep-sorted start
 @use 'sass:map';
@@ -44,7 +44,10 @@ $supported-tokens: (
   'hover-state-layer-opacity',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-icon-color',
   'outline-color',
   'outline-width',
@@ -65,11 +68,8 @@ $unsupported-tokens: (
   'dragged-state-layer-opacity',
   '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
 );
 
@@ -107,13 +107,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-filter-chip.scss b/tokens/_md-comp-filter-chip.scss
@@ -51,7 +51,10 @@ $supported-tokens: (
   'hover-trailing-icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-icon-color',
   'outline-color',
   'outline-width',
@@ -95,11 +98,8 @@ $unsupported-tokens: (
   'focus-state-layer-color',
   'focus-state-layer-opacity',
   'hover-container-elevation',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   'pressed-container-elevation',
   'selected-dragged-label-text-color',
   'selected-dragged-leading-icon-color',
@@ -216,13 +216,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-input-chip.scss b/tokens/_md-comp-input-chip.scss
@@ -44,7 +44,10 @@ $supported-tokens: (
   'hover-trailing-icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-icon-color',
   'outline-color',
   'outline-width',
@@ -86,11 +89,8 @@ $unsupported-tokens: (
   'dragged-trailing-icon-color',
   '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',
   'selected-dragged-label-text-color',
   'selected-dragged-leading-icon-color',
   'selected-dragged-state-layer-color',
@@ -191,14 +191,6 @@ $_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'),
-    )
-  );
-
   // TODO(b/288199264): remove once input chip leading icon color is fixed
   $tokens: map.set(
     $tokens,

diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
@@ -44,7 +44,10 @@ $supported-tokens: (
   'hover-state-layer-opacity',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-icon-color',
   'outline-color',
   'outline-width',
@@ -65,11 +68,8 @@ $unsupported-tokens: (
   'dragged-state-layer-opacity',
   '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
 );
 
@@ -111,13 +111,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;
 }