gridsmith-ui 0.17.0 → 0.17.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 (18) hide show
  1. package/README.md +2 -0
  2. package/dist/{chunk-J43HCK7Q.js → chunk-CIVSNXFG.js} +12 -5
  3. package/dist/chunk-CIVSNXFG.js.map +1 -0
  4. package/dist/{chunk-YQABRUWD.js → chunk-JXANCXK6.js} +7 -5
  5. package/dist/chunk-JXANCXK6.js.map +1 -0
  6. package/dist/editor.js +1 -1
  7. package/dist/index.d.ts +61 -33
  8. package/dist/index.js +376 -158
  9. package/dist/index.js.map +1 -1
  10. package/dist/kanban.d.ts +19 -4
  11. package/dist/kanban.js +137 -31
  12. package/dist/kanban.js.map +1 -1
  13. package/dist/resizable.js +2 -2
  14. package/dist/tokens.css +280 -5
  15. package/dist-static/tokens.css +280 -5
  16. package/package.json +3 -3
  17. package/dist/chunk-J43HCK7Q.js.map +0 -1
  18. package/dist/chunk-YQABRUWD.js.map +0 -1
package/dist/tokens.css CHANGED
@@ -7,6 +7,8 @@
7
7
  Load this file AFTER gridsmith-ui/roots.css to apply your theme.
8
8
  ═══════════════════════════════════════════════════════════════════════ */
9
9
 
10
+ /* Font imports moved to font_links in get_tokens response — add them to the top of your CSS entry point */
11
+
10
12
  :root {
11
13
  --ds-hue-primary: 250;
12
14
  --ds-hue-neutral: 260;
@@ -18,18 +20,43 @@
18
20
  --ds-radius-base: 10px;
19
21
  --ds-border-base: 1px;
20
22
  --ds-space-unit: 4px;
23
+ --ds-density: 1;
21
24
  --ds-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
22
25
  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
23
26
  --ds-font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
24
27
  --ds-text-base: 16px;
28
+ --ds-text-2xs: var(--ds-font-size-2xs);
29
+ --ds-text-xs: var(--ds-font-size-xs);
30
+ --ds-text-sm: var(--ds-font-size-sm);
31
+ --ds-text-lg: var(--ds-font-size-lg);
32
+ --ds-text-xl: var(--ds-font-size-xl);
33
+ --ds-text-2xl: var(--ds-font-size-2xl);
34
+ --ds-text-3xl: var(--ds-font-size-3xl);
25
35
  --ds-weight-base: 500;
36
+ --ds-weight-emphasis: 600;
37
+ --ds-weight-strong: 700;
38
+ --ds-weight-heavy: 800;
39
+ --ds-weight-heading: 700;
40
+ --ds-weight-display: 700;
26
41
  --ds-shadow-offset: 2px;
42
+ --ds-shadow-offset-x: 0.00px;
43
+ --ds-shadow-offset-y: 2.00px;
27
44
  --ds-shadow-blur: 4px;
28
45
  --ds-shadow-alpha: 0.1;
46
+ --ds-shadow-inner-highlight: 0;
29
47
  --ds-transition-speed: 200ms;
30
48
  --ds-transition-ease: ease-in-out;
49
+ --ds-hover-scale: 1.02;
50
+ --ds-hover-lift: 0px;
51
+ --ds-press-depth: 1px;
52
+ --ds-interactive-hover-speed: 200ms;
53
+ --ds-interactive-hover-ease: ease-in-out;
54
+ --ds-ambient-hover-scale: 1;
55
+ --ds-ambient-hover-lift: 2px;
56
+ --ds-ambient-hover-speed: 400ms;
57
+ --ds-ambient-hover-ease: cubic-bezier(0.33, 1, 0.68, 1);
31
58
  --ds-sidebar-width: 224px;
32
- --ds-gradient: none;
59
+ --ds-sidebar-compact-width: 88px;
33
60
  --ds-glass-blur: 0px;
34
61
  --ds-glass-tint: 1;
35
62
  --ds-glass-saturate: 100%;
@@ -42,11 +69,79 @@
42
69
  --ds-input-focus-ring: var(--ds-ring-active);
43
70
  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-700);
44
71
  --ds-tint-strength: 0.15;
45
- --ds-gradient-start: var(--ds-accent-primary);
46
- --ds-gradient-end: var(--ds-accent-primary);
47
- --ds-accent-wash: linear-gradient(var(--ds-accent-primary), var(--ds-accent-primary));
72
+ --ds-gradient: linear-gradient(135deg, oklch(0.4 0.1320 250), oklch(0.550 0.1100 210));
73
+ --ds-gradient-start: oklch(0.4 0.1320 250);
74
+ --ds-gradient-end: oklch(0.550 0.1100 210);
48
75
  --ds-text-on-primary: oklch(1 0 0);
76
+ --ds-accent-wash: var(--ds-gradient);
49
77
  --ds-text-muted-on-tint: var(--ds-neutral-600);
