@akhil-saxena/design-system 1.2.0

package/dist/tokens.css

@@ -0,0 +1,180 @@
+/* @akhil-saxena/design-system v0.1.0 - token layer.
+   Imported via:
+     import "@akhil-saxena/design-system/tokens.css";
+   Use BEFORE primitives.css and utilities.css (cascade order matters). */
+
+/* @fontsource - replaces Google Fonts CDN @import. Versioned with the package. */
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";
+@import "@fontsource/inter/600.css";
+@import "@fontsource/inter/700.css";
+@import "@fontsource/archivo/500.css";
+@import "@fontsource/archivo/600.css";
+@import "@fontsource/archivo/700.css";
+@import "@fontsource/archivo/800.css";
+@import "@fontsource/archivo/900.css";
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/600.css";
+@import "@fontsource/jetbrains-mono/700.css";
+
+/* ─── Light mode tokens ─────────────────────────────────────────────── */
+:root {
+	/* Type stacks */
+	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui,
+		sans-serif;
+	--mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
+	--display: "Archivo", system-ui, sans-serif;
+
+	/* Ink ramp (text + dark surfaces) */
+	--ink: #292524;
+	--ink-2: #57534e;
+	--ink-3: #6b6560;
+	--ink-4: #8a8380;
+	--ink-5: #d6d3d1;
+
+	/* Cream ramp (warm background surfaces) */
+	--cream: #f5f3f0;
+	--cream-2: #ece8e3;
+	--cream-3: #e7e2dc;
+
+	/* Amber accent */
+	--amber: #f59e0b;
+	--amber-d: #b45309;
+	--amber-l: #fef3c7;
+
+	/* Status text-safe - handoff v1.0 AAA-on-cream values */
+	--blue: #1e3a8a;
+	--purple: #5b21b6;
+	--green: #14532d;
+	--red: #991b1b;
+
+	/* Hairline rule */
+	--rule: rgba(0, 0, 0, 0.08);
+
+	/* Vivids - decorative-only (dots, fills, borders), never text */
+	--amber-vivid: #f59e0b;
+	--blue-vivid: #3b82f6;
+	--purple-vivid: #8b5cf6;
+	--green-vivid: #22c55e;
+	--red-vivid: #ef4444;
+
+	/* Glass effect tokens (default variant; .glass-subtle and .glass-heavy
+     ship their own values per the README handoff table) */
+	--g-bg: rgba(255, 255, 255, 0.55);
+	--g-bd: rgba(255, 255, 255, 0.5);
+	--g-blur: 14px;
+
+	/* Border radii - handoff v1.0 token table */
+	--radius-sm: 4px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
+	--radius-pill: 999px;
+	/* Backwards-compat aliases retained from in-tree refresh (13.5-02) */
+	--radius-2xl: 16px;
+	--radius-full: 999px;
+
+	/* Shadows - handoff v1.0 token table */
+	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
+	--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
+	--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.12);
+	/* Backwards-compat aliases retained from in-tree refresh (13.5-02) */
+	--shadow-subtle: var(--shadow-1);
+	--shadow-card: var(--shadow-2);
+	--shadow-elevated: var(--shadow-2);
+	--shadow-overlay: var(--shadow-3);
+
+	/* Spacing scale - handoff v1.0 (multiples of 4px, 16-step) */
+	--space-1: 4px;
+	--space-2: 8px;
+	--space-3: 12px;
+	--space-4: 16px;
+	--space-5: 20px;
+	--space-6: 24px;
+	--space-7: 28px;
+	--space-8: 32px;
+	--space-9: 36px;
+	--space-10: 40px;
+	--space-11: 44px;
+	--space-12: 48px;
+	--space-13: 52px;
+	--space-14: 56px;
+	--space-15: 60px;
+	--space-16: 64px;
+
+	/* 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);
+	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+	--dur-1: 120ms;
+	--dur-2: 180ms;
+	--dur-3: 240ms;
+	--dur-4: 360ms;
+
+	/* Surface tokens - handoff v1.0 (translucent overlays, light) */
+	--surf-1: rgba(255, 255, 255, 0.4);
+	--surf-2: rgba(255, 255, 255, 0.55);
+	--surf-3: rgba(255, 255, 255, 0.7);
+
+	/* Focus tokens - handoff v1.0 */
+	--focus: var(--amber);
+	--focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.45);
+
+	/* Illustration surface fills - use these instead of --cream in SVGs */
+	--ds-illust-bg: var(--cream-2);
+	--ds-illust-bg-2: var(--cream-3);
+}
+
+/* ─── Dark mode overrides ─────────────────────────────────────────────
+   Both :root.dark (full-page dark - Storybook canvas, consumer apps) and
+   .dark (scoped container dark - Storybook Docs inline story wrappers)
+   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 */
+	--amber-d: #fbbf24;
+	--blue: #7cb8fb;
+	--purple: #bfa3fb;
+	--green: #4ade80;
+	--red: #fb8888;
+
+	/* Vivids are decorative-only; restated explicitly even though values
+     are identical to light mode (handoff comment line 28: "vivids
+     unchanged in dark"). */
+	--amber-vivid: #f59e0b;
+	--blue-vivid: #3b82f6;
+	--purple-vivid: #8b5cf6;
+	--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);
+
+	/* Focus ring - dark-mode amber-d glow */
+	--focus-ring: 0 0 0 3px rgba(251, 191, 36, 0.5);
+
+	/* Illustration surface fills lift to visible translucent white in dark mode */
+	--ds-illust-bg: rgba(255, 255, 255, 0.13);
+	--ds-illust-bg-2: rgba(255, 255, 255, 0.2);
+}

