feat(typography): add system custom properties for typography

PiperOrigin-RevId: 522698682
material-components · Apr 7, 2023 · bcfed09 · bcfed09
1 parent 7368e2a
commit bcfed09
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/tokens/_md-ref-typeface.scss b/tokens/_md-ref-typeface.scss
@@ -3,10 +3,32 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use './v0_172/md-ref-typeface';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'brand',
+  'plain',
+  // go/keep-sorted end
+);
+
 @function values($exclude-hardcoded-values: false) {
-  @return md-ref-typeface.values($exclude-hardcoded-values);
+  $tokens: md-ref-typeface.values($exclude-hardcoded-values);
+
+  @each $token in $supported-tokens {
+    $value: map.get($tokens, $token);
+    @if $value != null {
+      $tokens: map.set(
+        $tokens,
+        $token,
+        var(--md-ref-typeface-#{$token}, #{$value})
+      );
+    }
+  }
+  @return $tokens;
 }
diff --git a/tokens/_md-sys-typescale.scss b/tokens/_md-sys-typescale.scss
@@ -3,6 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use './md-ref-typeface';
 @use './v0_172/md-sys-typescale';
@@ -12,6 +15,37 @@ $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
+$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'
+);
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-sys-typescale.values($deps, $exclude-hardcoded-values);
+  $tokens: md-sys-typescale.values($deps, $exclude-hardcoded-values);
+
+  // TODO(b/271876162): Remove when the token compiler emits these custom properties
+  @each $token in $supported-tokens {
+    $value: map.get($tokens, $token);
+    @if $value != null {
+      $tokens: map.set(
+        $tokens,
+        $token,
+        var(--md-sys-typescale-#{$token}, #{$value})
+      );
+    }
+  }
+  @return $tokens;
 }