78
+ --ds-accent-whisper: color-mix(in srgb, var(--ds-accent-primary) 5%, transparent);
79
+ --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
80
+ --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
81
+ --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
82
+ --ds-accent-subtle-text: var(--ds-accent-primary);
83
+ --ds-status-success: oklch(0.55 0.12 150);
84
+ --ds-status-success-bg: oklch(0.92 0.03 150);
85
+ --ds-status-warning: oklch(0.70 0.12 55);
86
+ --ds-status-warning-bg: oklch(0.92 0.035 55);
87
+ --ds-status-warning-text: oklch(0.60 0.12 55);
88
+ --ds-status-error: oklch(0.55 0.15 20);
89
+ --ds-status-error-bg: oklch(0.92 0.03 20);
90
+ --ds-status-info: oklch(0.55 0.10 200);
91
+ --ds-status-info-bg: oklch(0.92 0.025 200);
92
+ --ds-text-on-success: oklch(1 0 0);
93
+ --ds-text-on-warning: oklch(0.300 0.1000 55);
94
+ --ds-text-on-error: oklch(1 0 0);
95
+ --ds-text-on-info: oklch(1 0 0);
96
+ --ds-palette-1-bold: oklch(0.55 0.1200 110);
97
+ --ds-palette-1-subtle: oklch(0.92 0.0300 110);
98
+ --ds-palette-1-dark: oklch(0.35 0.1000 110);
99
+ --ds-palette-1-bg: var(--ds-palette-1-subtle);
100
+ --ds-palette-1-text: var(--ds-palette-1-dark);
101
+ --ds-palette-1-chart: var(--ds-palette-1-bold);
102
+ --ds-palette-1-on-bold: oklch(1 0 0);
103
+ --ds-palette-2-bold: oklch(0.54 0.1200 207.50800000000004);
104
+ --ds-palette-2-subtle: oklch(0.92 0.0300 207.50800000000004);
105
+ --ds-palette-2-dark: oklch(0.35 0.1000 207.50800000000004);
106
+ --ds-palette-2-bg: var(--ds-palette-2-subtle);
107
+ --ds-palette-2-text: var(--ds-palette-2-dark);
108
+ --ds-palette-2-chart: var(--ds-palette-2-bold);
109
+ --ds-palette-2-on-bold: oklch(1 0 0);
110
+ --ds-palette-3-bold: oklch(0.55 0.1200 345.0160000000001);
111
+ --ds-palette-3-subtle: oklch(0.92 0.0300 345.0160000000001);
112
+ --ds-palette-3-dark: oklch(0.35 0.1000 345.0160000000001);
113
+ --ds-palette-3-bg: var(--ds-palette-3-subtle);
114
+ --ds-palette-3-text: var(--ds-palette-3-dark);
115
+ --ds-palette-3-chart: var(--ds-palette-3-bold);
116
+ --ds-palette-3-on-bold: oklch(1 0 0);
117
+ --ds-palette-4-bold: oklch(0.55 0.1200 162.524);
118
+ --ds-palette-4-subtle: oklch(0.92 0.0300 162.524);
119
+ --ds-palette-4-dark: oklch(0.35 0.1000 162.524);
120
+ --ds-palette-4-bg: var(--ds-palette-4-subtle);
121
+ --ds-palette-4-text: var(--ds-palette-4-dark);
122
+ --ds-palette-4-chart: var(--ds-palette-4-bold);
123
+ --ds-palette-4-on-bold: oklch(1 0 0);
124
+ --ds-palette-5-bold: oklch(0.55 0.1200 275.03200000000004);
125
+ --ds-palette-5-subtle: oklch(0.92 0.0300 275.03200000000004);
126
+ --ds-palette-5-dark: oklch(0.35 0.1000 275.03200000000004);
127
+ --ds-palette-5-bg: var(--ds-palette-5-subtle);
128
+ --ds-palette-5-text: var(--ds-palette-5-dark);
129
+ --ds-palette-5-chart: var(--ds-palette-5-bold);
130
+ --ds-palette-5-on-bold: oklch(1 0 0);
131
+ --ds-chart-1: var(--ds-accent-primary);
132
+ --ds-chart-1-soft: color-mix(in oklch, var(--ds-accent-primary) 30%, transparent);
133
+ --ds-chart-2: var(--ds-palette-1-chart);
134
+ --ds-chart-2-soft: color-mix(in oklch, var(--ds-palette-1-chart) 30%, transparent);
135
+ --ds-chart-3: var(--ds-palette-2-chart);
136
+ --ds-chart-3-soft: color-mix(in oklch, var(--ds-palette-2-chart) 30%, transparent);
137
+ --ds-chart-4: var(--ds-palette-3-chart);
138
+ --ds-chart-4-soft: color-mix(in oklch, var(--ds-palette-3-chart) 30%, transparent);
139
+ --ds-chart-5: var(--ds-palette-4-chart);
140
+ --ds-chart-5-soft: color-mix(in oklch, var(--ds-palette-4-chart) 30%, transparent);
141
+ --ds-chart-6: var(--ds-palette-5-chart);
142
+ --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
143
+ --ds-chart-fill: var(--ds-chart-1);
144
+ --ds-chart-fill-soft: var(--ds-chart-1-soft);
50
145
  --ds-nav-h-active-bg: transparent;
51
146
  --ds-nav-h-active-text: var(--ds-text-primary);
52
147
  --ds-nav-h-inactive-text: var(--ds-text-muted);
@@ -105,9 +200,189 @@
105
200
  --ds-sidebar-active-image: none;
106
201
  }
107
202
 
203
+ /* Density — hold the configured value at every viewport */
204
+ @media (max-width: 640px) {
205
+ :root:not([style*="--ds-density"]) {
206
+ --ds-density: 1;
207
+ }
208
+ }
209
+ @media (min-width: 1280px) {
210
+ :root:not([style*="--ds-density"]) {
211
+ --ds-density: 1;
212
+ }
213
+ }
214
+
108
215
  /* Preset overrides — light mode */
