@akhil-saxena/design-system 1.2.0 → 1.4.2

package/dist/tokens.css

@@ -33,10 +33,15 @@
 	--ink-4: #8a8380;
 	--ink-5: #d6d3d1;
 
-	/* Cream ramp (warm background surfaces) */
-	--cream: #f5f3f0;
-	--cream-2: #ece8e3;
-	--cream-3: #e7e2dc;
+	/* Cream ramp (warm background surfaces).
+	   Whiter than the original handoff so chrome surfaces (sidebar / topbar /
+	   filter bar / page body) feel uplifting rather than dull. Brand warmth
+	   is preserved by the faint yellow tint in every step; the ramp now
+	   stays close to white through cream-2 with cream-3 reserved for the
+	   most-recessed slots (column tracks, secondary hover wash). */
+	--cream: #fdfcf9;
+	--cream-2: #f7f5f1;
+	--cream-3: #efece5;
 
 	/* Amber accent */
 	--amber: #f59e0b;
@@ -103,6 +108,41 @@
 	--space-15: 60px;
 	--space-16: 64px;
 
+	/* Type scale — derived from auth-design-handoff README §Typography.
+	   Tailwind-style nomenclature for 1:1 cross-app reuse. */
+	--text-2xs: 9.5px; /* mono caps, stage chip labels, smallest legal */
+	--text-xs: 11px; /* legal copy */
+	--text-sm: 12.5px; /* small body, footer links */
+	--text-base: 13px; /* default body text */
+	--text-md: 15px;
+	--text-lg: 17px;
+	--text-xl: 22px;
+	--text-2xl: 28px; /* form headlines */
+	--text-3xl: 40px;
+	--text-4xl: 44px; /* mobile hero / tablet-compact hero */
+	--text-5xl: 60px; /* desktop hero w/ subline */
+	--text-6xl: 72px; /* desktop hero w/o subline */
+
+	/* Weights */
+	--weight-regular: 400;
+	--weight-medium: 500;
+	--weight-semibold: 600;
+	--weight-bold: 700;
+	--weight-extrabold: 800;
+	--weight-black: 900;
+
+	/* Line heights */
+	--lh-tight: 0.94; /* hero display headlines */
+	--lh-snug: 1.08; /* form headlines */
+	--lh-normal: 1.5;
+	--lh-relaxed: 1.55; /* body */
+
+	/* Letter spacing — derived from the design's display-typography scale */
+	--ls-tighter: -0.038em; /* size > 28 (hero) */
+	--ls-tight: -0.024em; /* size > 20 */
+	--ls-base: -0.005em; /* default */
+	--ls-wide: 0.1em; /* mono caps, eyebrows, stage chips */
+
 	/* Motion tokens - handoff v1.0 */
 	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -132,29 +172,37 @@
    define the same values so var(--ink) etc resolve correctly on either. */
 :root.dark,
 .dark {
-	/* Ink ramp inverts: ink becomes cream-toned, cream becomes near-black */
-	--ink: #f5f3f0;
-	--ink-2: #d6d3d1;
-	--ink-3: #a8a29e;
-	--ink-4: #8a8380;
-	--ink-5: #44403c;
-
-	--cream: #1c1917;
-	--cream-2: #292524;
-	--cream-3: #44403c;
-
-	/* Hairline brightens for dark surfaces */
-	--rule: rgba(255, 255, 255, 0.08);
-
-	/* Glass tints to dark ink */
-	--g-bg: rgba(40, 37, 34, 0.7);
-	--g-bd: rgba(255, 255, 255, 0.08);
-
-	/* Status colors lift for dark contrast - handoff v1.0 dark table */
+	/* Revised dark-mode ramp — Cairn · Dark Mode Revision.html spec:
+	   - 3 distinct surface stops (~6L between) so page / column / card stop
+	     collapsing into one slab. The old ramp lived inside a 14–17L band.
+	   - Text inverts to WARM cream (was cool near-white) so it stops fighting
+	     the warm-paper brand and lets the amber accent land as signal.
+	   - Rules warm + lift to 7% (was 8% cool white); new `--rule-strong` at
+	     12% for active dividers (e.g. column-header underline).
+	   The headline move: drop warmth from background, put it into text. */
+	--ink: #f7ecdb;
+	--ink-2: #b8ac97;
+	--ink-3: #857b6c;
+	--ink-4: #5c554a;
+	--ink-5: #3a3530;
+
+	--cream: #0f0d0b;
+	--cream-2: #1a1714;
+	--cream-3: #241f1a;
+
+	--rule: rgba(247, 236, 219, 0.07);
+	--rule-strong: rgba(247, 236, 219, 0.12);
+
+	/* Glass tints to deepest surface (anchored instead of floating) */
+	--g-bg: rgba(15, 13, 11, 0.7);
+	--g-bd: rgba(247, 236, 219, 0.07);
+
+	/* Status colors — revised per dark-mode spec § Tokens. Each color is
+	   pre-saturated to read on the dark warm bg without going neon. */
 	--amber-d: #fbbf24;
-	--blue: #7cb8fb;
+	--blue: #7ca0d9;
 	--purple: #bfa3fb;
-	--green: #4ade80;
+	--green: #7fc79d;
 	--red: #fb8888;
 
 	/* Vivids are decorative-only; restated explicitly even though values
@@ -166,10 +214,11 @@
 	--green-vivid: #22c55e;
 	--red-vivid: #ef4444;
 
-	/* Surface tokens - handoff v1.0 dark (white-low-alpha overlays) */
-	--surf-1: rgba(255, 255, 255, 0.04);
-	--surf-2: rgba(255, 255, 255, 0.06);
-	--surf-3: rgba(255, 255, 255, 0.1);
+	/* Surface translucent overlays — warm-cream tint instead of cool white
+	   so they blend with the new warm-cream ink. */
+	--surf-1: rgba(247, 236, 219, 0.04);
+	--surf-2: rgba(247, 236, 219, 0.06);
+	--surf-3: rgba(247, 236, 219, 0.1);
 
 	/* Focus ring - dark-mode amber-d glow */
 	--focus-ring: 0 0 0 3px rgba(251, 191, 36, 0.5);

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@akhil-saxena/design-system",
-	"version": "1.2.0",
+	"version": "1.4.2",
 	"type": "module",
 	"description": "Accessible React primitives with semantic tokens",
 	"license": "MIT",
 	"author": "Akhil Saxena <saxena.akhil42@gmail.com>",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/akhil-saxena/design-system.git"
+		"url": "git+https://github.com/akhil-saxena/design-system.git"
 	},
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org",
@@ -61,6 +61,7 @@
 		"@fontsource/inter": "^5.0.0",
 		"@fontsource/jetbrains-mono": "^5.0.0",
 		"@tiptap/extension-code-block-lowlight": "^3.22.5",
