feat(Typography): add typography-overline-lg (#1993)

- also mark of the non-sized token as deprecated
chanzuckerberg · Jun 13, 2024 · 36eb3c9 · 36eb3c9
1 parent c3ce70f
commit 36eb3c9
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 1 deletion.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -127,6 +127,7 @@
   "eds-theme-typography-caption-sm": "var(--eds-typography-preset-010-light)",
   "eds-theme-typography-caption-sm-bold": "var(--eds-typography-preset-010)",
   "eds-theme-typography-overline": "var(--eds-typography-preset-011)",
+  "eds-theme-typography-overline-lg": "var(--eds-typography-preset-005)",
   "eds-theme-typography-overline-md": "var(--eds-typography-preset-011)",
   "eds-theme-typography-overline-sm": "var(--eds-typography-preset-012)",
   "eds-theme-typography-callout": "var(--eds-typography-preset-002-light)",

diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
@@ -132,9 +132,14 @@
   font: var(--eds-theme-typography-caption-sm-bold);
 }
 .text--overline {
+  /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS." */
   font: var(--eds-theme-typography-overline);
   text-transform: uppercase;
 }
+.text--overline-lg {
+  font: var(--eds-theme-typography-overline-lg);
+  text-transform: uppercase;
+}
 .text--overline-md {
   font: var(--eds-theme-typography-overline-md);
   text-transform: uppercase;

diff --git a/src/design-tokens/tier-2-usage/typography.json b/src/design-tokens/tier-2-usage/typography.json
@@ -202,6 +202,9 @@
             "value": "var(--eds-typography-preset-011)",
             "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           },
+          "lg": {
+            "value": "var(--eds-typography-preset-005)"
+          },
           "md": {
             "value": "var(--eds-typography-preset-011)"
           },

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -290,6 +290,7 @@
   --eds-theme-typography-callout: var(--eds-typography-preset-002-light);
   --eds-theme-typography-overline-sm: var(--eds-typography-preset-012);
   --eds-theme-typography-overline-md: var(--eds-typography-preset-011);
+  --eds-theme-typography-overline-lg: var(--eds-typography-preset-005);
   --eds-theme-typography-overline: var(--eds-typography-preset-011); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-typography-caption-sm-bold: var(--eds-typography-preset-010);
   --eds-theme-typography-caption-sm: var(--eds-typography-preset-010-light);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -255,6 +255,7 @@
         },
         "overline": {
           "@": "var(--eds-typography-preset-011)",
+          "lg": "var(--eds-typography-preset-005)",
           "md": "var(--eds-typography-preset-011)",
           "sm": "var(--eds-typography-preset-012)"
         },

diff --git a/src/util/variant-types.ts b/src/util/variant-types.ts
@@ -80,7 +80,8 @@ export const presets = [
   'caption-md-bold',
   'caption-sm',
   'caption-sm-bold',
-  'overline',
+  'overline', // @deprecated This should not be used in code or design. It will be removed in a future version of EDS."
+  'overline-lg',
   'overline-md',
   'overline-sm',
   'callout',