109
- :root {
216
+ /* Only while <html> is in the light default: data-mode="dark" leaves them behind. */
217
+ :root:not([data-mode="dark"]) {
110
218
  --ds-sidebar-bg: var(--ds-neutral-50);
111
219
  --ds-sidebar-item-hover: var(--ds-neutral-100);
112
220
  --ds-sidebar-item-active: var(--ds-neutral-200);
113
221
  }
222
+
223
+ /* Dark palette overrides — dark mode */
224
+ /* This theme defaults to light. To offer a mode switch, set data-mode="dark" on <html>. No attribute renders the default. */
225
+ [data-mode="dark"] {
226
+ --ds-hue-primary: 223;
227
+ --ds-sat-primary: 0.65;
228
+ --ds-hue-neutral: 260;
229
+ --ds-sat-neutral: 0.5;
230
+ --ds-accent-primary: var(--ds-primary-500);
231
+ --ds-accent-primary-hover: var(--ds-primary-400);
232
+ --ds-accent-primary-active: var(--ds-primary-300);
233
+ --ds-border-focus: var(--ds-primary-500);
234
+ --ds-ring-active: var(--ds-accent-soft);
235
+ --ds-input-focus-ring: var(--ds-ring-active);
236
+ --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
237
+ --ds-tint-strength: 0.15;
238
+ --ds-gradient: linear-gradient(135deg, oklch(0.55 0.1300 223), oklch(0.330 0.0945 240));
239
+ --ds-gradient-start: oklch(0.55 0.1300 223);
240
+ --ds-gradient-end: oklch(0.330 0.0945 240);
241
+ --ds-text-on-primary: oklch(1 0 0);
242
+ --ds-accent-wash: var(--ds-gradient);
243
+ --ds-text-muted-on-tint: var(--ds-neutral-400);
244
+ --ds-palette-1-bold: oklch(0.55 0.1200 48);
245
+ --ds-palette-1-subtle: oklch(0.92 0.0300 48);
246
+ --ds-palette-1-dark: oklch(0.35 0.1000 48);
247
+ --ds-palette-1-bg: var(--ds-palette-1-dark);
248
+ --ds-palette-1-text: var(--ds-palette-1-subtle);
249
+ --ds-palette-1-chart: oklch(0.66 0.1200 48);
250
+ --ds-palette-1-on-bold: oklch(1 0 0);
251
+ --ds-palette-2-bold: oklch(0.54 0.1200 180.50800000000004);
252
+ --ds-palette-2-subtle: oklch(0.92 0.0300 180.50800000000004);
253
+ --ds-palette-2-dark: oklch(0.35 0.1000 180.50800000000004);
254
+ --ds-palette-2-bg: var(--ds-palette-2-dark);
255
+ --ds-palette-2-text: var(--ds-palette-2-subtle);
256
+ --ds-palette-2-chart: oklch(0.66 0.1200 180.50800000000004);
257
+ --ds-palette-2-on-bold: oklch(1 0 0);
258
+ --ds-palette-3-bold: oklch(0.55 0.1200 318.0160000000001);
259
+ --ds-palette-3-subtle: oklch(0.92 0.0300 318.0160000000001);
260
+ --ds-palette-3-dark: oklch(0.35 0.1000 318.0160000000001);
261
+ --ds-palette-3-bg: var(--ds-palette-3-dark);
262
+ --ds-palette-3-text: var(--ds-palette-3-subtle);
263
+ --ds-palette-3-chart: oklch(0.66 0.1200 318.0160000000001);
264
+ --ds-palette-3-on-bold: oklch(1 0 0);
265
+ --ds-palette-4-bold: oklch(0.55 0.1200 110.524);
266
+ --ds-palette-4-subtle: oklch(0.92 0.0300 110.524);
267
+ --ds-palette-4-dark: oklch(0.35 0.1000 110.524);
268
+ --ds-palette-4-bg: var(--ds-palette-4-dark);
269
+ --ds-palette-4-text: var(--ds-palette-4-subtle);
270
+ --ds-palette-4-chart: oklch(0.66 0.1200 110.524);
271
+ --ds-palette-4-on-bold: oklch(1 0 0);
272
+ --ds-palette-5-bold: oklch(0.55 0.1200 278.03200000000004);
273
+ --ds-palette-5-subtle: oklch(0.92 0.0300 278.03200000000004);
274
+ --ds-palette-5-dark: oklch(0.35 0.1000 278.03200000000004);
275
+ --ds-palette-5-bg: var(--ds-palette-5-dark);
276
+ --ds-palette-5-text: var(--ds-palette-5-subtle);
277
+ --ds-palette-5-chart: oklch(0.66 0.1200 278.03200000000004);
278
+ --ds-palette-5-on-bold: oklch(1 0 0);
279
+ --ds-chart-1: var(--ds-primary-400);
280
+ --ds-chart-1-soft: color-mix(in oklch, var(--ds-primary-400) 30%, transparent);
281
+ --ds-chart-2: var(--ds-palette-1-chart);
282
+ --ds-chart-2-soft: color-mix(in oklch, var(--ds-palette-1-chart) 30%, transparent);
283
+ --ds-chart-3: var(--ds-palette-2-chart);
284
+ --ds-chart-3-soft: color-mix(in oklch, var(--ds-palette-2-chart) 30%, transparent);
285
+ --ds-chart-4: var(--ds-palette-3-chart);
286
+ --ds-chart-4-soft: color-mix(in oklch, var(--ds-palette-3-chart) 30%, transparent);
287
+ --ds-chart-5: var(--ds-palette-4-chart);
288
+ --ds-chart-5-soft: color-mix(in oklch, var(--ds-palette-4-chart) 30%, transparent);
289
+ --ds-chart-6: var(--ds-palette-5-chart);
290
+ --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
291
+ --ds-chart-fill: var(--ds-chart-1);
292
+ --ds-chart-fill-soft: var(--ds-chart-1-soft);
293
+ --ds-status-success: oklch(0.65 0.12 150);
294
+ --ds-status-success-bg: oklch(0.22 0.02 150);
295
+ --ds-status-warning: oklch(0.75 0.12 55);
296
+ --ds-status-warning-bg: oklch(0.22 0.025 55);
297
+ --ds-status-warning-text: oklch(0.75 0.12 55);
298
+ --ds-status-error: oklch(0.65 0.15 20);
299
+ --ds-status-error-bg: oklch(0.22 0.02 20);
300
+ --ds-status-info: oklch(0.65 0.10 200);
301
+ --ds-status-info-bg: oklch(0.22 0.015 200);
302
+ --ds-text-on-success: oklch(0.240 0.1000 150);
303
+ --ds-text-on-warning: oklch(0.350 0.1000 55);
304
+ --ds-text-on-error: oklch(0.220 0.1000 20);
305
+ --ds-text-on-info: oklch(0.230 0.1000 200);
306
+ }
307
+
308
+ /* Dark portals on a light page (a dark sidebar's tooltips and menus carry data-ds-overlay="dark") */
309
+ [data-ds-overlay="dark"] {
310
+ --ds-glass-inset: inset 0 1px 0 0 oklch(1 0 0 / calc(var(--ds-glass-border-alpha) * 0.5));
311
+ --ds-bg-canvas: var(--ds-neutral-900);
312
+ --ds-bg-surface: var(--ds-neutral-800);
313
+ --ds-bg-surface-elevated: var(--ds-neutral-700);
314
+ --ds-bg-muted: var(--ds-neutral-700);
315
+ --ds-bg-emphasis: var(--ds-neutral-600);
316
+ --ds-text-primary: var(--ds-neutral-50);
317
+ --ds-text-secondary: var(--ds-neutral-300);
318
+ --ds-text-muted: var(--ds-neutral-400);
319
+ --ds-text-on-success: oklch(0.240 0.1000 150);
320
+ --ds-text-on-warning: oklch(0.350 0.1000 55);
321
+ --ds-text-on-error: oklch(0.220 0.1000 20);
322
+ --ds-text-on-info: oklch(0.230 0.1000 200);
323
+ --ds-border-default: var(--ds-neutral-600);
324
+ --ds-border-subtle: var(--ds-neutral-700);
325
+ --ds-border-strong: var(--ds-neutral-400);
326
+ --ds-border-focus: var(--ds-primary-500);
327
+ --ds-status-success: oklch(0.65 0.12 150);
328
+ --ds-status-success-bg: oklch(0.22 0.02 150);
329
+ --ds-status-warning: oklch(0.75 0.12 55);
330
+ --ds-status-warning-bg: oklch(0.22 0.025 55);
331
+ --ds-status-warning-text: oklch(0.75 0.12 55);
332
+ --ds-status-error: oklch(0.65 0.15 20);
333
+ --ds-status-error-bg: oklch(0.22 0.02 20);
334
+ --ds-status-info: oklch(0.65 0.10 200);
335
+ --ds-status-info-bg: oklch(0.22 0.015 200);
336
+ --ds-status-neutral: var(--ds-neutral-400);
337
+ --ds-text-on-neutral: var(--ds-neutral-800);
338
+ --ds-sidebar-gradient: var(--ds-gradient);
339
+ --ds-tab-hover-bg: var(--ds-bg-muted);
340
+ --ds-tab-active-bg: var(--ds-bg-surface);
341
+ --ds-input-bg: var(--ds-neutral-800);
342
+ --ds-input-border: var(--ds-neutral-600);
343
+ --ds-input-border-hover: var(--ds-neutral-500);
344
+ --ds-input-focus-ring: var(--ds-ring-active);
345
+ --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
346
+ --ds-accent-primary: var(--ds-primary-500);
347
+ --ds-accent-primary-hover: var(--ds-primary-400);
348
+ --ds-accent-primary-active: var(--ds-primary-300);
349
+ --ds-ring-active: var(--ds-accent-soft);
350
+ --ds-tint-strength: 0.15;
351
+ --ds-gradient: linear-gradient(135deg, oklch(0.55 0.1300 223), oklch(0.330 0.0945 240));
352
+ --ds-gradient-start: oklch(0.55 0.1300 223);
353
+ --ds-gradient-end: oklch(0.330 0.0945 240);
354
+ --ds-text-on-primary: oklch(1 0 0);
355
+ --ds-accent-wash: var(--ds-gradient);
356
+ --ds-text-muted-on-tint: var(--ds-neutral-400);
357
+ --ds-accent-whisper: color-mix(in srgb, var(--ds-accent-primary) 5%, transparent);
358
+ --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
359
+ --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
360
+ --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
361
+ --ds-accent-subtle-text: var(--ds-accent-primary);
362
+ --ds-nav-h-active-bg: transparent;
363
+ --ds-nav-h-active-text: var(--ds-text-primary);
364
+ --ds-nav-h-inactive-text: var(--ds-text-muted);
365
+ --ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
366
+ --ds-nav-h-item-radius: 0px;
367
+ --ds-nav-h-hover-bg: transparent;
368
+ --ds-nav-h-track-border: var(--ds-border-width);
369
+ --ds-nav-h-track-gap: 0px;
370
+ --ds-nav-h-badge-bg: var(--ds-accent-primary);
371
+ --ds-nav-v-active-bg: var(--ds-tab-active-bg);
372
+ --ds-nav-v-active-text: var(--ds-accent-primary);
373
+ --ds-nav-v-active-rail: var(--ds-border-width-thick);
374
+ --ds-nav-v-item-radius: var(--ds-radius-sm);
375
+ --ds-nav-v-track-border: 0px;
376
+ --ds-nav-v-track-padding: var(--ds-space-1);
377
+ --ds-nav-v-active-muted: var(--ds-text-secondary);
378
+ --ds-nav-v-badge-bg: var(--ds-accent-primary);
379
+ --ds-tree-active-bg: var(--ds-tab-active-bg);
380
+ --ds-tree-active-text: var(--ds-accent-primary);
381
+ --ds-tree-active-muted: var(--ds-text-muted);
382
+ --ds-tree-active-rail: var(--ds-border-width-thick);
383
+ --ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
384
+ --ds-sidebar-active-text: var(--ds-sidebar-accent);
385
+ --ds-sidebar-active-accent: var(--ds-sidebar-accent);
386
+ --ds-sidebar-active-rail: var(--ds-border-width-thick);
387
+ --ds-sidebar-active-image: none;
388
+ }
package/dist-static/tokens.css CHANGED
@@ -7,6 +7,8 @@
7
7
  Load this file AFTER gridsmith-ui/roots.css to apply your theme.
8
8
  ═══════════════════════════════════════════════════════════════════════ */
9
9
 
10
+ /* Font imports moved to font_links in get_tokens response — add them to the top of your CSS entry point */
11
+
10
12
  :root {
11
13
  --ds-hue-primary: 250;
12
14
  --ds-hue-neutral: 260;
@@ -18,18 +20,43 @@
18
20
  --ds-radius-base: 10px;
19
21
  --ds-border-base: 1px;
20
22
  --ds-space-unit: 4px;
23
+ --ds-density: 1;
21
24
  --ds-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
22
25
  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
23
26
  --ds-font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
24
27
  --ds-text-base: 16px;
28
+ --ds-text-2xs: var(--ds-font-size-2xs);
29
+ --ds-text-xs: var(--ds-font-size-xs);
30
+ --ds-text-sm: var(--ds-font-size-sm);
31
+ --ds-text-lg: var(--ds-font-size-lg);
32
+ --ds-text-xl: var(--ds-font-size-xl);
33
+ --ds-text-2xl: var(--ds-font-size-2xl);
34
+ --ds-text-3xl: var(--ds-font-size-3xl);
25
35
  --ds-weight-base: 500;
36
+ --ds-weight-emphasis: 600;
37
+ --ds-weight-strong: 700;
38
+ --ds-weight-heavy: 800;
39
+ --ds-weight-heading: 700;
40
+ --ds-weight-display: 700;
26
41
  --ds-shadow-offset: 2px;
42
+ --ds-shadow-offset-x: 0.00px;
43
+ --ds-shadow-offset-y: 2.00px;
27
44
  --ds-shadow-blur: 4px;
28
45
  --ds-shadow-alpha: 0.1;
46
+ --ds-shadow-inner-highlight: 0;
29
47
  --ds-transition-speed: 200ms;
30
48
  --ds-transition-ease: ease-in-out;
49
+ --ds-hover-scale: 1.02;
50
+ --ds-hover-lift: 0px;
51
+ --ds-press-depth: 1px;
52
+ --ds-interactive-hover-speed: 200ms;
53
+ --ds-interactive-hover-ease: ease-in-out;
54
+ --ds-ambient-hover-scale: 1;
55
+ --ds-ambient-hover-lift: 2px;
56
+ --ds-ambient-hover-speed: 400ms;
57
+ --ds-ambient-hover-ease: cubic-bezier(0.33, 1, 0.68, 1);
31
58
  --ds-sidebar-width: 224px;
32
- --ds-gradient: none;
59
+ --ds-sidebar-compact-width: 88px;
33
60
  --ds-glass-blur: 0px;
34
61
  --ds-glass-tint: 1;
35
62
  --ds-glass-saturate: 100%;
@@ -42,11 +69,79 @@
42
69
  --ds-input-focus-ring: var(--ds-ring-active);
43
70
  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-700);
44
71
  --ds-tint-strength: 0.15;
45
- --ds-gradient-start: var(--ds-accent-primary);
46
- --ds-gradient-end: var(--ds-accent-primary);
47
- --ds-accent-wash: linear-gradient(var(--ds-accent-primary), var(--ds-accent-primary));
72
+ --ds-gradient: linear-gradient(135deg, oklch(0.4 0.1320 250), oklch(0.550 0.1100 210));
73
+ --ds-gradient-start: oklch(0.4 0.1320 250);
74
+ --ds-gradient-end: oklch(0.550 0.1100 210);
48
75
  --ds-text-on-primary: oklch(1 0 0);
76
+ --ds-accent-wash: var(--ds-gradient);
49
77
  --ds-text-muted-on-tint: var(--ds-neutral-600);
78
+ --ds-accent-whisper: color-mix(in srgb, var(--ds-accent-primary) 5%, transparent);
79
+ --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
80
+ --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
81
+ --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
82
+ --ds-accent-subtle-text: var(--ds-accent-primary);
83
+ --ds-status-success: oklch(0.55 0.12 150);
84
+ --ds-status-success-bg: oklch(0.92 0.03 150);
85
+ --ds-status-warning: oklch(0.70 0.12 55);
86
+ --ds-status-warning-bg: oklch(0.92 0.035 55);
87
+ --ds-status-warning-text: oklch(0.60 0.12 55);
88
+ --ds-status-error: oklch(0.55 0.15 20);
89
+ --ds-status-error-bg: oklch(0.92 0.03 20);
90
+ --ds-status-info: oklch(0.55 0.10 200);
91
+ --ds-status-info-bg: oklch(0.92 0.025 200);
92
+ --ds-text-on-success: oklch(1 0 0);
93
+ --ds-text-on-warning: oklch(0.300 0.1000 55);
94
+ --ds-text-on-error: oklch(1 0 0);
95
+ --ds-text-on-info: oklch(1 0 0);
96
+ --ds-palette-1-bold: oklch(0.55 0.1200 110);
97
+ --ds-palette-1-subtle: oklch(0.92 0.0300 110);
98
+ --ds-palette-1-dark: oklch(0.35 0.1000 110);
99
+ --ds-palette-1-bg: var(--ds-palette-1-subtle);
100
+ --ds-palette-1-text: var(--ds-palette-1-dark);
101
+ --ds-palette-1-chart: var(--ds-palette-1-bold);
102
+ --ds-palette-1-on-bold: oklch(1 0 0);
103
+ --ds-palette-2-bold: oklch(0.54 0.1200 207.50800000000004);
104
+ --ds-palette-2-subtle: oklch(0.92 0.0300 207.50800000000004);
105
+ --ds-palette-2-dark: oklch(0.35 0.1000 207.50800000000004);
106
+ --ds-palette-2-bg: var(--ds-palette-2-subtle);
107
+ --ds-palette-2-text: var(--ds-palette-2-dark);
108
+ --ds-palette-2-chart: var(--ds-palette-2-bold);
109
+ --ds-palette-2-on-bold: oklch(1 0 0);
110
+ --ds-palette-3-bold: oklch(0.55 0.1200 345.0160000000001);
111
+ --ds-palette-3-subtle: oklch(0.92 0.0300 345.0160000000001);
112
+ --ds-palette-3-dark: oklch(0.35 0.1000 345.0160000000001);
113
+ --ds-palette-3-bg: var(--ds-palette-3-subtle);
114
+ --ds-palette-3-text: var(--ds-palette-3-dark);
115
+ --ds-palette-3-chart: var(--ds-palette-3-bold);
116
+ --ds-palette-3-on-bold: oklch(1 0 0);
117
+ --ds-palette-4-bold: oklch(0.55 0.1200 162.524);
118
+ --ds-palette-4-subtle: oklch(0.92 0.0300 162.524);
119
+ --ds-palette-4-dark: oklch(0.35 0.1000 162.524);
120
+ --ds-palette-4-bg: var(--ds-palette-4-subtle);
121
+ --ds-palette-4-text: var(--ds-palette-4-dark);
122
+ --ds-palette-4-chart: var(--ds-palette-4-bold);
123
+ --ds-palette-4-on-bold: oklch(1 0 0);
124
+ --ds-palette-5-bold: oklch(0.55 0.1200 275.03200000000004);
125
+ --ds-palette-5-subtle: oklch(0.92 0.0300 275.03200000000004);
126
+ --ds-palette-5-dark: oklch(0.35 0.1000 275.03200000000004);
127
+ --ds-palette-5-bg: var(--ds-palette-5-subtle);
128
+ --ds-palette-5-text: var(--ds-palette-5-dark);
129
+ --ds-palette-5-chart: var(--ds-palette-5-bold);
130
+ --ds-palette-5-on-bold: oklch(1 0 0);
131
+ --ds-chart-1: var(--ds-accent-primary);
132
+ --ds-chart-1-soft: color-mix(in oklch, var(--ds-accent-primary) 30%, transparent);
133
+ --ds-chart-2: var(--ds-palette-1-chart);
134
+ --ds-chart-2-soft: color-mix(in oklch, var(--ds-palette-1-chart) 30%, transparent);
135
+ --ds-chart-3: var(--ds-palette-2-chart);
136
+ --ds-chart-3-soft: color-mix(in oklch, var(--ds-palette-2-chart) 30%, transparent);
137
+ --ds-chart-4: var(--ds-palette-3-chart);
138
+ --ds-chart-4-soft: color-mix(in oklch, var(--ds-palette-3-chart) 30%, transparent);
139
+ --ds-chart-5: var(--ds-palette-4-chart);
140
+ --ds-chart-5-soft: color-mix(in oklch, var(--ds-palette-4-chart) 30%, transparent);
141
+ --ds-chart-6: var(--ds-palette-5-chart);
142
+ --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
143
+ --ds-chart-fill: var(--ds-chart-1);
144
+ --ds-chart-fill-soft: var(--ds-chart-1-soft);
50
145
  --ds-nav-h-active-bg: transparent;
51
146
  --ds-nav-h-active-text: var(--ds-text-primary);
52
147
  --ds-nav-h-inactive-text: var(--ds-text-muted);
@@ -105,9 +200,189 @@
105
200
  --ds-sidebar-active-image: none;
106
201
  }
