@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.16

package/dist/styles/base.css

@@ -1,81 +1,92 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Surfaces, edges and states share one set of names in both modes; each mode only changes the
+   values. Ratios are WCAG 2.x. The roles and when to use each: docs/contributing/design-system.md. */
 :root {
-	--radius: 0.625rem;
 	--header-h: 3.5rem;
 	--below-header-h: calc(100svh - var(--header-h));
 	--page-px: 1rem;
 	--page-py: 1.75rem;
-	--background: oklch(0.99 0 0);
-	--foreground: oklch(0.22 0 0);
-	/* White, so a card stands apart from background and muted; Group adds a border, since
-	   white on background alone is too close to see. */
+	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead. */
+	--background: oklch(0.91 0 0);
 	--card: oklch(1 0 0);
+	--raised: oklch(1 0 0);
+	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
+	--muted: oklch(0.94 0 0);
+	/* Fill of anything you type into, on a card: the same step as raised, in both modes. The edge
+	   (`--input`) carries the boundary. A recessed fill reads as a disabled control. */
+	--field: var(--raised);
+	--foreground: oklch(0.22 0 0);
 	--card-foreground: oklch(0.22 0 0);
-	--popover: oklch(0.99 0 0);
 	--popover-foreground: oklch(0.22 0 0);
-	/* 4.5:1 as text on background, card and muted, and under white text. */
-	--primary: oklch(0.52 0.07 135);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.94 0 0);
-	--secondary-foreground: oklch(0.28 0 0);
-	--muted: oklch(0.95 0 0);
-	--muted-foreground: oklch(0.5 0 0);
-	--accent: oklch(0.93 0 0);
-	--accent-foreground: oklch(0.3 0 0);
-	/* 4.5:1 as small text on background, card and muted, and under white text. */
-	--destructive: oklch(0.55 0.19 27);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.86 0 0);
-	/* Field borders and unchecked boxes: at least 3:1 against background, card and muted, the
-	   WCAG minimum for a control's boundary. Same for the focus ring, which is drawn opaque. */
-	--input: oklch(0.62 0 0);
+	/* 4.5:1 on every surface. */
+	--muted-foreground: oklch(0.48 0 0);
+	/* Icons, placeholders, disabled text: 3:1 on every surface. */
+	--faint-foreground: oklch(0.6 0 0);
+	/* State overlays, laid over whatever surface is underneath. */
+	--hover: oklch(0 0 0 / 6%);
+	--selected: oklch(0 0 0 / 12%);
+	/* Rest fill of a neutral filled control; its hover is `selected`. */
+	--secondary: oklch(0 0 0 / 7%);
+	--secondary-foreground: oklch(0.22 0 0);
+	/* Outlines and separators. */
+	--border: oklch(0 0 0 / 11%);
+	/* Popovers, outline buttons, dashed drop zones. */
+	--border-strong: oklch(0 0 0 / 24%);
+	/* Edge of anything you type into or toggle, slider tracks included: at least 3:1 against the
+	   surfaces around it, the WCAG minimum for a control's boundary. */
+	--input: oklch(0 0 0 / 44%);
 	--ring: oklch(0.55 0 0);
-	--success: oklch(0.66 0.14 145);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 6%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 12%);
+	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
+	--primary: #4a7c52;
+	--primary-foreground: oklch(0.985 0 0);
+	--destructive: #c9302d;
+	--destructive-foreground: #fbfbfb;
+	/* 3:1 on every surface, as icons and dots. */
+	--success: #51a556;
 	--success-foreground: oklch(0.99 0 0);
-	--warning: oklch(0.78 0.12 75);
+	--warning: #bd8630;
 	--warning-foreground: oklch(0.25 0.04 75);
-	--info: oklch(0.68 0.11 245);
+	--info: #5399d1;
 	--info-foreground: oklch(0.99 0 0);
 	--chart-1: oklch(0.65 0.14 135);
 	--chart-2: oklch(0.7 0.11 200);
 	--chart-3: oklch(0.6 0.13 260);
 	--chart-4: oklch(0.78 0.13 80);
 	--chart-5: oklch(0.68 0.15 30);
