@kwtv/tokens 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/tokens",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "KWTV design tokens. Colour, type, space, shape and motion. Light and dark.",
   "license": "UNLICENSED",
   "type": "module",
@@ -15,6 +15,9 @@
   "files": [
     "tokens"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     "./tokens.css": "./tokens/tokens.css",
     "./utilities.css": "./tokens/utilities.css",

package/tokens/tokens.css

@@ -330,8 +330,8 @@
     /* Type family. Generic names on purpose, like every token here.
        They sit in a layer, so a host that uses the same names wins
        by declaring them unlayered. */
-    --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    --font-serif: "Source Serif 4 Variable", "Source Serif 4", ui-serif, Georgia, serif;
+    --font-sans: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-serif: "Source Serif 4 Variable", "Source Serif 4", "Source Serif 4 Fallback", ui-serif, Georgia, serif;
     --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
 
     /* Weight */
@@ -440,6 +440,27 @@
     --leading-7xl: 1.02;
   }
 
+  /* Fallbacks with the web fonts' metrics. Swapping fonts in
+     then moves no text. */
+  @font-face {
+    font-family: "Hanken Grotesk Fallback";
+    src: local("Arial");
+    size-adjust: 100.5%;
+    ascent-override: 99.5%;
+    descent-override: 30.15%;
+    line-gap-override: 0%;
+    unicode-range: U+0000-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+2074, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: "Source Serif 4 Fallback";
+    src: local("Georgia");
+    size-adjust: 105.8%;
+    ascent-override: 97.92%;
+    descent-override: 31.66%;
+    line-gap-override: 0%;
+    unicode-range: U+0000-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+2074, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+  }
+
   /* Honour the OS setting. */
   @media (prefers-reduced-motion: reduce) {
     :root {

package/tokens/tokens.json

@@ -494,11 +494,11 @@
   "font": {
     "family": {
       "sans": {
-        "$value": "\"Hanken Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+        "$value": "\"Hanken Grotesk\", \"Hanken Grotesk Fallback\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
         "$type": "fontFamily"
       },
       "serif": {
-        "$value": "\"Source Serif 4 Variable\", \"Source Serif 4\", ui-serif, Georgia, serif",
+        "$value": "\"Source Serif 4 Variable\", \"Source Serif 4\", \"Source Serif 4 Fallback\", ui-serif, Georgia, serif",
         "$type": "fontFamily"
       },
       "mono": {

package/tokens/tokens.ts

@@ -155,8 +155,8 @@ export const radius = {
 } as const;
 
 export const fontFamily = {
-  "sans": "\"Hanken Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
-  "serif": "\"Source Serif 4 Variable\", \"Source Serif 4\", ui-serif, Georgia, serif",
+  "sans": "\"Hanken Grotesk\", \"Hanken Grotesk Fallback\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+  "serif": "\"Source Serif 4 Variable\", \"Source Serif 4\", \"Source Serif 4 Fallback\", ui-serif, Georgia, serif",
   "mono": "\"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace",
 } as const;