@kwtv/tokens 0.3.0 → 0.5.0

package/README.md

@@ -26,6 +26,37 @@ import "@kwtv/tokens/tokens.css";
 The default theme follows the operating system. Set `data-theme="light"` or
 `data-theme="dark"` on the root element to choose a theme explicitly.
 
+## Hosts with a different root font size
+
+Space, radius, type and line-height tokens are rem sizes designed for a 16px
+root. In `tokens.css` each one is a multiple of `--kw-rem`, which is `1rem`.
+By default nothing changes.
+
+A host that sets its own root font size, like Payload's admin at 13px or
+14px, shrinks every token with it. Set `--kw-rem` on `:root` to keep the
+designed sizes:
+
+```css
+:root {
+  --kw-rem: 16px;
+}
+```
+
+Set it on `:root`, not on a nested element. The tokens are computed on
+`:root`, so a value further down the tree has no effect. `16px` fixes the
+scale no matter what the root does. `calc(1rem * 16 / 14)` keeps it relative
+to a 14px root instead. The JSON, TS and SCSS exports keep plain rem values.
+
+## Variable names
+
+The tokens use short, unprefixed names such as `--text`, `--bg`,
+`--font-mono` and `--z-modal`. Some hosts use the same names. Payload's admin
+defines `--font-serif`, `--font-mono` and `--z-modal`, for example. Every
+token sits in `@layer tokens`, so a host's own unlayered declaration always
+wins. Declare the host's value unlayered on `:root` to keep it. A host that
+puts its own variables in a layer declared before `tokens`, as Payload does,
+loses them to the tokens until it does so.
+
 ## Exports
 
 | Import                       | Contents                                                           |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwtv/tokens",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "KWTV design tokens. Colour, type, space, shape and motion. Light and dark.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/tokens.css

@@ -1,8 +1,9 @@
 /* Generated by scripts/build-tokens.py. Do not edit by hand. */
 
-@layer palette, theme, scale;
+@layer reset, tokens, base, components, motion, utilities;
+@layer tokens.palette, tokens.theme, tokens.scale;
 
