@nucel/ui 0.2.0 → 0.10.0

package/src/lib/utils/detectLanguage.ts

@@ -0,0 +1,187 @@
+/**
+ * Map a file path / extension to a Shiki bundled language id.
+ *
+ * Returns `'plaintext'` for anything unknown — never throws, never returns
+ * undefined. Safe to feed straight into `<CodeBlock language={...}>`.
+ */
+
+const EXT_TO_LANG: Record<string, string> = {
+	// JS / TS family
+	js: 'javascript',
+	mjs: 'javascript',
+	cjs: 'javascript',
+	jsx: 'jsx',
+	ts: 'typescript',
+	mts: 'typescript',
+	cts: 'typescript',
+	tsx: 'tsx',
+
+	// Web / markup
+	html: 'html',
+	htm: 'html',
+	svelte: 'svelte',
+	vue: 'vue',
+	astro: 'astro',
+	xml: 'xml',
+	svg: 'xml',
+
+	// Styles
+	css: 'css',
+	scss: 'scss',
+	sass: 'sass',
+	less: 'less',
+	styl: 'stylus',
+
+	// Data / config
+	json: 'json',
+	jsonc: 'jsonc',
+	json5: 'json5',
+	yaml: 'yaml',
+	yml: 'yaml',
+	toml: 'toml',
+	ini: 'ini',
+	env: 'shellscript',
+
+	// Markdown / docs
+	md: 'markdown',
+	mdx: 'mdx',
+	markdown: 'markdown',
+	rst: 'plaintext',
+	tex: 'latex',
+
+	// Systems languages
+	rs: 'rust',
+	go: 'go',
+	c: 'c',
+	h: 'c',
+	cpp: 'cpp',
+	cxx: 'cpp',
+	cc: 'cpp',
+	hpp: 'cpp',
+	cs: 'csharp',
+	java: 'java',
+	kt: 'kotlin',
+	kts: 'kotlin',
+	swift: 'swift',
+	scala: 'scala',
+	zig: 'zig',
+	d: 'd',
+	nim: 'nim',
+	v: 'v',
+
+	// Scripting
+	py: 'python',
+	pyw: 'python',
+	rb: 'ruby',
+	php: 'php',
+	pl: 'perl',
+	pm: 'perl',
+	lua: 'lua',
+	r: 'r',
+	jl: 'julia',
+	groovy: 'groovy',
+	clj: 'clojure',
+	cljs: 'clojure',
+	cljc: 'clojure',
+	ex: 'elixir',
+	exs: 'elixir',
+	erl: 'erlang',
+	hrl: 'erlang',
+	hs: 'haskell',
+	ml: 'ocaml',
+	mli: 'ocaml',
+	fs: 'fsharp',
+	fsx: 'fsharp',
+
+	// Shell / ops
+	sh: 'shellscript',
+	bash: 'shellscript',
+	zsh: 'shellscript',
+	fish: 'fish',
+	ps1: 'powershell',
+	bat: 'batch',
+	cmd: 'batch',
+	nu: 'nushell',
+	dockerfile: 'dockerfile',
+	dockerignore: 'plaintext',
+	gitignore: 'plaintext',
+	gitattributes: 'plaintext',
+	makefile: 'makefile',
+	mk: 'makefile',
+
+	// Queries / DB
+	sql: 'sql',
+	graphql: 'graphql',
+	gql: 'graphql',
+	prisma: 'prisma',
+
+	// IaC
+	tf: 'terraform',
+	tfvars: 'terraform',
+	hcl: 'hcl',
+	nix: 'nix',
+
+	// Diff / patch / proto
+	diff: 'diff',
+	patch: 'diff',
+	proto: 'proto',
+};
+
+const FILENAME_TO_LANG: Record<string, string> = {
+	dockerfile: 'dockerfile',
+	'docker-compose.yml': 'yaml',
+	'docker-compose.yaml': 'yaml',
+	makefile: 'makefile',
+	gnumakefile: 'makefile',
+	cmakelists: 'cmake',
+	'cmakelists.txt': 'cmake',
+	rakefile: 'ruby',
+	gemfile: 'ruby',
+	'gemfile.lock': 'plaintext',
+	procfile: 'plaintext',
+	jenkinsfile: 'groovy',
+	'cargo.toml': 'toml',
+	'cargo.lock': 'toml',
+	'package.json': 'json',
+	'tsconfig.json': 'jsonc',
+	'.gitignore': 'plaintext',
+	'.dockerignore': 'plaintext',
+	'.env': 'shellscript',
+	'.env.local': 'shellscript',
+	'.editorconfig': 'ini',
+};
+
+/**
+ * Detect Shiki language id from a file path.
+ * Falls back to `'plaintext'` for unknown extensions.
+ *
+ * @example
+ *   detectLanguageFromPath('src/main.rs')        // 'rust'
+ *   detectLanguageFromPath('Dockerfile')         // 'dockerfile'
+ *   detectLanguageFromPath('a/b/.eslintrc.json') // 'json'
+ *   detectLanguageFromPath('LICENSE')            // 'plaintext'
+ */
+export function detectLanguageFromPath(path: string): string {
+	if (!path) return 'plaintext';
+
+	const segments = path.split('/');
+	const file = (segments[segments.length - 1] ?? '').toLowerCase();
+
+	// Exact filename match (Dockerfile, Makefile, Cargo.toml, ...)
+	if (FILENAME_TO_LANG[file]) return FILENAME_TO_LANG[file];
+
+	// Extension lookup — handle `.eslintrc.json` style (last `.<ext>` wins)
+	const dot = file.lastIndexOf('.');
+	if (dot > -1 && dot < file.length - 1) {
+		const ext = file.slice(dot + 1);
+		if (EXT_TO_LANG[ext]) return EXT_TO_LANG[ext];
+	}
+
+	// Bare dotfiles like `.bashrc`, `.zshrc`
+	if (file.startsWith('.')) {
+		const stem = file.slice(1);
+		if (stem.endsWith('rc') || stem.endsWith('profile')) return 'shellscript';
+	}
+
+	return 'plaintext';
+}

