@usegraft/tokens 1.0.0-beta.1 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usegraft/tokens",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Graft design tokens as plain CSS custom properties.",
   "keywords": [
     "agent",

package/tokens.css

@@ -55,6 +55,7 @@
   --n-7: oklch(0.79 0.003 95); /* #bcbcb9 — dark-scheme faint  — Lc -65 on black */
   --n-8: oklch(0.86 0.003 95); /* #d1d1cf — dark-scheme muted  — Lc -79 on black */
   --n-9: oklch(0.96 0.003 95); /* #f2f2ef — dark-scheme text/bright — Lc -99 */
+  --n-10: #ffffff; /* the top of the ramp — dark-scheme hover on a bright fill */
 
   /* light scheme neutrals — warm ivory paper, warm near-black ink */
   --paper-0: #f7f5f0; /* the page */
@@ -65,7 +66,14 @@
   --ink-1: oklch(0.44 0.006 95); /* #5c5a52 — muted */
   --ink-2: oklch(0.56 0.005 95); /* #7a7871 — faint */
 
-  /* danger — hue 25. The ONLY hue in the system; errors only, never brand.
+  /* Callout hues — docs callouts only (note and warning), never brand or UI
+     state. 500 is for the light scheme, 300 for the dark one. */
+  --note-500: oklch(0.5 0.14 245);
+  --note-300: oklch(0.75 0.14 245);
+  --warning-500: oklch(0.55 0.15 75);
+  --warning-300: oklch(0.8 0.15 75);
+
+  /* danger — hue 25. The only hue for UI state; errors only, never brand.
      A red bright enough for APCA 75 on black would be pale pink, so error
      text targets the non-body floor (Lc 60). */
   --danger-300: oklch(0.77 0.123 25); /* on black  #f9948c — Lc -60 */
@@ -106,7 +114,7 @@
   --primary: light-dark(var(--ink-0), var(--n-9));
   --primary-hover: light-dark(
     var(--ink-0-hover),
-    #ffffff
+    var(--n-10)
   ); /* fill hover: one step, same direction */
   --primary-foreground: light-dark(var(--paper-0), var(--n-0));
   /* Alpha variants derive from --primary, so they follow it.
@@ -153,18 +161,25 @@
   --mark-strong: var(--primary-hover);
   --mark-tint: var(--primary-tint);
 
+  --callout-note: light-dark(var(--note-500), var(--note-300));
+  --callout-warning: light-dark(var(--warning-500), var(--warning-300));
+  --callout-danger: var(--danger);
+
   /* ---- type ---- */
-  --font-display: "Instrument Serif", "Iowan Old Style", georgia, serif;
-  --font-sans: "Instrument Sans Variable", "Instrument Sans", system-ui, sans-serif;
+  --font-display:
+    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
 
-  /* Scale tuned by hand, not a formula. Display sizes are for Instrument
-     Serif at weight 400 with tight tracking — big and light. */
+  /* Scale tuned by hand, not a formula. Display sizes are for IBM Plex Sans
+     at tight tracking — big and crisp. */
   --text-xs: 0.75rem; /* 12 — mono labels, uppercase, tracked wide */
   --text-sm: 0.875rem; /* 14 — UI chrome, sidebar */
   --text-base: 1rem; /* 16 — body */
   --text-md: 1.125rem; /* 18 — docs body / lede */
+  --text-h3: 1.25rem; /* 20 — doc h3 subhead */
   --text-lg: 1.5rem; /* 24 — section intros */
+  --text-h2: 1.75rem; /* 28 — doc h2 section head */
   --text-xl: 2.25rem; /* 36 — doc h1 */
   --text-2xl: 3.5rem; /* 56 — page display */
   --text-3xl: clamp(3.5rem, 9vw, 6.5rem); /* hero display */
@@ -174,12 +189,14 @@
   --leading-body: 1.65;
   --tracking-display: -0.03em; /* serif display, sizes ≥ --text-2xl */
   --tracking-label: 0.08em; /* uppercase mono labels */
+  --measure: 68ch; /* reading measure for prose — .prose consumes this, never a literal */
 
   /* ---- space (4px base) ---- */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
+  --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
   --space-12: 3rem;
@@ -211,10 +228,16 @@
   --press-scale: 0.97;
 }
 
-/* A theme toggle stamps data-theme on <html>; it must beat the OS setting. */
-:root[data-theme="light"] {
+/* A theme toggle stamps data-theme or class dark/light on <html>; it must beat the OS setting. */
+:root[data-theme="light"],
+:root.light,
+html.light,
+.light {
   color-scheme: light;
 }
-:root[data-theme="dark"] {
+:root[data-theme="dark"],
+:root.dark,
+html.dark,
+.dark {
   color-scheme: dark;
 }