compote-ui 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/button/button.variants.js +1 -1
  2. package/dist/components/checkbox/checkbox.svelte +2 -2
  3. package/dist/components/dialog/alert-dialog.svelte +4 -4
  4. package/dist/components/dialog/dialog.svelte +1 -1
  5. package/dist/components/field/field-input.svelte +1 -1
  6. package/dist/components/field/field-textarea.svelte +1 -1
  7. package/dist/components/field/field.svelte +0 -4
  8. package/dist/components/field/types.d.ts +0 -1
  9. package/dist/components/listbox/listbox.svelte +1 -1
  10. package/dist/components/number-input/number-input.svelte +1 -1
  11. package/dist/components/select/select.svelte +1 -1
  12. package/dist/components/switch/switch.svelte +1 -1
  13. package/dist/components/tree-view/tree-view.svelte +2 -3
  14. package/dist/theme.css +19 -24
  15. package/package.json +1 -1
package/dist/components/button/button.variants.js CHANGED
@@ -3,7 +3,7 @@ export const button = tv({
3
3
  base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
4
4
  variants: {
5
5
  variant: {
6
- default: 'bg-primary text-white hover:bg-primary/90 active:bg-primary/80',
6
+ default: 'bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80',
7
7
  outline: 'border text-ink hover:bg-surface-2',
8
8
  ghost: 'text-ink hover:bg-surface-2'
9
9
  },
package/dist/components/checkbox/checkbox.svelte CHANGED
@@ -18,10 +18,10 @@
18
18
  : ''} data-focus-visible:outline-ring flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
19
19
  >
20
20
  <Checkbox.Indicator>
21
- <PhCheck class="size-3.5 text-white" />
21
+ <PhCheck class="size-3.5 text-ink-inverse" />
22
22
  </Checkbox.Indicator>
23
23
  <Checkbox.Indicator indeterminate>
24
- <PhMinus class="size-3.5 text-white" />
24
+ <PhMinus class="size-3.5 text-ink-inverse" />
25
25
  </Checkbox.Indicator>
26
26
  </Checkbox.Control>
27
27
  {#if label}
package/dist/components/dialog/alert-dialog.svelte CHANGED
@@ -20,8 +20,8 @@
20
20
 
21
21
  const confirmClass = $derived(
22
22
  variant === 'destructive'
23
- ? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
24
- : 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary'
23
+ ? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
24
+ : 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
25
25
  );
26
26
  </script>
27
27
 
@@ -46,7 +46,7 @@
46
46
  {/if}
47
47
  <div class="mt-6 flex justify-end gap-3">
48
48
  <Dialog.CloseTrigger
49
- class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none"
49
+ class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
50
50
  onclick={onCancel}
51
51
  >
52
52
  {cancelLabel}
@@ -56,7 +56,7 @@
56
56
  </button>
57
57
  </div>
58
58
  <Dialog.CloseTrigger
59
- class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
59
+ class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
60
60
  >
61
61
  <PhX class="h-4 w-4" />
62
62
  <span class="sr-only">Close</span>
package/dist/components/dialog/dialog.svelte CHANGED
@@ -48,7 +48,7 @@
48
48
  {/if}
49
49
 
50
50
  <Dialog.CloseTrigger
51
- class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
51
+ class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50"
52
52
  >
53
53
  <PhX class="size-4" />
54
54
  <span class="sr-only">Close</span>
package/dist/components/field/field-input.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  {...rest}
25
25
  bind:value
26
26
  class={cn(
27
- 'flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
27
+ 'flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
28
28
  startIcon && 'pl-9',
29
29
  endIcon && 'pr-9',
30
30
  className
package/dist/components/field/field-textarea.svelte CHANGED
@@ -10,7 +10,7 @@
10
10
  {...rest}
11
11
  {value}
12
12
  class={cn(
13
- 'flex min-h-20 w-full resize-y rounded-md border bg-surface-1 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
13
+ 'flex min-h-20 w-full resize-y rounded-md border bg-surface-1 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger data-readonly:cursor-default data-readonly:opacity-70',
14
14
  className
15
15
  )}
16
16
  />
package/dist/components/field/field.svelte CHANGED
@@ -6,7 +6,6 @@
6
6
  let {
7
7
  form,
8
8
  field,
9
- label,
10
9
  helperText,
11
10
  class: className,
12
11
  invalid,
@@ -26,9 +25,6 @@
26
25
  required={isRequired}
27
26
  class={cn('group flex flex-col gap-1.5', className)}
28
27
  >
29
- {#if label}
30
- <Field.Label>{label}<Field.RequiredIndicator /></Field.Label>
31
- {/if}
32
28
  {@render children?.()}
33
29
  {#if errorText}
34
30
  <Field.ErrorText>{errorText}</Field.ErrorText>
package/dist/components/field/types.d.ts CHANGED
@@ -9,7 +9,6 @@ export interface FieldRootProps extends FieldRootBaseProps {
9
9
  class?: string;
10
10
  form?: FormAdapter;
11
11
  field?: string;
12
- label?: string;
13
12
  helperText?: string;
14
13
  }
15
14
  export interface FieldLabelProps extends FieldLabelBaseProps {
package/dist/components/listbox/listbox.svelte CHANGED
@@ -66,7 +66,7 @@
66
66
  <Listbox.Input
67
67
  placeholder={filterPlaceholder}
68
68
  oninput={(e) => (filterText = e.currentTarget.value)}
69
- class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary"
69
+ class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring"
70
70
  />
71
71
  {/if}
72
72
  <Listbox.Content class="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto outline-none">
package/dist/components/number-input/number-input.svelte CHANGED
@@ -47,7 +47,7 @@
47
47
  {/if}
48
48
  <NumberInput.Control class="relative isolate">
49
49
  <NumberInput.Input
50
- class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
50
+ class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
51
51
  />
52
52
  <div
53
53
  class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"
package/dist/components/select/select.svelte CHANGED
@@ -46,7 +46,7 @@
46
46
  {/if}
47
47
  <Select.Control>
48
48
  <Select.Trigger
49
- class="flex h-9 w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-primary focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger"
49
+ class="flex h-9 w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger"
50
50
  >
51
51
  <div class="flex items-center gap-2">
52
52
  <Select.ValueText
package/dist/components/switch/switch.svelte CHANGED
@@ -25,7 +25,7 @@
25
25
  {/if}
26
26
  <Switch.Root {...rootProps} bind:checked class={rootClass}>
27
27
  <Switch.Control
28
- class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent bg-surface-3 transition-colors duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:outline-hidden data-invalid:ring-2 data-invalid:ring-danger data-invalid:ring-offset-2 data-[state=checked]:bg-primary"
28
+ class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent bg-surface-3 transition-colors duration-150 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden data-invalid:ring-2 data-invalid:ring-danger data-invalid:ring-offset-2 data-[state=checked]:bg-primary"
29
29
  >
30
30
  <Switch.Thumb
31
31
  class="pointer-events-none block size-5 rounded-full bg-white shadow-sm ring-0 transition-transform duration-150 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
package/dist/components/tree-view/tree-view.svelte CHANGED
@@ -67,7 +67,6 @@
67
67
  contextNode = nodeId ?? null;
68
68
  }
69
69
  }
70
- $inspect('searchTerm:', searchTerm);
71
70
  </script>
72
71
 
73
72
  <div class="flex h-full flex-col" role="none" oncontextmenu={handleContextMenu}>
@@ -146,7 +145,7 @@
146
145
 
147
146
  {#snippet nodeCheckbox()}
148
147
  <TreeView.NodeCheckbox
149
- class="border-input bg-background text-primary-foreground inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
148
+ class="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border bg-transparent text-ink-inverse data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
150
149
  >
151
150
  <TreeView.NodeCheckboxIndicator>
152
151
  {#snippet indeterminate()}
@@ -181,7 +180,7 @@
181
180
  </TreeView.BranchText>
182
181
  </TreeView.BranchControl>
183
182
  <TreeView.BranchContent class="relative">
184
- <TreeView.BranchIndentGuide class="bg-border absolute inset-y-0 w-px" />
183
+ <TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" />
185
184
  {#each node.children as child, childIndex (child.value)}
186
185
  {@render renderNode(child as T, [...indexPath, childIndex])}
187
186
  {/each}
package/dist/theme.css CHANGED
@@ -5,6 +5,8 @@
5
5
  @source './components/**/*.svelte';
6
6
 
7
7
  :root {
8
+ color-scheme: light dark;
9
+
8
10
  --dim: 0.3;
9
11
  --radius: 6px;
10
12
  --font-sans: 'Wix Madefor Text Variable', sans-serif;
@@ -14,42 +16,32 @@
14
16
  --color-hue: var(--hue-orange);
15
17
  --gray-hue: 250;
16
18
 
17
- --compote-ink: var(--gray-15);
18
- --compote-ink-dim: var(--gray-11);
19
- --compote-surface-3: var(--gray-5);
20
- --compote-surface-2: var(--gray-4);
21
- --compote-surface-1: var(--gray-3);
22
- --compote-surface-document: var(--gray-2);
23
- --compote-well: var(--gray-1);
19
+ --compote-ink: light-dark(var(--gray-15), var(--gray-1));
20
+ --compote-ink-dim: light-dark(var(--gray-11), var(--gray-5));
21
+ --compote-ink-inverse: white;
22
+ --compote-surface-3: light-dark(var(--gray-5), var(--gray-11));
23
+ --compote-surface-2: light-dark(var(--gray-4), var(--gray-12));
24
+ --compote-surface-1: light-dark(var(--gray-3), var(--gray-13));
25
+ --compote-surface-document: light-dark(var(--gray-2), var(--gray-14));
26
+ --compote-well: light-dark(var(--gray-1), var(--gray-15));
24
27
 
25
28
  --compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
26
29
  --compote-danger: oklch(from var(--color-7) l c var(--hue-red));
27
30
  --compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
28
31
  --compote-success: oklch(from var(--color-7) l c var(--hue-green));
29
32
  --compote-info: oklch(from var(--color-7) l c var(--hue-blue));
30
- }
31
-
32
- @media (prefers-color-scheme: dark) {
33
- :root {
34
- --compote-ink: var(--gray-1);
35
- --compote-ink-dim: var(--gray-5);
36
- --compote-surface-3: var(--gray-11);
37
- --compote-surface-2: var(--gray-12);
38
- --compote-surface-1: var(--gray-13);
39
- --compote-surface-document: var(--gray-14);
40
- --compote-well: var(--gray-15);
41
33
 
42
- --compote-primary: oklch(from var(--color-7) l c var(--hue-orange));
43
- --compote-danger: oklch(from var(--color-7) l c var(--hue-red));
44
- --compote-warning: oklch(from var(--color-7) l c var(--hue-yellow));
45
- --compote-success: oklch(from var(--color-7) l c var(--hue-green));
46
- --compote-info: oklch(from var(--color-7) l c var(--hue-blue));
47
- }
34
+ --compote-border: var(--compote-surface-3);
35
+ --compote-ring: var(--compote-primary);
48
36
  }
49
37
 
38
+ .dark { color-scheme: dark; }
39
+ .light { color-scheme: light; }
40
+
50
41
  @theme inline {
51
42
  --color-ink: var(--compote-ink);
52
43
  --color-ink-dim: var(--compote-ink-dim);
44
+ --color-ink-inverse: var(--compote-ink-inverse);
53
45
  --color-surface-3: var(--compote-surface-3);
54
46
  --color-surface-2: var(--compote-surface-2);
55
47
  --color-surface-1: var(--compote-surface-1);
@@ -62,6 +54,9 @@
62
54
  --color-success: var(--compote-success);
63
55
  --color-info: var(--compote-info);
64
56
 
57
+ --color-border: var(--compote-border);
58
+ --color-ring: var(--compote-ring);
59
+
65
60
  --font-sans: var(--font-sans);
66
61
  --font-mono: var(--font-mono);
67
62
  --font-serif: var(--font-serif);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.12.0",
3
+ "version": "0.13.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev",