refactor: consistently use the typography, base it on px

nl-design-system · Oct 13, 2024 · 3185cc0 · 3185cc0
1 parent 04976df
commit 3185cc0
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 20 deletions.
diff --git a/.changeset/twenty-bags-pump.md b/.changeset/twenty-bags-pump.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": patch
+---
+
+Convert all `px` `font-size` design tokens to `rem`.
diff --git a/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json b/proprietary/design-tokens/src/brand/utrecht/typography.tokens.json
@@ -5,15 +5,15 @@
         "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" }
       },
       "scale": {
-        "2xs": { "font-size": { "value": "0.5rem", "comment": "8px" } },
-        "xs": { "font-size": { "value": "0.75rem", "comment": "12px" } },
-        "sm": { "font-size": { "value": "0.875rem", "comment": "14px" } },
-        "md": { "font-size": { "value": "1rem", "comment": "16px" } },
-        "lg": { "font-size": { "value": "1.125rem", "comment": "18px" } },
-        "xl": { "font-size": { "value": "1.25rem", "comment": "20px" } },
-        "2xl": { "font-size": { "value": "1.375rem", "comment": "22px" } },
-        "3xl": { "font-size": { "value": "1.5rem", "comment": "24px" } },
-        "4xl": { "font-size": { "value": "2rem", "comment": "32px" } }
+        "2xs": { "font-size": { "value": "8px", "comment": "8px" } },
+        "xs": { "font-size": { "value": "12px", "comment": "12px" } },
+        "sm": { "font-size": { "value": "14px", "comment": "14px" } },
+        "md": { "font-size": { "value": "16px", "comment": "16px" } },
+        "lg": { "font-size": { "value": "18px", "comment": "18px" } },
+        "xl": { "font-size": { "value": "20px", "comment": "20px" } },
+        "2xl": { "font-size": { "value": "22px", "comment": "22px" } },
+        "3xl": { "font-size": { "value": "24px", "comment": "24px" } },
+        "4xl": { "font-size": { "value": "32px", "comment": "32px" } }
       },
       "weight-scale": {
         "bold": { "font-weight": { "value": "700" } },

diff --git a/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json
@@ -14,11 +14,11 @@
       "font-size": {},
       "caption": {
         "color": {},
-        "font-size": { "value": "0.75rem" }
+        "font-size": { "value": "{utrecht.typography.scale.xs.font-size}" }
       },
       "content": {
         "color": { "value": "{utrecht.color.red.40}" },
-        "font-size": { "value": "1.125rem" }
+        "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" }
       }
     }
   }

diff --git a/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json b/proprietary/design-tokens/src/component/utrecht/code-block.tokens.json
@@ -4,8 +4,8 @@
       "background-color": { "value": "{utrecht.color.grey.95}" },
       "color": { "value": "{utrecht.color.black}" },
       "font-family": {},
-      "font-size": { "value": "16px" },
-      "line-height": { "value": "24px" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "line-height": { "value": "{utrecht.typography.line-height.md}" },
       "margin-block-end": { "value": "{utrecht.space.block.lg}" },
       "margin-block-start": { "value": "{utrecht.space.block.lg}" },
       "margin-inline-end": {},

diff --git a/proprietary/design-tokens/src/component/utrecht/figure.tokens.json b/proprietary/design-tokens/src/component/utrecht/figure.tokens.json
@@ -5,8 +5,8 @@
       "margin-block-start": {},
       "caption": {
         "color": { "value": "#727272" },
-        "font-size": { "value": "14px" },
-        "line-height": { "value": "20px" }
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
       }
     }
   }

diff --git a/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json b/proprietary/design-tokens/src/component/utrecht/form-fieldset.tokens.json
@@ -10,9 +10,9 @@
       "legend": {
         "color": {},
         "font-family": {},
-        "font-size": { "value": "1rem" },
+        "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
         "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
-        "line-height": { "value": "1.4" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" },
         "margin-block-end": { "value": "{utrecht.space.block.sm}" },
         "margin-block-start": { "value": "{utrecht.space.block.xl}" },
         "disabled": {

diff --git a/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json b/proprietary/design-tokens/src/component/utrecht/pagination.tokens.json
@@ -1,7 +1,7 @@
 {
   "utrecht": {
     "pagination": {
-      "font-size": { "value": "14px" },
+      "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
       "font-family": {},
       "margin-block-start": { "value": "0" },
       "margin-block-end": { "value": "1em" },

diff --git a/proprietary/design-tokens/src/component/utrecht/table.tokens.json b/proprietary/design-tokens/src/component/utrecht/table.tokens.json
@@ -4,7 +4,7 @@
       "margin-block-start": { "value": "{utrecht.space.block.md}" },
       "margin-block-end": { "value": "0" },
       "caption": {
-        "font-size": { "value": "1.125em" },
+        "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
         "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
         "font-family": {},
         "color": {},

diff --git a/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json b/proprietary/design-tokens/src/component/utrecht/toptask-link.tokens.json
@@ -3,7 +3,7 @@
     "toptask-link": {
       "background-color": { "value": "{utrecht.button.primary-action.background-color}" },
       "color": { "value": "{utrecht.button.primary-action.color}" },
-      "font-size": { "value": "1rem" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
       "line-height": { "value": "1.2" },
       "min-block-size": { "value": "8.25rem" },
       "min-inline-size": { "value": "15rem" },