@djangocfg/ui-core 2.1.357 → 2.1.359

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.357",
+  "version": "2.1.359",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -77,6 +77,11 @@
       "types": "./src/styles/palette/index.ts",
       "import": "./src/styles/palette/index.ts",
       "require": "./src/styles/palette/index.ts"
+    },
+    "./styles/presets": {
+      "types": "./src/styles/presets/index.ts",
+      "import": "./src/styles/presets/index.ts",
+      "require": "./src/styles/presets/index.ts"
     }
   },
   "files": [
@@ -91,7 +96,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.357",
+    "@djangocfg/i18n": "^2.1.359",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -161,9 +166,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.357",
+    "@djangocfg/i18n": "^2.1.359",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.357",
+    "@djangocfg/typescript-config": "^2.1.359",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/styles/base.css

@@ -11,6 +11,17 @@
   --radius-popover: 0.75rem;
   --radius-dialog: 1.5rem;
   --radius-tooltip: 0.375rem;
+
+  /* Typography tokens — overridable per preset */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-size-base: 0.875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-xs: 0.75rem;
+  --font-size-lg: 1rem;
+  --font-size-xl: 1.125rem;
+  --line-height-base: 1.5;
+  --letter-spacing-base: 0em;
 }
 
 /* Base element styles */
@@ -25,5 +36,9 @@ html {
 body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-base);
   font-feature-settings: "rlig" 1, "calt" 1;
 }

package/src/styles/presets/build.ts

@@ -0,0 +1,64 @@
+import type { ThemeCssVarMap, ThemeStyleConfig, ThemeStylePresetId } from './types';
+import { THEME_STYLE_PRESETS } from './presets';
+
+function mergeLayer(base: ThemeCssVarMap | undefined, over: ThemeCssVarMap | undefined): ThemeCssVarMap {
+  return { ...base, ...over };
+}
+
+/**
+ * Tailwind v4 `rounded-*` utilities are backed by `--radius-*` scale variables.
+ * When semantic `radius` is present, emit the derived scale too.
+ */
+function withTailwindRadiusScale(vars: ThemeCssVarMap): Array<[string, string]> {
+  const entries = Object.entries(vars);
+  const radius = vars.radius;
+  if (!radius) return entries;
+
+  const r = String(radius).trim();
+  if (!r) return entries;
+
+  const scale: Array<[string, string]> = [
+    ['radius-xs', `calc(${r} - 6px)`],
+    ['radius-sm', `calc(${r} - 4px)`],
+    ['radius-md', `calc(${r} - 2px)`],
+    ['radius-lg', r],
+    ['radius-xl', `calc(${r} + 4px)`],
+    ['radius-2xl', `calc(${r} + 8px)`],
+    ['radius-3xl', `calc(${r} + 12px)`],
+    ['radius-4xl', `calc(${r} + 16px)`],
+  ];
+
+  return [...entries, ...scale];
+}
+
+/**
+ * Build a stylesheet fragment: preset → vars.light / vars.dark.
+ * Inject this after globals (later rule wins).
+ */
+export function buildThemeStyleSheet(style?: ThemeStyleConfig): string {
+  if (!style) return '';
+
+  const presetId: ThemeStylePresetId = style.preset ?? 'default';
+  const preset = THEME_STYLE_PRESETS[presetId] ?? THEME_STYLE_PRESETS.default;
+
+  const light = mergeLayer(preset.light, style.vars?.light);
+  const dark = mergeLayer(preset.dark, style.vars?.dark);
+
+  const blocks: string[] = [];
+
+  if (Object.keys(light).length > 0) {
+    const body = withTailwindRadiusScale(light)
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n');
+    blocks.push(`:root {\n${body}\n}`);
+  }
+
+  if (Object.keys(dark).length > 0) {
+    const body = withTailwindRadiusScale(dark)
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n');
+    blocks.push(`.dark {\n${body}\n}`);
+  }
+
+  return blocks.join('\n\n');
+}

package/src/styles/presets/index.ts

@@ -0,0 +1,15 @@
+export type {
+  ThemeCssVarChartKey,
+  ThemeCssVarChromeKey,
+  ThemeCssVarColorKey,
+  ThemeCssVarKey,
+  ThemeCssVarMap,
+  ThemeCssVarSidebarKey,
+  ThemeCssVarTypographyKey,
+  ThemeStyleConfig,
+  ThemeStylePresetId,
+} from './types';
+
+export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER } from './presets';
+
+export { buildThemeStyleSheet } from './build';

package/src/styles/presets/presets.ts

@@ -0,0 +1,24 @@
+import type { ThemeStylePresetId } from './types';
+import { THEME_PRESETS } from './themes';
+
+export const THEME_STYLE_PRESET_ORDER = [
+  'default',
+  'django-cfg',
+  'ios',
+  'macos',
+  'windows',
+  'soft',
+  'dense',
+  'high-contrast',
+  'catppuccin',
+  'dracula',
+  'github',
+  'gruvbox',
+  'material',
+  'nord',
+  'one-dark',
+  'solarized',
+  'tokyo-night',
+] as const satisfies readonly ThemeStylePresetId[];
+
+export const THEME_STYLE_PRESETS = THEME_PRESETS;

package/src/styles/presets/themes/catppuccin.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const catppuccinPreset: ThemePreset = {
+  light: {
+    background: '220 23% 95%', foreground: '234 16% 35%',
+    card: '220 23% 97%', 'card-foreground': '234 16% 35%',
+    popover: '220 23% 97%', 'popover-foreground': '234 16% 35%',
+    primary: '217 92% 66%', 'primary-foreground': '0 0% 9%',
+    secondary: '267 84% 71%', 'secondary-foreground': '0 0% 9%',
+    muted: '220 23% 92%', 'muted-foreground': '234 16% 65%',
+    accent: '189 71% 63%', 'accent-foreground': '234 16% 35%',
+    destructive: '343 81% 65%', 'destructive-foreground': '0 0% 98%',
+    border: '220 23% 85%', input: '220 23% 85%', ring: '217 92% 66%',
+    radius: '0.75rem',
+    'sidebar-background': '220 23% 93%', 'sidebar-foreground': '234 16% 35%',
+    'sidebar-primary': '217 92% 66%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '220 23% 91%', 'sidebar-accent-foreground': '234 16% 35%',
+    'sidebar-border': '220 23% 85%', 'sidebar-ring': '217 92% 66%',
+    'chart-1': '217 92% 66%', 'chart-2': '115 54% 66%', 'chart-3': '262 83% 58%', 'chart-4': '41 86% 73%', 'chart-5': '343 81% 65%',
+  },
+  dark: {
+    background: '240 21% 15%', foreground: '226 64% 88%',
+    card: '240 21% 19%', 'card-foreground': '226 64% 88%',
+    popover: '240 21% 19%', 'popover-foreground': '226 64% 88%',
+    primary: '217 92% 76%', 'primary-foreground': '0 0% 9%',
+    secondary: '267 84% 81%', 'secondary-foreground': '0 0% 9%',
+    muted: '240 21% 21%', 'muted-foreground': '226 64% 68%',
+    accent: '189 71% 73%', 'accent-foreground': '226 64% 88%',
+    destructive: '343 81% 75%', 'destructive-foreground': '0 0% 98%',
+    border: '240 21% 28%', input: '240 21% 28%', ring: '217 92% 76%',
+    radius: '0.75rem',
+    'sidebar-background': '240 21% 13%', 'sidebar-foreground': '226 64% 88%',
+    'sidebar-primary': '217 92% 76%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '240 21% 11%', 'sidebar-accent-foreground': '226 64% 88%',
+    'sidebar-border': '240 21% 28%', 'sidebar-ring': '217 92% 76%',
+    'chart-1': '217 92% 76%', 'chart-2': '115 54% 76%', 'chart-3': '262 83% 58%', 'chart-4': '41 86% 83%', 'chart-5': '343 81% 75%',
+  },
+};

