@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/themes/themes.js

@@ -0,0 +1,1193 @@
+/**
+ * shadcn/ui's 24 themes (apps/v4/registry/themes.ts, MIT), as data (#1666).
+ *
+ * Two kinds, as in shadcn:
+ *
+ *  - The 7 BASE colours (neutral, stone, zinc, mauve, olive, mist, taupe) are
+ *    whole palettes: every token, light and dark.
+ *  - The 17 ACCENT themes (amber to yellow) are partial: a primary, a
+ *    secondary, the chart ramp and the sidebar primary, layered over a base.
+ *
+ * This is the palette the configurator previews and `webjsui init --preset`
+ * installs, through {@link buildThemeVars} (a port of shadcn's
+ * `buildRegistryTheme`), and the one the site's `.theme-<name>` classes are
+ * generated from (website/scripts/build-ui-themes.mjs). The values are
+ * shadcn's, verbatim.
+ *
+ * It is NOT what a bare `webjsui init --base-color <color>` writes. That path
+ * writes `themes/index.css` with the overrides in `base-colors.js`, which is
+ * the kit's original palette, kept byte stable so an existing app and the
+ * `webjs create` scaffold do not change under it. The two agree on neutral
+ * apart from the chart ramp (the kit's is blue, shadcn's current one is grey).
+ *
+ * Pure ESM data with no imports beyond the base-colour names, so the CLI, the
+ * site and a browser can all load it.
+ */
+
+import { BASE_COLORS } from './base-colors.js';
+
+/** The base colours, in shadcn's picker order. */
+export const BASE_COLOR_NAMES = BASE_COLORS;
+
+/**
+ * The radius choices (shadcn's RADII). `default` keeps the theme's own
+ * radius; the others set `--radius`.
+ */
+export const RADII = [
+  { name: 'default', label: 'Default', value: '' },
+  { name: 'none', label: 'None', value: '0' },
+  { name: 'small', label: 'Small', value: '0.45rem' },
+  { name: 'medium', label: 'Medium', value: '0.625rem' },
+  { name: 'large', label: 'Large', value: '0.875rem' },
+];
+
+/** The radius every theme ships with, shadcn's DEFAULT_RADIUS_VALUE. */
+export const DEFAULT_RADIUS = '0.625rem';
+
+/** Every theme name, base colours first. */
+export function themeNames() {
+  return THEMES.map((t) => t.name);
+}
+
+/** The theme with this name, or undefined. */
+export function getTheme(name) {
+  return THEMES.find((t) => t.name === name);
+}
+
+/** True for one of the 7 whole-palette base colours. */
+export function isBaseColor(name) {
+  return BASE_COLOR_NAMES.includes(name);
+}
+
+/**
+ * The themes a base colour can wear: itself plus every accent theme, never
+ * another base colour (shadcn's getThemesForBaseColor).
+ *
+ * @param {string} baseColor
+ */
+export function themesForBaseColor(baseColor) {
+  return THEMES.filter((t) => t.name === baseColor || !isBaseColor(t.name));
+}
+
+/**
+ * The light and dark token values for a design-system choice: the base
+ * colour's palette, the theme's overrides on top, the chart ramp from
+ * `chartColor` (defaulting to the theme's), `menuAccent: 'bold'` turning the
+ * accent into the primary, and a non-default `radius`. A port of shadcn's
+ * `buildRegistryTheme` plus `buildThemeForPreset`'s radius rule, so the same
+ * choice gives the same tokens here as there.
+ *
+ * Throws on an unknown base colour or theme, or a theme the base colour
+ * cannot wear (another base colour).
+ *
+ * @param {{ baseColor?: string, theme?: string, chartColor?: string, menuAccent?: string, radius?: string }} config
+ * @returns {{ light: Record<string, string>, dark: Record<string, string> }}
+ */
+export function buildThemeVars(config) {
+  const baseName = config.baseColor || 'neutral';
+  const themeName = config.theme || baseName;
+  const base = getTheme(baseName);
+  const theme = getTheme(themeName);
+  if (!base || !isBaseColor(baseName)) throw new Error(`Unknown base color "${baseName}"`);
+  if (!theme) throw new Error(`Unknown theme "${themeName}"`);
+  if (!themesForBaseColor(baseName).includes(theme)) {
+    throw new Error(`Theme "${themeName}" is not available for base color "${baseName}"`);
+  }
+  const light = { ...base.cssVars.light, ...theme.cssVars.light };
+  const dark = { ...base.cssVars.dark, ...theme.cssVars.dark };
+
+  const chartName = config.chartColor || themeName;
+  const chart = getTheme(chartName);
+  if (!chart) throw new Error(`Unknown chart color "${chartName}"`);
+  for (let i = 1; i <= 5; i++) {
+    const key = `chart-${i}`;
+    if (chart.cssVars.light[key]) light[key] = chart.cssVars.light[key];
+    if (chart.cssVars.dark[key]) dark[key] = chart.cssVars.dark[key];
+  }
+
+  if (config.menuAccent === 'bold') {
+    light.accent = light.primary;
+    light['accent-foreground'] = light['primary-foreground'];
+    dark.accent = dark.primary;
+    dark['accent-foreground'] = dark['primary-foreground'];
+  }
+
+  const radius = RADII.find((r) => r.name === (config.radius || 'default'));
+  if (!radius) throw new Error(`Unknown radius "${config.radius}"`);
+  light.radius = radius.value || light.radius || DEFAULT_RADIUS;
+
+  return { light, dark };
+}
+
+/**
+ * The `registry:theme` item for one theme name: its own tokens as `cssVars`,
+ * the shape shadcn's registry serves. An accent theme carries only its
+ * overrides, exactly as shadcn's item does, since it is meant to be layered
+ * over a base colour.
+ *
+ * @param {string} name
+ */
+export function themeCssVars(name) {
+  const theme = getTheme(name);
+  if (!theme) return null;
+  return { light: { ...theme.cssVars.light }, dark: { ...theme.cssVars.dark } };
+}
+
+export const THEMES = [
+  {
+    name: 'neutral',
+    title: 'Neutral',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.145 0 0)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.145 0 0)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.145 0 0)',
+        primary: 'oklch(0.205 0 0)',
+        'primary-foreground': 'oklch(0.985 0 0)',
+        secondary: 'oklch(0.97 0 0)',
+        'secondary-foreground': 'oklch(0.205 0 0)',
+        muted: 'oklch(0.97 0 0)',
+        'muted-foreground': 'oklch(0.556 0 0)',
+        accent: 'oklch(0.97 0 0)',
+        'accent-foreground': 'oklch(0.205 0 0)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.922 0 0)',
+        input: 'oklch(0.922 0 0)',
+        ring: 'oklch(0.708 0 0)',
+        'chart-1': 'oklch(0.87 0 0)',
+        'chart-2': 'oklch(0.556 0 0)',
+        'chart-3': 'oklch(0.439 0 0)',
+        'chart-4': 'oklch(0.371 0 0)',
+        'chart-5': 'oklch(0.269 0 0)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.985 0 0)',
+        'sidebar-foreground': 'oklch(0.145 0 0)',
+        'sidebar-primary': 'oklch(0.205 0 0)',
+        'sidebar-primary-foreground': 'oklch(0.985 0 0)',
+        'sidebar-accent': 'oklch(0.97 0 0)',
+        'sidebar-accent-foreground': 'oklch(0.205 0 0)',
+        'sidebar-border': 'oklch(0.922 0 0)',
+        'sidebar-ring': 'oklch(0.708 0 0)',
+      },
+      dark: {
+        background: 'oklch(0.145 0 0)',
+        foreground: 'oklch(0.985 0 0)',
+        card: 'oklch(0.205 0 0)',
+        'card-foreground': 'oklch(0.985 0 0)',
+        popover: 'oklch(0.205 0 0)',
+        'popover-foreground': 'oklch(0.985 0 0)',
+        primary: 'oklch(0.922 0 0)',
+        'primary-foreground': 'oklch(0.205 0 0)',
+        secondary: 'oklch(0.269 0 0)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        muted: 'oklch(0.269 0 0)',
+        'muted-foreground': 'oklch(0.708 0 0)',
+        accent: 'oklch(0.269 0 0)',
+        'accent-foreground': 'oklch(0.985 0 0)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.556 0 0)',
+        'chart-1': 'oklch(0.87 0 0)',
+        'chart-2': 'oklch(0.556 0 0)',
+        'chart-3': 'oklch(0.439 0 0)',
+        'chart-4': 'oklch(0.371 0 0)',
+        'chart-5': 'oklch(0.269 0 0)',
+        sidebar: 'oklch(0.205 0 0)',
+        'sidebar-foreground': 'oklch(0.985 0 0)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.985 0 0)',
+        'sidebar-accent': 'oklch(0.269 0 0)',
+        'sidebar-accent-foreground': 'oklch(0.985 0 0)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.556 0 0)',
+      },
+    },
+  },
+  {
+    name: 'stone',
+    title: 'Stone',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.147 0.004 49.25)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.147 0.004 49.25)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.147 0.004 49.25)',
+        primary: 'oklch(0.216 0.006 56.043)',
+        'primary-foreground': 'oklch(0.985 0.001 106.423)',
+        secondary: 'oklch(0.97 0.001 106.424)',
+        'secondary-foreground': 'oklch(0.216 0.006 56.043)',
+        muted: 'oklch(0.97 0.001 106.424)',
+        'muted-foreground': 'oklch(0.553 0.013 58.071)',
+        accent: 'oklch(0.97 0.001 106.424)',
+        'accent-foreground': 'oklch(0.216 0.006 56.043)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.923 0.003 48.717)',
+        input: 'oklch(0.923 0.003 48.717)',
+        ring: 'oklch(0.709 0.01 56.259)',
+        'chart-1': 'oklch(0.869 0.005 56.366)',
+        'chart-2': 'oklch(0.553 0.013 58.071)',
+        'chart-3': 'oklch(0.444 0.011 73.639)',
+        'chart-4': 'oklch(0.374 0.01 67.558)',
+        'chart-5': 'oklch(0.268 0.007 34.298)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.985 0.001 106.423)',
+        'sidebar-foreground': 'oklch(0.147 0.004 49.25)',
+        'sidebar-primary': 'oklch(0.216 0.006 56.043)',
+        'sidebar-primary-foreground': 'oklch(0.985 0.001 106.423)',
+        'sidebar-accent': 'oklch(0.97 0.001 106.424)',
+        'sidebar-accent-foreground': 'oklch(0.216 0.006 56.043)',
+        'sidebar-border': 'oklch(0.923 0.003 48.717)',
+        'sidebar-ring': 'oklch(0.709 0.01 56.259)',
+      },
+      dark: {
+        background: 'oklch(0.147 0.004 49.25)',
+        foreground: 'oklch(0.985 0.001 106.423)',
+        card: 'oklch(0.216 0.006 56.043)',
+        'card-foreground': 'oklch(0.985 0.001 106.423)',
+        popover: 'oklch(0.216 0.006 56.043)',
+        'popover-foreground': 'oklch(0.985 0.001 106.423)',
+        primary: 'oklch(0.923 0.003 48.717)',
+        'primary-foreground': 'oklch(0.216 0.006 56.043)',
+        secondary: 'oklch(0.268 0.007 34.298)',
+        'secondary-foreground': 'oklch(0.985 0.001 106.423)',
+        muted: 'oklch(0.268 0.007 34.298)',
+        'muted-foreground': 'oklch(0.709 0.01 56.259)',
+        accent: 'oklch(0.268 0.007 34.298)',
+        'accent-foreground': 'oklch(0.985 0.001 106.423)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.553 0.013 58.071)',
+        'chart-1': 'oklch(0.869 0.005 56.366)',
+        'chart-2': 'oklch(0.553 0.013 58.071)',
+        'chart-3': 'oklch(0.444 0.011 73.639)',
+        'chart-4': 'oklch(0.374 0.01 67.558)',
+        'chart-5': 'oklch(0.268 0.007 34.298)',
+        sidebar: 'oklch(0.216 0.006 56.043)',
+        'sidebar-foreground': 'oklch(0.985 0.001 106.423)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.985 0.001 106.423)',
+        'sidebar-accent': 'oklch(0.268 0.007 34.298)',
+        'sidebar-accent-foreground': 'oklch(0.985 0.001 106.423)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.553 0.013 58.071)',
+      },
+    },
+  },
+  {
+    name: 'zinc',
+    title: 'Zinc',
+    cssVars: {
+      light: {
+        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)',
+        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)',
+        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)',
+        border: 'oklch(0.92 0.004 286.32)',
+        input: 'oklch(0.92 0.004 286.32)',
+        ring: 'oklch(0.705 0.015 286.067)',
+        'chart-1': 'oklch(0.871 0.006 286.286)',
+        'chart-2': 'oklch(0.552 0.016 285.938)',
+        'chart-3': 'oklch(0.442 0.017 285.786)',
+        'chart-4': 'oklch(0.37 0.013 285.805)',
+        'chart-5': 'oklch(0.274 0.006 286.033)',
+        radius: '0.625rem',
+        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-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)',
+        'sidebar-ring': 'oklch(0.705 0.015 286.067)',
+      },
+      dark: {
+        background: 'oklch(0.141 0.005 285.823)',
+        foreground: 'oklch(0.985 0 0)',
+        card: 'oklch(0.21 0.006 285.885)',
+        'card-foreground': 'oklch(0.985 0 0)',
+        popover: 'oklch(0.21 0.006 285.885)',
+        'popover-foreground': 'oklch(0.985 0 0)',
+        primary: 'oklch(0.92 0.004 286.32)',
+        'primary-foreground': 'oklch(0.21 0.006 285.885)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        muted: 'oklch(0.274 0.006 286.033)',
+        'muted-foreground': 'oklch(0.705 0.015 286.067)',
+        accent: 'oklch(0.274 0.006 286.033)',
+        'accent-foreground': 'oklch(0.985 0 0)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.552 0.016 285.938)',
+        'chart-1': 'oklch(0.871 0.006 286.286)',
+        'chart-2': 'oklch(0.552 0.016 285.938)',
+        'chart-3': 'oklch(0.442 0.017 285.786)',
+        'chart-4': 'oklch(0.37 0.013 285.805)',
+        'chart-5': 'oklch(0.274 0.006 286.033)',
+        sidebar: 'oklch(0.21 0.006 285.885)',
+        'sidebar-foreground': 'oklch(0.985 0 0)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.985 0 0)',
+        'sidebar-accent': 'oklch(0.274 0.006 286.033)',
+        'sidebar-accent-foreground': 'oklch(0.985 0 0)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.552 0.016 285.938)',
+      },
+    },
+  },
+  {
+    name: 'mauve',
+    title: 'Mauve',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.145 0.008 326)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.145 0.008 326)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.145 0.008 326)',
+        primary: 'oklch(0.212 0.019 322.12)',
+        'primary-foreground': 'oklch(0.985 0 0)',
+        secondary: 'oklch(0.96 0.003 325.6)',
+        'secondary-foreground': 'oklch(0.212 0.019 322.12)',
+        muted: 'oklch(0.96 0.003 325.6)',
+        'muted-foreground': 'oklch(0.542 0.034 322.5)',
+        accent: 'oklch(0.96 0.003 325.6)',
+        'accent-foreground': 'oklch(0.212 0.019 322.12)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.922 0.005 325.62)',
+        input: 'oklch(0.922 0.005 325.62)',
+        ring: 'oklch(0.711 0.019 323.02)',
+        'chart-1': 'oklch(0.865 0.012 325.68)',
+        'chart-2': 'oklch(0.542 0.034 322.5)',
+        'chart-3': 'oklch(0.435 0.029 321.78)',
+        'chart-4': 'oklch(0.364 0.029 323.89)',
+        'chart-5': 'oklch(0.263 0.024 320.12)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.985 0 0)',
+        'sidebar-foreground': 'oklch(0.145 0.008 326)',
+        'sidebar-primary': 'oklch(0.212 0.019 322.12)',
+        'sidebar-primary-foreground': 'oklch(0.985 0 0)',
+        'sidebar-accent': 'oklch(0.96 0.003 325.6)',
+        'sidebar-accent-foreground': 'oklch(0.212 0.019 322.12)',
+        'sidebar-border': 'oklch(0.922 0.005 325.62)',
+        'sidebar-ring': 'oklch(0.711 0.019 323.02)',
+      },
+      dark: {
+        background: 'oklch(0.145 0.008 326)',
+        foreground: 'oklch(0.985 0 0)',
+        card: 'oklch(0.212 0.019 322.12)',
+        'card-foreground': 'oklch(0.985 0 0)',
+        popover: 'oklch(0.212 0.019 322.12)',
+        'popover-foreground': 'oklch(0.985 0 0)',
+        primary: 'oklch(0.922 0.005 325.62)',
+        'primary-foreground': 'oklch(0.212 0.019 322.12)',
+        secondary: 'oklch(0.263 0.024 320.12)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        muted: 'oklch(0.263 0.024 320.12)',
+        'muted-foreground': 'oklch(0.711 0.019 323.02)',
+        accent: 'oklch(0.263 0.024 320.12)',
+        'accent-foreground': 'oklch(0.985 0 0)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.542 0.034 322.5)',
+        'chart-1': 'oklch(0.865 0.012 325.68)',
+        'chart-2': 'oklch(0.542 0.034 322.5)',
+        'chart-3': 'oklch(0.435 0.029 321.78)',
+        'chart-4': 'oklch(0.364 0.029 323.89)',
+        'chart-5': 'oklch(0.263 0.024 320.12)',
+        sidebar: 'oklch(0.212 0.019 322.12)',
+        'sidebar-foreground': 'oklch(0.985 0 0)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.985 0 0)',
+        'sidebar-accent': 'oklch(0.263 0.024 320.12)',
+        'sidebar-accent-foreground': 'oklch(0.985 0 0)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.542 0.034 322.5)',
+      },
+    },
+  },
+  {
+    name: 'olive',
+    title: 'Olive',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.153 0.006 107.1)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.153 0.006 107.1)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.153 0.006 107.1)',
+        primary: 'oklch(0.228 0.013 107.4)',
+        'primary-foreground': 'oklch(0.988 0.003 106.5)',
+        secondary: 'oklch(0.966 0.005 106.5)',
+        'secondary-foreground': 'oklch(0.228 0.013 107.4)',
+        muted: 'oklch(0.966 0.005 106.5)',
+        'muted-foreground': 'oklch(0.58 0.031 107.3)',
+        accent: 'oklch(0.966 0.005 106.5)',
+        'accent-foreground': 'oklch(0.228 0.013 107.4)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.93 0.007 106.5)',
+        input: 'oklch(0.93 0.007 106.5)',
+        ring: 'oklch(0.737 0.021 106.9)',
+        'chart-1': 'oklch(0.88 0.011 106.6)',
+        'chart-2': 'oklch(0.58 0.031 107.3)',
+        'chart-3': 'oklch(0.466 0.025 107.3)',
+        'chart-4': 'oklch(0.394 0.023 107.4)',
+        'chart-5': 'oklch(0.286 0.016 107.4)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.988 0.003 106.5)',
+        'sidebar-foreground': 'oklch(0.153 0.006 107.1)',
+        'sidebar-primary': 'oklch(0.228 0.013 107.4)',
+        'sidebar-primary-foreground': 'oklch(0.988 0.003 106.5)',
+        'sidebar-accent': 'oklch(0.966 0.005 106.5)',
+        'sidebar-accent-foreground': 'oklch(0.228 0.013 107.4)',
+        'sidebar-border': 'oklch(0.93 0.007 106.5)',
+        'sidebar-ring': 'oklch(0.737 0.021 106.9)',
+      },
+      dark: {
+        background: 'oklch(0.153 0.006 107.1)',
+        foreground: 'oklch(0.988 0.003 106.5)',
+        card: 'oklch(0.228 0.013 107.4)',
+        'card-foreground': 'oklch(0.988 0.003 106.5)',
+        popover: 'oklch(0.228 0.013 107.4)',
+        'popover-foreground': 'oklch(0.988 0.003 106.5)',
+        primary: 'oklch(0.93 0.007 106.5)',
+        'primary-foreground': 'oklch(0.228 0.013 107.4)',
+        secondary: 'oklch(0.286 0.016 107.4)',
+        'secondary-foreground': 'oklch(0.988 0.003 106.5)',
+        muted: 'oklch(0.286 0.016 107.4)',
+        'muted-foreground': 'oklch(0.737 0.021 106.9)',
+        accent: 'oklch(0.286 0.016 107.4)',
+        'accent-foreground': 'oklch(0.988 0.003 106.5)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.58 0.031 107.3)',
+        'chart-1': 'oklch(0.88 0.011 106.6)',
+        'chart-2': 'oklch(0.58 0.031 107.3)',
+        'chart-3': 'oklch(0.466 0.025 107.3)',
+        'chart-4': 'oklch(0.394 0.023 107.4)',
+        'chart-5': 'oklch(0.286 0.016 107.4)',
+        sidebar: 'oklch(0.228 0.013 107.4)',
+        'sidebar-foreground': 'oklch(0.988 0.003 106.5)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.988 0.003 106.5)',
+        'sidebar-accent': 'oklch(0.286 0.016 107.4)',
+        'sidebar-accent-foreground': 'oklch(0.988 0.003 106.5)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.58 0.031 107.3)',
+      },
+    },
+  },
+  {
+    name: 'mist',
+    title: 'Mist',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.148 0.004 228.8)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.148 0.004 228.8)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.148 0.004 228.8)',
+        primary: 'oklch(0.218 0.008 223.9)',
+        'primary-foreground': 'oklch(0.987 0.002 197.1)',
+        secondary: 'oklch(0.963 0.002 197.1)',
+        'secondary-foreground': 'oklch(0.218 0.008 223.9)',
+        muted: 'oklch(0.963 0.002 197.1)',
+        'muted-foreground': 'oklch(0.56 0.021 213.5)',
+        accent: 'oklch(0.963 0.002 197.1)',
+        'accent-foreground': 'oklch(0.218 0.008 223.9)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.925 0.005 214.3)',
+        input: 'oklch(0.925 0.005 214.3)',
+        ring: 'oklch(0.723 0.014 214.4)',
+        'chart-1': 'oklch(0.872 0.007 219.6)',
+        'chart-2': 'oklch(0.56 0.021 213.5)',
+        'chart-3': 'oklch(0.45 0.017 213.2)',
+        'chart-4': 'oklch(0.378 0.015 216)',
+        'chart-5': 'oklch(0.275 0.011 216.9)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.987 0.002 197.1)',
+        'sidebar-foreground': 'oklch(0.148 0.004 228.8)',
+        'sidebar-primary': 'oklch(0.218 0.008 223.9)',
+        'sidebar-primary-foreground': 'oklch(0.987 0.002 197.1)',
+        'sidebar-accent': 'oklch(0.963 0.002 197.1)',
+        'sidebar-accent-foreground': 'oklch(0.218 0.008 223.9)',
+        'sidebar-border': 'oklch(0.925 0.005 214.3)',
+        'sidebar-ring': 'oklch(0.723 0.014 214.4)',
+      },
+      dark: {
+        background: 'oklch(0.148 0.004 228.8)',
+        foreground: 'oklch(0.987 0.002 197.1)',
+        card: 'oklch(0.218 0.008 223.9)',
+        'card-foreground': 'oklch(0.987 0.002 197.1)',
+        popover: 'oklch(0.218 0.008 223.9)',
+        'popover-foreground': 'oklch(0.987 0.002 197.1)',
+        primary: 'oklch(0.925 0.005 214.3)',
+        'primary-foreground': 'oklch(0.218 0.008 223.9)',
+        secondary: 'oklch(0.275 0.011 216.9)',
+        'secondary-foreground': 'oklch(0.987 0.002 197.1)',
+        muted: 'oklch(0.275 0.011 216.9)',
+        'muted-foreground': 'oklch(0.723 0.014 214.4)',
+        accent: 'oklch(0.275 0.011 216.9)',
+        'accent-foreground': 'oklch(0.987 0.002 197.1)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.56 0.021 213.5)',
+        'chart-1': 'oklch(0.872 0.007 219.6)',
+        'chart-2': 'oklch(0.56 0.021 213.5)',
+        'chart-3': 'oklch(0.45 0.017 213.2)',
+        'chart-4': 'oklch(0.378 0.015 216)',
+        'chart-5': 'oklch(0.275 0.011 216.9)',
+        sidebar: 'oklch(0.218 0.008 223.9)',
+        'sidebar-foreground': 'oklch(0.987 0.002 197.1)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.987 0.002 197.1)',
+        'sidebar-accent': 'oklch(0.275 0.011 216.9)',
+        'sidebar-accent-foreground': 'oklch(0.987 0.002 197.1)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.56 0.021 213.5)',
+      },
+    },
+  },
+  {
+    name: 'taupe',
+    title: 'Taupe',
+    cssVars: {
+      light: {
+        background: 'oklch(1 0 0)',
+        foreground: 'oklch(0.147 0.004 49.3)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.147 0.004 49.3)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.147 0.004 49.3)',
+        primary: 'oklch(0.214 0.009 43.1)',
+        'primary-foreground': 'oklch(0.986 0.002 67.8)',
+        secondary: 'oklch(0.96 0.002 17.2)',
+        'secondary-foreground': 'oklch(0.214 0.009 43.1)',
+        muted: 'oklch(0.96 0.002 17.2)',
+        'muted-foreground': 'oklch(0.547 0.021 43.1)',
+        accent: 'oklch(0.96 0.002 17.2)',
+        'accent-foreground': 'oklch(0.214 0.009 43.1)',
+        destructive: 'oklch(0.577 0.245 27.325)',
+        border: 'oklch(0.922 0.005 34.3)',
+        input: 'oklch(0.922 0.005 34.3)',
+        ring: 'oklch(0.714 0.014 41.2)',
+        'chart-1': 'oklch(0.868 0.007 39.5)',
+        'chart-2': 'oklch(0.547 0.021 43.1)',
+        'chart-3': 'oklch(0.438 0.017 39.3)',
+        'chart-4': 'oklch(0.367 0.016 35.7)',
+        'chart-5': 'oklch(0.268 0.011 36.5)',
+        radius: '0.625rem',
+        sidebar: 'oklch(0.986 0.002 67.8)',
+        'sidebar-foreground': 'oklch(0.147 0.004 49.3)',
+        'sidebar-primary': 'oklch(0.214 0.009 43.1)',
+        'sidebar-primary-foreground': 'oklch(0.986 0.002 67.8)',
+        'sidebar-accent': 'oklch(0.96 0.002 17.2)',
+        'sidebar-accent-foreground': 'oklch(0.214 0.009 43.1)',
+        'sidebar-border': 'oklch(0.922 0.005 34.3)',
+        'sidebar-ring': 'oklch(0.714 0.014 41.2)',
+      },
+      dark: {
+        background: 'oklch(0.147 0.004 49.3)',
+        foreground: 'oklch(0.986 0.002 67.8)',
+        card: 'oklch(0.214 0.009 43.1)',
+        'card-foreground': 'oklch(0.986 0.002 67.8)',
+        popover: 'oklch(0.214 0.009 43.1)',
+        'popover-foreground': 'oklch(0.986 0.002 67.8)',
+        primary: 'oklch(0.922 0.005 34.3)',
+        'primary-foreground': 'oklch(0.214 0.009 43.1)',
+        secondary: 'oklch(0.268 0.011 36.5)',
+        'secondary-foreground': 'oklch(0.986 0.002 67.8)',
+        muted: 'oklch(0.268 0.011 36.5)',
+        'muted-foreground': 'oklch(0.714 0.014 41.2)',
+        accent: 'oklch(0.268 0.011 36.5)',
+        'accent-foreground': 'oklch(0.986 0.002 67.8)',
+        destructive: 'oklch(0.704 0.191 22.216)',
+        border: 'oklch(1 0 0 / 10%)',
+        input: 'oklch(1 0 0 / 15%)',
+        ring: 'oklch(0.547 0.021 43.1)',
+        'chart-1': 'oklch(0.868 0.007 39.5)',
+        'chart-2': 'oklch(0.547 0.021 43.1)',
+        'chart-3': 'oklch(0.438 0.017 39.3)',
+        'chart-4': 'oklch(0.367 0.016 35.7)',
+        'chart-5': 'oklch(0.268 0.011 36.5)',
+        sidebar: 'oklch(0.214 0.009 43.1)',
+        'sidebar-foreground': 'oklch(0.986 0.002 67.8)',
+        'sidebar-primary': 'oklch(0.488 0.243 264.376)',
+        'sidebar-primary-foreground': 'oklch(0.986 0.002 67.8)',
+        'sidebar-accent': 'oklch(0.268 0.011 36.5)',
+        'sidebar-accent-foreground': 'oklch(0.986 0.002 67.8)',
+        'sidebar-border': 'oklch(1 0 0 / 10%)',
+        'sidebar-ring': 'oklch(0.547 0.021 43.1)',
+      },
+    },
+  },
+  {
+    name: 'amber',
+    title: 'Amber',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.555 0.163 48.998)',
+        'primary-foreground': 'oklch(0.987 0.022 95.277)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.879 0.169 91.605)',
+        'chart-2': 'oklch(0.769 0.188 70.08)',
+        'chart-3': 'oklch(0.666 0.179 58.318)',
+        'chart-4': 'oklch(0.555 0.163 48.998)',
+        'chart-5': 'oklch(0.473 0.137 46.201)',
+        'sidebar-primary': 'oklch(0.666 0.179 58.318)',
+        'sidebar-primary-foreground': 'oklch(0.987 0.022 95.277)',
+      },
+      dark: {
+        primary: 'oklch(0.473 0.137 46.201)',
+        'primary-foreground': 'oklch(0.987 0.022 95.277)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.879 0.169 91.605)',
+        'chart-2': 'oklch(0.769 0.188 70.08)',
+        'chart-3': 'oklch(0.666 0.179 58.318)',
+        'chart-4': 'oklch(0.555 0.163 48.998)',
+        'chart-5': 'oklch(0.473 0.137 46.201)',
+        'sidebar-primary': 'oklch(0.769 0.188 70.08)',
+        'sidebar-primary-foreground': 'oklch(0.279 0.077 45.635)',
+      },
+    },
+  },
+  {
+    name: 'blue',
+    title: 'Blue',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.488 0.243 264.376)',
+        'primary-foreground': 'oklch(0.97 0.014 254.604)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.809 0.105 251.813)',
+        'chart-2': 'oklch(0.623 0.214 259.815)',
+        'chart-3': 'oklch(0.546 0.245 262.881)',
+        'chart-4': 'oklch(0.488 0.243 264.376)',
+        'chart-5': 'oklch(0.424 0.199 265.638)',
+        'sidebar-primary': 'oklch(0.546 0.245 262.881)',
+        'sidebar-primary-foreground': 'oklch(0.97 0.014 254.604)',
+      },
+      dark: {
+        primary: 'oklch(0.424 0.199 265.638)',
+        'primary-foreground': 'oklch(0.97 0.014 254.604)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.809 0.105 251.813)',
+        'chart-2': 'oklch(0.623 0.214 259.815)',
+        'chart-3': 'oklch(0.546 0.245 262.881)',
+        'chart-4': 'oklch(0.488 0.243 264.376)',
+        'chart-5': 'oklch(0.424 0.199 265.638)',
+        'sidebar-primary': 'oklch(0.623 0.214 259.815)',
+        'sidebar-primary-foreground': 'oklch(0.97 0.014 254.604)',
+      },
+    },
+  },
+  {
+    name: 'cyan',
+    title: 'Cyan',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.52 0.105 223.128)',
+        'primary-foreground': 'oklch(0.984 0.019 200.873)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.865 0.127 207.078)',
+        'chart-2': 'oklch(0.715 0.143 215.221)',
+        'chart-3': 'oklch(0.609 0.126 221.723)',
+        'chart-4': 'oklch(0.52 0.105 223.128)',
+        'chart-5': 'oklch(0.45 0.085 224.283)',
+        'sidebar-primary': 'oklch(0.609 0.126 221.723)',
+        'sidebar-primary-foreground': 'oklch(0.984 0.019 200.873)',
+      },
+      dark: {
+        primary: 'oklch(0.45 0.085 224.283)',
+        'primary-foreground': 'oklch(0.984 0.019 200.873)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.865 0.127 207.078)',
+        'chart-2': 'oklch(0.715 0.143 215.221)',
+        'chart-3': 'oklch(0.609 0.126 221.723)',
+        'chart-4': 'oklch(0.52 0.105 223.128)',
+        'chart-5': 'oklch(0.45 0.085 224.283)',
+        'sidebar-primary': 'oklch(0.715 0.143 215.221)',
+        'sidebar-primary-foreground': 'oklch(0.302 0.056 229.695)',
+      },
+    },
+  },
+  {
+    name: 'emerald',
+    title: 'Emerald',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.508 0.118 165.612)',
+        'primary-foreground': 'oklch(0.979 0.021 166.113)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.845 0.143 164.978)',
+        'chart-2': 'oklch(0.696 0.17 162.48)',
+        'chart-3': 'oklch(0.596 0.145 163.225)',
+        'chart-4': 'oklch(0.508 0.118 165.612)',
+        'chart-5': 'oklch(0.432 0.095 166.913)',
+        'sidebar-primary': 'oklch(0.596 0.145 163.225)',
+        'sidebar-primary-foreground': 'oklch(0.979 0.021 166.113)',
+      },
+      dark: {
+        primary: 'oklch(0.432 0.095 166.913)',
+        'primary-foreground': 'oklch(0.979 0.021 166.113)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.845 0.143 164.978)',
+        'chart-2': 'oklch(0.696 0.17 162.48)',
+        'chart-3': 'oklch(0.596 0.145 163.225)',
+        'chart-4': 'oklch(0.508 0.118 165.612)',
+        'chart-5': 'oklch(0.432 0.095 166.913)',
+        'sidebar-primary': 'oklch(0.696 0.17 162.48)',
+        'sidebar-primary-foreground': 'oklch(0.262 0.051 172.552)',
+      },
+    },
+  },
+  {
+    name: 'fuchsia',
+    title: 'Fuchsia',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.518 0.253 323.949)',
+        'primary-foreground': 'oklch(0.977 0.017 320.058)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.833 0.145 321.434)',
+        'chart-2': 'oklch(0.667 0.295 322.15)',
+        'chart-3': 'oklch(0.591 0.293 322.896)',
+        'chart-4': 'oklch(0.518 0.253 323.949)',
+        'chart-5': 'oklch(0.452 0.211 324.591)',
+        'sidebar-primary': 'oklch(0.591 0.293 322.896)',
+        'sidebar-primary-foreground': 'oklch(0.977 0.017 320.058)',
+      },
+      dark: {
+        primary: 'oklch(0.452 0.211 324.591)',
+        'primary-foreground': 'oklch(0.977 0.017 320.058)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.833 0.145 321.434)',
+        'chart-2': 'oklch(0.667 0.295 322.15)',
+        'chart-3': 'oklch(0.591 0.293 322.896)',
+        'chart-4': 'oklch(0.518 0.253 323.949)',
+        'chart-5': 'oklch(0.452 0.211 324.591)',
+        'sidebar-primary': 'oklch(0.667 0.295 322.15)',
+        'sidebar-primary-foreground': 'oklch(0.977 0.017 320.058)',
+      },
+    },
+  },
+  {
+    name: 'green',
+    title: 'Green',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.527 0.154 150.069)',
+        'primary-foreground': 'oklch(0.982 0.018 155.826)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.871 0.15 154.449)',
+        'chart-2': 'oklch(0.723 0.219 149.579)',
+        'chart-3': 'oklch(0.627 0.194 149.214)',
+        'chart-4': 'oklch(0.527 0.154 150.069)',
+        'chart-5': 'oklch(0.448 0.119 151.328)',
+        'sidebar-primary': 'oklch(0.627 0.194 149.214)',
+        'sidebar-primary-foreground': 'oklch(0.982 0.018 155.826)',
+      },
+      dark: {
+        primary: 'oklch(0.448 0.119 151.328)',
+        'primary-foreground': 'oklch(0.982 0.018 155.826)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.871 0.15 154.449)',
+        'chart-2': 'oklch(0.723 0.219 149.579)',
+        'chart-3': 'oklch(0.627 0.194 149.214)',
+        'chart-4': 'oklch(0.527 0.154 150.069)',
+        'chart-5': 'oklch(0.448 0.119 151.328)',
+        'sidebar-primary': 'oklch(0.723 0.219 149.579)',
+        'sidebar-primary-foreground': 'oklch(0.982 0.018 155.826)',
+      },
+    },
+  },
+  {
+    name: 'indigo',
+    title: 'Indigo',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.457 0.24 277.023)',
+        'primary-foreground': 'oklch(0.962 0.018 272.314)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.785 0.115 274.713)',
+        'chart-2': 'oklch(0.585 0.233 277.117)',
+        'chart-3': 'oklch(0.511 0.262 276.966)',
+        'chart-4': 'oklch(0.457 0.24 277.023)',
+        'chart-5': 'oklch(0.398 0.195 277.366)',
+        'sidebar-primary': 'oklch(0.511 0.262 276.966)',
+        'sidebar-primary-foreground': 'oklch(0.962 0.018 272.314)',
+      },
+      dark: {
+        primary: 'oklch(0.398 0.195 277.366)',
+        'primary-foreground': 'oklch(0.962 0.018 272.314)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.785 0.115 274.713)',
+        'chart-2': 'oklch(0.585 0.233 277.117)',
+        'chart-3': 'oklch(0.511 0.262 276.966)',
+        'chart-4': 'oklch(0.457 0.24 277.023)',
+        'chart-5': 'oklch(0.398 0.195 277.366)',
+        'sidebar-primary': 'oklch(0.585 0.233 277.117)',
+        'sidebar-primary-foreground': 'oklch(0.962 0.018 272.314)',
+      },
+    },
+  },
+  {
+    name: 'lime',
+    title: 'Lime',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.841 0.238 128.85)',
+        'primary-foreground': 'oklch(0.405 0.101 131.063)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.897 0.196 126.665)',
+        'chart-2': 'oklch(0.768 0.233 130.85)',
+        'chart-3': 'oklch(0.648 0.2 131.684)',
+        'chart-4': 'oklch(0.532 0.157 131.589)',
+        'chart-5': 'oklch(0.453 0.124 130.933)',
+        'sidebar-primary': 'oklch(0.648 0.2 131.684)',
+        'sidebar-primary-foreground': 'oklch(0.986 0.031 120.757)',
+      },
+      dark: {
+        primary: 'oklch(0.768 0.233 130.85)',
+        'primary-foreground': 'oklch(0.405 0.101 131.063)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.897 0.196 126.665)',
+        'chart-2': 'oklch(0.768 0.233 130.85)',
+        'chart-3': 'oklch(0.648 0.2 131.684)',
+        'chart-4': 'oklch(0.532 0.157 131.589)',
+        'chart-5': 'oklch(0.453 0.124 130.933)',
+        'sidebar-primary': 'oklch(0.768 0.233 130.85)',
+        'sidebar-primary-foreground': 'oklch(0.274 0.072 132.109)',
+      },
+    },
+  },
+  {
+    name: 'orange',
+    title: 'Orange',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.553 0.195 38.402)',
+        'primary-foreground': 'oklch(0.98 0.016 73.684)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.837 0.128 66.29)',
+        'chart-2': 'oklch(0.705 0.213 47.604)',
+        'chart-3': 'oklch(0.646 0.222 41.116)',
+        'chart-4': 'oklch(0.553 0.195 38.402)',
+        'chart-5': 'oklch(0.47 0.157 37.304)',
+        'sidebar-primary': 'oklch(0.646 0.222 41.116)',
+        'sidebar-primary-foreground': 'oklch(0.98 0.016 73.684)',
+      },
+      dark: {
+        primary: 'oklch(0.47 0.157 37.304)',
+        'primary-foreground': 'oklch(0.98 0.016 73.684)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.837 0.128 66.29)',
+        'chart-2': 'oklch(0.705 0.213 47.604)',
+        'chart-3': 'oklch(0.646 0.222 41.116)',
+        'chart-4': 'oklch(0.553 0.195 38.402)',
+        'chart-5': 'oklch(0.47 0.157 37.304)',
+        'sidebar-primary': 'oklch(0.705 0.213 47.604)',
+        'sidebar-primary-foreground': 'oklch(0.98 0.016 73.684)',
+      },
+    },
+  },
+  {
+    name: 'pink',
+    title: 'Pink',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.525 0.223 3.958)',
+        'primary-foreground': 'oklch(0.971 0.014 343.198)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.823 0.12 346.018)',
+        'chart-2': 'oklch(0.656 0.241 354.308)',
+        'chart-3': 'oklch(0.592 0.249 0.584)',
+        'chart-4': 'oklch(0.525 0.223 3.958)',
+        'chart-5': 'oklch(0.459 0.187 3.815)',
+        'sidebar-primary': 'oklch(0.592 0.249 0.584)',
+        'sidebar-primary-foreground': 'oklch(0.971 0.014 343.198)',
+      },
+      dark: {
+        primary: 'oklch(0.459 0.187 3.815)',
+        'primary-foreground': 'oklch(0.971 0.014 343.198)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.823 0.12 346.018)',
+        'chart-2': 'oklch(0.656 0.241 354.308)',
+        'chart-3': 'oklch(0.592 0.249 0.584)',
+        'chart-4': 'oklch(0.525 0.223 3.958)',
+        'chart-5': 'oklch(0.459 0.187 3.815)',
+        'sidebar-primary': 'oklch(0.656 0.241 354.308)',
+        'sidebar-primary-foreground': 'oklch(0.971 0.014 343.198)',
+      },
+    },
+  },
+  {
+    name: 'purple',
+    title: 'Purple',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.496 0.265 301.924)',
+        'primary-foreground': 'oklch(0.977 0.014 308.299)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.827 0.119 306.383)',
+        'chart-2': 'oklch(0.627 0.265 303.9)',
+        'chart-3': 'oklch(0.558 0.288 302.321)',
+        'chart-4': 'oklch(0.496 0.265 301.924)',
+        'chart-5': 'oklch(0.438 0.218 303.724)',
+        'sidebar-primary': 'oklch(0.558 0.288 302.321)',
+        'sidebar-primary-foreground': 'oklch(0.977 0.014 308.299)',
+      },
+      dark: {
+        primary: 'oklch(0.438 0.218 303.724)',
+        'primary-foreground': 'oklch(0.977 0.014 308.299)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.827 0.119 306.383)',
+        'chart-2': 'oklch(0.627 0.265 303.9)',
+        'chart-3': 'oklch(0.558 0.288 302.321)',
+        'chart-4': 'oklch(0.496 0.265 301.924)',
+        'chart-5': 'oklch(0.438 0.218 303.724)',
+        'sidebar-primary': 'oklch(0.627 0.265 303.9)',
+        'sidebar-primary-foreground': 'oklch(0.977 0.014 308.299)',
+      },
+    },
+  },
+  {
+    name: 'red',
+    title: 'Red',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.505 0.213 27.518)',
+        'primary-foreground': 'oklch(0.971 0.013 17.38)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.808 0.114 19.571)',
+        'chart-2': 'oklch(0.637 0.237 25.331)',
+        'chart-3': 'oklch(0.577 0.245 27.325)',
+        'chart-4': 'oklch(0.505 0.213 27.518)',
+        'chart-5': 'oklch(0.444 0.177 26.899)',
+        'sidebar-primary': 'oklch(0.577 0.245 27.325)',
+        'sidebar-primary-foreground': 'oklch(0.971 0.013 17.38)',
+      },
+      dark: {
+        primary: 'oklch(0.444 0.177 26.899)',
+        'primary-foreground': 'oklch(0.971 0.013 17.38)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.808 0.114 19.571)',
+        'chart-2': 'oklch(0.637 0.237 25.331)',
+        'chart-3': 'oklch(0.577 0.245 27.325)',
+        'chart-4': 'oklch(0.505 0.213 27.518)',
+        'chart-5': 'oklch(0.444 0.177 26.899)',
+        'sidebar-primary': 'oklch(0.637 0.237 25.331)',
+        'sidebar-primary-foreground': 'oklch(0.971 0.013 17.38)',
+      },
+    },
+  },
+  {
+    name: 'rose',
+    title: 'Rose',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.514 0.222 16.935)',
+        'primary-foreground': 'oklch(0.969 0.015 12.422)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.81 0.117 11.638)',
+        'chart-2': 'oklch(0.645 0.246 16.439)',
+        'chart-3': 'oklch(0.586 0.253 17.585)',
+        'chart-4': 'oklch(0.514 0.222 16.935)',
+        'chart-5': 'oklch(0.455 0.188 13.697)',
+        'sidebar-primary': 'oklch(0.586 0.253 17.585)',
+        'sidebar-primary-foreground': 'oklch(0.969 0.015 12.422)',
+      },
+      dark: {
+        primary: 'oklch(0.455 0.188 13.697)',
+        'primary-foreground': 'oklch(0.969 0.015 12.422)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.81 0.117 11.638)',
+        'chart-2': 'oklch(0.645 0.246 16.439)',
+        'chart-3': 'oklch(0.586 0.253 17.585)',
+        'chart-4': 'oklch(0.514 0.222 16.935)',
+        'chart-5': 'oklch(0.455 0.188 13.697)',
+        sidebar: 'oklch(0.21 0.006 285.885)',
+        'sidebar-primary': 'oklch(0.645 0.246 16.439)',
+        'sidebar-primary-foreground': 'oklch(0.969 0.015 12.422)',
+      },
+    },
+  },
+  {
+    name: 'sky',
+    title: 'Sky',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.5 0.134 242.749)',
+        'primary-foreground': 'oklch(0.977 0.013 236.62)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.828 0.111 230.318)',
+        'chart-2': 'oklch(0.685 0.169 237.323)',
+        'chart-3': 'oklch(0.588 0.158 241.966)',
+        'chart-4': 'oklch(0.5 0.134 242.749)',
+        'chart-5': 'oklch(0.443 0.11 240.79)',
+        'sidebar-primary': 'oklch(0.588 0.158 241.966)',
+        'sidebar-primary-foreground': 'oklch(0.977 0.013 236.62)',
+      },
+      dark: {
+        primary: 'oklch(0.443 0.11 240.79)',
+        'primary-foreground': 'oklch(0.977 0.013 236.62)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.828 0.111 230.318)',
+        'chart-2': 'oklch(0.685 0.169 237.323)',
+        'chart-3': 'oklch(0.588 0.158 241.966)',
+        'chart-4': 'oklch(0.5 0.134 242.749)',
+        'chart-5': 'oklch(0.443 0.11 240.79)',
+        'sidebar-primary': 'oklch(0.685 0.169 237.323)',
+        'sidebar-primary-foreground': 'oklch(0.293 0.066 243.157)',
+      },
+    },
+  },
+  {
+    name: 'teal',
+    title: 'Teal',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.511 0.096 186.391)',
+        'primary-foreground': 'oklch(0.984 0.014 180.72)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.855 0.138 181.071)',
+        'chart-2': 'oklch(0.704 0.14 182.503)',
+        'chart-3': 'oklch(0.6 0.118 184.704)',
+        'chart-4': 'oklch(0.511 0.096 186.391)',
+        'chart-5': 'oklch(0.437 0.078 188.216)',
+        'sidebar-primary': 'oklch(0.6 0.118 184.704)',
+        'sidebar-primary-foreground': 'oklch(0.984 0.014 180.72)',
+      },
+      dark: {
+        primary: 'oklch(0.437 0.078 188.216)',
+        'primary-foreground': 'oklch(0.984 0.014 180.72)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.855 0.138 181.071)',
+        'chart-2': 'oklch(0.704 0.14 182.503)',
+        'chart-3': 'oklch(0.6 0.118 184.704)',
+        'chart-4': 'oklch(0.511 0.096 186.391)',
+        'chart-5': 'oklch(0.437 0.078 188.216)',
+        'sidebar-primary': 'oklch(0.704 0.14 182.503)',
+        'sidebar-primary-foreground': 'oklch(0.277 0.046 192.524)',
+      },
+    },
+  },
+  {
+    name: 'violet',
+    title: 'Violet',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.491 0.27 292.581)',
+        'primary-foreground': 'oklch(0.969 0.016 293.756)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.811 0.111 293.571)',
+        'chart-2': 'oklch(0.606 0.25 292.717)',
+        'chart-3': 'oklch(0.541 0.281 293.009)',
+        'chart-4': 'oklch(0.491 0.27 292.581)',
+        'chart-5': 'oklch(0.432 0.232 292.759)',
+        'sidebar-primary': 'oklch(0.541 0.281 293.009)',
+        'sidebar-primary-foreground': 'oklch(0.969 0.016 293.756)',
+      },
+      dark: {
+        primary: 'oklch(0.432 0.232 292.759)',
+        'primary-foreground': 'oklch(0.969 0.016 293.756)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.811 0.111 293.571)',
+        'chart-2': 'oklch(0.606 0.25 292.717)',
+        'chart-3': 'oklch(0.541 0.281 293.009)',
+        'chart-4': 'oklch(0.491 0.27 292.581)',
+        'chart-5': 'oklch(0.432 0.232 292.759)',
+        'sidebar-primary': 'oklch(0.606 0.25 292.717)',
+        'sidebar-primary-foreground': 'oklch(0.969 0.016 293.756)',
+      },
+    },
+  },
+  {
+    name: 'yellow',
+    title: 'Yellow',
+    cssVars: {
+      light: {
+        primary: 'oklch(0.852 0.199 91.936)',
+        'primary-foreground': 'oklch(0.421 0.095 57.708)',
+        secondary: 'oklch(0.967 0.001 286.375)',
+        'secondary-foreground': 'oklch(0.21 0.006 285.885)',
+        'chart-1': 'oklch(0.905 0.182 98.111)',
+        'chart-2': 'oklch(0.795 0.184 86.047)',
+        'chart-3': 'oklch(0.681 0.162 75.834)',
+        'chart-4': 'oklch(0.554 0.135 66.442)',
+        'chart-5': 'oklch(0.476 0.114 61.907)',
+        'sidebar-primary': 'oklch(0.681 0.162 75.834)',
+        'sidebar-primary-foreground': 'oklch(0.987 0.026 102.212)',
+      },
+      dark: {
+        primary: 'oklch(0.795 0.184 86.047)',
+        'primary-foreground': 'oklch(0.421 0.095 57.708)',
+        secondary: 'oklch(0.274 0.006 286.033)',
+        'secondary-foreground': 'oklch(0.985 0 0)',
+        'chart-1': 'oklch(0.905 0.182 98.111)',
+        'chart-2': 'oklch(0.795 0.184 86.047)',
+        'chart-3': 'oklch(0.681 0.162 75.834)',
+        'chart-4': 'oklch(0.554 0.135 66.442)',
+        'chart-5': 'oklch(0.476 0.114 61.907)',
+        'sidebar-primary': 'oklch(0.795 0.184 86.047)',
+        'sidebar-primary-foreground': 'oklch(0.987 0.026 102.212)',
+      },
+    },
+  },
+];