feat(all): use system typography tokens in components

PiperOrigin-RevId: 522723617
material-components · Apr 8, 2023 · 1bc73d2 · 1bc73d2
1 parent bcfed09
commit 1bc73d2
Show file tree

Hide file tree

Showing 23 changed files with 193 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,