package/src/styles/presets/themes/default.ts

@@ -0,0 +1,6 @@
+import type { ThemePreset } from './types';
+
+export const defaultPreset: ThemePreset = {
+  light: {},
+  dark: {},
+};

package/src/styles/presets/themes/dense.ts

@@ -0,0 +1,20 @@
+import type { ThemePreset } from './types';
+
+export const densePreset: ThemePreset = {
+  light: {
+    radius: '0.25rem',
+    border: '0 0% 82%',
+    input: '0 0% 82%',
+    muted: '0 0% 94%',
+    card: '0 0% 100%',
+    accent: '0 0% 93%',
+  },
+  dark: {
+    radius: '0.25rem',
+    border: '0 0% 24%',
+    input: '0 0% 24%',
+    muted: '0 0% 12%',
+    card: '0 0% 10%',
+    accent: '0 0% 14%',
+  },
+};

package/src/styles/presets/themes/django-cfg.ts

@@ -0,0 +1,21 @@
+import type { ThemePreset } from './types';
+
+export const djangoCfgPreset: ThemePreset = {
+  light: {
+    primary: '192 90% 35%',
+    'primary-foreground': '0 0% 100%',
+    ring: '192 90% 35%',
+    'sidebar-primary': '192 90% 35%',
+    'sidebar-ring': '192 90% 35%',
+    'chart-1': '192 90% 35%',
+  },
+  dark: {
+    primary: '189 100% 50%',
+    'primary-foreground': '0 0% 9%',
+    ring: '189 100% 50%',
+    'sidebar-primary': '189 100% 50%',
+    'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-ring': '189 100% 50%',
+    'chart-1': '189 100% 50%',
+  },
+};

package/src/styles/presets/themes/dracula.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const draculaPreset: ThemePreset = {
+  light: {
+    background: '265 20% 96%', foreground: '231 15% 18%',
+    card: '265 20% 98%', 'card-foreground': '231 15% 18%',
+    popover: '265 20% 98%', 'popover-foreground': '231 15% 18%',
+    primary: '265 89% 68%', 'primary-foreground': '0 0% 9%',
+    secondary: '326 100% 64%', 'secondary-foreground': '0 0% 9%',
+    muted: '265 20% 93%', 'muted-foreground': '231 15% 48%',
+    accent: '191 97% 67%', 'accent-foreground': '231 15% 18%',
+    destructive: '0 100% 57%', 'destructive-foreground': '0 0% 98%',
+    border: '265 20% 86%', input: '265 20% 86%', ring: '265 89% 68%',
+    radius: '0.5rem',
+    'sidebar-background': '265 20% 94%', 'sidebar-foreground': '231 15% 18%',
+    'sidebar-primary': '265 89% 68%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '265 20% 92%', 'sidebar-accent-foreground': '231 15% 18%',
+    'sidebar-border': '265 20% 86%', 'sidebar-ring': '265 89% 68%',
+    'chart-1': '265 89% 68%', 'chart-2': '135 94% 55%', 'chart-3': '262 83% 58%', 'chart-4': '65 92% 66%', 'chart-5': '0 100% 57%',
+  },
+  dark: {
+    background: '231 15% 18%', foreground: '60 30% 96%',
+    card: '231 15% 22%', 'card-foreground': '60 30% 96%',
+    popover: '231 15% 22%', 'popover-foreground': '60 30% 96%',
+    primary: '265 89% 78%', 'primary-foreground': '0 0% 9%',
+    secondary: '326 100% 74%', 'secondary-foreground': '0 0% 9%',
+    muted: '231 15% 24%', 'muted-foreground': '231 15% 64%',
+    accent: '191 97% 77%', 'accent-foreground': '60 30% 96%',
+    destructive: '0 100% 67%', 'destructive-foreground': '0 0% 98%',
+    border: '231 15% 28%', input: '231 15% 28%', ring: '265 89% 78%',
+    radius: '0.5rem',
+    'sidebar-background': '231 15% 16%', 'sidebar-foreground': '60 30% 96%',
+    'sidebar-primary': '265 89% 78%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '231 15% 14%', 'sidebar-accent-foreground': '60 30% 96%',
+    'sidebar-border': '231 15% 28%', 'sidebar-ring': '265 89% 78%',
+    'chart-1': '265 89% 78%', 'chart-2': '135 94% 65%', 'chart-3': '262 83% 58%', 'chart-4': '65 92% 76%', 'chart-5': '0 100% 67%',
+  },
+};