package/src/lib/utils/monaco-workers.d.ts

@@ -0,0 +1,32 @@
+// Type declarations for Monaco worker imports.
+//
+// These are Vite-specific `?worker` query imports that resolve to a
+// constructor for a Web Worker. TypeScript otherwise can't find them
+// because they don't physically exist as ESM modules on disk — Vite
+// rewrites them at build time. The same pattern is used for Vite's
+// `vite/client` types but we only need the Monaco ones here.
+
+declare module 'monaco-editor/esm/vs/editor/editor.worker?worker' {
+	const WorkerCtor: { new (): Worker };
+	export default WorkerCtor;
+}
+
+declare module 'monaco-editor/esm/vs/language/json/json.worker?worker' {
+	const WorkerCtor: { new (): Worker };
+	export default WorkerCtor;
+}
+
+declare module 'monaco-editor/esm/vs/language/css/css.worker?worker' {
+	const WorkerCtor: { new (): Worker };
+	export default WorkerCtor;
+}
+
+declare module 'monaco-editor/esm/vs/language/html/html.worker?worker' {
+	const WorkerCtor: { new (): Worker };
+	export default WorkerCtor;
+}
+
+declare module 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' {
+	const WorkerCtor: { new (): Worker };
+	export default WorkerCtor;
+}

package/src/lib/utils/monacoLoader.ts

