fix(Button): update typography tokens to match design

- create missing button small token and use in component - update snapshots
chanzuckerberg · Jul 16, 2024 · c28d63f · c28d63f
1 parent d76d5bb
commit c28d63f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -132,8 +132,9 @@
   "eds-theme-typography-overline-sm": "var(--eds-typography-preset-012)",
   "eds-theme-typography-callout": "var(--eds-typography-preset-002-light)",
   "eds-theme-typography-breadcrumb": "var(--eds-typography-preset-009)",
-  "eds-theme-typography-button-lg": "var(--eds-typography-preset-006)",
-  "eds-theme-typography-button-md": "var(--eds-typography-preset-006)",
+  "eds-theme-typography-button-lg": "var(--eds-typography-preset-005)",
+  "eds-theme-typography-button-md": "var(--eds-typography-preset-005)",
+  "eds-theme-typography-button-sm": "var(--eds-typography-preset-009)",
   "eds-theme-typography-button-label": "var(--eds-typography-preset-006)",
   "eds-theme-typography-button-label-sm": "var(--eds-typography-preset-008-bold)",
   "eds-theme-typography-form-label": "var(--eds-typography-preset-006)",

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -87,8 +87,7 @@
 
 .button--sm {
   padding: calc(var(--eds-size-half) / 16 * 1rem) 1.33333333rem;
-  /* TODO: need eds-theme-typography-button-sm => preset-009 */
-  font: var(--eds-typography-preset-009);
+  font: var(--eds-theme-typography-button-sm);
 
   min-width: calc(var(--eds-size-6) / 16 * 1rem);
   max-width: calc(var(--eds-size-24) / 16 * 1rem);;

diff --git a/src/design-tokens/tier-3-component/buttons-typography.json b/src/design-tokens/tier-3-component/buttons-typography.json
@@ -4,10 +4,13 @@
       "typography": {
         "button": {
           "lg": {
-            "value": "var(--eds-typography-preset-006)"
+            "value": "var(--eds-typography-preset-005)"
           },
           "md": {
-            "value": "var(--eds-typography-preset-006)"
+            "value": "var(--eds-typography-preset-005)"
+          },
+          "sm": {
+            "value": "var(--eds-typography-preset-009)"
           },
           "label": {
             "@": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -287,8 +287,9 @@
   --eds-theme-typography-form-label: var(--eds-typography-preset-006);
   --eds-theme-typography-button-label-sm: var(--eds-typography-preset-008-bold); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-typography-button-label: var(--eds-typography-preset-006); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-typography-button-md: var(--eds-typography-preset-006);
-  --eds-theme-typography-button-lg: var(--eds-typography-preset-006);
+  --eds-theme-typography-button-sm: var(--eds-typography-preset-009);
+  --eds-theme-typography-button-md: var(--eds-typography-preset-005);
+  --eds-theme-typography-button-lg: var(--eds-typography-preset-005);
   --eds-theme-typography-breadcrumb: var(--eds-typography-preset-009);
   --eds-theme-typography-callout: var(--eds-typography-preset-002-light);
   --eds-theme-typography-overline-sm: var(--eds-typography-preset-012);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -262,8 +262,9 @@
         "callout": "var(--eds-typography-preset-002-light)",
         "breadcrumb": "var(--eds-typography-preset-009)",
         "button": {
-          "lg": "var(--eds-typography-preset-006)",
-          "md": "var(--eds-typography-preset-006)",
+          "lg": "var(--eds-typography-preset-005)",
+          "md": "var(--eds-typography-preset-005)",
+          "sm": "var(--eds-typography-preset-009)",
           "label": {
             "@": "var(--eds-typography-preset-006)",
             "sm": "var(--eds-typography-preset-008-bold)"