package/src/styles/presets/themes/github.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const githubPreset: ThemePreset = {
+  light: {
+    background: '0 0% 100%', foreground: '210 12% 16%',
+    card: '0 0% 100%', 'card-foreground': '210 12% 16%',
+    popover: '0 0% 100%', 'popover-foreground': '210 12% 16%',
+    primary: '212 92% 43%', 'primary-foreground': '0 0% 98%',
+    secondary: '210 18% 87%', 'secondary-foreground': '0 0% 9%',
+    muted: '0 0% 97%', 'muted-foreground': '210 12% 46%',
+    accent: '0 0% 95%', 'accent-foreground': '210 12% 16%',
+    destructive: '356 72% 44%', 'destructive-foreground': '0 0% 98%',
+    border: '0 0% 90%', input: '0 0% 90%', ring: '212 92% 43%',
+    radius: '0.375rem',
+    'sidebar-background': '0 0% 98%', 'sidebar-foreground': '210 12% 16%',
+    'sidebar-primary': '212 92% 43%', 'sidebar-primary-foreground': '0 0% 98%',
+    'sidebar-accent': '0 0% 96%', 'sidebar-accent-foreground': '210 12% 16%',
+    'sidebar-border': '0 0% 90%', 'sidebar-ring': '212 92% 43%',
+    'chart-1': '212 92% 43%', 'chart-2': '137 55% 36%', 'chart-3': '262 83% 58%', 'chart-4': '32 100% 50%', 'chart-5': '356 72% 44%',
+  },
+  dark: {
+    background: '210 11% 7%', foreground: '213 18% 88%',
+    card: '210 11% 11%', 'card-foreground': '213 18% 88%',
+    popover: '210 11% 11%', 'popover-foreground': '213 18% 88%',
+    primary: '212 92% 60%', 'primary-foreground': '0 0% 9%',
+    secondary: '215 14% 34%', 'secondary-foreground': '0 0% 98%',
+    muted: '210 11% 13%', 'muted-foreground': '213 18% 58%',
+    accent: '210 11% 16%', 'accent-foreground': '213 18% 88%',
+    destructive: '356 72% 60%', 'destructive-foreground': '0 0% 98%',
+    border: '210 11% 20%', input: '210 11% 20%', ring: '212 92% 60%',
+    radius: '0.375rem',
+    'sidebar-background': '210 11% 5%', 'sidebar-foreground': '213 18% 88%',
+    'sidebar-primary': '212 92% 60%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '210 11% 12%', 'sidebar-accent-foreground': '213 18% 88%',
+    'sidebar-border': '210 11% 20%', 'sidebar-ring': '212 92% 60%',
+    'chart-1': '212 92% 60%', 'chart-2': '137 56% 48%', 'chart-3': '262 83% 58%', 'chart-4': '29 100% 61%', 'chart-5': '356 72% 60%',
+  },
+};

package/src/styles/presets/themes/gruvbox.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const gruvboxPreset: ThemePreset = {
+  light: {
+    background: '48 87% 94%', foreground: '24 20% 29%',
+    card: '48 87% 96%', 'card-foreground': '24 20% 29%',
+    popover: '48 87% 96%', 'popover-foreground': '24 20% 29%',
+    primary: '205 82% 31%', 'primary-foreground': '0 0% 98%',
+    secondary: '175 62% 31%', 'secondary-foreground': '0 0% 98%',
+    muted: '48 87% 91%', 'muted-foreground': '24 20% 59%',
+    accent: '48 87% 89%', 'accent-foreground': '24 20% 29%',
+    destructive: '4 79% 49%', 'destructive-foreground': '0 0% 98%',
+    border: '48 87% 84%', input: '48 87% 84%', ring: '205 82% 31%',
+    radius: '0.375rem',
+    'sidebar-background': '48 87% 92%', 'sidebar-foreground': '24 20% 29%',
+    'sidebar-primary': '205 82% 31%', 'sidebar-primary-foreground': '0 0% 98%',
+    'sidebar-accent': '48 87% 90%', 'sidebar-accent-foreground': '24 20% 29%',
+    'sidebar-border': '48 87% 84%', 'sidebar-ring': '205 82% 31%',
+    'chart-1': '205 82% 31%', 'chart-2': '104 41% 40%', 'chart-3': '262 83% 58%', 'chart-4': '36 100% 40%', 'chart-5': '4 79% 49%',
+  },
+  dark: {
+    background: '0 0% 16%', foreground: '43 16% 78%',
+    card: '0 0% 20%', 'card-foreground': '43 16% 78%',
+    popover: '0 0% 20%', 'popover-foreground': '43 16% 78%',
+    primary: '205 82% 53%', 'primary-foreground': '0 0% 9%',
+    secondary: '175 62% 53%', 'secondary-foreground': '0 0% 9%',
+    muted: '0 0% 22%', 'muted-foreground': '43 16% 58%',
+    accent: '0 0% 24%', 'accent-foreground': '43 16% 78%',
+    destructive: '4 79% 63%', 'destructive-foreground': '0 0% 98%',
+    border: '0 0% 26%', input: '0 0% 26%', ring: '205 82% 53%',
+    radius: '0.375rem',
+    'sidebar-background': '0 0% 14%', 'sidebar-foreground': '43 16% 78%',
+    'sidebar-primary': '205 82% 53%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '0 0% 12%', 'sidebar-accent-foreground': '43 16% 78%',
+    'sidebar-border': '0 0% 26%', 'sidebar-ring': '205 82% 53%',
+    'chart-1': '205 82% 53%', 'chart-2': '104 41% 58%', 'chart-3': '262 83% 58%', 'chart-4': '39 100% 57%', 'chart-5': '4 79% 63%',
+  },
+};

package/src/styles/presets/themes/high-contrast.ts

@@ -0,0 +1,19 @@
+import type { ThemePreset } from './types';
+
+export const highContrastPreset: ThemePreset = {
+  light: {
+    border: '0 0% 72%',
+    input: '0 0% 72%',
+    'muted-foreground': '0 0% 32%',
+    foreground: '0 0% 6%',
+    ring: '0 0% 20%',
+  },
+  dark: {
+    border: '0 0% 38%',
+    input: '0 0% 38%',
+    'muted-foreground': '0 0% 78%',
+    foreground: '0 0% 100%',
+    background: '0 0% 6%',
+    ring: '0 0% 85%',
+  },
+};

package/src/styles/presets/themes/index.ts

@@ -0,0 +1,42 @@
+import type { ThemeStylePresetId } from '../types';
+import type { ThemePreset } from './types';
+
+import { defaultPreset } from './default';
+import { djangoCfgPreset } from './django-cfg';
+import { iosPreset } from './ios';
+import { macosPreset } from './macos';
+import { windowsPreset } from './windows';
+import { softPreset } from './soft';
+import { densePreset } from './dense';
+import { highContrastPreset } from './high-contrast';
+import { catppuccinPreset } from './catppuccin';
+import { draculaPreset } from './dracula';
+import { githubPreset } from './github';
+import { gruvboxPreset } from './gruvbox';
+import { materialPreset } from './material';
+import { nordPreset } from './nord';
+import { oneDarkPreset } from './one-dark';
+import { solarizedPreset } from './solarized';
+import { tokyoNightPreset } from './tokyo-night';
+
+export type { ThemePreset };
+
+export const THEME_PRESETS: Record<ThemeStylePresetId, ThemePreset> = {
+  'default':        defaultPreset,
+  'django-cfg':     djangoCfgPreset,
+  'ios':            iosPreset,
+  'macos':          macosPreset,
+  'windows':        windowsPreset,
+  'soft':           softPreset,
+  'dense':          densePreset,
+  'high-contrast':  highContrastPreset,
+  'catppuccin':     catppuccinPreset,
+  'dracula':        draculaPreset,
+  'github':         githubPreset,
+  'gruvbox':        gruvboxPreset,
+  'material':       materialPreset,
+  'nord':           nordPreset,
+  'one-dark':       oneDarkPreset,
+  'solarized':      solarizedPreset,
+  'tokyo-night':    tokyoNightPreset,
+};