@@ -0,0 +1,167 @@
+/**
+ * Monaco Editor lazy loader.
+ *
+ * Why a dedicated loader:
+ * - `monaco-editor` is ~3-5MB un-gzipped. Importing it eagerly would bloat
+ *   the initial bundle of every consumer of `@nucel/ui`. We always load it
+ *   lazily via dynamic `import()`.
+ * - Monaco's web workers must be told where to load their JS from via the
+ *   global `MonacoEnvironment.getWorker` hook. We register this once per
+ *   page, on the first call.
+ * - The whole thing is browser-only (no `window` → bail out) so it stays
+ *   SSR-safe.
+ *
+ * Worker bundling: each worker is imported with Vite's `?worker` query.
+ * Vite (and Storybook with the Vite builder) emits a separate chunk for
+ * each one, so they're code-split and downloaded on demand.
+ *
+ * Consumers should NOT import `monaco-editor` directly — always go through
+ * `loadMonaco()`.
+ */
+
+import type * as MonacoNs from 'monaco-editor';
+
+let monacoPromise: Promise<typeof MonacoNs> | null = null;
+let themesRegistered = false;
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+	interface Window {
+		MonacoEnvironment?: {
+			getWorker?: (workerId: string, label: string) => Worker | Promise<Worker>;
+			getWorkerUrl?: (workerId: string, label: string) => string;
+		};
+	}
+}
+
+/**
+ * Lazily load Monaco. Safe to call from any environment; resolves to `null`
+ * during SSR. Subsequent calls return the same in-flight promise.
+ */
+export function loadMonaco(): Promise<typeof MonacoNs> | null {
+	if (typeof window === 'undefined') return null;
+	if (monacoPromise) return monacoPromise;
+
+	monacoPromise = (async () => {
+		// Register the worker factory before any editor is created.
+		// Each worker is imported as a Vite `?worker` for proper code-splitting.
+		// `getWorker` may return a promise, which Monaco awaits internally.
+		if (!window.MonacoEnvironment) {
+			window.MonacoEnvironment = {
+				getWorker: async (_workerId: string, label: string): Promise<Worker> => {
+					// Dynamic `?worker` imports return `{ default: WorkerCtor }`.
+					// Vite emits a separate chunk per worker.
+					switch (label) {
+						case 'json': {
+							const { default: WorkerCtor } = await import(
+								'monaco-editor/esm/vs/language/json/json.worker?worker'
+							);
+							return new WorkerCtor();
+						}
+						case 'css':
+						case 'scss':
+						case 'less': {
+							const { default: WorkerCtor } = await import(
+								'monaco-editor/esm/vs/language/css/css.worker?worker'
+							);
+							return new WorkerCtor();
+						}
+						case 'html':
+						case 'handlebars':
+						case 'razor': {
+							const { default: WorkerCtor } = await import(
+								'monaco-editor/esm/vs/language/html/html.worker?worker'
+							);
+							return new WorkerCtor();
+						}
+						case 'typescript':
+						case 'javascript': {
+							const { default: WorkerCtor } = await import(
+								'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+							);
+							return new WorkerCtor();
+						}
+						default: {
+							const { default: WorkerCtor } = await import(
+								'monaco-editor/esm/vs/editor/editor.worker?worker'
+							);
+							return new WorkerCtor();
+						}
+					}
+				},
+			};
+		}
+
+		const monaco = await import('monaco-editor');
+		registerNucelThemes(monaco);
+		return monaco;
+	})();
+
+	return monacoPromise;
+}
+
+/**
+ * Register two custom Monaco themes loosely matched to the nucel design
+ * tokens. We pin bg/fg/border/cursor/selection to nucel values and let
+ * Monaco's built-in `vs` / `vs-dark` cover the rest of the token palette.
+ *
+ * Monaco wants hex colors (#rrggbb / #rrggbbaa) which means we can't pipe
+ * our oklch tokens through directly. The values below are hand-tuned to
+ * match the surface/foreground colors used elsewhere in @nucel/ui.
+ */
+function registerNucelThemes(monaco: typeof MonacoNs): void {
+	if (themesRegistered) return;
+	themesRegistered = true;
+
+	monaco.editor.defineTheme('nucel-light', {
+		base: 'vs',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editor.background': '#ffffff',
+			'editor.foreground': '#0f172a',
+			'editorLineNumber.foreground': '#94a3b8',
+			'editorLineNumber.activeForeground': '#0f172a',
+			'editor.selectionBackground': '#dbeafe',
+			'editor.inactiveSelectionBackground': '#e2e8f0',
+			'editorCursor.foreground': '#0f172a',
+			'editor.lineHighlightBackground': '#f8fafc',
+			'editorGutter.background': '#ffffff',
+			'editorWidget.background': '#ffffff',
+			'editorWidget.border': '#e2e8f0',
+			'diffEditor.insertedTextBackground': '#bbf7d055',
+			'diffEditor.removedTextBackground': '#fecaca55',
+		},
+	});
+
+	monaco.editor.defineTheme('nucel-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editor.background': '#0a0a0c',
+			'editor.foreground': '#f1f5f9',
+			'editorLineNumber.foreground': '#475569',
+			'editorLineNumber.activeForeground': '#f1f5f9',
+			'editor.selectionBackground': '#1e3a8a55',
+			'editor.inactiveSelectionBackground': '#1e293b',
+			'editorCursor.foreground': '#f1f5f9',
+			'editor.lineHighlightBackground': '#13131a',
+			'editorGutter.background': '#0a0a0c',
+			'editorWidget.background': '#13131a',
+			'editorWidget.border': '#1e293b',
+			'diffEditor.insertedTextBackground': '#16653433',
+			'diffEditor.removedTextBackground': '#7f1d1d33',
+		},
+	});
+}
+
+/** Resolve a "light" | "dark" | "auto" mode to a registered theme name. */
+export function resolveMonacoTheme(mode: 'light' | 'dark' | 'auto'): string {
+	if (typeof window === 'undefined') return 'nucel-light';
+	if (mode === 'auto') {
+		const isDark = document.documentElement.classList.contains('dark');
+		return isDark ? 'nucel-dark' : 'nucel-light';
+	}
+	return mode === 'dark' ? 'nucel-dark' : 'nucel-light';
+}