-	--sidebar: oklch(0.96 0 0);
-	--sidebar-foreground: oklch(0.25 0 0);
-	--sidebar-primary: oklch(0.52 0.07 135);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.93 0 0);
-	--sidebar-accent-foreground: oklch(0.3 0 0);
-	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.55 0 0);
-	--inputparam: oklch(1 0 0);
-	--outputparam: oklch(1 0 0);
 	/* Scrim behind modal dialogs and drawers. */
 	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
-	--background: oklch(0.17 0 0);
+	--background: oklch(0.155 0 0);
+	--card: oklch(0.235 0 0);
+	--raised: oklch(0.275 0 0);
+	--muted: oklch(0.18 0 0);
 	--foreground: oklch(0.96 0 0);
-	--card: oklch(0.23 0 0);
 	--card-foreground: oklch(0.96 0 0);
-	--popover: oklch(0.23 0 0);
 	--popover-foreground: oklch(0.96 0 0);
-	--primary: oklch(0.74 0.07 135);
-	--primary-foreground: oklch(0.18 0 0);
-	--secondary: oklch(0.3 0 0);
-	--secondary-foreground: oklch(0.96 0 0);
-	--muted: oklch(0.27 0 0);
 	--muted-foreground: oklch(0.72 0 0);
-	--accent: oklch(0.36 0 0);
-	--accent-foreground: oklch(0.92 0 0);
-	--destructive: oklch(0.7 0.17 22);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 36%);
+	--faint-foreground: oklch(0.56 0 0);
+	--hover: oklch(1 0 0 / 6%);
+	--selected: oklch(1 0 0 / 12%);
+	--secondary: oklch(1 0 0 / 8%);
+	--secondary-foreground: oklch(0.96 0 0);
+	--border: oklch(1 0 0 / 11%);
+	--border-strong: oklch(1 0 0 / 24%);
+	--input: oklch(1 0 0 / 41%);
 	--ring: oklch(0.74 0 0);
+	/* Shadows barely show on a dark canvas, so raised things catch a top highlight instead. */
+	--elevation-raised: inset 0 1px 0 oklch(1 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%), inset 0 1px 0 oklch(1 0 0 / 6%);
+	--primary: #86ab78;
+	--primary-foreground: oklch(0.18 0 0);
+	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
+	--destructive: oklch(0.7 0.17 22);
+	--destructive-foreground: oklch(0.18 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
 	--warning: oklch(0.8 0.14 75);
@@ -87,41 +98,39 @@
 	--chart-3: oklch(0.68 0.14 260);
 	--chart-4: oklch(0.78 0.14 80);
 	--chart-5: oklch(0.7 0.16 30);
-	--sidebar: oklch(0.21 0 0);
-	--sidebar-foreground: oklch(0.96 0 0);
-	--sidebar-primary: oklch(0.74 0.07 135);
-	--sidebar-primary-foreground: oklch(0.18 0 0);
-	--sidebar-accent: oklch(0.32 0 0);
-	--sidebar-accent-foreground: oklch(0.92 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.74 0 0);
-	--inputparam: oklch(0.15 0 0);
-	--outputparam: oklch(0.25 0 0);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	/* Concentric: an item inside a padded container takes the container's radius minus the
+	   padding. A 12px menu with 4px padding holds 8px items; a 10px control with 2px padding
+	   holds 8px segments. */
+	--radius-sm: 6px;
+	--radius-inner: 8px;
+	--radius-md: 10px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
 	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
+	--color-raised: var(--raised);
+	--color-popover: var(--raised);
 	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
+	--color-field: var(--field);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
+	--color-faint-foreground: var(--faint-foreground);
+	--color-hover: var(--hover);
+	--color-selected: var(--selected);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-overlay: var(--overlay);
 	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
 	--color-success: var(--success);
@@ -135,16 +144,8 @@
 	--color-chart-3: var(--chart-3);
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--color-inputparam: var(--inputparam);
-	--color-outputparam: var(--outputparam);
+	--shadow-raised: var(--elevation-raised);
+	--shadow-popover: var(--elevation-popover);
 }
 
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the