package/src/styles/presets/themes/ios.ts

@@ -0,0 +1,74 @@
+import type { ThemePreset } from './types';
+
+export const iosPreset: ThemePreset = {
+  light: {
+    background: '0 0% 98%',
+    foreground: '220 9% 12%',
+    card: '0 0% 100%',
+    'card-foreground': '220 9% 12%',
+    popover: '0 0% 100%',
+    'popover-foreground': '220 9% 12%',
+    primary: '211 100% 50%',
+    'primary-foreground': '0 0% 100%',
+    secondary: '220 9% 92%',
+    'secondary-foreground': '220 9% 12%',
+    muted: '220 9% 94%',
+    'muted-foreground': '220 9% 40%',
+    accent: '220 9% 94%',
+    'accent-foreground': '220 9% 12%',
+    destructive: '0 100% 58%',
+    'destructive-foreground': '0 0% 100%',
+    border: '220 9% 88%',
+    input: '220 9% 88%',
+    ring: '211 100% 50%',
+    radius: '0.75rem',
+    'sidebar-background': '0 0% 99%',
+    'sidebar-foreground': '220 9% 12%',
+    'sidebar-primary': '211 100% 50%',
+    'sidebar-primary-foreground': '0 0% 100%',
+    'sidebar-accent': '220 9% 94%',
+    'sidebar-accent-foreground': '220 9% 12%',
+    'sidebar-border': '220 9% 88%',
+    'sidebar-ring': '211 100% 50%',
+    'chart-1': '211 100% 50%',
+    'chart-2': '145 63% 42%',
+    'chart-3': '262 83% 58%',
+    'chart-4': '35 100% 50%',
+    'chart-5': '346 77% 50%',
+  },
+  dark: {
+    background: '240 6% 10%',
+    foreground: '0 0% 96%',
+    card: '240 6% 14%',
+    'card-foreground': '0 0% 96%',
+    popover: '240 6% 16%',
+    'popover-foreground': '0 0% 96%',
+    primary: '211 100% 55%',
+    'primary-foreground': '0 0% 100%',
+    secondary: '240 5% 26%',
+    'secondary-foreground': '0 0% 96%',
+    muted: '240 5% 16%',
+    'muted-foreground': '240 5% 64%',
+    accent: '240 5% 18%',
+    'accent-foreground': '0 0% 96%',
+    destructive: '0 100% 67%',
+    'destructive-foreground': '0 0% 100%',
+    border: '240 5% 22%',
+    input: '240 5% 22%',
+    ring: '211 100% 55%',
+    radius: '0.75rem',
+    'sidebar-background': '240 6% 8%',
+    'sidebar-foreground': '0 0% 96%',
+    'sidebar-primary': '211 100% 55%',
+    'sidebar-primary-foreground': '0 0% 100%',
+    'sidebar-accent': '240 5% 16%',
+    'sidebar-accent-foreground': '0 0% 96%',
+    'sidebar-border': '240 5% 22%',
+    'sidebar-ring': '211 100% 55%',
+    'chart-1': '211 100% 55%',
+    'chart-2': '145 65% 52%',
+    'chart-3': '262 83% 65%',
+    'chart-4': '35 100% 58%',
+    'chart-5': '346 77% 58%',
+  },
+};

package/src/styles/presets/themes/macos.ts

@@ -0,0 +1,123 @@
+/**
+ * macOS Sonoma: systemGroupedBackground (#F2F2F7), systemBlue (#007AFF / #0A84FF),
+ * 10px radius, hairline borders, vibrancy-ready surfaces.
+ * Source: Apple HIG Color — https://developer.apple.com/design/human-interface-guidelines/color
+ */
+import type { ThemePreset } from './types';
+
+/**
+ * Apple HIG typography for Wails/WebKit embedded WebView.
+ *
+ * In native WebKit (Wails, Electron macOS) system fonts are accessible directly.
+ * SF Pro Text  — optimised for 11–19 pt (UI text, body, labels)
+ * SF Pro Display — optimised for 20 pt+ (headlines); browser/WebKit switches automatically
+ *   via -apple-system, but in embedded WebView naming it explicitly helps some engines.
+ * SF Mono — Apple's monospaced companion, available system-wide on macOS 10.12+
+ *
+ * Size scale matches Apple HIG points → rem (1pt ≈ 1px at 1x):
+ *   xs  11pt → 0.6875rem  (captions, timestamps)
+ *   sm  12pt → 0.75rem    (footnotes, secondary labels)
+ *   base 13pt → 0.8125rem  (body, default UI text — HIG "default")
+ *   lg  15pt → 0.9375rem  (subheadings, emphasized body)
+ *   xl  17pt → 1.0625rem  (titles, navigation bar)
+ *
+ * line-height 1.4 matches HIG recommended tight leading for UI elements.
+ * letter-spacing -0.01em matches SF Pro's optical tracking at small sizes.
+ */
+const appleTypography = {
+  'font-sans': '"SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif',
+  'font-mono': '"SF Mono", ui-monospace, Menlo, "Courier New", monospace',
+  'font-size-base': '0.8125rem',
+  'font-size-sm': '0.75rem',
+  'font-size-xs': '0.6875rem',
+  'font-size-lg': '0.9375rem',
+  'font-size-xl': '1.0625rem',
+  'line-height-base': '1.4',
+  'letter-spacing-base': '-0.01em',
+} as const;
+
+export const macosPreset: ThemePreset = {
+  light: {
+    // #F2F2F7 — systemGroupedBackground
+    background: '240 17% 97%',
+    foreground: '220 9% 10%',
+    card: '0 0% 100%',
+    'card-foreground': '220 9% 10%',
+    popover: '0 0% 100%',
+    'popover-foreground': '220 9% 10%',
+    // #007AFF — systemBlue
+    primary: '211 100% 50%',
+    'primary-foreground': '0 0% 100%',
+    // secondarySystemGroupedBackground #EFEFF4
+    secondary: '240 17% 95%',
+    'secondary-foreground': '220 9% 10%',
+    // tertiarySystemGroupedBackground #E5E5EA
+    muted: '240 6% 90%',
+    'muted-foreground': '220 9% 40%',
+    accent: '211 60% 95%',
+    'accent-foreground': '211 100% 35%',
+    destructive: '0 100% 58%',
+    'destructive-foreground': '0 0% 100%',
+    // Separator: rgba(60,60,67,0.29) → HSL approx
+    border: '240 6% 82%',
+    input: '240 6% 88%',
+    ring: '211 100% 50%',
+    radius: '0.625rem',
+    'sidebar-background': '240 17% 94%',
+    'sidebar-foreground': '220 9% 10%',
+    'sidebar-primary': '211 100% 50%',
+    'sidebar-primary-foreground': '0 0% 100%',
+    'sidebar-accent': '211 60% 93%',
+    'sidebar-accent-foreground': '211 100% 35%',
+    'sidebar-border': '240 6% 86%',
+    'sidebar-ring': '211 100% 50%',
+    'chart-1': '211 100% 50%',
+    'chart-2': '146 50% 36%',
+    'chart-3': '262 83% 58%',
+    'chart-4': '35 100% 50%',
+    'chart-5': '346 77% 50%',
+    ...appleTypography,
+  },
+  dark: {
+    // #1C1C1E — systemBackground dark
+    background: '240 5% 11%',
+    foreground: '0 0% 96%',
+    // #2C2C2E — secondarySystemBackground dark
+    card: '240 4% 18%',
+    'card-foreground': '0 0% 96%',
+    // #3A3A3C — popover elevated surface
+    popover: '240 4% 23%',
+    'popover-foreground': '0 0% 96%',
+    // #0A84FF — systemBlue dark
+    primary: '211 100% 58%',
+    'primary-foreground': '0 0% 100%',
+    secondary: '240 5% 24%',
+    'secondary-foreground': '0 0% 90%',
+    // #3A3A3C — tertiarySystemBackground dark
+    muted: '240 4% 23%',
+    'muted-foreground': '240 5% 60%',
+    accent: '211 30% 20%',
+    'accent-foreground': '211 100% 70%',
+    destructive: '0 100% 65%',
+    'destructive-foreground': '0 0% 100%',
+    // Separator dark: rgba(84,84,88,0.65)
+    border: '240 4% 30%',
+    input: '240 4% 26%',
+    ring: '211 100% 58%',
+    radius: '0.625rem',
+    'sidebar-background': '240 5% 8%',
+    'sidebar-foreground': '0 0% 90%',
+    'sidebar-primary': '211 100% 58%',
+    'sidebar-primary-foreground': '0 0% 100%',
+    'sidebar-accent': '211 25% 18%',
+    'sidebar-accent-foreground': '211 100% 70%',
+    'sidebar-border': '240 4% 20%',
+    'sidebar-ring': '211 100% 58%',
+    'chart-1': '211 100% 58%',
+    'chart-2': '146 50% 48%',
+    'chart-3': '262 83% 65%',
+    'chart-4': '35 100% 58%',
+    'chart-5': '346 77% 58%',
+    ...appleTypography,
+  },
+};