package/src/lib/utils/shikiHighlighter.ts

@@ -0,0 +1,78 @@
+/**
+ * Lazy, cached Shiki highlighter shared across all CodeBlock instances.
+ *
+ * Strategy:
+ *  - One singleton `HighlighterCore` created via `createHighlighter` from
+ *    `shiki/bundle/web` (web bundle — no fs / oniguruma node dependency).
+ *  - Themes (`github-light`, `github-dark`) and `plaintext` are loaded
+ *    eagerly on first `getHighlighter()` call.
+ *  - Additional languages are loaded on-demand via `loadLanguage(...)`.
+ *  - SSR-safe: callers must guard with `typeof window !== 'undefined'` or
+ *    invoke from `onMount()`. The Shiki web bundle pulls in an Oniguruma
+ *    WASM payload that is not appropriate for SSR.
+ */
+
+import type { Highlighter, BundledLanguage, BundledTheme } from 'shiki/bundle/web';
+
+export const SHIKI_LIGHT_THEME: BundledTheme = 'github-light';
+export const SHIKI_DARK_THEME: BundledTheme = 'github-dark';
+
+export const SHIKI_DEFAULT_LANGS: BundledLanguage[] = ['plaintext' as BundledLanguage];
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+const loadedLangs = new Set<string>(['plaintext']);
+const inFlightLangs = new Map<string, Promise<void>>();
+
+/**
+ * Get (or create) the singleton highlighter.
+ * Idempotent — subsequent calls return the cached promise.
+ */
+export function getHighlighter(): Promise<Highlighter> {
+	if (!highlighterPromise) {
+		highlighterPromise = import('shiki/bundle/web').then(({ createHighlighter }) =>
+			createHighlighter({
+				themes: [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME],
+				langs: SHIKI_DEFAULT_LANGS,
+			}),
+		);
+	}
+	return highlighterPromise;
+}
+
+/**
+ * Lazily register a language with the shared highlighter.
+ * Idempotent and safe to call concurrently from many CodeBlock instances.
+ */
+export async function loadLanguage(lang: string): Promise<void> {
+	if (!lang || lang === 'plaintext' || loadedLangs.has(lang)) return;
+
+	const inFlight = inFlightLangs.get(lang);
+	if (inFlight) return inFlight;
+
+	const task = (async () => {
+		const highlighter = await getHighlighter();
+		try {
+			await highlighter.loadLanguage(lang as BundledLanguage);
+			loadedLangs.add(lang);
+		} catch (err) {
+			// Unknown language — fall back silently to plaintext at render time.
+			// (Don't throw — failed highlighting should never break the consumer page.)
+			console.warn(`[@nucel/ui CodeBlock] Unknown language "${lang}":`, err);
+		} finally {
+			inFlightLangs.delete(lang);
+		}
+	})();
+
+	inFlightLangs.set(lang, task);
+	return task;
+}
+
+/**
+ * Returns the Shiki language to use, falling back to `plaintext` if the
+ * requested language hasn't been loaded yet (or failed to load).
+ */
+export function resolveLang(lang: string): string {
+	if (!lang) return 'plaintext';
+	if (loadedLangs.has(lang)) return lang;
+	return 'plaintext';
+}

