@khal-os/ui 1.0.1 → 1.0.2

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 (59) hide show
  1. package/LICENSE +94 -0
  2. package/README.md +25 -0
  3. package/dist/index.cjs +2661 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +926 -0
  6. package/dist/index.d.ts +926 -0
  7. package/dist/index.js +2510 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +59 -40
  10. package/tokens.css +260 -238
  11. package/src/components/ContextMenu.tsx +0 -130
  12. package/src/components/avatar.tsx +0 -71
  13. package/src/components/badge.tsx +0 -39
  14. package/src/components/button.tsx +0 -102
  15. package/src/components/command.tsx +0 -165
  16. package/src/components/cost-counter.tsx +0 -75
  17. package/src/components/data-row.tsx +0 -97
  18. package/src/components/dropdown-menu.tsx +0 -233
  19. package/src/components/glass-card.tsx +0 -74
  20. package/src/components/input.tsx +0 -48
  21. package/src/components/khal-logo.tsx +0 -73
  22. package/src/components/live-feed.tsx +0 -109
  23. package/src/components/mesh-gradient.tsx +0 -57
  24. package/src/components/metric-display.tsx +0 -93
  25. package/src/components/note.tsx +0 -55
  26. package/src/components/number-flow.tsx +0 -25
  27. package/src/components/pill-badge.tsx +0 -65
  28. package/src/components/progress-bar.tsx +0 -70
  29. package/src/components/section-card.tsx +0 -76
  30. package/src/components/separator.tsx +0 -25
  31. package/src/components/spinner.tsx +0 -42
  32. package/src/components/status-dot.tsx +0 -90
  33. package/src/components/switch.tsx +0 -36
  34. package/src/components/theme-provider.tsx +0 -58
  35. package/src/components/theme-switcher.tsx +0 -59
  36. package/src/components/ticker-bar.tsx +0 -41
  37. package/src/components/tooltip.tsx +0 -62
  38. package/src/components/window-minimized-context.tsx +0 -29
  39. package/src/hooks/useReducedMotion.ts +0 -21
  40. package/src/index.ts +0 -58
  41. package/src/lib/animations.ts +0 -50
  42. package/src/primitives/collapsible-sidebar.tsx +0 -226
  43. package/src/primitives/dialog.tsx +0 -76
  44. package/src/primitives/empty-state.tsx +0 -43
  45. package/src/primitives/index.ts +0 -22
  46. package/src/primitives/list-view.tsx +0 -155
  47. package/src/primitives/property-panel.tsx +0 -108
  48. package/src/primitives/section-header.tsx +0 -19
  49. package/src/primitives/sidebar-nav.tsx +0 -110
  50. package/src/primitives/split-pane.tsx +0 -146
  51. package/src/primitives/status-badge.tsx +0 -10
  52. package/src/primitives/status-bar.tsx +0 -100
  53. package/src/primitives/toolbar.tsx +0 -152
  54. package/src/server.ts +0 -4
  55. package/src/stores/notification-store.ts +0 -271
  56. package/src/stores/theme-store.ts +0 -33
  57. package/src/tokens/lp-tokens.ts +0 -36
  58. package/src/utils.ts +0 -6
  59. package/tsconfig.json +0 -17
package/tokens.css CHANGED
@@ -20,162 +20,184 @@
20
20
  ═══════════════════════════════════════════════════════════════════════════ */
21
21
 
