feat(tokens): add utility-class to typography

juntossomosmais · Mar 28, 2023 · 0cbd725 · 0cbd725
1 parent 300923a
commit 0cbd725
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/packages/tokens/rollup.config.mjs b/packages/tokens/rollup.config.mjs
@@ -2,10 +2,10 @@ import autoprefixer from 'autoprefixer'
 import postcss from 'rollup-plugin-postcss'
 
 export default {
-  input: 'src/tokens.scss',
+  input: 'src/index.scss',
   output: [
     {
-      file: `dist/tokens.css`
+      file: `dist/styles.css`
     },
   ],
   plugins: [

diff --git a/packages/tokens/src/index.scss b/packages/tokens/src/index.scss
@@ -0,0 +1,3 @@
+@import 'tokens';
+@import 'typography';
+
diff --git a/packages/tokens/src/typography.scss b/packages/tokens/src/typography.scss
@@ -0,0 +1,29 @@
+@mixin typography-generator($variable-name) {
+  .jsm-#{$variable-name} {
+    font: var(--#{$variable-name});
+    letter-spacing: var(--#{$variable-name}-letter);
+  }
+}
+
+@include typography-generator('title-giant');
+@include typography-generator('title-display');
+@include typography-generator('title-headline-xxlarge');
+@include typography-generator('title-headline-xlarge');
+@include typography-generator('title-headline-large');
+@include typography-generator('title-headline-medium');
+@include typography-generator('title-headline-small');
+@include typography-generator('title-headline-xsmall');
+@include typography-generator('text-subtitle-large');
+@include typography-generator('text-subtitle-medium');
+@include typography-generator('text-body-large');
+@include typography-generator('text-body-medium');
+@include typography-generator('text-body-small');
+@include typography-generator('text-link-large');
+@include typography-generator('text-link-medium');
+@include typography-generator('text-link-small');
+@include typography-generator('button-large');
+@include typography-generator('button-medium');
+@include typography-generator('text-caption');
+@include typography-generator('text-caption-focused');
+@include typography-generator('text-overline');
+@include typography-generator('text-badge');