package/src/styles.css

@@ -7,25 +7,61 @@
 	inherits: false;
 }
 
+/* -------------------------------------------------------------------------- */
+/*  Semantic color tokens (v0.6.0)                                            */
+/*                                                                            */
+/*  Light theme is the default on :root. The .dark class on <html> (or any    */
+/*  ancestor) switches to dark values via <ThemeProvider>.                    */
+/*                                                                            */
+/*  Naming convention                                                         */
+/*  ----------------                                                          */
+/*  - "Raw" tokens live on :root / .dark with unprefixed names (--bg, --fg,   */
+/*    --success, ...). These hold the actual color values.                    */
+/*  - Tailwind utility tokens are exposed via `@theme inline` further down    */
+/*    by mapping --color-* names to the raw tokens. Tailwind 4 then           */
+/*    generates utilities such as `bg-bg-elevated`, `text-fg-muted`,          */
+/*    `border-success`, etc.                                                  */
+/*  - Legacy shadcn tokens (--background, --foreground, --primary, ...) are   */
+/*    kept and aliased to the new raw tokens where they overlap, so existing  */
+/*    components ("bg-background", "text-foreground", ...) keep working.      */
+/* -------------------------------------------------------------------------- */
+
 :root {
 	--radius: 0.5rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.141 0.005 285.823);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.141 0.005 285.823);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.141 0.005 285.823);
-	--primary: oklch(0.21 0.006 285.885);
-	--primary-foreground: oklch(0.985 0 0);
+
+	/* Semantic surface + foreground (raw) */
+	--bg: oklch(1 0 0);
+	--bg-elevated: oklch(0.985 0 0);
+	--fg: oklch(0.141 0.005 285.823);
+	--fg-muted: oklch(0.552 0.016 285.938);
+
+	/* Semantic intent (raw) */
+	--primary-raw: oklch(0.21 0.006 285.885);
+	--primary-foreground-raw: oklch(0.985 0 0);
+	--success: oklch(0.62 0.17 145);
+	--success-foreground: oklch(0.99 0 0);
+	--warning: oklch(0.78 0.16 80);
+	--warning-foreground: oklch(0.18 0.02 80);
+	--danger: oklch(0.577 0.245 27.325);
+	--danger-foreground: oklch(0.985 0 0);
+
+	/* Legacy shadcn tokens — aliased to raw tokens where applicable. */
+	--background: var(--bg);
+	--foreground: var(--fg);
+	--card: var(--bg);
+	--card-foreground: var(--fg);
+	--popover: var(--bg);
+	--popover-foreground: var(--fg);
+	--primary: var(--primary-raw);
+	--primary-foreground: var(--primary-foreground-raw);
 	--secondary: oklch(0.967 0.001 286.375);
 	--secondary-foreground: oklch(0.21 0.006 285.885);
 	--muted: oklch(0.967 0.001 286.375);
-	--muted-foreground: oklch(0.552 0.016 285.938);
+	--muted-foreground: var(--fg-muted);
 	--accent: oklch(0.967 0.001 286.375);
 	--accent-foreground: oklch(0.21 0.006 285.885);
-	--destructive: oklch(0.577 0.245 27.325);
-	--success: oklch(0.527 0.154 150.069);
-	--warning: oklch(0.769 0.188 70.08);
+	--destructive: var(--danger);
+	--destructive-foreground: var(--danger-foreground);
 	--border: oklch(0.92 0.004 286.32);
 	--input: oklch(0.92 0.004 286.32);
 	--ring: oklch(0.705 0.015 286.067);
@@ -34,10 +70,10 @@
 	--chart-3: oklch(0.398 0.07 227.392);
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.141 0.005 285.823);
-	--sidebar-primary: oklch(0.21 0.006 285.885);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar: var(--bg-elevated);
+	--sidebar-foreground: var(--fg);
+	--sidebar-primary: var(--primary-raw);
+	--sidebar-primary-foreground: var(--primary-foreground-raw);
 	--sidebar-accent: oklch(0.967 0.001 286.375);
 	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 	--sidebar-border: oklch(0.92 0.004 286.32);
