fix(dialogs): remove font shorthand tokens

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

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -126,7 +126,10 @@
     color: var(--_headline-color);
     display: flex;
     flex-direction: column;
-    font: var(--_headline-type);
+    font-family: var(--_headline-font);
+    font-size: var(--_headline-size);
+    line-height: var(--_headline-line-height);
+    font-weight: var(--_headline-weight);
     position: relative;
   }
 
@@ -205,7 +208,10 @@
 
   .content {
     color: var(--_supporting-text-color);
-    font: var(--_supporting-text-type);
+    font-family: var(--_supporting-text-font);
+    font-size: var(--_supporting-text-size);
+    line-height: var(--_supporting-text-line-height);
+    font-weight: var(--_supporting-text-weight);
     height: min-content; // Needed for Safari
     position: relative;
   }

diff --git a/docs/components/dialog.md b/docs/components/dialog.md
@@ -190,9 +190,9 @@ Token                               | Default value
 ----------------------------------- | ---------------------------------------
 `--md-dialog-container-color`       | `--md-sys-color-surface-container-high`
 `--md-dialog-headline-color`        | `--md-sys-color-on-surface`
-`--md-dialog-headline-type`         | `--md-sys-typescale-headline-small`
+`--md-dialog-headline-font`         | `--md-sys-typescale-headline-small-font`
 `--md-dialog-supporting-text-color` | `--md-sys-color-on-surface-variant`
-`--md-dialog-supporting-text-type`  | `--md-sys-typescale-body-medium`
+`--md-dialog-supporting-text-font`  | `--md-sys-typescale-body-medium-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-dialog.scss)
     <!-- {.external} -->

diff --git a/tokens/_md-comp-dialog.scss b/tokens/_md-comp-dialog.scss
@@ -21,11 +21,17 @@ $supported-tokens: (
   'container-color',
   'container-shape',
   'headline-color',
-  'headline-type',
+  'headline-font',
+  'headline-line-height',
+  'headline-size',
+  'headline-weight',
   'icon-color',
   'icon-size',
   'supporting-text-color',
-  'supporting-text-type',
+  'supporting-text-font',
+  'supporting-text-line-height',
+  'supporting-text-size',
+  'supporting-text-weight',
   // go/keep-sorted end
 );
 
@@ -59,16 +65,10 @@ $unsupported-tokens: (
   'action-pressed-state-layer-opacity',
   'container-elevation',
   // Unused without a shadow color
-  'headline-font',
-  'headline-line-height',
-  'headline-size',
   'headline-tracking',
-  'headline-weight',
-  'supporting-text-font',
-  'supporting-text-line-height',
-  'supporting-text-size',
+  'headline-type',
   'supporting-text-tracking',
-  'supporting-text-weight',
+  'supporting-text-type',
   // go/keep-sorted end
 );
 
@@ -84,12 +84,5 @@ $unsupported-tokens: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'headline-type': map.get($deps, 'md-sys-typescale', 'headline-small'),
-    )
-  );
   @return $tokens;
 }