package/dist/utils/color-space.d.ts

@@ -0,0 +1,21 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** h in [0, 360), s and v in [0, 1]. */
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export declare function normalizeHex(input: string): string | null;
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+export declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+export declare const hexToHsv: (hex: string) => Hsv | null;
+export declare const hsvToHex: (hsv: Hsv) => string;
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export declare function contrastRatio(a: string, b: string): number | null;

package/dist/utils/color-space.js

@@ -0,0 +1,90 @@
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input) {
+    const raw = input.trim().replace(/^#/, '');
+    if (/^[0-9a-f]{3}$/i.test(raw)) {
+        return `#${raw
+            .split('')
+            .map((c) => c + c)
+            .join('')
+            .toLowerCase()}`;
+    }
+    if (/^[0-9a-f]{6}$/i.test(raw))
+        return `#${raw.toLowerCase()}`;
+    return null;
+}
+export function hexToRgb(hex) {
+    const normalized = normalizeHex(hex);
+    if (!normalized)
+        return null;
+    return {
+        r: parseInt(normalized.slice(1, 3), 16),
+        g: parseInt(normalized.slice(3, 5), 16),
+        b: parseInt(normalized.slice(5, 7), 16)
+    };
+}
+export function rgbToHex({ r, g, b }) {
+    const channel = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+export function rgbToHsv({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const delta = max - Math.min(rn, gn, bn);
+    let h = 0;
+    if (delta !== 0) {
+        if (max === rn)
+            h = ((gn - bn) / delta) % 6;
+        else if (max === gn)
+            h = (bn - rn) / delta + 2;
+        else
+            h = (rn - gn) / delta + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+export function hsvToRgb({ h, s, v }) {
+    const c = v * s;
+    const hp = (((h % 360) + 360) % 360) / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    const [r1, g1, b1] = hp < 1
+        ? [c, x, 0]
+        : hp < 2
+            ? [x, c, 0]
+            : hp < 3
+                ? [0, c, x]
+                : hp < 4
+                    ? [0, x, c]
+                    : hp < 5
+                        ? [x, 0, c]
+                        : [c, 0, x];
+    const m = v - c;
+    return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+export const hexToHsv = (hex) => {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb) : null;
+};
+export const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }) {
+    const lin = (c) => {
+        const n = c / 255;
+        return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export function contrastRatio(a, b) {
+    const ra = hexToRgb(a);
+    const rb = hexToRgb(b);
+    if (!ra || !rb)
+        return null;
+    const la = luminance(ra);
+    const lb = luminance(rb);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.15",
+  "version": "6.6.0-beta.16",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -44,8 +44,7 @@
       "types": "./dist/external/storage.d.ts",
       "svelte": "./dist/external/storage.js"
     },
-    "./styles/base.css": "./src/lib/styles/base.css",
-    "./styles/themes/*": "./src/lib/styles/themes/*"
+    "./styles/base.css": "./src/lib/styles/base.css"
   },
   "files": [
     "dist",
@@ -62,11 +61,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.186.1",
+    "three": "^0.187.0",
     "@selvajs/compute": "^5.0.0-beta.9",
-    "@selvajs/visualization": "^1.6.0-beta.9",
+    "@selvajs/solve": "^2.0.0-beta.12",
     "@selvajs/schemas": "^5.3.0-beta.2",
-    "@selvajs/solve": "^2.0.0-beta.12"
+    "@selvajs/visualization": "^1.6.0-beta.9"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -88,17 +87,17 @@
     "@internationalized/date": "^3.12.4",
     "@sveltejs/kit": "2.70.3",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/three": "^0.186.0",
+    "@types/three": "^0.187.0",
     "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
     "svelte": "5.57.2",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.5",
     "@selvajs/compute": "5.0.0-beta.9",
-    "@selvajs/visualization": "1.6.0-beta.9",
-    "@selvajs/solve": "2.0.0-beta.12",
     "@selvajs/config": "0.0.4",
-    "@selvajs/schemas": "5.3.0-beta.2"
+    "@selvajs/visualization": "1.6.0-beta.9",
+    "@selvajs/schemas": "5.3.0-beta.2",
+    "@selvajs/solve": "2.0.0-beta.12"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/compute/AppLayout.svelte

@@ -284,7 +284,7 @@
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
 	{:else if hasMenu || solvingIndicatorPlacement === 'inline'}
-		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border/50">
+		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border">
 			{#if solvingIndicatorPlacement === 'inline'}
 				<SolvingIndicator show={showSolvingChip} placement="inline" />
 			{/if}
@@ -325,7 +325,7 @@
 	data-layout-root
 	class="min-h-0 flex flex-1 flex-col overflow-hidden {stacked
 		? ''
-		: `sm:flex-row sm:py-(--page-py) ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-(--page-px)'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}`}"
+		: `sm:flex-row sm:py-2 ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-2'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-2'}`}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
 	class:mobile-root={stacked}
@@ -355,7 +355,7 @@
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
+				class="drawer-container z-40 rounded-t-xl border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
@@ -473,6 +473,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -504,6 +505,7 @@
 						<Resizable.Handle
 							withHandle
 							line={false}
+							class="-translate-x-1.5 z-20"
 							data-collapsed={rightCollapsed}
 							onclick={() => {
 								if (rightCollapsed) rightPaneRef?.expand();

package/src/lib/components/compute/CollapsedPanelStrip.svelte

@@ -27,7 +27,7 @@
 	);
 
 	const tabButtonClass =
-		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
+		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground';
 </script>
 
 <div

package/src/lib/components/compute/ParameterPresetManager.svelte

@@ -203,7 +203,7 @@
 							<button
 								type="button"
 								onclick={() => selectListedState(preset)}
-								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-hover"
 							>
 								<div class="text-sm font-medium">{preset.name}</div>
 								{#if preset.description}

package/src/lib/components/compute/SolveMessages.svelte

@@ -291,7 +291,7 @@
 	     framed box inside an edge-to-edge column reads as a dialog glued into the page. -->
 	<div
 		class={placement === 'inline'
-			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border/50'}`
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border'}`
 			: `p-3 bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background ${view === 'blocked' ? 'border-destructive/50' : ''}`}
 		role={view === 'review' || view === 'blocked' ? 'alert' : undefined}
 		data-testid="solve-messages"
@@ -319,7 +319,7 @@
 							title={t.solveMessagesEscHint}
 						>
 							{t.solveMessagesAbort}
-							<kbd class="px-1 font-sans rounded border border-border/60 text-2xs opacity-70">
+							<kbd class="px-1 font-sans rounded-sm border border-border text-2xs opacity-70">
 								Esc
 							</kbd>
 						</Button>

package/src/lib/components/layout/FooterItemRenderer.svelte

@@ -9,7 +9,7 @@
 {#if item.onClick}
 	<button
 		onclick={item.onClick}
-		class="gap-1.5 px-2 py-0.5 rounded flex cursor-pointer items-center transition-colors hover:bg-muted"
+		class="gap-1.5 px-2 py-0.5 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover"
 	>
 		<item.component {...itemProps} />
 	</button>

package/src/lib/components/layout/PageFooter.svelte

@@ -88,12 +88,12 @@
 			<ComputeMessagesDialog {errors} {warnings} {diagnostics}>
 				{#snippet trigger()}
 					<div
-						class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errorCount >
+						class="gap-1.5 px-2 py-1 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover {errorCount >
 						0
 							? 'text-destructive hover:bg-destructive/10'
 							: warningCount > 0
 								? 'text-warning hover:bg-warning/10'
-								: 'hover:bg-muted'}"
+								: 'hover:bg-hover'}"
 						title={formatCount(totalCount, t.lastSolveMessagesOne, t.lastSolveMessagesOther)}
 					>
 						{#if errorCount > 0}

package/src/lib/components/layout/PageHeader.svelte

@@ -66,7 +66,7 @@
 	</div>
 
 	{#if subnav}
-		<div class="h-10 flex items-center border-t border-border/60 px-(--page-px)">
+		<div class="h-10 flex items-center border-t border-border px-(--page-px)">
 			{@render subnav()}
 		</div>
 	{/if}

package/src/lib/components/layout/SideNav.svelte

@@ -119,8 +119,8 @@
 				aria-current={active ? 'page' : undefined}
 				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
 					active
-						? 'pl-4 rounded-r-md bg-accent text-accent-foreground'
-						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-4 rounded-r-md bg-selected text-foreground'
+						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-hover hover:text-foreground'
 				}`}
 			>
 				{#if active}
@@ -138,7 +138,7 @@
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border">
 			{@render footer()}
 		</div>
 	{/if}

package/src/lib/components/layout/SubNav.svelte

@@ -31,8 +31,8 @@
 			class={[
 				'h-7 px-3 gap-1.5 text-sm font-medium flex items-center rounded-md transition-colors',
 				active
-					? 'bg-accent text-accent-foreground'
-					: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+					? 'bg-selected text-foreground'
+					: 'text-muted-foreground hover:bg-hover hover:text-foreground'
 			].join(' ')}
 		>
 			{#if item.icon}

package/src/lib/components/preview/ChartOutput.svelte

@@ -222,7 +222,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded-lg border border-border {isFullscreen
+	class="group relative overflow-hidden rounded-lg border border-border-strong {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -241,7 +241,7 @@
 		>
 			{#if loading}
 				<div
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-muted-foreground"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-muted-foreground"
 				>
 					<Loader size={14} class="animate-spin" />
 				</div>
@@ -253,7 +253,7 @@
 					disabled={loading}
 					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
 					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{#if isFullscreen}
 						<Minimize size={14} />

package/src/lib/components/preview/Group.svelte

@@ -69,7 +69,7 @@
 	</div>
 {/snippet}
 
-<section class="shadow-xs rounded-xl border bg-card">
+<section class="rounded-xl border bg-card shadow-raised">
 	{#if flat}
 		<div class="p-4">
 			{@render grid()}
@@ -80,18 +80,18 @@
 		<h3>
 			<button
 				type="button"
-				class="gap-3 px-4 pt-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
+				class="gap-3 px-4 pt-4 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
 					? 'pb-0'
-					: 'pb-3.5'}"
+					: 'pb-3'}"
 				aria-expanded={!collapsed}
 				aria-describedby={description ? descriptionId : undefined}
 				onclick={onToggle}
 			>
-				<span class="min-w-0 text-base font-semibold leading-snug flex-1 text-foreground"
+				<span class="min-w-0 text-sm font-semibold leading-snug flex-1 text-foreground"
 					>{label}</span
 				>
 				<ChevronDown
-					class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+					class="mt-0.5 h-4 w-4 shrink-0 text-faint-foreground transition-transform duration-200 {collapsed
 						? '-rotate-90'
 						: ''}"
 				/>
@@ -100,14 +100,14 @@
 		{#if description}
 			<p
 				id={descriptionId}
-				class="pl-4 pr-11 pt-0.5 pb-3.5 text-xs leading-snug text-muted-foreground"
+				class="pl-4 pr-11 pt-0.5 pb-3 text-xs leading-snug text-muted-foreground"
 			>
 				{description}
 			</p>
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-5">
+				<div class="px-4 pt-1 pb-4">
 					{@render grid()}
 				</div>
 			</div>