gridsmith-ui 0.6.4 → 0.6.5
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.
- package/README.md +6 -0
- package/dist/index.d.ts +13 -8
- package/dist/index.js +95 -51
- package/dist/index.js.map +1 -1
- package/dist/roots.css +41 -0
- package/dist/tokens.css +52 -0
- package/dist-static/tokens.css +52 -0
- package/package.json +1 -1
package/dist/roots.css
CHANGED
|
@@ -344,6 +344,47 @@
|
|
|
344
344
|
--ds-check-border: var(--ds-accent-primary);
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
+
/* ── Navigation active styles ───────────────────────────────────────
|
|
348
|
+
Defaults for the theme-level active-item shape (sidebar rail, in-page
|
|
349
|
+
underline, in-page rail). Generated themes and the theme writers emit the
|
|
350
|
+
same set for the chosen styles; these literals reproduce today's rendering
|
|
351
|
+
for a consumer with only roots.css. Kept in lockstep with
|
|
352
|
+
getNavStyleTokens() by showcase/src/test/nav-style-defaults.test.ts.
|
|
353
|
+
|
|
354
|
+
Declared for the root, every nested mode wrapper and every overlay portal:
|
|
355
|
+
var() inside a custom property is substituted where it is declared, so a
|
|
356
|
+
root-only declaration would hand a dark wrapper the light-resolved values. */
|
|
357
|
+
|
|
358
|
+
:root, [data-mode], [data-ds-overlay] {
|
|
359
|
+
--ds-nav-h-active-bg: transparent;
|
|
360
|
+
--ds-nav-h-active-text: var(--ds-text-primary);
|
|
361
|
+
--ds-nav-h-inactive-text: var(--ds-text-muted);
|
|
362
|
+
--ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
|
|
363
|
+
--ds-nav-h-item-radius: 0px;
|
|
364
|
+
--ds-nav-h-hover-bg: transparent;
|
|
365
|
+
--ds-nav-h-track-border: var(--ds-border-width);
|
|
366
|
+
--ds-nav-h-track-gap: 0px;
|
|
367
|
+
--ds-nav-h-badge-bg: var(--ds-accent-primary);
|
|
368
|
+
|
|
369
|
+
--ds-nav-v-active-bg: var(--ds-tab-active-bg);
|
|
370
|
+
--ds-nav-v-active-text: var(--ds-accent-primary);
|
|
371
|
+
--ds-nav-v-active-rail: var(--ds-border-width-thick);
|
|
372
|
+
--ds-nav-v-item-radius: var(--ds-radius-sm);
|
|
373
|
+
--ds-nav-v-track-border: var(--ds-border-width);
|
|
374
|
+
--ds-nav-v-track-padding: var(--ds-space-1);
|
|
375
|
+
--ds-nav-v-badge-bg: var(--ds-accent-primary);
|
|
376
|
+
|
|
377
|
+
--ds-tree-active-bg: var(--ds-tab-active-bg);
|
|
378
|
+
--ds-tree-active-text: var(--ds-accent-primary);
|
|
379
|
+
--ds-tree-active-muted: var(--ds-text-muted);
|
|
380
|
+
--ds-tree-active-rail: var(--ds-border-width-thick);
|
|
381
|
+
|
|
382
|
+
--ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
|
|
383
|
+
--ds-sidebar-active-text: var(--ds-sidebar-accent);
|
|
384
|
+
--ds-sidebar-active-accent: var(--ds-sidebar-accent);
|
|
385
|
+
--ds-sidebar-active-rail: var(--ds-border-width-thick);
|
|
386
|
+
}
|
|
387
|
+
|
|
347
388
|
/* ── Dark Mode Semantic Overrides ─────────────────────────────────── */
|
|
348
389
|
/* Layered surface hierarchy: sidebar(darkest) < canvas < surface < elevated.
|
|
349
390
|
This gives cards/panels visible lift and keeps the sidebar anchored. */
|
package/dist/tokens.css
CHANGED
|
@@ -41,6 +41,58 @@
|
|
|
41
41
|
--ds-ring-active: var(--ds-accent-soft);
|
|
42
42
|
--ds-input-focus-ring: var(--ds-ring-active);
|
|
43
43
|
--ds-shadow-focus: 0 0 0 2px var(--ds-primary-900);
|
|
44
|
+
--ds-nav-h-active-bg: transparent;
|
|
45
|
+
--ds-nav-h-active-text: var(--ds-text-primary);
|
|
46
|
+
--ds-nav-h-inactive-text: var(--ds-text-muted);
|
|
47
|
+
--ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
|
|
48
|
+
--ds-nav-h-item-radius: 0px;
|
|
49
|
+
--ds-nav-h-hover-bg: transparent;
|
|
50
|
+
--ds-nav-h-track-border: var(--ds-border-width);
|
|
51
|
+
--ds-nav-h-track-gap: 0px;
|
|
52
|
+
--ds-nav-h-badge-bg: var(--ds-accent-primary);
|
|
53
|
+
--ds-nav-v-active-bg: var(--ds-tab-active-bg);
|
|
54
|
+
--ds-nav-v-active-text: var(--ds-accent-primary);
|
|
55
|
+
--ds-nav-v-active-rail: var(--ds-border-width-thick);
|
|
56
|
+
--ds-nav-v-item-radius: var(--ds-radius-sm);
|
|
57
|
+
--ds-nav-v-track-border: var(--ds-border-width);
|
|
58
|
+
--ds-nav-v-track-padding: var(--ds-space-1);
|
|
59
|
+
--ds-nav-v-badge-bg: var(--ds-accent-primary);
|
|
60
|
+
--ds-tree-active-bg: var(--ds-tab-active-bg);
|
|
61
|
+
--ds-tree-active-text: var(--ds-accent-primary);
|
|
62
|
+
--ds-tree-active-muted: var(--ds-text-muted);
|
|
63
|
+
--ds-tree-active-rail: var(--ds-border-width-thick);
|
|
64
|
+
--ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
|
|
65
|
+
--ds-sidebar-active-text: var(--ds-sidebar-accent);
|
|
66
|
+
--ds-sidebar-active-accent: var(--ds-sidebar-accent);
|
|
67
|
+
--ds-sidebar-active-rail: var(--ds-border-width-thick);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Navigation active styles — redeclared for nested mode wrappers and overlay portals */
|
|
71
|
+
:root, [data-mode], [data-ds-overlay] {
|
|
72
|
+
--ds-nav-h-active-bg: transparent;
|
|
73
|
+
--ds-nav-h-active-text: var(--ds-text-primary);
|
|
74
|
+
--ds-nav-h-inactive-text: var(--ds-text-muted);
|
|
75
|
+
--ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
|
|
76
|
+
--ds-nav-h-item-radius: 0px;
|
|
77
|
+
--ds-nav-h-hover-bg: transparent;
|
|
78
|
+
--ds-nav-h-track-border: var(--ds-border-width);
|
|
79
|
+
--ds-nav-h-track-gap: 0px;
|
|
80
|
+
--ds-nav-h-badge-bg: var(--ds-accent-primary);
|
|
81
|
+
--ds-nav-v-active-bg: var(--ds-tab-active-bg);
|
|
82
|
+
--ds-nav-v-active-text: var(--ds-accent-primary);
|
|
83
|
+
--ds-nav-v-active-rail: var(--ds-border-width-thick);
|
|
84
|
+
--ds-nav-v-item-radius: var(--ds-radius-sm);
|
|
85
|
+
--ds-nav-v-track-border: var(--ds-border-width);
|
|
86
|
+
--ds-nav-v-track-padding: var(--ds-space-1);
|
|
87
|
+
--ds-nav-v-badge-bg: var(--ds-accent-primary);
|
|
88
|
+
--ds-tree-active-bg: var(--ds-tab-active-bg);
|
|
89
|
+
--ds-tree-active-text: var(--ds-accent-primary);
|
|
90
|
+
--ds-tree-active-muted: var(--ds-text-muted);
|
|
91
|
+
--ds-tree-active-rail: var(--ds-border-width-thick);
|
|
92
|
+
--ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
|
|
93
|
+
--ds-sidebar-active-text: var(--ds-sidebar-accent);
|
|
94
|
+
--ds-sidebar-active-accent: var(--ds-sidebar-accent);
|
|
95
|
+
--ds-sidebar-active-rail: var(--ds-border-width-thick);
|
|
44
96
|
}
|
|
45
97
|
|
|
46
98
|
/* Preset overrides — light mode */
|
package/dist-static/tokens.css
CHANGED
|
@@ -41,6 +41,58 @@
|
|
|
41
41
|
--ds-ring-active: var(--ds-accent-soft);
|
|
42
42
|
--ds-input-focus-ring: var(--ds-ring-active);
|
|
43
43
|
--ds-shadow-focus: 0 0 0 2px var(--ds-primary-900);
|
|
44
|
+
--ds-nav-h-active-bg: transparent;
|
|
45
|
+
--ds-nav-h-active-text: var(--ds-text-primary);
|
|
46
|
+
--ds-nav-h-inactive-text: var(--ds-text-muted);
|
|
47
|
+
--ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
|
|
48
|
+
--ds-nav-h-item-radius: 0px;
|
|
49
|
+
--ds-nav-h-hover-bg: transparent;
|
|
50
|
+
--ds-nav-h-track-border: var(--ds-border-width);
|
|
51
|
+
--ds-nav-h-track-gap: 0px;
|
|
52
|
+
--ds-nav-h-badge-bg: var(--ds-accent-primary);
|
|
53
|
+
--ds-nav-v-active-bg: var(--ds-tab-active-bg);
|
|
54
|
+
--ds-nav-v-active-text: var(--ds-accent-primary);
|
|
55
|
+
--ds-nav-v-active-rail: var(--ds-border-width-thick);
|
|
56
|
+
--ds-nav-v-item-radius: var(--ds-radius-sm);
|
|
57
|
+
--ds-nav-v-track-border: var(--ds-border-width);
|
|
58
|
+
--ds-nav-v-track-padding: var(--ds-space-1);
|
|
59
|
+
--ds-nav-v-badge-bg: var(--ds-accent-primary);
|
|
60
|
+
--ds-tree-active-bg: var(--ds-tab-active-bg);
|
|
61
|
+
--ds-tree-active-text: var(--ds-accent-primary);
|
|
62
|
+
--ds-tree-active-muted: var(--ds-text-muted);
|
|
63
|
+
--ds-tree-active-rail: var(--ds-border-width-thick);
|
|
64
|
+
--ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
|
|
65
|
+
--ds-sidebar-active-text: var(--ds-sidebar-accent);
|
|
66
|
+
--ds-sidebar-active-accent: var(--ds-sidebar-accent);
|
|
67
|
+
--ds-sidebar-active-rail: var(--ds-border-width-thick);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Navigation active styles — redeclared for nested mode wrappers and overlay portals */
|
|
71
|
+
:root, [data-mode], [data-ds-overlay] {
|
|
72
|
+
--ds-nav-h-active-bg: transparent;
|
|
73
|
+
--ds-nav-h-active-text: var(--ds-text-primary);
|
|
74
|
+
--ds-nav-h-inactive-text: var(--ds-text-muted);
|
|
75
|
+
--ds-nav-h-indicator: calc(var(--ds-border-width) * 3);
|
|
76
|
+
--ds-nav-h-item-radius: 0px;
|
|
77
|
+
--ds-nav-h-hover-bg: transparent;
|
|
78
|
+
--ds-nav-h-track-border: var(--ds-border-width);
|
|
79
|
+
--ds-nav-h-track-gap: 0px;
|
|
80
|
+
--ds-nav-h-badge-bg: var(--ds-accent-primary);
|
|
81
|
+
--ds-nav-v-active-bg: var(--ds-tab-active-bg);
|
|
82
|
+
--ds-nav-v-active-text: var(--ds-accent-primary);
|
|
83
|
+
--ds-nav-v-active-rail: var(--ds-border-width-thick);
|
|
84
|
+
--ds-nav-v-item-radius: var(--ds-radius-sm);
|
|
85
|
+
--ds-nav-v-track-border: var(--ds-border-width);
|
|
86
|
+
--ds-nav-v-track-padding: var(--ds-space-1);
|
|
87
|
+
--ds-nav-v-badge-bg: var(--ds-accent-primary);
|
|
88
|
+
--ds-tree-active-bg: var(--ds-tab-active-bg);
|
|
89
|
+
--ds-tree-active-text: var(--ds-accent-primary);
|
|
90
|
+
--ds-tree-active-muted: var(--ds-text-muted);
|
|
91
|
+
--ds-tree-active-rail: var(--ds-border-width-thick);
|
|
92
|
+
--ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
|
|
93
|
+
--ds-sidebar-active-text: var(--ds-sidebar-accent);
|
|
94
|
+
--ds-sidebar-active-accent: var(--ds-sidebar-accent);
|
|
95
|
+
--ds-sidebar-active-rail: var(--ds-border-width-thick);
|
|
44
96
|
}
|
|
45
97
|
|
|
46
98
|
/* Preset overrides — light mode */
|
package/package.json
CHANGED