[#2955] Add typography tokens (#12)

Published version: https://www.npmjs.com/package/@open-inwoner/design-tokens/v/0.0.8-alpha.1
maykinmedia · Jan 21, 2025 · 8293467 · 8293467
2 parents ae0150e + 84889c3
commit 8293467
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-inwoner/design-tokens",
-  "version": "0.0.7-alpha.2",
+  "version": "0.0.8-alpha.1",
   "description": "Design tokens for Open Inwoner",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/src/brand/openinwoner/typography.tokens.json b/src/brand/openinwoner/typography.tokens.json
@@ -2,7 +2,7 @@
   "oip": {
     "heading": {
       "fg": {"value": "{oip.color.fg}"},
-      "font-family": {"value": "Heading"}
+      "font-family": {"value": "\"Heading\", \"Arial\", sans-serif"}
     },
     "text": {
       "margin": {"value": "20px"},
@@ -13,10 +13,10 @@
     },
     "typography": {
       "sans-serif": {
-        "font-family": {"value": "Body"}
+        "font-family": {"value": "\"Body\", \"Arial\", sans-serif"}
       },
       "heading": {
-        "font-family": {"value": "Heading"}
+        "font-family": {"value": "\"Heading\", \"Arial\", sans-serif"}
       }
     }
   }

diff --git a/src/community/utrecht/typography.tokens.json b/src/community/utrecht/typography.tokens.json
@@ -16,6 +16,33 @@
         "value": "24px",
         "comment": "Default body line-height."
       }
+    },
+    "typography": {
+      "sans-serif": {
+        "font-family": {"value": "\"Body\", \"Arial\", sans-serif"}
+      },
+      "scale": {
+        "sm": {"font-size": {"value": "14px"}},
+        "md": {"font-size": {"value": "16px"}},
+        "lg": {"font-size": {"value": "24px"}},
+        "xl": {"font-size": {"value": "20px"}},
+        "2xl": {"font-size": {"value": "32px"}},
+        "3xl": {"font-size": {"value": "40px"}}
+      },
+      "weight-scale": {
+        "bold": {"font-weight": {"value": "bold"}},
+        "normal": {"font-weight": {"value": "normal"}}
+      },
+      "font-style": {
+        "normal": {"value": "normal"},
+        "inherit": {"value": "inherit"}
+      },
+      "line-height": {
+        "xs": {"value": "16px"},
+        "sm": {"value": "22px"},
+        "md": {"value": "24px"},
+        "lg": {"value": "32px"}
+      }
     }
   }
 }