@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

package/src/lib/styles/base.css

@@ -1,80 +1,95 @@
+@import '@fontsource-variable/hanken-grotesk';
+
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Surfaces, edges and states share one set of names in both modes; each mode only changes the
+   values. Ratios are WCAG 2.x. The roles and when to use each: docs/contributing/design-system.md. */
 :root {
-	--radius: 0.625rem;
 	--header-h: 3.5rem;
+	--below-header-h: calc(100svh - var(--header-h));
 	--page-px: 1rem;
 	--page-py: 1.75rem;
-	--background: oklch(0.99 0 0);
-	--foreground: oklch(0.22 0 0);
-	/* White, so a card stands apart from background and muted; Group adds a border, since
-	   white on background alone is too close to see. */
+	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 0 0);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.22 0 0);
-	--popover: oklch(0.99 0 0);
-	--popover-foreground: oklch(0.22 0 0);
-	/* 4.5:1 as text on background, card and muted, and under white text. */
-	--primary: oklch(0.52 0.07 135);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.94 0 0);
-	--secondary-foreground: oklch(0.28 0 0);
-	--muted: oklch(0.95 0 0);
+	--raised: oklch(1 0 0);
+	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
+	--muted: oklch(0.97 0 0);
+	/* Fill of anything you type into, on a card: recessed, the same step as muted, in both modes.
+	   The edge (`--input`) carries the boundary. */
+	--field: var(--muted);
+	--foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	/* 4.5:1 on every surface. */
 	--muted-foreground: oklch(0.5 0 0);
-	--accent: oklch(0.93 0 0);
-	--accent-foreground: oklch(0.3 0 0);
-	/* 4.5:1 as small text on background, card and muted, and under white text. */
-	--destructive: oklch(0.55 0.19 27);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.86 0 0);
-	/* Field borders and unchecked boxes: at least 3:1 against background, card and muted, the
-	   WCAG minimum for a control's boundary. Same for the focus ring, which is drawn opaque. */
-	--input: oklch(0.62 0 0);
-	--ring: oklch(0.55 0 0);
-	--success: oklch(0.66 0.14 145);
+	/* Icons, placeholders, disabled text: 3:1 on every surface. */
+	--faint-foreground: oklch(0.6 0 0);
+	/* State overlays, laid over whatever surface is underneath. */
+	--hover: oklch(0 0 0 / 4%);
+	--selected: oklch(0 0 0 / 8%);
+	/* Rest fill of a neutral filled control; its hover is `selected`. */
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	/* Outlines and separators. */
+	--border: oklch(0 0 0 / 8%);
+	/* Popovers, outline buttons, dashed drop zones. */
+	--border-strong: oklch(0 0 0 / 14%);
+	/* Edge of anything you type into or toggle, slider tracks included. Softer than the 3:1 WCAG
+	   boundary minimum in both modes: the recessed field fill carries the rest of the boundary. */
+	--input: oklch(0 0 0 / 10%);
+	--ring: oklch(0.708 0 0);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 10%);
+	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--destructive: #c9302d;
+	--destructive-foreground: #fbfbfb;
+	/* 3:1 on every surface, as icons and dots. */
+	--success: #51a556;
 	--success-foreground: oklch(0.99 0 0);
-	--warning: oklch(0.78 0.12 75);
+	--warning: #bd8630;
 	--warning-foreground: oklch(0.25 0.04 75);
-	--info: oklch(0.68 0.11 245);
+	--info: #5399d1;
 	--info-foreground: oklch(0.99 0 0);
 	--chart-1: oklch(0.65 0.14 135);
 	--chart-2: oklch(0.7 0.11 200);
 	--chart-3: oklch(0.6 0.13 260);
 	--chart-4: oklch(0.78 0.13 80);
 	--chart-5: oklch(0.68 0.15 30);
-	--sidebar: oklch(0.96 0 0);
-	--sidebar-foreground: oklch(0.25 0 0);
-	--sidebar-primary: oklch(0.52 0.07 135);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.93 0 0);
-	--sidebar-accent-foreground: oklch(0.3 0 0);
-	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.55 0 0);
-	--inputparam: oklch(1 0 0);
-	--outputparam: oklch(1 0 0);
 	/* Scrim behind modal dialogs and drawers. */
 	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