package/src/styles/presets/themes/material.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const materialPreset: ThemePreset = {
+  light: {
+    background: '0 0% 99%', foreground: '270 6% 13%',
+    card: '0 0% 100%', 'card-foreground': '270 6% 13%',
+    popover: '0 0% 100%', 'popover-foreground': '270 6% 13%',
+    primary: '258 89% 48%', 'primary-foreground': '0 0% 98%',
+    secondary: '264 7% 44%', 'secondary-foreground': '0 0% 98%',
+    muted: '0 0% 96%', 'muted-foreground': '270 6% 43%',
+    accent: '0 0% 94%', 'accent-foreground': '270 6% 13%',
+    destructive: '358 100% 45%', 'destructive-foreground': '0 0% 98%',
+    border: '0 0% 89%', input: '0 0% 89%', ring: '258 89% 48%',
+    radius: '0.75rem',
+    'sidebar-background': '0 0% 97%', 'sidebar-foreground': '270 6% 13%',
+    'sidebar-primary': '258 89% 48%', 'sidebar-primary-foreground': '0 0% 98%',
+    'sidebar-accent': '0 0% 95%', 'sidebar-accent-foreground': '270 6% 13%',
+    'sidebar-border': '0 0% 89%', 'sidebar-ring': '258 89% 48%',
+    'chart-1': '258 89% 48%', 'chart-2': '145 63% 42%', 'chart-3': '262 83% 58%', 'chart-4': '36 100% 50%', 'chart-5': '358 100% 45%',
+  },
+  dark: {
+    background: '270 6% 13%', foreground: '270 3% 90%',
+    card: '270 6% 17%', 'card-foreground': '270 3% 90%',
+    popover: '270 6% 17%', 'popover-foreground': '270 3% 90%',
+    primary: '258 100% 87%', 'primary-foreground': '0 0% 9%',
+    secondary: '264 14% 71%', 'secondary-foreground': '0 0% 9%',
+    muted: '270 6% 19%', 'muted-foreground': '270 3% 60%',
+    accent: '270 6% 22%', 'accent-foreground': '270 3% 90%',
+    destructive: '358 100% 70%', 'destructive-foreground': '0 0% 98%',
+    border: '270 6% 26%', input: '270 6% 26%', ring: '258 100% 87%',
+    radius: '0.75rem',
+    'sidebar-background': '270 6% 11%', 'sidebar-foreground': '270 3% 90%',
+    'sidebar-primary': '258 100% 87%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '270 6% 18%', 'sidebar-accent-foreground': '270 3% 90%',
+    'sidebar-border': '270 6% 26%', 'sidebar-ring': '258 100% 87%',
+    'chart-1': '258 100% 87%', 'chart-2': '145 63% 58%', 'chart-3': '262 83% 58%', 'chart-4': '36 100% 63%', 'chart-5': '358 100% 70%',
+  },
+};

package/src/styles/presets/themes/nord.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const nordPreset: ThemePreset = {
+  light: {
+    background: '220 16% 96%', foreground: '220 16% 22%',
+    card: '220 16% 98%', 'card-foreground': '220 16% 22%',
+    popover: '220 16% 98%', 'popover-foreground': '220 16% 22%',
+    primary: '213 32% 52%', 'primary-foreground': '0 0% 9%',
+    secondary: '179 25% 65%', 'secondary-foreground': '0 0% 9%',
+    muted: '220 16% 93%', 'muted-foreground': '220 16% 52%',
+    accent: '220 16% 91%', 'accent-foreground': '220 16% 22%',
+    destructive: '354 42% 56%', 'destructive-foreground': '0 0% 98%',
+    border: '220 16% 86%', input: '220 16% 86%', ring: '213 32% 52%',
+    radius: '0.5rem',
+    'sidebar-background': '220 16% 94%', 'sidebar-foreground': '220 16% 22%',
+    'sidebar-primary': '213 32% 52%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '220 16% 92%', 'sidebar-accent-foreground': '220 16% 22%',
+    'sidebar-border': '220 16% 86%', 'sidebar-ring': '213 32% 52%',
+    'chart-1': '213 32% 52%', 'chart-2': '92 28% 65%', 'chart-3': '262 83% 58%', 'chart-4': '14 51% 63%', 'chart-5': '354 42% 56%',
+  },
+  dark: {
+    background: '220 16% 22%', foreground: '218 27% 94%',
+    card: '220 16% 26%', 'card-foreground': '218 27% 94%',
+    popover: '220 16% 26%', 'popover-foreground': '218 27% 94%',
+    primary: '213 32% 52%', 'primary-foreground': '0 0% 9%',
+    secondary: '179 25% 65%', 'secondary-foreground': '0 0% 9%',
+    muted: '220 16% 28%', 'muted-foreground': '218 27% 64%',
+    accent: '220 16% 30%', 'accent-foreground': '218 27% 94%',
+    destructive: '354 42% 56%', 'destructive-foreground': '0 0% 98%',
+    border: '220 16% 32%', input: '220 16% 32%', ring: '213 32% 52%',
+    radius: '0.5rem',
+    'sidebar-background': '220 16% 20%', 'sidebar-foreground': '218 27% 94%',
+    'sidebar-primary': '213 32% 52%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '220 16% 18%', 'sidebar-accent-foreground': '218 27% 94%',
+    'sidebar-border': '220 16% 32%', 'sidebar-ring': '213 32% 52%',
+    'chart-1': '213 32% 52%', 'chart-2': '92 28% 65%', 'chart-3': '262 83% 58%', 'chart-4': '14 51% 63%', 'chart-5': '354 42% 56%',
+  },
+};