+		"@tiptap/extension-highlight": "^3.22.5",
 		"@tiptap/extension-link": "^3.22.5",
 		"@tiptap/extension-placeholder": "^3.22.5",
 		"@tiptap/extension-underline": "^3.22.5",
@@ -77,6 +78,7 @@
 		"@storybook/preview-api": "^8.6.18",
 		"@storybook/react-vite": "^8.6.18",
 		"@storybook/test-runner": "^0.23.0",
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
 		"@types/react": "^19.2.14",

package/dist/chunk-FUXR6QZ3.js

@@ -1,108 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-// src/hooks/useComposedRefs.ts
-function setRef(ref, node) {
-  if (typeof ref === "function") ref(node);
-  else if (ref && "current" in ref) ref.current = node;
-}
-function useComposedRefs(...refs) {
-  return useCallback((node) => {
-    for (const ref of refs) setRef(ref, node);
-  }, refs);
-}
-function useClickOutside(ref, handler, enabled = true) {
-  useEffect(() => {
-    if (!enabled) return;
-    function listener(e) {
-      const el = ref.current;
-      if (!el || el.contains(e.target)) return;
-      handler(e);
-    }
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler, enabled]);
-}
-var FOCUSABLE_SELECTOR = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type='hidden']), select:not([disabled]), [tabindex]:not([tabindex='-1'])";
-function useFocusTrap(container, active) {
-  useEffect(() => {
-    if (!active || !container) return;
-    const c = container;
-    const previouslyFocused = document.activeElement;
-    const focusables = () => Array.from(c.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
-      (el) => !el.hasAttribute("inert")
-    );
-    const initial = focusables()[0];
-    if (initial) {
-      initial.focus();
-    } else {
-      c.focus();
-    }
-    function handleKeyDown(e) {
-      if (e.key !== "Tab") return;
-      const list = focusables();
-      const activeEl = document.activeElement;
-      const activeInside = activeEl ? c.contains(activeEl) : false;
-      if (list.length === 0) {
-        e.preventDefault();
-        if (!activeInside) c.focus();
-        return;
-      }
-      const firstEl = list[0];
-      const lastEl = list.at(-1);
-      if (!activeInside) {
-        e.preventDefault();
-        (e.shiftKey ? lastEl : firstEl).focus();
-        return;
-      }
-      if (e.shiftKey && activeEl === firstEl) {
-        e.preventDefault();
-        lastEl.focus();
-      } else if (!e.shiftKey && activeEl === lastEl) {
-        e.preventDefault();
-        firstEl.focus();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      previouslyFocused?.focus?.();
-    };
-  }, [active, container]);
-}
-function useReducedMotion() {
-  const [reduced, setReduced] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  });
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handler = (e) => setReduced(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return reduced;
-}
-function useMatchMedia(query) {
-  const [matches, setMatches] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(query).matches;
-  });
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(query);
-    const handler = (e) => setMatches(e.matches);
-    setMatches(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, [query]);
-  return matches;
-}
-
-export { useClickOutside, useComposedRefs, useFocusTrap, useMatchMedia, useReducedMotion };
-//# sourceMappingURL=chunk-FUXR6QZ3.js.map
-//# sourceMappingURL=chunk-FUXR6QZ3.js.map

