compote-ui 0.1.0 → 0.2.0

package/dist/components/button/Button.svelte

@@ -3,17 +3,17 @@
 	import { tv } from 'tailwind-variants';
 
 	const button = tv({
-		base: 'inline-flex items-center justify-center font-medium transition-colors cursor-pointer bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50 disabled:pointer-events-none',
+		base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
 		variants: {
 			variant: {
-				solid: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
-				outline: 'border border-border text-foreground hover:bg-muted',
+				solid: 'text-primary-foreground bg-primary hover:bg-primary/90 active:bg-primary/80',
+				outline: 'border-border text-foreground hover:bg-muted border',
 				ghost: 'text-foreground hover:bg-muted'
 			},
 			size: {
-				sm: 'h-8 px-3 text-sm rounded-sm gap-1.5',
-				md: 'h-10 px-4 text-base rounded-md gap-2',
-				lg: 'h-12 px-6 text-lg rounded-lg gap-2.5'
+				sm: 'h-8 gap-1.5 px-2 text-sm',
+				md: 'h-9 gap-2 px-3 text-base',
+				lg: 'h-10 gap-2.5 px-4 text-lg'
 			}
 		},
 		defaultVariants: { variant: 'solid', size: 'md' }

package/dist/components/checkbox/Checkbox.svelte

@@ -14,7 +14,7 @@
 	<Checkbox.Control
 		class="{children
 			? 'mt-0.5'
-			: ''} flex size-4 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
+			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
 	>
 		<Checkbox.Indicator>
 			<PhCheck class="size-3.5 text-primary-foreground" />

package/dist/components/combobox/Combobox.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" generics="T extends ComboboxItem">
+	import { Combobox, createListCollection } from '@ark-ui/svelte/combobox';
+	import { Field } from '@ark-ui/svelte/field';
+	import { useFilter } from '@ark-ui/svelte/locale';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import type { ComboboxItem, ComboboxProps } from './types';
+	import { cn } from 'tailwind-variants';
+	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+	import PhX from '../../icons/PhX.svelte';
+
+	let {
+		value = $bindable(),
+		items,
+		label,
+		placeholder,
+		layout = 'vertical',
+		name,
+		readonly,
+		multiple,
+		...restProps
+	}: ComboboxProps<T> = $props();
+
+	// Client-side filtering state
+	let filterText = $state('');
+	const filters = useFilter({ sensitivity: 'base' });
+
+	// Base collection — only rebuilds when items prop changes
+	const baseCollection = $derived(
+		createListCollection({
+			items,
+			itemToString: (item) => item?.label ?? '',
+			itemToValue: (item) => item?.value?.toString() ?? ''
+		})
+	);
+
+	// Filtered view — lightweight .filter() on keystroke, full collection when empty
+	const collection = $derived(
+		filterText
+			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
+			: baseCollection
+	);
+
+	// Handle input change — only filter on actual user typing, not on selection/clear events
+	function handleInputChange(details: Combobox.InputValueChangeDetails) {
+		if (details.reason === 'input-change') {
+			filterText = details.inputValue;
+		} else {
+			filterText = '';
+		}
+	}
+
+	// Compute display label for current value — handles async-loaded items
+	const displayValue = $derived.by(() => {
+		if (value == null || multiple) return undefined;
+		const v = Array.isArray(value) ? value[0] : value;
+		const found = items.find((item) => item.value.toString() === v?.toString());
+		return found ? found.label : undefined;
+	});
+
+	// Memoize value/inputValue props to prevent reactive cascade (new array/object refs cause Zag loops)
+	const valueProp = $derived(
+		value != null
+			? Array.isArray(value)
+				? value.map((v) => v.toString())
+				: [value.toString()]
+			: []
+	);
+	const controlledInputValue = $derived(multiple ? undefined : (displayValue ?? ''));
+
+	// Handle value change - look up typed value from items prop by string match
+	function handleValueChange(details: Combobox.ValueChangeDetails<T>) {
+		if (details.value.length === 0) {
+			value = multiple ? [] : null;
+		} else if (multiple) {
+			value = details.value
+				.map((v) => items.find((item) => item.value.toString() === v)?.value)
+				.filter((v) => v !== undefined);
+		} else {
+			const found = items.find((item) => item.value.toString() === details.value[0]);
+			value = found?.value ?? null;
+		}
+	}
+</script>
+
+<Combobox.Root
+	{collection}
+	value={valueProp}
+	inputValue={controlledInputValue}
+	onValueChange={handleValueChange}
+	onInputValueChange={handleInputChange}
+	openOnClick
+	{multiple}
+	readOnly={readonly}
+	{...restProps}
+	class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
+>
+	{#if label}
+		<Combobox.Label>
+			{label}
+			<Field.RequiredIndicator />
+		</Combobox.Label>
+	{/if}
+
+	<Combobox.Control
+		class={cn(
+			'rounded-ark flex min-h-9 items-center gap-1 border px-3 shadow-sm',
+			'focus-within:ring-1 focus-within:ring-(--ark-ring)',
+			multiple && 'flex-wrap py-1'
+		)}
+	>
+		{#if multiple && Array.isArray(value) && value.length > 0}
+			<div class="flex flex-wrap gap-1">
+				{#each value as v (v)}
+					{@const item = items.find((i) => i.value === v)}
+					{#if item}
+						<span
+							class="inline-flex items-center gap-1 rounded bg-(--ark-hover-bg) px-2 py-0.5 text-xs"
+						>
+							{item.label}
+							{#if !readonly}
+								<button
+									type="button"
+									onclick={() => {
+										value = (value as (number | string)[]).filter((x) => x !== v);
+									}}
+									class="hover:text-(--ark-error)"
+								>
+									<PhX class="size-3" />
+								</button>
+							{/if}
+						</span>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+		<Combobox.Input
+			placeholder={placeholder ?? 'Search...'}
+			class="flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
+		/>
+		{#if value != null && !readonly && !multiple}
+			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">
+				<PhX class="size-4" />
+			</Combobox.ClearTrigger>
+		{/if}
+		<Combobox.Trigger class="text-ink-dim">
+			<PhCaretDown class="size-4 opacity-50" />
+		</Combobox.Trigger>
+	</Combobox.Control>
+
+	<Portal>
+		<Combobox.Positioner class="data-[state=closed]:pointer-events-none">
+			<Combobox.Content
+				class="data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-60 min-w-(--reference-width) overflow-auto rounded-md border bg-surface-1 p-1  shadow-md"
+			>
+				<Combobox.Empty class="py-2 text-center text-sm text-ink-dim">
+					No results found
+				</Combobox.Empty>
+
+				{#each collection.items as item (item.value)}
+					<Combobox.Item
+						{item}
+						class="relative flex cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm text-(--ark-accent-fg) select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:bg-surface-2"
+					>
+						<Combobox.ItemText>{item.label}</Combobox.ItemText>
+						<Combobox.ItemIndicator class="absolute right-2 items-center justify-center">
+							<PhCheck class="size-3.5" />
+						</Combobox.ItemIndicator>
+					</Combobox.Item>
+				{/each}
+			</Combobox.Content>
+		</Combobox.Positioner>
+	</Portal>
+
+	{#if multiple && Array.isArray(value)}
+		{#each value as v, i (v)}
+			<input type="hidden" name="{name}[{i}]" value={v ?? ''} />
+		{/each}
+	{:else if value != null}
+		<input type="hidden" {name} {value} />
+	{/if}
+</Combobox.Root>

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,26 @@
+import { Combobox } from '@ark-ui/svelte/combobox';
+import type { ComboboxItem, ComboboxProps } from './types';
+declare function $$render<T extends ComboboxItem>(): {
+    props: ComboboxProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T extends ComboboxItem> = InstanceType<typeof Combobox<T>>;
+export default Combobox;

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,16 @@
+import type { ComboboxRootBaseProps } from '@ark-ui/svelte/combobox';
+export interface ComboboxItem<T = number | string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps<T extends ComboboxItem> extends Omit<ComboboxRootBaseProps<T>, 'value' | 'collection'> {
+    value?: number | string | null | (number | string)[];
+    items: T[];
+    label?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    name?: string;
+    multiple?: boolean;
+    layout?: 'vertical' | 'horizontal';
+}

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/green-hsl.min.css

@@ -0,0 +1 @@
+:where(html){--green-0-hsl:131 67% 95%;--green-1-hsl:128 76% 90%;--green-2-hsl:128 71% 82%;--green-3-hsl:129 68% 73%;--green-4-hsl:130 61% 64%;--green-5-hsl:130 57% 56%;--green-6-hsl:131 50% 50%;--green-7-hsl:131 53% 46%;--green-8-hsl:131 54% 40%;--green-9-hsl:132 52% 35%;--green-10-hsl:132 52% 29%;--green-11-hsl:132 53% 22%;--green-12-hsl:131 53% 16%}

package/dist/icons/PhCaretDown.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32"
+	/>
+</svg>

package/dist/icons/PhCaretDown.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCaretDown: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCaretDown = ReturnType<typeof PhCaretDown>;
+export default PhCaretDown;

package/dist/icons/PhCheck.svelte

@@ -4,11 +4,11 @@
 
 <!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
 <svg
-	class={className}
 	xmlns="http://www.w3.org/2000/svg"
 	width="1em"
 	height="1em"
 	viewBox="0 0 256 256"
+	class={className}
 	{...restProps}
 >
 	<path

package/dist/icons/PhMinus.svelte

@@ -4,11 +4,11 @@
 
 <!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
 <svg
-	class={className}
 	xmlns="http://www.w3.org/2000/svg"
 	width="1em"
 	height="1em"
 	viewBox="0 0 256 256"
+	class={className}
 	{...restProps}
 >
 	<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8" />

package/dist/icons/PhX.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhX.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhX: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhX = ReturnType<typeof PhX>;
+export default PhX;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Button } from './components/button/Button.svelte';
 export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
-export { default as Button } from './components/button/Button.svelte';
+export { default as Combobox } from './components/combobox/Combobox.svelte';

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export { default as Button } from './components/button/Button.svelte';
 export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
-export { default as Button } from './components/button/Button.svelte';
+export { default as Combobox } from './components/combobox/Combobox.svelte';

package/dist/props.colors-oklch-hues.css

@@ -0,0 +1,14 @@
+:where(html) {
+  --hue-red: 25;
+  --hue-pink: 350;
+  --hue-purple: 310;
+  --hue-violet: 290;
+  --hue-indigo: 270;
+  --hue-blue: 240;
+  --hue-cyan: 210;
+  --hue-teal: 185;
+  --hue-green: 145;
+  --hue-lime: 125;
+  --hue-yellow: 100;
+  --hue-orange: 75;
+}

package/dist/props.colors-oklch.css

@@ -0,0 +1,19 @@
+:where(*) {
+  --color-0: oklch(99% .03 var(--color-hue, 0));
+  --color-1: oklch(95% .06 var(--color-hue, 0));
+  --color-2: oklch(88% .12 var(--color-hue, 0));
+  --color-3: oklch(80% .14 var(--color-hue, 0));
+  --color-4: oklch(74% .16 var(--color-hue, 0));
+  --color-5: oklch(68% .19 var(--color-hue, 0));
+  --color-6: oklch(63% .20 var(--color-hue, 0));
+  --color-7: oklch(58% .21 var(--color-hue, 0));
+  --color-8: oklch(53% .20 var(--color-hue, 0));
+  --color-9: oklch(49% .19 var(--color-hue, 0));
+  --color-10: oklch(42% .17 var(--color-hue, 0));
+  --color-11: oklch(35% .15 var(--color-hue, 0));
+  --color-12: oklch(27% .12 var(--color-hue, 0));
+  --color-13: oklch(20% .09 var(--color-hue, 0));
+  --color-14: oklch(14% .07 var(--color-hue, 0));
+  --color-15: oklch(11% .05 var(--color-hue, 0));
+  --color-bright: oklch(65% .3 var(--color-hue, 0));
+}

package/dist/props.gray-oklch.css

@@ -0,0 +1,18 @@
+:where(*) {
+  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
+  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
+}

package/dist/theme.css

@@ -1,69 +1,39 @@
-@import './palette.oklch.css';
+@import './props.colors-oklch-hues.css';
+@import './props.colors-oklch.css';
+@import './props.gray-oklch.css';
 
 :root {
-	--gray-hue: 248.19;
-	--gray-chroma: 0.009;
-	--radius: 6px;
 	--dim: 0.3;
-	--compote-ink: var(--color-gray-900);
-	--compote-ink-dim: oklch(from var(--compote-ink) calc(l + var(--dim)) c h);
-	--compote-surface: oklch(from var(--compote-ink) calc(1 - l) c h);
-	--compote-surface: oklch(from var(--compote-ink) calc(1 - l) c h);
-
-	--background: oklch(0.9885 0.0057 84.5659);
-	--foreground: oklch(0.366 0.0251 49.6085);
-	--card: oklch(0.9686 0.0091 78.2818);
-	--card-foreground: oklch(0.366 0.0251 49.6085);
-	--popover: oklch(0.9686 0.0091 78.2818);
-	--popover-foreground: oklch(0.366 0.0251 49.6085);
-	--primary: oklch(0.5553 0.1455 48.9975);
-	--primary-foreground: oklch(1 0 0);
-	--secondary: oklch(0.8276 0.0752 74.44);
-	--secondary-foreground: oklch(0.4444 0.0096 73.639);
-	--muted: oklch(0.9363 0.0218 83.2637);
-	--muted-foreground: oklch(0.5534 0.0116 58.0708);
-	--accent: oklch(0.9 0.05 74.9889);
-	--accent-foreground: oklch(0.4444 0.0096 73.639);
-	--destructive: oklch(0.4437 0.1613 26.8994);
-	--destructive-foreground: oklch(1 0 0);
-	--border: oklch(0.8866 0.0404 89.6994);
-	--input: oklch(0.8866 0.0404 89.6994);
-	--ring: oklch(0.5553 0.1455 48.9975);
+	--radius: 6px;
 	--font-sans: 'Wix Madefor Text Variable', sans-serif;
 	--font-serif: Merriweather, serif;
 	--font-mono: Fira Code, monospace;
+
+	--color-hue: var(--hue-orange);
+	--gray-hue: 250;
+
+	--compote-ink: var(--gray-15);
+	--compote-ink-dim: var(--gray-11);
+	--compote-surface-3: var(--gray-5);
+	--compote-surface-2: var(--gray-4);
+	--compote-surface-1: var(--gray-3);
+	--compote-surface-document: var(--gray-2);
+	--compote-well: var(--gray-1);
+
+	--compote-primary: var(--color-7);
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--compote-ink: var(--color-1);
-		--compote-ink-dim: var(--color-5);
-		--compote-surface-3: var(--color-11);
-		--compote-surface-2: var(--color-12);
-		--compote-surface-1: var(--color-13);
-		--compote-surface-document: var(--color-14);
-		--compote-well-1: var(--color-15);
-		--compote-well-2: var(--color-16);
+		--compote-ink: var(--gray-1);
+		--compote-ink-dim: var(--gray-5);
+		--compote-surface-3: var(--gray-11);
+		--compote-surface-2: var(--gray-12);
+		--compote-surface-1: var(--gray-13);
+		--compote-surface-document: var(--gray-14);
+		--compote-well: var(--gray-15);
 
-		--background: oklch(26.21% 0.009 248.19);
-		--foreground: oklch(0.9699 0.0013 106.4238);
-		--card: oklch(34.51% 0.013 248.21);
-		--card-foreground: oklch(0.9699 0.0013 106.4238);
-		--popover: oklch(0.2685 0.0063 34.2976);
-		--popover-foreground: oklch(0.9699 0.0013 106.4238);
-		--primary: oklch(0.7049 0.1867 47.6044);
-		--primary-foreground: oklch(1 0 0);
-		--secondary: oklch(0.4444 0.0096 73.639);
-		--secondary-foreground: oklch(0.9232 0.0026 48.7171);
-		--muted: oklch(0.233 0.0073 67.4563);
-		--muted-foreground: oklch(0.7161 0.0091 56.259);
-		--accent: oklch(0.3598 0.0497 229.3202);
-		--accent-foreground: oklch(0.9232 0.0026 48.7171);
-		--destructive: oklch(0.5771 0.2152 27.325);
-		--destructive-foreground: oklch(1 0 0);
-		--border: oklch(42.76% 0.015 248.17);
-		--input: oklch(0.3741 0.0087 67.5582);
-		--ring: oklch(0.7049 0.1867 47.6044);
+		--compote-primary: var(--color-7);
 	}
 }
 
@@ -74,28 +44,9 @@
 	--color-surface-2: var(--compote-surface-2);
 	--color-surface-1: var(--compote-surface-1);
 	--color-surface-document: var(--compote-surface-document);
-	--color-well-1: var(--compote-well-1);
-	--color-well-2: var(--compote-well-2);
+	--color-well: var(--compote-well);
 
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--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-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-destructive-foreground: var(--destructive-foreground);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
+	--color-primary: var(--compote-primary);
 
 	--font-sans: var(--font-sans);
 	--font-mono: var(--font-mono);
@@ -109,7 +60,7 @@
 
 @layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply border-surface-3;
 	}
 	body {
 		@apply bg-surface-document text-ink;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/palette.css

@@ -1 +0,0 @@
-:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}

package/dist/palette.oklch.css

@@ -1,72 +0,0 @@
-:where(:root) {
-	--palette-hue: 250; /* <angle */
-	--palette-hue-rotate-by: 0; /* +- deg : warm or cool the palette */
-	--palette-chroma: 0.15; /* 0-1 : lower to mute and pastel, over 2 at own risk */
-}
-
-* {
-	--color-1: oklch(
-		98% calc(0.03 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (0 * var(--palette-hue-rotate-by)))
-	);
-	--color-2: oklch(
-		97% calc(0.06 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (1 * var(--palette-hue-rotate-by)))
-	);
-	--color-3: oklch(
-		93% calc(0.1 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (2 * var(--palette-hue-rotate-by)))
-	);
-	--color-4: oklch(
-		84% calc(0.12 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (3 * var(--palette-hue-rotate-by)))
-	);
-	--color-5: oklch(
-		80% calc(0.16 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (4 * var(--palette-hue-rotate-by)))
-	);
-	--color-6: oklch(
-		71% calc(0.19 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (5 * var(--palette-hue-rotate-by)))
-	);
-	--color-7: oklch(
-		66% calc(0.2 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (6 * var(--palette-hue-rotate-by)))
-	);
-	--color-8: oklch(
-		58% calc(0.21 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (7 * var(--palette-hue-rotate-by)))
-	);
-	--color-9: oklch(
-		53% calc(0.2 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (8 * var(--palette-hue-rotate-by)))
-	);
-	--color-10: oklch(
-		49% calc(0.19 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (9 * var(--palette-hue-rotate-by)))
-	);
-	--color-11: oklch(
-		42% calc(0.17 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (10 * var(--palette-hue-rotate-by)))
-	);
-	--color-12: oklch(
-		35% calc(0.15 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (11 * var(--palette-hue-rotate-by)))
-	);
-	--color-13: oklch(
-		27% calc(0.12 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (12 * var(--palette-hue-rotate-by)))
-	);
-	--color-14: oklch(
-		20% calc(0.09 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (13 * var(--palette-hue-rotate-by)))
-	);
-	--color-15: oklch(
-		16% calc(0.07 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (14 * var(--palette-hue-rotate-by)))
-	);
-	--color-16: oklch(
-		10% calc(0.05 * var(--palette-chroma, 1))
-			calc(var(--palette-hue) + (15 * var(--palette-hue-rotate-by)))
-	);
-}