package/src/styles/presets/themes/one-dark.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const oneDarkPreset: ThemePreset = {
+  light: {
+    background: '0 0% 98%', foreground: '230 8% 24%',
+    card: '0 0% 100%', 'card-foreground': '230 8% 24%',
+    popover: '0 0% 100%', 'popover-foreground': '230 8% 24%',
+    primary: '207 82% 56%', 'primary-foreground': '0 0% 9%',
+    secondary: '187 47% 45%', 'secondary-foreground': '0 0% 98%',
+    muted: '0 0% 95%', 'muted-foreground': '230 8% 54%',
+    accent: '286 60% 57%', 'accent-foreground': '230 8% 24%',
+    destructive: '355 65% 55%', 'destructive-foreground': '0 0% 98%',
+    border: '0 0% 88%', input: '0 0% 88%', ring: '207 82% 56%',
+    radius: '0.5rem',
+    'sidebar-background': '0 0% 96%', 'sidebar-foreground': '230 8% 24%',
+    'sidebar-primary': '207 82% 56%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '0 0% 94%', 'sidebar-accent-foreground': '230 8% 24%',
+    'sidebar-border': '0 0% 88%', 'sidebar-ring': '207 82% 56%',
+    'chart-1': '207 82% 56%', 'chart-2': '95 38% 52%', 'chart-3': '262 83% 58%', 'chart-4': '29 54% 51%', 'chart-5': '355 65% 55%',
+  },
+  dark: {
+    background: '220 13% 18%', foreground: '220 14% 71%',
+    card: '220 13% 22%', 'card-foreground': '220 14% 71%',
+    popover: '220 13% 22%', 'popover-foreground': '220 14% 71%',
+    primary: '207 82% 66%', 'primary-foreground': '0 0% 9%',
+    secondary: '187 47% 55%', 'secondary-foreground': '0 0% 9%',
+    muted: '220 13% 24%', 'muted-foreground': '220 14% 55%',
+    accent: '286 60% 67%', 'accent-foreground': '220 14% 71%',
+    destructive: '355 65% 65%', 'destructive-foreground': '0 0% 98%',
+    border: '220 13% 28%', input: '220 13% 28%', ring: '207 82% 66%',
+    radius: '0.5rem',
+    'sidebar-background': '220 13% 16%', 'sidebar-foreground': '220 14% 71%',
+    'sidebar-primary': '207 82% 66%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '220 13% 14%', 'sidebar-accent-foreground': '220 14% 71%',
+    'sidebar-border': '220 13% 28%', 'sidebar-ring': '207 82% 66%',
+    'chart-1': '207 82% 66%', 'chart-2': '95 38% 62%', 'chart-3': '262 83% 58%', 'chart-4': '29 54% 61%', 'chart-5': '355 65% 65%',
+  },
+};

package/src/styles/presets/themes/soft.ts

@@ -0,0 +1,35 @@
+import type { ThemePreset } from './types';
+
+export const softPreset: ThemePreset = {
+  light: {
+    background: '0 0% 98%',
+    foreground: '240 6% 10%',
+    card: '0 0% 100%',
+    'card-foreground': '240 6% 10%',
+    muted: '240 5% 96%',
+    'muted-foreground': '240 4% 46%',
+    accent: '240 5% 94%',
+    'accent-foreground': '240 6% 10%',
+    border: '240 5% 91%',
+    input: '240 5% 91%',
+    radius: '1rem',
+    'sidebar-accent': '240 5% 94%',
+    'sidebar-border': '240 5% 91%',
+  },
+  dark: {
+    background: '240 6% 8%',
+    foreground: '0 0% 96%',
+    card: '240 5% 12%',
+    'card-foreground': '0 0% 96%',
+    muted: '240 4% 16%',
+    'muted-foreground': '240 5% 64%',
+    accent: '240 5% 16%',
+    'accent-foreground': '0 0% 96%',
+    border: '240 5% 20%',
+    input: '240 5% 20%',
+    radius: '1rem',
+    'sidebar-background': '240 6% 6%',
+    'sidebar-accent': '240 5% 14%',
+    'sidebar-border': '240 5% 20%',
+  },
+};

package/src/styles/presets/themes/solarized.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const solarizedPreset: ThemePreset = {
+  light: {
+    background: '44 87% 94%', foreground: '192 81% 14%',
+    card: '44 87% 96%', 'card-foreground': '192 81% 14%',
+    popover: '44 87% 96%', 'popover-foreground': '192 81% 14%',
+    primary: '205 69% 49%', 'primary-foreground': '0 0% 98%',
+    secondary: '175 59% 40%', 'secondary-foreground': '0 0% 98%',
+    muted: '44 87% 91%', 'muted-foreground': '192 81% 44%',
+    accent: '44 87% 89%', 'accent-foreground': '192 81% 14%',
+    destructive: '1 79% 55%', 'destructive-foreground': '0 0% 98%',
+    border: '44 87% 84%', input: '44 87% 84%', ring: '205 69% 49%',
+    radius: '0.25rem',
+    'sidebar-background': '44 87% 92%', 'sidebar-foreground': '192 81% 14%',
+    'sidebar-primary': '205 69% 49%', 'sidebar-primary-foreground': '0 0% 98%',
+    'sidebar-accent': '44 87% 90%', 'sidebar-accent-foreground': '192 81% 14%',
+    'sidebar-border': '44 87% 84%', 'sidebar-ring': '205 69% 49%',
+    'chart-1': '205 69% 49%', 'chart-2': '68 100% 30%', 'chart-3': '262 83% 58%', 'chart-4': '45 100% 35%', 'chart-5': '1 79% 55%',
+  },
+  dark: {
+    background: '192 100% 11%', foreground: '44 87% 94%',
+    card: '192 100% 15%', 'card-foreground': '44 87% 94%',
+    popover: '192 100% 15%', 'popover-foreground': '44 87% 94%',
+    primary: '205 69% 49%', 'primary-foreground': '0 0% 98%',
+    secondary: '175 59% 40%', 'secondary-foreground': '0 0% 98%',
+    muted: '192 100% 17%', 'muted-foreground': '44 87% 60%',
+    accent: '192 100% 20%', 'accent-foreground': '44 87% 94%',
+    destructive: '1 79% 55%', 'destructive-foreground': '0 0% 98%',
+    border: '192 100% 22%', input: '192 100% 22%', ring: '205 69% 49%',
+    radius: '0.25rem',
+    'sidebar-background': '192 100% 9%', 'sidebar-foreground': '44 87% 94%',
+    'sidebar-primary': '205 69% 49%', 'sidebar-primary-foreground': '0 0% 98%',
+    'sidebar-accent': '192 100% 14%', 'sidebar-accent-foreground': '44 87% 94%',
+    'sidebar-border': '192 100% 22%', 'sidebar-ring': '205 69% 49%',
+    'chart-1': '205 69% 49%', 'chart-2': '68 100% 45%', 'chart-3': '262 83% 58%', 'chart-4': '45 100% 51%', 'chart-5': '1 79% 55%',
+  },
+};