package/dist/chunk-FUXR6QZ3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useComposedRefs.ts","../src/hooks/useClickOutside.ts","../src/hooks/useFocusTrap.ts","../src/hooks/useReducedMotion.ts","../src/hooks/useMatchMedia.ts"],"names":["useEffect","useState"],"mappings":"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","file":"chunk-FUXR6QZ3.js","sourcesContent":["import { type Ref, useCallback } from \"react\";\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null): void {\n\tif (typeof ref === \"function\") ref(node);\n\telse if (ref && \"current\" in ref) (ref as { current: T | null }).current = node;\n}\n\n/**\n * Combine multiple refs (function or object) into one callback ref.\n * Used by every primitive that does forwardRef + needs an internal ref\n * for a hook (Popover trigger, Modal container, etc.).\n */\nexport function useComposedRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void {\n\treturn useCallback((node: T | null) => {\n\t\tfor (const ref of refs) setRef(ref, node);\n\t}, refs);\n}\n","import { type RefObject, useEffect } from \"react\";\n\n/**\n * Calls `handler` when a mousedown/touchstart fires outside of `ref`'s element.\n * Used by Popover (Phase 14), Modal close-on-backdrop, Select dropdown dismiss.\n */\nexport function useClickOutside<T extends HTMLElement>(\n\tref: RefObject<T | null>,\n\thandler: (e: MouseEvent | TouchEvent) => void,\n\tenabled = true,\n): void {\n\tuseEffect(() => {\n\t\tif (!enabled) return;\n\t\tfunction listener(e: MouseEvent | TouchEvent) {\n\t\t\tconst el = ref.current;\n\t\t\tif (!el || el.contains(e.target as Node)) return;\n\t\t\thandler(e);\n\t\t}\n\t\tdocument.addEventListener(\"mousedown\", listener);\n\t\tdocument.addEventListener(\"touchstart\", listener);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mousedown\", listener);\n\t\t\tdocument.removeEventListener(\"touchstart\", listener);\n\t\t};\n\t}, [ref, handler, enabled]);\n}\n","import { useEffect } from \"react\";\n\nconst FOCUSABLE_SELECTOR =\n\t\"a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), \" +\n\t\"input:not([disabled]):not([type='hidden']), select:not([disabled]), \" +\n\t\"[tabindex]:not([tabindex='-1'])\";\n\n/**\n * Trap Tab/Shift+Tab focus inside `container` while `active` is true.\n *\n * Pass the actual DOM node (use a callback ref + useState pattern in the\n * caller). This guarantees the effect re-runs as soon as the node attaches,\n * which is necessary for portal-mounted containers (Modal, Sheet, BottomSheet)\n * where the node materializes one tick after the parent renders.\n *\n * On activation: focuses the first focusable child, OR the container itself\n * when it has no focusable descendants (container must have `tabIndex={-1}`).\n * On deactivation: restores focus to the previously-focused element.\n *\n * Listens at `document` level so the trap engages even when focus is currently\n * outside the container (e.g., focus leaked to background, or content has no\n * focusables and initial focus didn't land inside).\n */\nexport function useFocusTrap<T extends HTMLElement>(container: T | null, active: boolean): void {\n\tuseEffect(() => {\n\t\tif (!active || !container) return;\n\t\t// Capture as non-null local - TypeScript loses narrowing across closure boundaries.\n\t\tconst c = container;\n\t\tconst previouslyFocused = document.activeElement as HTMLElement | null;\n\n\t\tconst focusables = () =>\n\t\t\tArray.from(c.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n\t\t\t\t(el) => !el.hasAttribute(\"inert\"),\n\t\t\t);\n\n\t\tconst initial = focusables()[0];\n\t\tif (initial) {\n\t\t\tinitial.focus();\n\t\t} else {\n\t\t\tc.focus();\n\t\t}\n\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (e.key !== \"Tab\") return;\n\t\t\tconst list = focusables();\n\t\t\tconst activeEl = document.activeElement as HTMLElement | null;\n\t\t\tconst activeInside = activeEl ? c.contains(activeEl) : false;\n\n\t\t\tif (list.length === 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tif (!activeInside) c.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst firstEl = list[0]!;\n\t\t\tconst lastEl = list.at(-1)!;\n\n\t\t\tif (!activeInside) {\n\t\t\t\te.preventDefault();\n\t\t\t\t(e.shiftKey ? lastEl : firstEl).focus();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (e.shiftKey && activeEl === firstEl) {\n\t\t\t\te.preventDefault();\n\t\t\t\tlastEl.focus();\n\t\t\t} else if (!e.shiftKey && activeEl === lastEl) {\n\t\t\t\te.preventDefault();\n\t\t\t\tfirstEl.focus();\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\tpreviouslyFocused?.focus?.();\n\t\t};\n\t}, [active, container]);\n}\n","import { useEffect, useState } from \"react\";\n\n/**\n * Returns true when the user has set OS-level \"Reduce Motion\" preference.\n * Watches matchMedia for changes (e.g., user toggles preference at runtime).\n * SSR-safe - returns false on the server.\n * Used by Carousel (DS-65) autoplay gating, Accordion expand transition, etc.\n */\nexport function useReducedMotion(): boolean {\n\tconst [reduced, setReduced] = useState<boolean>(() => {\n\t\tif (typeof window === \"undefined\") return false;\n\t\treturn window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\t});\n\tuseEffect(() => {\n\t\tif (typeof window === \"undefined\") return;\n\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tconst handler = (e: MediaQueryListEvent) => setReduced(e.matches);\n\t\tmql.addEventListener(\"change\", handler);\n\t\treturn () => mql.removeEventListener(\"change\", handler);\n\t}, []);\n\treturn reduced;\n}\n","import { useEffect, useState } from \"react\";\n\n/**\n * Returns the `matches` boolean for an arbitrary CSS media query, reactive\n * to viewport changes (resize, rotation, prefers-* toggles at runtime).\n * SSR-safe - returns false on the server.\n * Used by Calendar (DS-68) for the mobile breakpoint switch between Popover\n * and BottomSheet at `(max-width: 640px)`. Generic over any media query string.\n */\nexport function useMatchMedia(query: string): boolean {\n\tconst [matches, setMatches] = useState<boolean>(() => {\n\t\tif (typeof window === \"undefined\") return false;\n\t\treturn window.matchMedia(query).matches;\n\t});\n\tuseEffect(() => {\n\t\tif (typeof window === \"undefined\") return;\n\t\tconst mql = window.matchMedia(query);\n\t\tconst handler = (e: MediaQueryListEvent) => setMatches(e.matches);\n\t\t// Sync once after subscription in case query changed between mount and effect.\n\t\tsetMatches(mql.matches);\n\t\tmql.addEventListener(\"change\", handler);\n\t\treturn () => mql.removeEventListener(\"change\", handler);\n\t}, [query]);\n\treturn matches;\n}\n"]}