From 1bc73d2e489f12d5822f779733a2ff086ddaf778 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Fri, 7 Apr 2023 17:45:33 -0700
Subject: [PATCH] feat(all): use system typography tokens in components

PiperOrigin-RevId: 522723617
---
 tokens/_md-comp-assist-chip.scss               |  8 ++++++++
 tokens/_md-comp-badge.scss                     |  7 +++++++
 tokens/_md-comp-dialog.scss                    |  9 +++++++++
 tokens/_md-comp-elevated-button.scss           |  8 ++++++++
 tokens/_md-comp-extended-fab-branded.scss      |  7 +++++++
 tokens/_md-comp-extended-fab-primary.scss      |  7 +++++++
 tokens/_md-comp-extended-fab-secondary.scss    |  7 +++++++
 tokens/_md-comp-extended-fab-surface.scss      |  7 +++++++
 tokens/_md-comp-extended-fab-tertiary.scss     |  7 +++++++
 tokens/_md-comp-filled-button.scss             |  8 ++++++++
 tokens/_md-comp-filled-text-field.scss         |  9 +++++++++
 tokens/_md-comp-filled-tonal-button.scss       |  8 ++++++++
 tokens/_md-comp-filter-chip.scss               |  8 ++++++++
 tokens/_md-comp-input-chip.scss                |  8 ++++++++
 tokens/_md-comp-list.scss                      | 17 +++++++++++++++++
 tokens/_md-comp-outlined-button.scss           |  8 ++++++++
 tokens/_md-comp-outlined-segmented-button.scss |  9 +++++++++
 tokens/_md-comp-outlined-text-field.scss       |  9 +++++++++
 tokens/_md-comp-primary-navigation-tab.scss    |  9 +++++++++
 tokens/_md-comp-secondary-navigation-tab.scss  |  8 ++++++++
 tokens/_md-comp-slider.scss                    |  9 +++++++++
 tokens/_md-comp-suggestion-chip.scss           |  8 ++++++++
 tokens/_md-comp-text-button.scss               |  8 ++++++++
 23 files changed, 193 insertions(+)

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
index 40e277cab3..706ea3beb6 100644
--- a/tokens/_md-comp-assist-chip.scss
+++ b/tokens/_md-comp-assist-chip.scss
@@ -103,6 +103,14 @@ $_default: (
     $renamed-tokens: $renamed-tokens
   );
 