package/src/styles/presets/themes/tokyo-night.ts

@@ -0,0 +1,38 @@
+import type { ThemePreset } from './types';
+
+export const tokyoNightPreset: ThemePreset = {
+  light: {
+    background: '0 0% 99%', foreground: '240 7% 30%',
+    card: '0 0% 100%', 'card-foreground': '240 7% 30%',
+    popover: '0 0% 100%', 'popover-foreground': '240 7% 30%',
+    primary: '207 82% 56%', 'primary-foreground': '0 0% 9%',
+    secondary: '199 76% 59%', 'secondary-foreground': '0 0% 9%',
+    muted: '0 0% 96%', 'muted-foreground': '240 7% 60%',
+    accent: '180 58% 60%', 'accent-foreground': '240 7% 30%',
+    destructive: '2 56% 53%', 'destructive-foreground': '0 0% 98%',
+    border: '0 0% 89%', input: '0 0% 89%', ring: '207 82% 56%',
+    radius: '0.5rem',
+    'sidebar-background': '0 0% 97%', 'sidebar-foreground': '240 7% 30%',
+    'sidebar-primary': '207 82% 56%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '0 0% 95%', 'sidebar-accent-foreground': '240 7% 30%',
+    'sidebar-border': '0 0% 89%', 'sidebar-ring': '207 82% 56%',
+    'chart-1': '207 82% 56%', 'chart-2': '158 64% 42%', 'chart-3': '262 83% 58%', 'chart-4': '32 93% 56%', 'chart-5': '2 56% 53%',
+  },
+  dark: {
+    background: '235 18% 12%', foreground: '230 8% 76%',
+    card: '235 18% 16%', 'card-foreground': '230 8% 76%',
+    popover: '235 18% 16%', 'popover-foreground': '230 8% 76%',
+    primary: '207 82% 66%', 'primary-foreground': '0 0% 9%',
+    secondary: '199 76% 69%', 'secondary-foreground': '0 0% 9%',
+    muted: '235 18% 18%', 'muted-foreground': '230 8% 56%',
+    accent: '180 58% 70%', 'accent-foreground': '230 8% 76%',
+    destructive: '2 56% 63%', 'destructive-foreground': '0 0% 98%',
+    border: '235 18% 22%', input: '235 18% 22%', ring: '207 82% 66%',
+    radius: '0.5rem',
+    'sidebar-background': '235 18% 10%', 'sidebar-foreground': '230 8% 76%',
+    'sidebar-primary': '207 82% 66%', 'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '235 18% 15%', 'sidebar-accent-foreground': '230 8% 76%',
+    'sidebar-border': '235 18% 22%', 'sidebar-ring': '207 82% 66%',
+    'chart-1': '207 82% 66%', 'chart-2': '158 64% 52%', 'chart-3': '262 83% 58%', 'chart-4': '32 93% 66%', 'chart-5': '2 56% 63%',
+  },
+};

package/src/styles/presets/themes/types.ts

@@ -0,0 +1,6 @@
+import type { ThemeCssVarMap } from '../types';
+
+export interface ThemePreset {
+  light: ThemeCssVarMap;
+  dark: ThemeCssVarMap;
+}

package/src/styles/presets/themes/windows.ts