107
202
 
203
+ /* Density — hold the configured value at every viewport */
204
+ @media (max-width: 640px) {
205
+ :root:not([style*="--ds-density"]) {
206
+ --ds-density: 1;
207
+ }
208
+ }
209
+ @media (min-width: 1280px) {
210
+ :root:not([style*="--ds-density"]) {
211
+ --ds-density: 1;
212
+ }
213
+ }
214
+
108
215
  /* Preset overrides — light mode */
109
- :root {
216
+ /* Only while <html> is in the light default: data-mode="dark" leaves them behind. */
217
+ :root:not([data-mode="dark"]) {
110
218
  --ds-sidebar-bg: var(--ds-neutral-50);
111
219
  --ds-sidebar-item-hover: var(--ds-neutral-100);
112
220
  --ds-sidebar-item-active: var(--ds-neutral-200);
113
221
  }
222
+
223
+ /* Dark palette overrides — dark mode */
224
+ /* This theme defaults to light. To offer a mode switch, set data-mode="dark" on <html>. No attribute renders the default. */
225
+ [data-mode="dark"] {
226
+ --ds-hue-primary: 223;
227
+ --ds-sat-primary: 0.65;
228
+ --ds-hue-neutral: 260;
229
+ --ds-sat-neutral: 0.5;
230
+ --ds-accent-primary: var(--ds-primary-500);
231
+ --ds-accent-primary-hover: var(--ds-primary-400);
232
+ --ds-accent-primary-active: var(--ds-primary-300);
233
+ --ds-border-focus: var(--ds-primary-500);
234
+ --ds-ring-active: var(--ds-accent-soft);
235
+ --ds-input-focus-ring: var(--ds-ring-active);
236
+ --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
237
+ --ds-tint-strength: 0.15;
238
+ --ds-gradient: linear-gradient(135deg, oklch(0.55 0.1300 223), oklch(0.330 0.0945 240));
239
+ --ds-gradient-start: oklch(0.55 0.1300 223);
240
+ --ds-gradient-end: oklch(0.330 0.0945 240);
241
+ --ds-text-on-primary: oklch(1 0 0);
242
+ --ds-accent-wash: var(--ds-gradient);
243
+ --ds-text-muted-on-tint: var(--ds-neutral-400);
244
+ --ds-palette-1-bold: oklch(0.55 0.1200 48);
245
+ --ds-palette-1-subtle: oklch(0.92 0.0300 48);
246
+ --ds-palette-1-dark: oklch(0.35 0.1000 48);
247
+ --ds-palette-1-bg: var(--ds-palette-1-dark);
248
+ --ds-palette-1-text: var(--ds-palette-1-subtle);
249
+ --ds-palette-1-chart: oklch(0.66 0.1200 48);
250
+ --ds-palette-1-on-bold: oklch(1 0 0);
251
+ --ds-palette-2-bold: oklch(0.54 0.1200 180.50800000000004);
252
+ --ds-palette-2-subtle: oklch(0.92 0.0300 180.50800000000004);
253
+ --ds-palette-2-dark: oklch(0.35 0.1000 180.50800000000004);
254
+ --ds-palette-2-bg: var(--ds-palette-2-dark);
255
+ --ds-palette-2-text: var(--ds-palette-2-subtle);
256
+ --ds-palette-2-chart: oklch(0.66 0.1200 180.50800000000004);
257
+ --ds-palette-2-on-bold: oklch(1 0 0);
258
+ --ds-palette-3-bold: oklch(0.55 0.1200 318.0160000000001);
259
+ --ds-palette-3-subtle: oklch(0.92 0.0300 318.0160000000001);
260
+ --ds-palette-3-dark: oklch(0.35 0.1000 318.0160000000001);
261
+ --ds-palette-3-bg: var(--ds-palette-3-dark);
262
+ --ds-palette-3-text: var(--ds-palette-3-subtle);
263
+ --ds-palette-3-chart: oklch(0.66 0.1200 318.0160000000001);
264
+ --ds-palette-3-on-bold: oklch(1 0 0);
265
+ --ds-palette-4-bold: oklch(0.55 0.1200 110.524);
266
+ --ds-palette-4-subtle: oklch(0.92 0.0300 110.524);
267
+ --ds-palette-4-dark: oklch(0.35 0.1000 110.524);
268
+ --ds-palette-4-bg: var(--ds-palette-4-dark);
269
+ --ds-palette-4-text: var(--ds-palette-4-subtle);
270
+ --ds-palette-4-chart: oklch(0.66 0.1200 110.524);
271
+ --ds-palette-4-on-bold: oklch(1 0 0);
272
+ --ds-palette-5-bold: oklch(0.55 0.1200 278.03200000000004);
273
+ --ds-palette-5-subtle: oklch(0.92 0.0300 278.03200000000004);
274
+ --ds-palette-5-dark: oklch(0.35 0.1000 278.03200000000004);
275
+ --ds-palette-5-bg: var(--ds-palette-5-dark);
276
+ --ds-palette-5-text: var(--ds-palette-5-subtle);
277
+ --ds-palette-5-chart: oklch(0.66 0.1200 278.03200000000004);
278
+ --ds-palette-5-on-bold: oklch(1 0 0);
279
+ --ds-chart-1: var(--ds-primary-400);
280
+ --ds-chart-1-soft: color-mix(in oklch, var(--ds-primary-400) 30%, transparent);
281
+ --ds-chart-2: var(--ds-palette-1-chart);
282
+ --ds-chart-2-soft: color-mix(in oklch, var(--ds-palette-1-chart) 30%, transparent);
283
+ --ds-chart-3: var(--ds-palette-2-chart);
284
+ --ds-chart-3-soft: color-mix(in oklch, var(--ds-palette-2-chart) 30%, transparent);
285
+ --ds-chart-4: var(--ds-palette-3-chart);
286
+ --ds-chart-4-soft: color-mix(in oklch, var(--ds-palette-3-chart) 30%, transparent);
287
+ --ds-chart-5: var(--ds-palette-4-chart);
288
+ --ds-chart-5-soft: color-mix(in oklch, var(--ds-palette-4-chart) 30%, transparent);
289
+ --ds-chart-6: var(--ds-palette-5-chart);
290
+ --ds-chart-6-soft: color-mix(in oklch, var(--ds-palette-5-chart) 30%, transparent);
291
+ --ds-chart-fill: var(--ds-chart-1);
292
+ --ds-chart-fill-soft: var(--ds-chart-1-soft);
293
+ --ds-status-success: oklch(0.65 0.12 150);
294
+ --ds-status-success-bg: oklch(0.22 0.02 150);
295
+ --ds-status-warning: oklch(0.75 0.12 55);
296
+ --ds-status-warning-bg: oklch(0.22 0.025 55);
297
+ --ds-status-warning-text: oklch(0.75 0.12 55);
298
+ --ds-status-error: oklch(0.65 0.15 20);
299
+ --ds-status-error-bg: oklch(0.22 0.02 20);
300
+ --ds-status-info: oklch(0.65 0.10 200);
301
+ --ds-status-info-bg: oklch(0.22 0.015 200);
302
+ --ds-text-on-success: oklch(0.240 0.1000 150);
303
+ --ds-text-on-warning: oklch(0.350 0.1000 55);
304
+ --ds-text-on-error: oklch(0.220 0.1000 20);
305
+ --ds-text-on-info: oklch(0.230 0.1000 200);
306
+ }
307
+
308
+ /* Dark portals on a light page (a dark sidebar's tooltips and menus carry data-ds-overlay="dark") */
309
+ [data-ds-overlay="dark"] {
310
+ --ds-glass-inset: inset 0 1px 0 0 oklch(1 0 0 / calc(var(--ds-glass-border-alpha) * 0.5));
311
+ --ds-bg-canvas: var(--ds-neutral-900);
312
+ --ds-bg-surface: var(--ds-neutral-800);
313
+ --ds-bg-surface-elevated: var(--ds-neutral-700);
314
+ --ds-bg-muted: var(--ds-neutral-700);
315
+ --ds-bg-emphasis: var(--ds-neutral-600);
316
+ --ds-text-primary: var(--ds-neutral-50);
317
+ --ds-text-secondary: var(--ds-neutral-300);
318
+ --ds-text-muted: var(--ds-neutral-400);
319
+ --ds-text-on-success: oklch(0.240 0.1000 150);
320
+ --ds-text-on-warning: oklch(0.350 0.1000 55);
321
+ --ds-text-on-error: oklch(0.220 0.1000 20);
322
+ --ds-text-on-info: oklch(0.230 0.1000 200);
323
+ --ds-border-default: var(--ds-neutral-600);
324
+ --ds-border-subtle: var(--ds-neutral-700);
325
+ --ds-border-strong: var(--ds-neutral-400);
326
+ --ds-border-focus: var(--ds-primary-500);
327
+ --ds-status-success: oklch(0.65 0.12 150);
328
+ --ds-status-success-bg: oklch(0.22 0.02 150);
329
+ --ds-status-warning: oklch(0.75 0.12 55);
330
+ --ds-status-warning-bg: oklch(0.22 0.025 55);
331
+ --ds-status-warning-text: oklch(0.75 0.12 55);
332
+ --ds-status-error: oklch(0.65 0.15 20);
333
+ --ds-status-error-bg: oklch(0.22 0.02 20);
334
+ --ds-status-info: oklch(0.65 0.10 200);
335
+ --ds-status-info-bg: oklch(0.22 0.015 200);
336
+ --ds-status-neutral: var(--ds-neutral-400);
337
+ --ds-text-on-neutral: var(--ds-neutral-800);
338
+ --ds-sidebar-gradient: var(--ds-gradient);
339
+ --ds-tab-hover-bg: var(--ds-bg-muted);
340
+ --ds-tab-active-bg: var(--ds-bg-surface);
341
+ --ds-input-bg: var(--ds-neutral-800);
342
+ --ds-input-border: var(--ds-neutral-600);
343
+ --ds-input-border-hover: var(--ds-neutral-500);
344
+ --ds-input-focus-ring: var(--ds-ring-active);
345
+ --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
346
+ --ds-accent-primary: var(--ds-primary-500);
347
+ --ds-accent-primary-hover: var(--ds-primary-400);
348
+ --ds-accent-primary-active: var(--ds-primary-300);
349
+ --ds-ring-active: var(--ds-accent-soft);
350
+ --ds-tint-strength: 0.15;
351
+ --ds-gradient: linear-gradient(135deg, oklch(0.55 0.1300 223), oklch(0.330 0.0945 240));
352
+ --ds-gradient-start: oklch(0.55 0.1300 223);
353
+ --ds-gradient-end: oklch(0.330 0.0945 240);
354
+ --ds-text-on-primary: oklch(1 0 0);
355
+ --ds-accent-wash: var(--ds-gradient);
356
+ --ds-text-muted-on-tint: var(--ds-neutral-400);
357
+ --ds-accent-whisper: color-mix(in srgb, var(--ds-accent-primary) 5%, transparent);
358
+ --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
359
+ --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
360
+ --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
361
+ --ds-accent-subtle-text: var(--ds-accent-primary);
362
+ --ds-nav-h-active-bg: transparent;
363
+ --ds-nav-h-active-text: var(--ds-text-primary);
364
+ --ds-nav-h-inactive-text: var(--ds-text-muted);
365
+ --ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
366
+ --ds-nav-h-item-radius: 0px;
367
+ --ds-nav-h-hover-bg: transparent;
368
+ --ds-nav-h-track-border: var(--ds-border-width);
369
+ --ds-nav-h-track-gap: 0px;
370
+ --ds-nav-h-badge-bg: var(--ds-accent-primary);
371
+ --ds-nav-v-active-bg: var(--ds-tab-active-bg);
372
+ --ds-nav-v-active-text: var(--ds-accent-primary);
373
+ --ds-nav-v-active-rail: var(--ds-border-width-thick);
374
+ --ds-nav-v-item-radius: var(--ds-radius-sm);
375
+ --ds-nav-v-track-border: 0px;
376
+ --ds-nav-v-track-padding: var(--ds-space-1);
377
+ --ds-nav-v-active-muted: var(--ds-text-secondary);
378
+ --ds-nav-v-badge-bg: var(--ds-accent-primary);
379
+ --ds-tree-active-bg: var(--ds-tab-active-bg);
380
+ --ds-tree-active-text: var(--ds-accent-primary);
381
+ --ds-tree-active-muted: var(--ds-text-muted);
382
+ --ds-tree-active-rail: var(--ds-border-width-thick);
383
+ --ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
384
+ --ds-sidebar-active-text: var(--ds-sidebar-accent);
385
+ --ds-sidebar-active-accent: var(--ds-sidebar-accent);
386
+ --ds-sidebar-active-rail: var(--ds-border-width-thick);
387
+ --ds-sidebar-active-image: none;
388
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gridsmith-ui",
3
- "version": "0.17.0",
3
+ "version": "0.17.2",
4
4
  "description": "Gridsmith component library — 98 React components with design tokens and a CSS custom property theming engine",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -68,8 +68,8 @@
68
68
  "use-sync-external-store": "^1.4.0"
69
69
  },
70
70
  "peerDependencies": {
71
- "react": "^18.0.0 || ^19.0.0",
72
- "react-dom": "^18.0.0 || ^19.0.0",
71
+ "react": "^19.0.0",
72
+ "react-dom": "^19.0.0",
73
73
  "lucide-react": "^1.0.0",
74
74
  "recharts": "^3.8.0",
75
75
  "@phosphor-icons/react": "^2.0.0",