+  // 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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-badge.scss b/tokens/_md-comp-badge.scss
index 1a60b81ca3..a85646ede5 100644
--- a/tokens/_md-comp-badge.scss
+++ b/tokens/_md-comp-badge.scss
@@ -30,5 +30,12 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-badge.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'large-label-text-type': map.get($deps, 'md-sys-typescale', 'label-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-dialog.scss b/tokens/_md-comp-dialog.scss
index 6f1c490e9d..8962365c63 100644
--- a/tokens/_md-comp-dialog.scss
+++ b/tokens/_md-comp-dialog.scss
@@ -39,5 +39,14 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-dialog.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'action-label-text-type':
+        map.get($deps, 'md-sys-typescale', 'label-large'),
+      'headline-type': map.get($deps, 'md-sys-typescale', 'headline-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-elevated-button.scss b/tokens/_md-comp-elevated-button.scss
index 2c8ce357be..a4612125bf 100644
--- a/tokens/_md-comp-elevated-button.scss
+++ b/tokens/_md-comp-elevated-button.scss
@@ -97,6 +97,14 @@ $_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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-extended-fab-branded.scss b/tokens/_md-comp-extended-fab-branded.scss
index ae2c632622..cc0c004c29 100644
--- a/tokens/_md-comp-extended-fab-branded.scss
+++ b/tokens/_md-comp-extended-fab-branded.scss
@@ -34,5 +34,12 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return md-comp-extended-fab-branded.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // 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-extended-fab-primary.scss b/tokens/_md-comp-extended-fab-primary.scss
index bc9cde0fe1..34fac7944a 100644
--- a/tokens/_md-comp-extended-fab-primary.scss
+++ b/tokens/_md-comp-extended-fab-primary.scss
@@ -34,5 +34,12 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return md-comp-extended-fab-primary.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // 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-extended-fab-secondary.scss b/tokens/_md-comp-extended-fab-secondary.scss
index 4953b82325..e7911b6931 100644
--- a/tokens/_md-comp-extended-fab-secondary.scss
+++ b/tokens/_md-comp-extended-fab-secondary.scss
@@ -37,5 +37,12 @@ $_unsupported-tokens: (
     $exclude-hardcoded-values
   );
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // 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-extended-fab-surface.scss b/tokens/_md-comp-extended-fab-surface.scss
index f1f35c0bfd..b07e0a1699 100644
--- a/tokens/_md-comp-extended-fab-surface.scss
+++ b/tokens/_md-comp-extended-fab-surface.scss
@@ -34,5 +34,12 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return md-comp-extended-fab-surface.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // 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-extended-fab-tertiary.scss b/tokens/_md-comp-extended-fab-tertiary.scss
index b6a6f5ebbd..e26b1ae6c4 100644
--- a/tokens/_md-comp-extended-fab-tertiary.scss
+++ b/tokens/_md-comp-extended-fab-tertiary.scss
@@ -37,5 +37,12 @@ $_unsupported-tokens: (
     $exclude-hardcoded-values
   );
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // 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
index ba61649f5f..9f91b08803 100644
--- a/tokens/_md-comp-filled-button.scss
+++ b/tokens/_md-comp-filled-button.scss
@@ -97,6 +97,14 @@ $_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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss
index 7d1e38c41c..9ce22db19a 100644
--- a/tokens/_md-comp-filled-text-field.scss
+++ b/tokens/_md-comp-filled-text-field.scss
@@ -42,5 +42,14 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-filled-text-field.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-filled-tonal-button.scss b/tokens/_md-comp-filled-tonal-button.scss
index 9c0496deb1..0a7e58aaf0 100644
--- a/tokens/_md-comp-filled-tonal-button.scss
+++ b/tokens/_md-comp-filled-tonal-button.scss
@@ -97,6 +97,14 @@ $_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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     // TODO: change to filled-tonal-button
     $tokens: map.set(
diff --git a/tokens/_md-comp-filter-chip.scss b/tokens/_md-comp-filter-chip.scss
index 4b890aecb8..eff86030c3 100644
--- a/tokens/_md-comp-filter-chip.scss
+++ b/tokens/_md-comp-filter-chip.scss
@@ -207,6 +207,14 @@ $_default: (
     $renamed-tokens: $renamed-tokens
   );
 
+  // 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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-input-chip.scss b/tokens/_md-comp-input-chip.scss
index a45e0e2043..9e296b264f 100644
--- a/tokens/_md-comp-input-chip.scss
+++ b/tokens/_md-comp-input-chip.scss
@@ -200,6 +200,14 @@ $_default: (
     $renamed-tokens: $renamed-tokens
   );
 
+  // 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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-list.scss b/tokens/_md-comp-list.scss
index e9b855ef09..5f1f0019fd 100644
--- a/tokens/_md-comp-list.scss
+++ b/tokens/_md-comp-list.scss
@@ -54,5 +54,22 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-list.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'list-item-label-text-type':
+        map.get($deps, 'md-sys-typescale', 'body-large'),
+      'list-item-leading-avatar-label-type':
+        map.get($deps, 'md-sys-typescale', 'title-medium'),
+      'list-item-overline-type':
+        map.get($deps, 'md-sys-typescale', 'label-small'),
+      'list-item-supporting-text-type':
+        map.get($deps, 'md-sys-typescale', 'body-medium'),
+      'list-item-trailing-supporting-text-type':
+        map.get($deps, 'md-sys-typescale', 'label-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-outlined-button.scss b/tokens/_md-comp-outlined-button.scss
index 213990b743..715f3a113e 100644
--- a/tokens/_md-comp-outlined-button.scss
+++ b/tokens/_md-comp-outlined-button.scss
@@ -93,6 +93,14 @@ $_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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-outlined-segmented-button.scss b/tokens/_md-comp-outlined-segmented-button.scss
index d82a6af086..9219d62fa0 100644
--- a/tokens/_md-comp-outlined-segmented-button.scss
+++ b/tokens/_md-comp-outlined-segmented-button.scss
@@ -34,5 +34,14 @@ $_unsupported-tokens: (
     $exclude-hardcoded-values
   );
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+
+  // 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-text-field.scss b/tokens/_md-comp-outlined-text-field.scss
index 4b83470615..85d989e1f1 100644
--- a/tokens/_md-comp-outlined-text-field.scss
+++ b/tokens/_md-comp-outlined-text-field.scss
@@ -40,5 +40,14 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-primary-navigation-tab.scss b/tokens/_md-comp-primary-navigation-tab.scss
index 7ed42de1a4..83358b7a55 100644
--- a/tokens/_md-comp-primary-navigation-tab.scss
+++ b/tokens/_md-comp-primary-navigation-tab.scss
@@ -37,5 +37,14 @@ $_unsupported-tokens: (
     $exclude-hardcoded-values
   );
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'with-label-text-label-text-type':
+        map.get($deps, 'md-sys-typescale', 'title-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-secondary-navigation-tab.scss b/tokens/_md-comp-secondary-navigation-tab.scss
index 803adadac7..1e8a3be606 100644
--- a/tokens/_md-comp-secondary-navigation-tab.scss
+++ b/tokens/_md-comp-secondary-navigation-tab.scss
@@ -37,5 +37,13 @@ $_unsupported-tokens: (
     $exclude-hardcoded-values
   );
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'with-label-text-label-text-type':
+        map.get($deps, 'md-sys-typescale', 'title-small'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-slider.scss b/tokens/_md-comp-slider.scss
index a6dae74e15..4d423c9e34 100644
--- a/tokens/_md-comp-slider.scss
+++ b/tokens/_md-comp-slider.scss
@@ -34,5 +34,14 @@ $_unsupported-tokens: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-slider.values($deps, $exclude-hardcoded-values);
   $tokens: map.remove($tokens, $_unsupported-tokens...);
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'label-label-text-type':
+        map.get($deps, 'md-sys-typescale', 'label-medium'),
+    )
+  );
   @return $tokens;
 }
diff --git a/tokens/_md-comp-suggestion-chip.scss b/tokens/_md-comp-suggestion-chip.scss
index 2f682891f4..5534fa703f 100644
--- a/tokens/_md-comp-suggestion-chip.scss
+++ b/tokens/_md-comp-suggestion-chip.scss
@@ -103,6 +103,14 @@ $_default: (
     $renamed-tokens: $renamed-tokens
   );
 
+  // 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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,
diff --git a/tokens/_md-comp-text-button.scss b/tokens/_md-comp-text-button.scss
index ad202632c8..3817d44183 100644
--- a/tokens/_md-comp-text-button.scss
+++ b/tokens/_md-comp-text-button.scss
@@ -86,6 +86,14 @@ $_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'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,