22
22
  :root {
23
- /* ── Base ──────────────────────────────────────────────────────────────── */
24
- --ds-black: oklch(0 0 0);
25
- --ds-white: oklch(1 0 0);
23
+ /* ── Base ──────────────────────────────────────────────────────────────── */
24
+ --ds-black: oklch(0 0 0);
25
+ --ds-white: oklch(1 0 0);
26
26
 
27
- /* ── Background ────────────────────────────────────────────────────────── */
28
- --ds-background-100: oklch(1 0 0);
29
- --ds-background-200: oklch(0.984 0 0);
27
+ /* ── Background ────────────────────────────────────────────────────────── */
28
+ --ds-background-100: oklch(1 0 0);
29
+ --ds-background-200: oklch(0.984 0 0);
30
30
 
31
- /* ── Gray ──────────────────────────────────────────────────────────────── */
32
- --ds-gray-100: oklch(0.961 0 0);
33
- --ds-gray-200: oklch(0.94 0 0);
34
- --ds-gray-300: oklch(0.925 0 0);
35
- --ds-gray-400: oklch(0.937 0 0);
36
- --ds-gray-500: oklch(0.836 0 0);
37
- --ds-gray-600: oklch(0.732 0 0);
38
- --ds-gray-700: oklch(0.65 0 0);
39
- --ds-gray-800: oklch(0.59 0 0);
40
- --ds-gray-900: oklch(0.51 0 0);
41
- --ds-gray-1000: oklch(0.205 0 0);
31
+ /* ── Gray ──────────────────────────────────────────────────────────────── */
32
+ --ds-gray-100: oklch(0.961 0 0);
33
+ --ds-gray-200: oklch(0.94 0 0);
34
+ --ds-gray-300: oklch(0.925 0 0);
35
+ --ds-gray-400: oklch(0.937 0 0);
36
+ --ds-gray-500: oklch(0.836 0 0);
37
+ --ds-gray-600: oklch(0.732 0 0);
38
+ --ds-gray-700: oklch(0.65 0 0);
39
+ --ds-gray-800: oklch(0.59 0 0);
40
+ --ds-gray-900: oklch(0.51 0 0);
41
+ --ds-gray-1000: oklch(0.205 0 0);
42
42
 
43
- /* ── Gray Alpha ────────────────────────────────────────────────────────── */
44
- --ds-gray-alpha-100: oklch(0 0 0 / 0.05);
45
- --ds-gray-alpha-200: oklch(0 0 0 / 0.081);
46
- --ds-gray-alpha-300: oklch(0 0 0 / 0.1);
47
- --ds-gray-alpha-400: oklch(0 0 0 / 0.08);
48
- --ds-gray-alpha-500: oklch(0 0 0 / 0.21);
49
- --ds-gray-alpha-600: oklch(0 0 0 / 0.24);
50
- --ds-gray-alpha-700: oklch(0 0 0 / 0.44);
51
- --ds-gray-alpha-800: oklch(0 0 0 / 0.51);
52
- --ds-gray-alpha-900: oklch(0 0 0 / 0.61);
53
- --ds-gray-alpha-1000: oklch(0 0 0 / 0.91);
43
+ /* ── Gray Alpha ────────────────────────────────────────────────────────── */
44
+ --ds-gray-alpha-100: oklch(0 0 0 / 0.05);
45
+ --ds-gray-alpha-200: oklch(0 0 0 / 0.081);
46
+ --ds-gray-alpha-300: oklch(0 0 0 / 0.1);
47
+ --ds-gray-alpha-400: oklch(0 0 0 / 0.08);
48
+ --ds-gray-alpha-500: oklch(0 0 0 / 0.21);
49
+ --ds-gray-alpha-600: oklch(0 0 0 / 0.24);
50
+ --ds-gray-alpha-700: oklch(0 0 0 / 0.44);
51
+ --ds-gray-alpha-800: oklch(0 0 0 / 0.51);
52
+ --ds-gray-alpha-900: oklch(0 0 0 / 0.61);
53
+ --ds-gray-alpha-1000: oklch(0 0 0 / 0.91);
54
54
 
55
- /* ── Blue ──────────────────────────────────────────────────────────────── */
56
- --ds-blue-100: oklch(97.32% 0.0141 251.56);
57
- --ds-blue-200: oklch(96.29% 0.0195 250.59);
58
- --ds-blue-300: oklch(94.58% 0.0293 249.85);
59
- --ds-blue-400: oklch(91.58% 0.0473 245.12);
60
- --ds-blue-500: oklch(82.75% 0.0979 248.48);
61
- --ds-blue-600: oklch(73.08% 0.1583 248.13);
62
- --ds-blue-700: oklch(57.61% 0.2508 258.23);
63
- --ds-blue-800: oklch(51.51% 0.2399 257.85);
64
- --ds-blue-900: oklch(53.18% 0.2399 256.99);
65
- --ds-blue-1000: oklch(26.67% 0.1099 254.34);
55
+ /* ── Blue ──────────────────────────────────────────────────────────────── */
56
+ --ds-blue-100: oklch(97.32% 0.0141 251.56);
57
+ --ds-blue-200: oklch(96.29% 0.0195 250.59);
58
+ --ds-blue-300: oklch(94.58% 0.0293 249.85);
59
+ --ds-blue-400: oklch(91.58% 0.0473 245.12);
60
+ --ds-blue-500: oklch(82.75% 0.0979 248.48);
61
+ --ds-blue-600: oklch(73.08% 0.1583 248.13);
62
+ --ds-blue-700: oklch(57.61% 0.2508 258.23);
63
+ --ds-blue-800: oklch(51.51% 0.2399 257.85);
64
+ --ds-blue-900: oklch(53.18% 0.2399 256.99);
65
+ --ds-blue-1000: oklch(26.67% 0.1099 254.34);
66
66
 
67
- /* ── Red ───────────────────────────────────────────────────────────────── */
68
- --ds-red-100: oklch(96.5% 0.0223 13.09);
69
- --ds-red-200: oklch(95.41% 0.0299 14.25);
70
- --ds-red-300: oklch(94.33% 0.0369 15.01);
71
- --ds-red-400: oklch(91.51% 0.0471 19.8);
72
- --ds-red-500: oklch(84.47% 0.1018 17.71);
73
- --ds-red-600: oklch(71.12% 0.1881 21.22);
74
- --ds-red-700: oklch(62.56% 0.2524 23.03);
75
- --ds-red-800: oklch(58.19% 0.2482 25.15);
76
- --ds-red-900: oklch(54.99% 0.232 25.29);
77
- --ds-red-1000: oklch(24.8% 0.1041 18.86);
67
+ /* ── Red ───────────────────────────────────────────────────────────────── */
68
+ --ds-red-100: oklch(96.5% 0.0223 13.09);
69
+ --ds-red-200: oklch(95.41% 0.0299 14.25);
70
+ --ds-red-300: oklch(94.33% 0.0369 15.01);
71
+ --ds-red-400: oklch(91.51% 0.0471 19.8);
72
+ --ds-red-500: oklch(84.47% 0.1018 17.71);
73
+ --ds-red-600: oklch(71.12% 0.1881 21.22);
74
+ --ds-red-700: oklch(62.56% 0.2524 23.03);
75
+ --ds-red-800: oklch(58.19% 0.2482 25.15);
76
+ --ds-red-900: oklch(54.99% 0.232 25.29);
77
+ --ds-red-1000: oklch(24.8% 0.1041 18.86);
78
78
 
79
- /* ── Amber ─────────────────────────────────────────────────────────────── */
80
- --ds-amber-100: oklch(97.48% 0.0331 85.79);
81
- --ds-amber-200: oklch(96.81% 0.0495 90.24);
82
- --ds-amber-300: oklch(95.93% 0.0636 90.52);
83
- --ds-amber-400: oklch(91.02% 0.1322 88.25);
84
- --ds-amber-500: oklch(86.55% 0.1583 79.63);
85
- --ds-amber-600: oklch(80.25% 0.1953 73.59);
86
- --ds-amber-700: oklch(81.87% 0.1969 76.46);
87
- --ds-amber-800: oklch(77.21% 0.1991 64.28);
88
- --ds-amber-900: oklch(52.79% 0.1496 54.65);
89
- --ds-amber-1000: oklch(30.83% 0.099 45.48);
79
+ /* ── Amber ─────────────────────────────────────────────────────────────── */
80
+ --ds-amber-100: oklch(97.48% 0.0331 85.79);
81
+ --ds-amber-200: oklch(96.81% 0.0495 90.24);
82
+ --ds-amber-300: oklch(95.93% 0.0636 90.52);
83
+ --ds-amber-400: oklch(91.02% 0.1322 88.25);
84
+ --ds-amber-500: oklch(86.55% 0.1583 79.63);
85
+ --ds-amber-600: oklch(80.25% 0.1953 73.59);
86
+ --ds-amber-700: oklch(81.87% 0.1969 76.46);
87
+ --ds-amber-800: oklch(77.21% 0.1991 64.28);
88
+ --ds-amber-900: oklch(52.79% 0.1496 54.65);
89
+ --ds-amber-1000: oklch(30.83% 0.099 45.48);
90
90
 
91
- /* ── Green ─────────────────────────────────────────────────────────────── */
92
- --ds-green-100: oklch(97.59% 0.0289 145.42);
93
- --ds-green-200: oklch(96.92% 0.037 147.15);
94
- --ds-green-300: oklch(94.6% 0.0674 144.23);
95
- --ds-green-400: oklch(91.49% 0.0976 146.24);
96
- --ds-green-500: oklch(85.45% 0.1627 146.3);
97
- --ds-green-600: oklch(80.25% 0.214 145.18);
98
- --ds-green-700: oklch(64.58% 0.1746 147.27);
99
- --ds-green-800: oklch(57.81% 0.1507 147.5);
100
- --ds-green-900: oklch(51.75% 0.1453 147.65);
101
- --ds-green-1000: oklch(29.15% 0.1197 147.38);
91
+ /* ── Green ─────────────────────────────────────────────────────────────── */
92
+ --ds-green-100: oklch(97.59% 0.0289 145.42);
93
+ --ds-green-200: oklch(96.92% 0.037 147.15);
94
+ --ds-green-300: oklch(94.6% 0.0674 144.23);
95
+ --ds-green-400: oklch(91.49% 0.0976 146.24);
96
+ --ds-green-500: oklch(85.45% 0.1627 146.3);
97
+ --ds-green-600: oklch(80.25% 0.214 145.18);
98
+ --ds-green-700: oklch(64.58% 0.1746 147.27);
99
+ --ds-green-800: oklch(57.81% 0.1507 147.5);
100
+ --ds-green-900: oklch(51.75% 0.1453 147.65);
101
+ --ds-green-1000: oklch(29.15% 0.1197 147.38);
102
102
 
103
- /* ── Teal ──────────────────────────────────────────────────────────────── */
104
- --ds-teal-100: oklch(97.72% 0.0359 186.7);
105
- --ds-teal-200: oklch(97.06% 0.0347 180.66);
106
- --ds-teal-300: oklch(94.92% 0.0478 182.07);
107
- --ds-teal-400: oklch(92.76% 0.0718 183.78);
108
- --ds-teal-500: oklch(86.88% 0.1344 182.42);
109
- --ds-teal-600: oklch(81.5% 0.161 178.96);
110
- --ds-teal-700: oklch(64.92% 0.1572 181.95);
111
- --ds-teal-800: oklch(57.53% 0.1392 181.66);
112
- --ds-teal-900: oklch(52.08% 0.1251 182.93);
113
- --ds-teal-1000: oklch(32.11% 0.0788 179.82);
103
+ /* ── Teal ──────────────────────────────────────────────────────────────── */
104
+ --ds-teal-100: oklch(97.72% 0.0359 186.7);
105
+ --ds-teal-200: oklch(97.06% 0.0347 180.66);
106
+ --ds-teal-300: oklch(94.92% 0.0478 182.07);
107
+ --ds-teal-400: oklch(92.76% 0.0718 183.78);
108
+ --ds-teal-500: oklch(86.88% 0.1344 182.42);
109
+ --ds-teal-600: oklch(81.5% 0.161 178.96);
110
+ --ds-teal-700: oklch(64.92% 0.1572 181.95);
111
+ --ds-teal-800: oklch(57.53% 0.1392 181.66);
112
+ --ds-teal-900: oklch(52.08% 0.1251 182.93);
113
+ --ds-teal-1000: oklch(32.11% 0.0788 179.82);
114
114
 
115
- /* ── Purple ────────────────────────────────────────────────────────────── */
116
- --ds-purple-100: oklch(96.65% 0.0244 312.19);
117
- --ds-purple-200: oklch(96.73% 0.0228 309.8);
118
- --ds-purple-300: oklch(94.85% 0.0364 310.15);
119
- --ds-purple-400: oklch(91.77% 0.0614 312.82);
120
- --ds-purple-500: oklch(81.26% 0.1409 310.8);
121
- --ds-purple-600: oklch(72.07% 0.2083 308.19);
122
- --ds-purple-700: oklch(55.5% 0.3008 306.12);
123
- --ds-purple-800: oklch(48.58% 0.2638 305.73);
124
- --ds-purple-900: oklch(47.18% 0.2579 304);
125
- --ds-purple-1000: oklch(23.96% 0.13 305.66);
115
+ /* ── Purple ────────────────────────────────────────────────────────────── */
116
+ --ds-purple-100: oklch(96.65% 0.0244 312.19);
117
+ --ds-purple-200: oklch(96.73% 0.0228 309.8);
118
+ --ds-purple-300: oklch(94.85% 0.0364 310.15);
119
+ --ds-purple-400: oklch(91.77% 0.0614 312.82);
120
+ --ds-purple-500: oklch(81.26% 0.1409 310.8);
121
+ --ds-purple-600: oklch(72.07% 0.2083 308.19);
122
+ --ds-purple-700: oklch(55.5% 0.3008 306.12);
123
+ --ds-purple-800: oklch(48.58% 0.2638 305.73);
124
+ --ds-purple-900: oklch(47.18% 0.2579 304);
125
+ --ds-purple-1000: oklch(23.96% 0.13 305.66);
126
126
 
127
- /* ── Pink ──────────────────────────────────────────────────────────────── */
128
- --ds-pink-100: oklch(95.69% 0.0359 344.62);
129
- --ds-pink-200: oklch(95.71% 0.0321 353.14);
130
- --ds-pink-300: oklch(93.83% 0.0451 356.29);
131
- --ds-pink-400: oklch(91.12% 0.0573 358.82);
132
- --ds-pink-500: oklch(84.28% 0.0915 356.99);
133
- --ds-pink-600: oklch(74.33% 0.1547 0.24);
134
- --ds-pink-700: oklch(63.52% 0.238 1.01);
135
- --ds-pink-800: oklch(59.51% 0.2339 4.21);
136
- --ds-pink-900: oklch(53.5% 0.2058 2.84);
137
- --ds-pink-1000: oklch(26% 0.0977 359);
127
+ /* ── Pink ──────────────────────────────────────────────────────────────── */
128
+ --ds-pink-100: oklch(95.69% 0.0359 344.62);
129
+ --ds-pink-200: oklch(95.71% 0.0321 353.14);
130
+ --ds-pink-300: oklch(93.83% 0.0451 356.29);
131
+ --ds-pink-400: oklch(91.12% 0.0573 358.82);
132
+ --ds-pink-500: oklch(84.28% 0.0915 356.99);
133
+ --ds-pink-600: oklch(74.33% 0.1547 0.24);
134
+ --ds-pink-700: oklch(63.52% 0.238 1.01);
135
+ --ds-pink-800: oklch(59.51% 0.2339 4.21);
136
+ --ds-pink-900: oklch(53.5% 0.2058 2.84);
137
+ --ds-pink-1000: oklch(26% 0.0977 359);
138
138
 
139
- /* ── Shadows ───────────────────────────────────────────────────────────── */
140
- --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
141
- --ds-shadow-border-base: 0 0 0 1px rgba(0, 0, 0, 0.08);
142
- --ds-shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
143
- --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
144
- --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.04);
145
- --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.04);
146
- --ds-shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);
147
- --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
148
- --ds-shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
149
- --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
150
- --ds-shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
151
- --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
152
- --ds-shadow-xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
153
- --ds-shadow-2xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
154
- --ds-shadow-tooltip: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04), var(--ds-shadow-background-border);
155
- --ds-shadow-menu: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
156
- --ds-shadow-modal: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
157
- --ds-shadow-fullscreen: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
139
+ /* ── Shadows ───────────────────────────────────────────────────────────── */
140
+ --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
141
+ --ds-shadow-border-base: 0 0 0 1px rgba(0, 0, 0, 0.08);
142
+ --ds-shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
143
+ --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
144
+ --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.04);
145
+ --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.04);
146
+ --ds-shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);
147
+ --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
148
+ --ds-shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
149
+ --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
150
+ --ds-shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
151
+ --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
152
+ --ds-shadow-xl:
153
+ 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
154
+ --ds-shadow-2xl:
155
+ 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
156
+ --ds-shadow-tooltip:
157
+ var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04),
158
+ var(--ds-shadow-background-border);
159
+ --ds-shadow-menu:
160
+ var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(
161
+ 0,
162
+ 0,
163
+ 0,
164
+ 0.06
165
+ ), var(--ds-shadow-background-border);
166
+ --ds-shadow-modal:
167
+ var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(
168
+ 0,
169
+ 0,
170
+ 0,
171
+ 0.06
172
+ ), var(--ds-shadow-background-border);
173
+ --ds-shadow-fullscreen:
174
+ var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(
175
+ 0,
176
+ 0,
177
+ 0,
178
+ 0.06
179
+ ), var(--ds-shadow-background-border);
158
180
 