-@layer palette {
+@layer tokens.palette {
   :root {
     --sage-xlight: #DCF1E8;
     --sage-light: #B1C9BF;
@@ -39,7 +40,7 @@
   }
 }
 
-@layer theme {
+@layer tokens.theme {
   :root {
     /* Both themes named explicitly, so either can be referenced
        directly regardless of which one is active. */
@@ -319,9 +320,16 @@
   }
 }
 
-@layer scale {
+@layer tokens.scale {
   :root {
-    /* Type family */
+    /* Root size. Every rem size below is a multiple of it. Set it on
+       :root when the host changes the root font size, for example
+       --kw-rem: 16px, and the scale stays where it was designed. */
+    --kw-rem: 1rem;
+
+    /* 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-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
@@ -343,34 +351,34 @@
     /* Space */
     --space-0: 0;
     --space-px: 1px;
-    --space-0-5: 0.125rem;
-    --space-1: 0.25rem;
-    --space-1-5: 0.375rem;
-    --space-2: 0.5rem;
-    --space-2-5: 0.625rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-4-5: 1.125rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-7: 1.75rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
-    --space-12: 3rem;
-    --space-16: 4rem;
-    --space-20: 5rem;
-    --space-24: 6rem;
-    --space-32: 8rem;
-    --space-40: 10rem;
-    --space-48: 12rem;
+    --space-0-5: calc(0.125 * var(--kw-rem));
+    --space-1: calc(0.25 * var(--kw-rem));
+    --space-1-5: calc(0.375 * var(--kw-rem));
+    --space-2: calc(0.5 * var(--kw-rem));
+    --space-2-5: calc(0.625 * var(--kw-rem));
+    --space-3: calc(0.75 * var(--kw-rem));
+    --space-4: var(--kw-rem);
+    --space-4-5: calc(1.125 * var(--kw-rem));
+    --space-5: calc(1.25 * var(--kw-rem));
+    --space-6: calc(1.5 * var(--kw-rem));
+    --space-7: calc(1.75 * var(--kw-rem));
+    --space-8: calc(2 * var(--kw-rem));
+    --space-10: calc(2.5 * var(--kw-rem));
+    --space-12: calc(3 * var(--kw-rem));
+    --space-16: calc(4 * var(--kw-rem));
+    --space-20: calc(5 * var(--kw-rem));
+    --space-24: calc(6 * var(--kw-rem));
+    --space-32: calc(8 * var(--kw-rem));
+    --space-40: calc(10 * var(--kw-rem));
+    --space-48: calc(12 * var(--kw-rem));
 
     /* Radius */
     --radius-none: 0;
-    --radius-sm: 0.1875rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.625rem;
-    --radius-xl: 1rem;
-    --radius-2xl: 1.5rem;
+    --radius-sm: calc(0.1875 * var(--kw-rem));
+    --radius-md: calc(0.375 * var(--kw-rem));
+    --radius-lg: calc(0.625 * var(--kw-rem));
+    --radius-xl: var(--kw-rem);
+    --radius-2xl: calc(1.5 * var(--kw-rem));
     --radius-full: 9999px;
 
     /* Duration */
@@ -404,31 +412,31 @@
     --z-tooltip: 1600;
 
     /* Type scale */
-    --text-3xs: 0.625rem;
-    --leading-3xs: 1rem;
-    --text-2xs: 0.6875rem;
-    --leading-2xs: 1rem;
-    --text-xs: 0.75rem;
-    --leading-xs: 1.125rem;
-    --text-sm: 0.875rem;
-    --leading-sm: 1.375rem;
-    --text-base: 1rem;
-    --leading-base: 1.625rem;
-    --text-lg: 1.125rem;
-    --leading-lg: 1.75rem;
-    --text-xl: 1.25rem;
-    --leading-xl: 1.875rem;
-    --text-2xl: 1.5rem;
-    --leading-2xl: 2rem;
-    --text-3xl: 1.875rem;
-    --leading-3xl: 2.25rem;
-    --text-4xl: 2.25rem;
-    --leading-4xl: 2.5rem;
-    --text-5xl: 3rem;
+    --text-3xs: calc(0.625 * var(--kw-rem));
+    --leading-3xs: var(--kw-rem);
+    --text-2xs: calc(0.6875 * var(--kw-rem));
+    --leading-2xs: var(--kw-rem);
+    --text-xs: calc(0.75 * var(--kw-rem));
+    --leading-xs: calc(1.125 * var(--kw-rem));
+    --text-sm: calc(0.875 * var(--kw-rem));
+    --leading-sm: calc(1.375 * var(--kw-rem));
+    --text-base: var(--kw-rem);
+    --leading-base: calc(1.625 * var(--kw-rem));
+    --text-lg: calc(1.125 * var(--kw-rem));
+    --leading-lg: calc(1.75 * var(--kw-rem));
+    --text-xl: calc(1.25 * var(--kw-rem));
+    --leading-xl: calc(1.875 * var(--kw-rem));
+    --text-2xl: calc(1.5 * var(--kw-rem));
+    --leading-2xl: calc(2 * var(--kw-rem));
+    --text-3xl: calc(1.875 * var(--kw-rem));
+    --leading-3xl: calc(2.25 * var(--kw-rem));
+    --text-4xl: calc(2.25 * var(--kw-rem));
+    --leading-4xl: calc(2.5 * var(--kw-rem));
+    --text-5xl: calc(3 * var(--kw-rem));
     --leading-5xl: 1.08;
-    --text-6xl: 3.75rem;
+    --text-6xl: calc(3.75 * var(--kw-rem));
     --leading-6xl: 1.05;
-    --text-7xl: 4.5rem;
+    --text-7xl: calc(4.5 * var(--kw-rem));
     --leading-7xl: 1.02;
   }
 

package/tokens/utilities.css

@@ -1,6 +1,6 @@
 /* Generated by scripts/build-tokens.py. Do not edit by hand. */
 
-@layer utilities;
+@layer reset, tokens, base, components, motion, utilities;
 
 /*
  * Utility classes. Two ways to use them.