@@ -0,0 +1,107 @@
+/**
+ * Windows 11 Fluent Design: LayerFillColorDefault (#F3F3F3), AccentDark1 (#0067C0),
+ * 6px radius (WinUI 3 cards), subtle Mica-style chrome.
+ * Source: Microsoft Fluent 2 Design Tokens — https://fluent2.microsoft.design/color
+ */
+import type { ThemePreset } from './types';
+
+/** Segoe UI Variable typography (Fluent Design: 14pt base, neutral spacing) */
+const fluentTypography = {
+  'font-sans': '"Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif',
+  'font-mono': '"Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace',
+  'font-size-base': '0.875rem',
+  'font-size-sm': '0.8125rem',
+  'font-size-xs': '0.75rem',
+  'font-size-lg': '1rem',
+  'font-size-xl': '1.125rem',
+  'line-height-base': '1.5',
+  'letter-spacing-base': '0em',
+} as const;
+
+export const windowsPreset: ThemePreset = {
+  light: {
+    // #F3F3F3 — LayerFillColorDefault
+    background: '0 0% 95%',
+    foreground: '0 0% 9%',
+    // CardBackgroundFillColorDefault
+    card: '0 0% 100%',
+    'card-foreground': '0 0% 9%',
+    popover: '0 0% 100%',
+    'popover-foreground': '0 0% 9%',
+    // #0067C0 — AccentDark1 (WCAG AA on white)
+    primary: '210 100% 38%',
+    'primary-foreground': '0 0% 100%',
+    // SubtleFillColorSecondaryBackground #F0F0F0
+    secondary: '0 0% 94%',
+    'secondary-foreground': '0 0% 9%',
+    // SubtleFillColorTertiaryBackground #EBEBEB
+    muted: '0 0% 92%',
+    'muted-foreground': '0 0% 42%',
+    accent: '210 60% 94%',
+    'accent-foreground': '210 100% 28%',
+    destructive: '0 90% 55%',
+    'destructive-foreground': '0 0% 100%',
+    // ControlStrokeColorDefault: rgba(0,0,0,0.0578)
+    border: '0 0% 87%',
+    input: '0 0% 90%',
+    ring: '210 100% 45%',
+    // WinUI 3: 4px controls, 8px cards/dialogs
+    radius: '0.375rem',
+    'sidebar-background': '0 0% 92%',
+    'sidebar-foreground': '0 0% 9%',
+    'sidebar-primary': '210 100% 38%',
+    'sidebar-primary-foreground': '0 0% 100%',
+    'sidebar-accent': '210 50% 93%',
+    'sidebar-accent-foreground': '210 100% 28%',
+    'sidebar-border': '0 0% 86%',
+    'sidebar-ring': '210 100% 45%',
+    'chart-1': '210 100% 38%',
+    'chart-2': '145 63% 38%',
+    'chart-3': '262 83% 55%',
+    'chart-4': '35 100% 48%',
+    'chart-5': '346 77% 50%',
+    ...fluentTypography,
+  },
+  dark: {
+    // #202020 — SolidBackgroundFillColorBase dark
+    background: '0 0% 13%',
+    foreground: '0 0% 96%',
+    // #2B2B2B — CardBackgroundFillColorDefault dark
+    card: '0 0% 17%',
+    'card-foreground': '0 0% 96%',
+    // #323232 — elevated surface
+    popover: '0 0% 20%',
+    'popover-foreground': '0 0% 96%',
+    // #60CDFF — AccentLight2 dark mode
+    primary: '200 100% 69%',
+    'primary-foreground': '0 0% 9%',
+    secondary: '0 0% 22%',
+    'secondary-foreground': '0 0% 90%',
+    muted: '0 0% 18%',
+    'muted-foreground': '0 0% 62%',
+    accent: '210 25% 20%',
+    'accent-foreground': '200 100% 75%',
+    destructive: '0 90% 62%',
+    'destructive-foreground': '0 0% 100%',
+    // ControlStrokeColorDefault dark: rgba(255,255,255,0.0837)
+    border: '0 0% 28%',
+    input: '0 0% 24%',
+    ring: '200 100% 69%',
+    radius: '0.375rem',
+    // NavigationView pane background
+    'sidebar-background': '0 0% 10%',
+    'sidebar-foreground': '0 0% 90%',
+    'sidebar-primary': '200 100% 69%',
+    'sidebar-primary-foreground': '0 0% 9%',
+    'sidebar-accent': '210 20% 18%',
+    'sidebar-accent-foreground': '200 100% 75%',
+    'sidebar-border': '0 0% 22%',
+    'sidebar-ring': '200 100% 69%',
+    'chart-1': '200 100% 69%',
+    'chart-2': '145 65% 50%',
+    'chart-3': '262 83% 65%',
+    'chart-4': '35 100% 58%',
+    'chart-5': '346 77% 58%',
+    ...fluentTypography,
+  },
+};

package/src/styles/presets/types.ts

@@ -0,0 +1,97 @@
+/**
+ * Theme preset types — lives in ui-core so Wails, Electron, and any
+ * non-Next.js consumer can use presets without pulling in @djangocfg/layouts.
+ */
+
+/** Core semantic colors (HSL triplets, no hsl() wrapper) */
+export type ThemeCssVarColorKey =
+  | 'background'
+  | 'foreground'
+  | 'card'
+  | 'card-foreground'
+  | 'popover'
+  | 'popover-foreground'
+  | 'primary'
+  | 'primary-foreground'
+  | 'secondary'
+  | 'secondary-foreground'
+  | 'muted'
+  | 'muted-foreground'
+  | 'accent'
+  | 'accent-foreground'
+  | 'destructive'
+  | 'destructive-foreground';
+
+/** Layout / focus tokens — `radius` is a CSS length, rest are HSL */
+export type ThemeCssVarChromeKey = 'border' | 'input' | 'ring' | 'radius';
+
+/**
+ * Typography tokens — override system font stack and scale per preset.
+ * Values are plain CSS (not HSL): font-family strings, rem lengths, unitless line-height, em letter-spacing.
+ */
+export type ThemeCssVarTypographyKey =
+  | 'font-sans'
+  | 'font-mono'
+  | 'font-size-base'
+  | 'font-size-sm'
+  | 'font-size-xs'
+  | 'font-size-lg'
+  | 'font-size-xl'
+  | 'line-height-base'
+  | 'letter-spacing-base';
+
+export type ThemeCssVarSidebarKey =
+  | 'sidebar-background'
+  | 'sidebar-foreground'
+  | 'sidebar-primary'
+  | 'sidebar-primary-foreground'
+  | 'sidebar-accent'
+  | 'sidebar-accent-foreground'
+  | 'sidebar-border'
+  | 'sidebar-ring';
+
+export type ThemeCssVarChartKey = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+
+/** All keys that map to `--${key}` in ui-core CSS files */
+export type ThemeCssVarKey =
+  | ThemeCssVarColorKey
+  | ThemeCssVarChromeKey
+  | ThemeCssVarTypographyKey
+  | ThemeCssVarSidebarKey
+  | ThemeCssVarChartKey;
+
+/** Partial map of semantic variables for one color mode */
+export type ThemeCssVarMap = Partial<Record<ThemeCssVarKey, string>>;
+
+/** Built-in preset IDs */
+export type ThemeStylePresetId =
+  | 'default'
+  | 'django-cfg'
+  | 'ios'
+  | 'macos'
+  | 'windows'
+  | 'soft'
+  | 'dense'
+  | 'high-contrast'
+  | 'catppuccin'
+  | 'dracula'
+  | 'github'
+  | 'gruvbox'
+  | 'material'
+  | 'nord'
+  | 'one-dark'
+  | 'solarized'
+  | 'tokyo-night';
+
+/**
+ * Optional style layer: named preset + per-mode overrides.
+ * Merged: globals (CSS imports) → preset → vars.light / vars.dark
+ */
+export interface ThemeStyleConfig {
+  /** @default 'default' */
+  preset?: ThemeStylePresetId;
+  vars?: {
+    light?: ThemeCssVarMap;
+    dark?: ThemeCssVarMap;
+  };
+}

package/src/styles/utilities.css

@@ -206,3 +206,23 @@
 .animate-flipOut {
   animation: flipOut 0.3s ease-in;
 }
+
+/**
+ * Glass surface utilities — OS-native translucency effects.
+ * Apply to panels/sidebars that sit over a blurred background.
+ * Requires `isolation: isolate` and a background image/color on a parent.
+ */
+
+/* macOS Vibrancy — strong blur, 72% opacity, high saturation */
+.glass-macos {
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  background-color: hsl(var(--background) / 0.72);
+}
+
+/* Windows 11 Mica / Acrylic — deeper blur, softer opacity */
+.glass-win11 {
+  backdrop-filter: blur(60px) saturate(125%);
+  -webkit-backdrop-filter: blur(60px) saturate(125%);
+  background-color: hsl(var(--background) / 0.85);
+}