-	--background: oklch(0.17 0 0);
-	--foreground: oklch(0.96 0 0);
-	--card: oklch(0.23 0 0);
-	--card-foreground: oklch(0.96 0 0);
-	--popover: oklch(0.23 0 0);
-	--popover-foreground: oklch(0.96 0 0);
-	--primary: oklch(0.74 0.07 135);
-	--primary-foreground: oklch(0.18 0 0);
-	--secondary: oklch(0.3 0 0);
-	--secondary-foreground: oklch(0.96 0 0);
-	--muted: oklch(0.27 0 0);
-	--muted-foreground: oklch(0.72 0 0);
-	--accent: oklch(0.36 0 0);
-	--accent-foreground: oklch(0.92 0 0);
+	--background: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
+	--raised: oklch(0.24 0 0);
+	--muted: oklch(0.269 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--faint-foreground: oklch(0.556 0 0);
+	--hover: oklch(1 0 0 / 6%);
+	--selected: oklch(1 0 0 / 10%);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--border-strong: oklch(1 0 0 / 18%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	/* Shadows barely show on a dark canvas, so raised things lean on the border instead. */
+	--elevation-raised: none;
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
 	--destructive: oklch(0.7 0.17 22);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 36%);
-	--ring: oklch(0.74 0 0);
+	--destructive-foreground: oklch(0.18 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
 	--warning: oklch(0.8 0.14 75);
@@ -86,41 +101,39 @@
 	--chart-3: oklch(0.68 0.14 260);
 	--chart-4: oklch(0.78 0.14 80);
 	--chart-5: oklch(0.7 0.16 30);
-	--sidebar: oklch(0.21 0 0);
-	--sidebar-foreground: oklch(0.96 0 0);
-	--sidebar-primary: oklch(0.74 0.07 135);
-	--sidebar-primary-foreground: oklch(0.18 0 0);
-	--sidebar-accent: oklch(0.32 0 0);
-	--sidebar-accent-foreground: oklch(0.92 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.74 0 0);
-	--inputparam: oklch(0.15 0 0);
-	--outputparam: oklch(0.25 0 0);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	/* Concentric: an item inside a padded container takes the container's radius minus the
+	   padding. A 12px menu with 4px padding holds 8px items; a 10px control with 2px padding
+	   holds 8px segments. */
+	--radius-sm: 6px;
+	--radius-inner: 8px;
+	--radius-md: 10px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
 	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
+	--color-raised: var(--raised);
+	--color-popover: var(--raised);
 	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
+	--color-field: var(--field);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
+	--color-faint-foreground: var(--faint-foreground);
+	--color-hover: var(--hover);
+	--color-selected: var(--selected);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-overlay: var(--overlay);
 	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
 	--color-success: var(--success);
@@ -134,21 +147,15 @@
 	--color-chart-3: var(--chart-3);
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--color-inputparam: var(--inputparam);
-	--color-outputparam: var(--outputparam);
+	--shadow-raised: var(--elevation-raised);
+	--shadow-popover: var(--elevation-popover);
 }
 
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
    design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
 @theme {
+	/* Hanken Grotesk (OFL), self-hosted via Fontsource: the plugin UI runs offline from the .gha. */
+	--font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
 	/* Type tags, counters and other dense labels. */
 	--text-2xs: 0.625rem;
 	--text-2xs--line-height: calc(0.875 / 0.625);
@@ -183,6 +190,13 @@
 	border-radius: inherit;
 }
 
+/* A phone, upright or on its side, gives the model the height a full desktop bar would take. */
+@media (max-width: 39.999rem), (pointer: coarse) and (max-height: 500px) {
+	:root {
+		--header-h: 3rem;
+	}
+}
+
 /* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
 @media (min-width: 40rem) {
 	:root {

package/src/lib/utils/color-space.ts

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

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { themeStore, type Theme } from '../../../theme/themeStore.svelte';
-	import * as Select from '../select';
-	import { Palette } from '@lucide/svelte';
-
-	const themes: { value: Theme; label: string; description: string }[] = [
-		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
-		{ value: 'selva', label: 'Selva', description: 'Forest green' },
-		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
-		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
-	];
-
-	let value = $state(themeStore.current);
-
-	$effect(() => {
-		if (value) {
-			themeStore.set(value as Theme);
-		}
-	});
-
-	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
-</script>
-
-<Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-35">
-		<Palette size={14} />
-		<span>{triggerContent}</span>
-	</Select.Trigger>
-	<Select.Content>
-		{#each themes as theme (theme.value)}
-			<Select.Item value={theme.value} label={theme.label}>
-				<div class="flex flex-col items-start">
-					<span class="font-medium text-sm">{theme.label}</span>
-					<span class="text-xs text-muted-foreground">{theme.description}</span>
-				</div>
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
-type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
-export default ThemeSwitcher;

package/dist/components/primitives/theme-switcher/index.d.ts

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/primitives/theme-switcher/index.js

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/styles/themes/cyberpunk.css

@@ -1,98 +0,0 @@
-:root {
-	--radius: 0.625rem;
-
-	--background: oklch(0.98 0.01 300);
-	--foreground: oklch(0.18 0.05 300);
-
-	--card: oklch(0.97 0.015 300);
-	--card-foreground: oklch(0.18 0.05 300);
-
-	--popover: oklch(0.97 0.015 300);
-	--popover-foreground: oklch(0.18 0.05 300);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.98 0 0);
-
-	--secondary: oklch(0.9 0.05 300);
-	--secondary-foreground: oklch(0.18 0.05 300);
-
-	--muted: oklch(0.92 0.015 300);
-	--muted-foreground: oklch(0.5 0.03 300);
-
-	--accent: oklch(0.78 0.2 305);
-	--accent-foreground: oklch(0.12 0.05 300);
-
-	--destructive: oklch(0.62 0.25 20);
-	--destructive-foreground: oklch(0.98 0 0);
-
-	--border: oklch(0.86 0.02 300);
-	--input: oklch(0.92 0.015 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.55 0.18 290);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.97 0.015 300);
-	--sidebar-foreground: oklch(0.18 0.05 300);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.92 0.015 300);
-	--sidebar-accent-foreground: oklch(0.18 0.05 300);
-	--sidebar-border: oklch(0.86 0.02 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.86 0.02 300);
-	--outputparam: oklch(0.86 0.04 305);
-	--downloadparam: oklch(0.86 0.05 295);
-}
-
-.dark {
-	--background: oklch(0.18 0.05 300);
-	--foreground: oklch(0.98 0 0);
-
-	--card: oklch(0.22 0.05 300);
-	--card-foreground: oklch(0.98 0 0);
-
-	--popover: oklch(0.22 0.05 300);
-	--popover-foreground: oklch(0.98 0 0);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.18 0.05 300);
-
-	--secondary: oklch(0.28 0.03 300);
-	--secondary-foreground: oklch(0.98 0 0);
-
-	--muted: oklch(0.28 0.03 300);
-	--muted-foreground: oklch(0.75 0.04 300);
-
-	--accent: oklch(0.22 0.05 305);
-	--accent-foreground: oklch(0.98 0 0);
-
-	--destructive: oklch(0.55 0.22 20);
-	--destructive-foreground: oklch(0.18 0.05 300);
-
-	--border: oklch(0.35 0.04 300);
-	--input: oklch(0.3 0.03 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.32 0.03 300);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.18 0.05 300);
-	--sidebar-foreground: oklch(0.98 0 0);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.18 0.05 300);
-	--sidebar-accent: oklch(0.28 0.03 300);
-	--sidebar-accent-foreground: oklch(0.98 0 0);
-	--sidebar-border: oklch(0.35 0.04 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.12 0.03 300);
-	--outputparam: oklch(0.32 0.04 305);
-}

package/dist/styles/themes/neutral.css

@@ -1,72 +0,0 @@
-:root {
-	--radius: 0.625rem;
-	--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(87.61% 0.0001 271.152);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.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);
-	--inputparam: oklch(100% 0.00011 271.152);
-	--outputparam: oklch(100% 0.00011 271.152);
-}
-
-.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.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.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);
-	--inputparam: oklch(0% 0 271.152);
-	--outputparam: oklch(23.574% 0.00241 67.461);
-}

package/dist/styles/themes/ocean.css

@@ -1,75 +0,0 @@
-:root {
-	--radius: 0.625rem;
-	--background: oklch(0.98 0.003 260);
-	--foreground: oklch(0.22 0.01 260);
-	--card: oklch(0.97 0.002 260);
-	--card-foreground: oklch(0.22 0.01 260);
-	--popover: oklch(0.97 0.002 260);
-	--popover-foreground: oklch(0.22 0.01 260);
-	--primary: oklch(0.62 0.18 275);
-	--primary-foreground: oklch(0.98 0 0);
-	--secondary: oklch(0.85 0.05 260);
-	--secondary-foreground: oklch(0.22 0.01 260);
-	--muted: oklch(0.92 0.01 260);
-	--muted-foreground: oklch(0.45 0.02 260);
-	--accent: oklch(0.78 0.04 275);
-	--accent-foreground: oklch(0.15 0.01 260);
-	--destructive: oklch(0.6 0.23 20);
-	--destructive-foreground: oklch(0.98 0 0);
-	--border: oklch(0.85 0.01 260);
-	--input: oklch(0.92 0.01 260);
-	--ring: oklch(0.55 0.04 275);
-	--chart-1: oklch(0.62 0.18 275);
-	--chart-2: oklch(0.68 0.14 255);
-	--chart-3: oklch(0.74 0.12 290);
-	--chart-4: oklch(0.5 0.09 270);
-	--chart-5: oklch(0.82 0.06 250);
-	--sidebar: oklch(0.97 0.002 260);
-	--sidebar-foreground: oklch(0.22 0.01 260);
-	--sidebar-primary: oklch(0.62 0.18 275);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.92 0.01 260);
-	--sidebar-accent-foreground: oklch(0.22 0.01 260);
-	--sidebar-border: oklch(0.85 0.01 260);
-	--sidebar-ring: oklch(0.55 0.04 275);
-	--inputparam: oklch(0.86 0.01 260);
-	--outputparam: oklch(0.86 0.0156 280);
-	--downloadparam: oklch(0.86 0.021 265);
-}
-
-.dark {
-	--background: oklch(0.22 0.01 260);
-	--foreground: oklch(0.98 0 0);
-	--card: oklch(0.27 0.01 260);
-	--card-foreground: oklch(0.98 0 0);
-	--popover: oklch(0.27 0.01 260);
-	--popover-foreground: oklch(0.98 0 0);
-	--primary: oklch(0.62 0.18 275);
-	--primary-foreground: oklch(0.22 0.01 260);
-	--secondary: oklch(0.32 0.015 260);
-	--secondary-foreground: oklch(0.98 0 0);
-	--muted: oklch(0.32 0.01 260);
-	--muted-foreground: oklch(0.78 0.02 260);
-	--accent: oklch(0.27 0.01 275);
-	--accent-foreground: oklch(0.98 0 0);
-	--destructive: oklch(0.55 0.22 20);
-	--destructive-foreground: oklch(0.22 0.01 260);
-	--border: oklch(0.4 0.01 260);
-	--input: oklch(0.35 0.01 260);
-	--ring: oklch(0.78 0.02 260);
-	--chart-1: oklch(0.62 0.18 275);
-	--chart-2: oklch(0.68 0.14 255);
-	--chart-3: oklch(0.74 0.12 290);
-	--chart-4: oklch(0.32 0.015 260);
-	--chart-5: oklch(0.82 0.06 250);
-	--sidebar: oklch(0.22 0.01 260);
-	--sidebar-foreground: oklch(0.98 0 0);
-	--sidebar-primary: oklch(0.62 0.18 275);
-	--sidebar-primary-foreground: oklch(0.22 0.01 260);
-	--sidebar-accent: oklch(0.32 0.015 260);
-	--sidebar-accent-foreground: oklch(0.98 0 0);
-	--sidebar-border: oklch(0.4 0.01 260);
-	--sidebar-ring: oklch(0.78 0.02 260);
-	--inputparam: oklch(0.12 0.01 260);
-	--outputparam: oklch(0.36 0.0156 280);
-}