159
- /* ── Focus ─────────────────────────────────────────────────────────────── */
160
- --ds-focus-color: var(--ds-blue-700);
161
- --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-focus-color);
181
+ /* ── Focus ─────────────────────────────────────────────────────────────── */
182
+ --ds-focus-color: var(--ds-blue-700);
183
+ --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-focus-color);
162
184
 
163
- /* ── Motion ────────────────────────────────────────────────────────────── */
164
- --ds-motion-timing-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
185
+ /* ── Motion ────────────────────────────────────────────────────────────── */
186
+ --ds-motion-timing-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
165
187
 
166
- /* ── Overlay ───────────────────────────────────────────────────────────── */
167
- --ds-overlay-backdrop-color: var(--ds-background-200);
168
- --ds-overlay-backdrop-opacity: 0.8;
188
+ /* ── Overlay ───────────────────────────────────────────────────────────── */
189
+ --ds-overlay-backdrop-color: var(--ds-background-200);
190
+ --ds-overlay-backdrop-opacity: 0.8;
169
191
 
170
- /* ── Brand ─────────────────────────────────────────────────────────────── */
171
- --ds-accent-warm: oklch(0.74 0.11 65);
172
- --ds-accent-warm-subtle: oklch(0.74 0.11 65 / 0.12);
192
+ /* ── Brand ─────────────────────────────────────────────────────────────── */
193
+ --ds-accent-warm: oklch(0.74 0.11 65);
194
+ --ds-accent-warm-subtle: oklch(0.74 0.11 65 / 0.12);
173
195
 