package/dist/utilities.css

@@ -0,0 +1,200 @@
+/* @akhil-saxena/design-system v0.1.0 - cross-cutting utility classes.
+   Imported via:
+     import "@akhil-saxena/design-system/utilities.css";
+   Requires tokens.css to be imported first.
+   Includes: .glass / .glass-subtle / .glass-heavy (+ dark variants),
+   .ds-label, .ds-focus-ring, .ds-dot-grid, native date input theming,
+   .jd-markdown rendered-content styles. */
+
+.glass {
+	background: var(--g-bg);
+	backdrop-filter: blur(var(--g-blur));
+	-webkit-backdrop-filter: blur(var(--g-blur));
+	border: 1px solid var(--g-bd);
+	border-radius: var(--radius-xl);
+}
+
+.glass-subtle {
+	background: rgba(255, 255, 255, 0.85);
+	backdrop-filter: blur(6px);
+	-webkit-backdrop-filter: blur(6px);
+	border: 1px solid rgba(0, 0, 0, 0.05);
+	border-radius: var(--radius-xl);
+}
+:root.dark .glass-subtle {
+	background: rgba(28, 25, 23, 0.85);
+	border-color: rgba(255, 255, 255, 0.06);
+}
+
+.glass-heavy {
+	background: rgba(255, 255, 255, 0.4);
+	backdrop-filter: blur(22px);
+	-webkit-backdrop-filter: blur(22px);
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	border-radius: var(--radius-xl);
+}
+:root.dark .glass-heavy {
+	background: rgba(28, 25, 23, 0.6);
+	border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ─── Mono uppercase label ──────────────────────────────────────────────
+   The signature "section meta" label everywhere a small all-caps mono
+   header is called for. 10px / 600 / 0.08em tracking per spec §4. */
+.ds-label {
+	font-family: var(--mono);
+	font-size: 10px;
+	font-weight: 600;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+:root.dark .ds-label {
+	color: var(--ink-4);
+}
+
+/* ─── Amber focus-ring utility ──────────────────────────────────────────
+   Handoff input :focus state (line 85 of the source `<style>` block).
+   Apply to any interactive element - focus and focus-within both fire,
+   so it works on wrapping containers like .ds-input-wrap. */
+.ds-focus-ring:focus,
+.ds-focus-ring:focus-within {
+	outline: none;
+	border-color: var(--amber);
+	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
+}
+
+/* ─── Optional dot-grid background helper ───────────────────────────────
+   Lets specific surfaces opt into the same dot pattern the body uses
+   (e.g., empty states, hero cards). Light variant uses ink dots, dark
+   variant flips to white dots. */
+.ds-dot-grid {
+	background-image: radial-gradient(circle, rgba(41, 37, 36, 0.08) 1px, transparent 1.2px);
+	background-size: 16px 16px;
+}
+:root.dark .ds-dot-grid {
+	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1.2px);
+}
+
+/* ─── Native date / time input theming ──────────────────────────────────
+   Preserved verbatim from the previous index.css. Without color-scheme,
+   browsers render the native popover chrome with the OS default scheme,
+   which looks broken inside a dark glass card. */
+input[type="date"],
+input[type="datetime-local"],
+input[type="time"],
+input[type="month"],
+input[type="week"] {
+	color-scheme: light;
+}
+.dark input[type="date"],
+.dark input[type="datetime-local"],
+.dark input[type="time"],
+.dark input[type="month"],
+.dark input[type="week"] {
+	color-scheme: dark;
+}
+
+/* Nudge the native calendar indicator so it sits in the padding, not flush
+   against the border. Also subtly tint it to the accent on hover for
+   discoverability. Only applied on date-style inputs. */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator {
+	opacity: 0.55;
+	cursor: pointer;
+	transition: opacity 120ms ease;
+}
+input[type="date"]:hover::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
+input[type="time"]:hover::-webkit-calendar-picker-indicator {
+	opacity: 0.9;
+}
+
+/* ─── Markdown rendered content ─────────────────────────────────────────
+   Styles for arbitrary user-rendered markdown (notes, JD scrape output,
+   research). Applied via .jd-markdown class on the wrapping container. */
+.jd-markdown h1 {
+	font-family: var(--display);
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin-top: 1.25rem;
+	margin-bottom: 0.5rem;
+}
+.jd-markdown h2 {
+	font-family: var(--display);
+	font-size: 1.1rem;
+	font-weight: 700;
+	margin-top: 1rem;
+	margin-bottom: 0.4rem;
+}
+.jd-markdown h3 {
+	font-family: var(--display);
+	font-size: 1rem;
+	font-weight: 600;
+	margin-top: 0.75rem;
+	margin-bottom: 0.3rem;
+}
+.jd-markdown p {
+	margin-bottom: 0.6rem;
+	line-height: 1.65;
+}
+.jd-markdown ul,
+.jd-markdown ol {
+	padding-left: 1.25rem;
+	margin-bottom: 0.6rem;
+}
+.jd-markdown ul {
+	list-style-type: disc;
+}
+.jd-markdown ol {
+	list-style-type: decimal;
+}
+.jd-markdown li {
+	margin-bottom: 0.25rem;
+	line-height: 1.55;
+}
+.jd-markdown code {
+	background: rgba(0, 0, 0, 0.04);
+	padding: 0.1rem 0.35rem;
+	border-radius: 4px;
+	font-size: 0.85em;
+	font-family: var(--mono);
+}
+.jd-markdown pre {
+	background: rgba(0, 0, 0, 0.04);
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	overflow-x: auto;
+	margin-bottom: 0.6rem;
+}
+.jd-markdown pre code {
+	background: transparent;
+	padding: 0;
+}
+.jd-markdown strong {
+	font-weight: 700;
+}
+.jd-markdown em {
+	font-style: italic;
+}
+.jd-markdown a {
+	color: #d97706;
+	text-decoration: underline;
+}
+.jd-markdown blockquote {
+	border-left: 3px solid #f59e0b;
+	padding-left: 0.75rem;
+	margin: 0.5rem 0;
+	opacity: 0.85;
+}
+
+.dark .jd-markdown code {
+	background: rgba(255, 255, 255, 0.06);
+}
+.dark .jd-markdown pre {
+	background: rgba(255, 255, 255, 0.06);
+}
+.dark .jd-markdown a {
+	color: #fbbf24;
+}

package/package.json

@@ -0,0 +1,104 @@
+{
+	"name": "@akhil-saxena/design-system",
+	"version": "1.2.0",
+	"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"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public"
+	},
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": ["dist", "README.md", "LICENSE"],
+	"sideEffects": ["*.css"],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./hooks": {
+			"types": "./dist/hooks/index.d.ts",
+			"import": "./dist/hooks/index.js"
+		},
+		"./icons": {
+			"types": "./dist/icons/index.d.ts",
+			"import": "./dist/icons/index.js"
+		},
+		"./tokens.css": "./dist/tokens.css",
+		"./primitives.css": "./dist/primitives.css",
+		"./utilities.css": "./dist/utilities.css"
+	},
+	"scripts": {
+		"build": "tsup",
+		"dev": "tsup --watch",
+		"test": "vitest run",
+		"test:visual": "playwright test",
+		"test:visual:update": "playwright test --update-snapshots",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"check": "biome check .",
+		"format": "biome format --write .",
+		"typecheck": "tsc --noEmit",
+		"prepare": "is-ci || husky",
+		"prepublishOnly": "npm run build && npm test"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"dependencies": {
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
+		"@fontsource/archivo": "^5.0.0",
+		"@fontsource/inter": "^5.0.0",
+		"@fontsource/jetbrains-mono": "^5.0.0",
+		"@tiptap/extension-code-block-lowlight": "^3.22.5",
+		"@tiptap/extension-link": "^3.22.5",
+		"@tiptap/extension-placeholder": "^3.22.5",
+		"@tiptap/extension-underline": "^3.22.5",
+		"@tiptap/pm": "^3.22.5",
+		"@tiptap/react": "^3.22.5",
+		"@tiptap/starter-kit": "^3.22.5",
+		"lowlight": "^3.3.0",
+		"lucide-react": "^1.14.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@playwright/test": "^1.59.1",
+		"@storybook/addon-essentials": "^8.6.14",
+		"@storybook/preview-api": "^8.6.18",
+		"@storybook/react-vite": "^8.6.18",
+		"@storybook/test-runner": "^0.23.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^4.3.4",
+		"@vitest/coverage-v8": "^4.1.4",
+		"husky": "^9.1.7",
+		"is-ci": "^4.1.0",
+		"jsdom": "^25.0.1",
+		"lint-staged": "^15.5.2",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"start-server-and-test": "^2.1.5",
+		"storybook": "^8.6.18",
+		"tsup": "^8.4.0",
+		"typescript": "~6.0.2",
+		"vitest": "^4.1.4"
+	},
+	"lint-staged": {
+		"*.{ts,tsx,js,jsx,json,jsonc,css}": ["biome check --write --no-errors-on-unmatched"]
+	},
+	"engines": {
+		"node": ">=20"
+	}
+}