@@ -45,23 +81,39 @@
 }
 
 .dark {
-	--background: oklch(0.07 0.004 285.823);
-	--foreground: oklch(0.97 0 0);
-	--card: oklch(0.13 0.006 285.885);
-	--card-foreground: oklch(0.97 0 0);
-	--popover: oklch(0.13 0.006 285.885);
-	--popover-foreground: oklch(0.97 0 0);
-	--primary: oklch(0.92 0.004 286.32);
-	--primary-foreground: oklch(0.13 0.006 285.885);
+	/* Semantic surface + foreground (raw) */
+	--bg: oklch(0.07 0.004 285.823);
+	--bg-elevated: oklch(0.13 0.006 285.885);
+	--fg: oklch(0.97 0 0);
+	--fg-muted: oklch(0.62 0.015 286.067);
+
+	/* Semantic intent (raw) */
+	--primary-raw: oklch(0.92 0.004 286.32);
+	--primary-foreground-raw: oklch(0.13 0.006 285.885);
+	--success: oklch(0.72 0.17 152);
+	--success-foreground: oklch(0.1 0.02 152);
+	--warning: oklch(0.82 0.17 85);
+	--warning-foreground: oklch(0.13 0.02 85);
+	--danger: oklch(0.704 0.191 22.216);
+	--danger-foreground: oklch(0.99 0 0);
+
+	/* Legacy shadcn tokens — dark-mode overrides where they diverge from raw. */
+	--background: var(--bg);
+	--foreground: var(--fg);
+	--card: var(--bg-elevated);
+	--card-foreground: var(--fg);
+	--popover: var(--bg-elevated);
+	--popover-foreground: var(--fg);
+	--primary: var(--primary-raw);
+	--primary-foreground: var(--primary-foreground-raw);
 	--secondary: oklch(0.19 0.006 286.033);
 	--secondary-foreground: oklch(0.97 0 0);
 	--muted: oklch(0.19 0.006 286.033);
-	--muted-foreground: oklch(0.62 0.015 286.067);
+	--muted-foreground: var(--fg-muted);
 	--accent: oklch(0.22 0.006 286.033);
 	--accent-foreground: oklch(0.97 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--success: oklch(0.627 0.168 150.069);
-	--warning: oklch(0.828 0.189 84.429);
+	--destructive: var(--danger);
+	--destructive-foreground: var(--danger-foreground);
 	--border: oklch(1 0 0 / 8%);
 	--input: oklch(1 0 0 / 12%);
 	--ring: oklch(0.552 0.016 285.938);
@@ -70,8 +122,8 @@
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.13 0.006 285.885);
-	--sidebar-foreground: oklch(0.97 0 0);
+	--sidebar: var(--bg-elevated);
+	--sidebar-foreground: var(--fg);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.97 0 0);
 	--sidebar-accent: oklch(0.22 0.006 286.033);
@@ -86,6 +138,22 @@
 	--radius-lg: var(--radius);
 	--radius-xl: calc(var(--radius) + 6px);
 	--radius-2xl: calc(var(--radius) + 12px);
+
+	/* New semantic surface + foreground utilities */
+	--color-bg: var(--bg);
+	--color-bg-elevated: var(--bg-elevated);
+	--color-fg: var(--fg);
+	--color-fg-muted: var(--fg-muted);
+
+	/* Intent utilities: bg-success / text-warning / border-danger / etc. */
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
+	--color-danger: var(--danger);
+	--color-danger-foreground: var(--danger-foreground);
+
+	/* Legacy shadcn utilities (kept for backwards-compat). */
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
@@ -101,8 +169,7 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
-	--color-success: var(--success);
-	--color-warning: var(--warning);
+	--color-destructive-foreground: var(--destructive-foreground);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
@@ -119,6 +186,7 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+
 	--font-sans: 'Inter', sans-serif;
 	--font-mono: 'JetBrains Mono', monospace;
 }