174
- /* ── Product Identity ──────────────────────────────────────────────────── */
175
- --ds-product-genie: oklch(0.73 0.13 295);
176
- --ds-product-omni: oklch(0.80 0.12 175);
177
- --ds-product-khal: oklch(0.75 0.15 55);
178
- --ds-product-os: oklch(0.72 0.15 250);
196
+ /* ── Product Identity ──────────────────────────────────────────────────── */
197
+ --ds-product-genie: oklch(0.73 0.13 295);
198
+ --ds-product-omni: oklch(0.8 0.12 175);
199
+ --ds-product-khal: oklch(0.75 0.15 55);
200
+ --ds-product-os: oklch(0.72 0.15 250);
179
201
  }
180
202
 
181
203
  /* ═══════════════════════════════════════════════════════════════════════════
@@ -183,113 +205,113 @@
183
205
  ═══════════════════════════════════════════════════════════════════════════ */
184
206
 
185
207
  .dark {
186
- --ds-background-100: oklch(0 0 0);
187
- --ds-background-200: oklch(0.027 0 0);
208
+ --ds-background-100: oklch(0 0 0);
209
+ --ds-background-200: oklch(0.027 0 0);
188
210
 
189
- --ds-gray-100: oklch(0.218 0 0);
190
- --ds-gray-200: oklch(0.239 0 0);
191
- --ds-gray-300: oklch(0.281 0 0);
192
- --ds-gray-400: oklch(0.301 0 0);
193
- --ds-gray-500: oklch(0.39 0 0);
194
- --ds-gray-600: oklch(0.623 0 0);
195
- --ds-gray-700: oklch(0.65 0 0);
196
- --ds-gray-800: oklch(0.59 0 0);
197
- --ds-gray-900: oklch(0.706 0 0);
198
- --ds-gray-1000: oklch(0.946 0 0);
211
+ --ds-gray-100: oklch(0.218 0 0);
212
+ --ds-gray-200: oklch(0.239 0 0);
213
+ --ds-gray-300: oklch(0.281 0 0);
214
+ --ds-gray-400: oklch(0.301 0 0);
215
+ --ds-gray-500: oklch(0.39 0 0);
216
+ --ds-gray-600: oklch(0.623 0 0);
217
+ --ds-gray-700: oklch(0.65 0 0);
218
+ --ds-gray-800: oklch(0.59 0 0);
219
+ --ds-gray-900: oklch(0.706 0 0);
220
+ --ds-gray-1000: oklch(0.946 0 0);
199
221
 
200
- --ds-gray-alpha-100: oklch(1 0 0 / 0.07);
201
- --ds-gray-alpha-200: oklch(1 0 0 / 0.09);
202
- --ds-gray-alpha-300: oklch(1 0 0 / 0.13);
203
- --ds-gray-alpha-400: oklch(1 0 0 / 0.14);
204
- --ds-gray-alpha-500: oklch(1 0 0 / 0.24);
205
- --ds-gray-alpha-600: oklch(1 0 0 / 0.51);
206
- --ds-gray-alpha-700: oklch(1 0 0 / 0.54);
207
- --ds-gray-alpha-800: oklch(1 0 0 / 0.47);
208
- --ds-gray-alpha-900: oklch(1 0 0 / 0.61);
209
- --ds-gray-alpha-1000: oklch(1 0 0 / 0.92);
222
+ --ds-gray-alpha-100: oklch(1 0 0 / 0.07);
223
+ --ds-gray-alpha-200: oklch(1 0 0 / 0.09);
224
+ --ds-gray-alpha-300: oklch(1 0 0 / 0.13);
225
+ --ds-gray-alpha-400: oklch(1 0 0 / 0.14);
226
+ --ds-gray-alpha-500: oklch(1 0 0 / 0.24);
227
+ --ds-gray-alpha-600: oklch(1 0 0 / 0.51);
228
+ --ds-gray-alpha-700: oklch(1 0 0 / 0.54);
229
+ --ds-gray-alpha-800: oklch(1 0 0 / 0.47);
230
+ --ds-gray-alpha-900: oklch(1 0 0 / 0.61);
231
+ --ds-gray-alpha-1000: oklch(1 0 0 / 0.92);
210
232
 
211
- --ds-blue-100: oklch(22.17% 0.069 259.89);
212
- --ds-blue-200: oklch(25.45% 0.0811 255.8);
213
- --ds-blue-300: oklch(30.86% 0.1022 255.21);
214
- --ds-blue-400: oklch(34.1% 0.121 254.74);
215
- --ds-blue-500: oklch(38.5% 0.1403 254.4);
216
- --ds-blue-600: oklch(64.94% 0.1982 251.81);
217
- --ds-blue-700: oklch(57.61% 0.2321 258.23);
218
- --ds-blue-800: oklch(51.51% 0.2307 257.85);
219
- --ds-blue-900: oklch(71.7% 0.1648 250.79);
220
- --ds-blue-1000: oklch(96.75% 0.0179 242.42);
233
+ --ds-blue-100: oklch(22.17% 0.069 259.89);
234
+ --ds-blue-200: oklch(25.45% 0.0811 255.8);
235
+ --ds-blue-300: oklch(30.86% 0.1022 255.21);
236
+ --ds-blue-400: oklch(34.1% 0.121 254.74);
237
+ --ds-blue-500: oklch(38.5% 0.1403 254.4);
238
+ --ds-blue-600: oklch(64.94% 0.1982 251.81);
239
+ --ds-blue-700: oklch(57.61% 0.2321 258.23);
240
+ --ds-blue-800: oklch(51.51% 0.2307 257.85);
241
+ --ds-blue-900: oklch(71.7% 0.1648 250.79);
242
+ --ds-blue-1000: oklch(96.75% 0.0179 242.42);
221
243
 
222
- --ds-red-100: oklch(22.1% 0.0657 15.11);
223
- --ds-red-200: oklch(25.93% 0.0834 19.02);
224
- --ds-red-300: oklch(31.47% 0.1105 20.96);
225
- --ds-red-400: oklch(35.27% 0.1273 21.23);
226
- --ds-red-500: oklch(40.68% 0.1479 23.16);
227
- --ds-red-600: oklch(62.56% 0.2277 23.03);
228
- --ds-red-700: oklch(62.56% 0.2234 23.03);
229
- --ds-red-800: oklch(58.01% 0.227 25.12);
230
- --ds-red-900: oklch(69.96% 0.2136 22.03);
231
- --ds-red-1000: oklch(95.6% 0.0293 6.61);
244
+ --ds-red-100: oklch(22.1% 0.0657 15.11);
245
+ --ds-red-200: oklch(25.93% 0.0834 19.02);
246
+ --ds-red-300: oklch(31.47% 0.1105 20.96);
247
+ --ds-red-400: oklch(35.27% 0.1273 21.23);
248
+ --ds-red-500: oklch(40.68% 0.1479 23.16);
249
+ --ds-red-600: oklch(62.56% 0.2277 23.03);
250
+ --ds-red-700: oklch(62.56% 0.2234 23.03);
251
+ --ds-red-800: oklch(58.01% 0.227 25.12);
252
+ --ds-red-900: oklch(69.96% 0.2136 22.03);
253
+ --ds-red-1000: oklch(95.6% 0.0293 6.61);
232
254
 
233
- --ds-amber-100: oklch(22.46% 0.0538 76.04);
234
- --ds-amber-200: oklch(24.95% 0.0642 64.78);
235
- --ds-amber-300: oklch(32.34% 0.0837 63.83);
236
- --ds-amber-400: oklch(35.53% 0.0903 66.3);
237
- --ds-amber-500: oklch(41.55% 0.1044 67.98);
238
- --ds-amber-600: oklch(75.04% 0.1737 74.49);
239
- --ds-amber-700: oklch(81.87% 0.1969 76.46);
240
- --ds-amber-800: oklch(77.21% 0.1991 64.28);
241
- --ds-amber-900: oklch(77.21% 0.1991 64.28);
242
- --ds-amber-1000: oklch(96.7% 0.0418 84.59);
255
+ --ds-amber-100: oklch(22.46% 0.0538 76.04);
256
+ --ds-amber-200: oklch(24.95% 0.0642 64.78);
257
+ --ds-amber-300: oklch(32.34% 0.0837 63.83);
258
+ --ds-amber-400: oklch(35.53% 0.0903 66.3);
259
+ --ds-amber-500: oklch(41.55% 0.1044 67.98);
260
+ --ds-amber-600: oklch(75.04% 0.1737 74.49);
261
+ --ds-amber-700: oklch(81.87% 0.1969 76.46);
262
+ --ds-amber-800: oklch(77.21% 0.1991 64.28);
263
+ --ds-amber-900: oklch(77.21% 0.1991 64.28);
264
+ --ds-amber-1000: oklch(96.7% 0.0418 84.59);
243
265
 
244
- --ds-green-100: oklch(23.09% 0.0716 149.68);
245
- --ds-green-200: oklch(27.12% 0.0895 150.09);
246
- --ds-green-300: oklch(29.84% 0.096 149.25);
247
- --ds-green-400: oklch(34.39% 0.1039 147.78);
248
- --ds-green-500: oklch(44.19% 0.1484 147.2);
249
- --ds-green-600: oklch(58.11% 0.1815 146.55);
250
- --ds-green-700: oklch(64.58% 0.199 147.27);
251
- --ds-green-800: oklch(57.81% 0.1776 147.5);
252
- --ds-green-900: oklch(73.1% 0.2158 148.29);
253
- --ds-green-1000: oklch(96.76% 0.056 154.18);
266
+ --ds-green-100: oklch(23.09% 0.0716 149.68);
267
+ --ds-green-200: oklch(27.12% 0.0895 150.09);
268
+ --ds-green-300: oklch(29.84% 0.096 149.25);
269
+ --ds-green-400: oklch(34.39% 0.1039 147.78);
270
+ --ds-green-500: oklch(44.19% 0.1484 147.2);
271
+ --ds-green-600: oklch(58.11% 0.1815 146.55);
272
+ --ds-green-700: oklch(64.58% 0.199 147.27);
273
+ --ds-green-800: oklch(57.81% 0.1776 147.5);
274
+ --ds-green-900: oklch(73.1% 0.2158 148.29);
275
+ --ds-green-1000: oklch(96.76% 0.056 154.18);
254
276
 
255
- --ds-teal-100: oklch(22.1% 0.0544 178.74);
256
- --ds-teal-200: oklch(25.06% 0.062 178.76);
257
- --ds-teal-300: oklch(31.5% 0.0767 180.99);
258
- --ds-teal-400: oklch(32.43% 0.0763 180.13);
259
- --ds-teal-500: oklch(43.35% 0.1055 180.97);
260
- --ds-teal-600: oklch(60.71% 0.1485 180.24);
261
- --ds-teal-700: oklch(64.92% 0.1403 181.95);
262
- --ds-teal-800: oklch(57.53% 0.1392 181.66);
263
- --ds-teal-900: oklch(74.56% 0.1765 182.8);
264
- --ds-teal-1000: oklch(96.46% 0.056 180.29);
277
+ --ds-teal-100: oklch(22.1% 0.0544 178.74);
278
+ --ds-teal-200: oklch(25.06% 0.062 178.76);
279
+ --ds-teal-300: oklch(31.5% 0.0767 180.99);
280
+ --ds-teal-400: oklch(32.43% 0.0763 180.13);
281
+ --ds-teal-500: oklch(43.35% 0.1055 180.97);
282
+ --ds-teal-600: oklch(60.71% 0.1485 180.24);
283
+ --ds-teal-700: oklch(64.92% 0.1403 181.95);
284
+ --ds-teal-800: oklch(57.53% 0.1392 181.66);
285
+ --ds-teal-900: oklch(74.56% 0.1765 182.8);
286
+ --ds-teal-1000: oklch(96.46% 0.056 180.29);
265
287
 
266
- --ds-purple-100: oklch(22.34% 0.0779 316.87);
267
- --ds-purple-200: oklch(25.91% 0.0921 314.41);
268
- --ds-purple-300: oklch(31.98% 0.1219 312.41);
269
- --ds-purple-400: oklch(35.93% 0.1504 309.78);
270
- --ds-purple-500: oklch(40.99% 0.1721 307.92);
271
- --ds-purple-600: oklch(55.5% 0.2191 306.12);
272
- --ds-purple-700: oklch(55.5% 0.2186 306.12);
273
- --ds-purple-800: oklch(48.58% 0.2102 305.73);
274
- --ds-purple-900: oklch(69.87% 0.2037 309.51);
275
- --ds-purple-1000: oklch(96.1% 0.0304 316.46);
288
+ --ds-purple-100: oklch(22.34% 0.0779 316.87);
289
+ --ds-purple-200: oklch(25.91% 0.0921 314.41);
290
+ --ds-purple-300: oklch(31.98% 0.1219 312.41);
291
+ --ds-purple-400: oklch(35.93% 0.1504 309.78);
292
+ --ds-purple-500: oklch(40.99% 0.1721 307.92);
293
+ --ds-purple-600: oklch(55.5% 0.2191 306.12);
294
+ --ds-purple-700: oklch(55.5% 0.2186 306.12);
295
+ --ds-purple-800: oklch(48.58% 0.2102 305.73);
296
+ --ds-purple-900: oklch(69.87% 0.2037 309.51);
297
+ --ds-purple-1000: oklch(96.1% 0.0304 316.46);
276
298
 
277
- --ds-pink-100: oklch(22.67% 0.0628 354.73);
278
- --ds-pink-200: oklch(26.2% 0.0859 356.68);
279
- --ds-pink-300: oklch(31.15% 0.1067 355.93);
280
- --ds-pink-400: oklch(32.13% 0.1174 356.71);
281
- --ds-pink-500: oklch(37.01% 0.1453 358.39);
282
- --ds-pink-600: oklch(50.33% 0.2089 4.33);
283
- --ds-pink-700: oklch(63.52% 0.2346 1.01);
284
- --ds-pink-800: oklch(59.51% 0.2429 4.21);
285
- --ds-pink-900: oklch(69.36% 0.2223 3.91);
286
- --ds-pink-1000: oklch(95.74% 0.0326 350.08);
299
+ --ds-pink-100: oklch(22.67% 0.0628 354.73);
300
+ --ds-pink-200: oklch(26.2% 0.0859 356.68);
301
+ --ds-pink-300: oklch(31.15% 0.1067 355.93);
302
+ --ds-pink-400: oklch(32.13% 0.1174 356.71);
303
+ --ds-pink-500: oklch(37.01% 0.1453 358.39);
304
+ --ds-pink-600: oklch(50.33% 0.2089 4.33);
305
+ --ds-pink-700: oklch(63.52% 0.2346 1.01);
306
+ --ds-pink-800: oklch(59.51% 0.2429 4.21);
307
+ --ds-pink-900: oklch(69.36% 0.2223 3.91);
308
+ --ds-pink-1000: oklch(95.74% 0.0326 350.08);
287
309
 
288
- /* ── Shadows (Dark) ────────────────────────────────────────────────────── */
289
- --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
290
- --ds-shadow-border-base: 0 0 0 1px rgba(255, 255, 255, 0.145);
291
- --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
292
- --ds-shadow-border-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
310
+ /* ── Shadows (Dark) ────────────────────────────────────────────────────── */
311
+ --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
312
+ --ds-shadow-border-base: 0 0 0 1px rgba(255, 255, 255, 0.145);
313
+ --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
314
+ --ds-shadow-border-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
293
315
 
294
- --ds-focus-color: var(--ds-blue-900);
316
+ --ds-focus-color: var(--ds-blue-900);
295
317
  }