@devalok/shilp-sutra 0.37.0-next.0 → 0.37.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.
- package/dist/tokens/animations.css +125 -3
- package/dist/tokens/primitives.css +2 -0
- package/dist/tokens/semantic.css +75 -12
- package/dist/tokens/shilp-sutra.css +13 -0
- package/dist/tokens/utilities.css +52 -0
- package/llms-full.txt +1 -1
- package/package.json +7 -1
|
@@ -1,17 +1,139 @@
|
|
|
1
1
|
/* ═══════════════════════════════════════════════════════════════════
|
|
2
2
|
ANIMATIONS
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
|
|
4
|
+
TW4 generates `animate-<name>` utilities from `--animate-<name>`
|
|
5
|
+
custom properties declared in @theme. Each refers to @keyframes
|
|
6
|
+
declared below.
|
|
7
|
+
|
|
8
|
+
Ported from the deleted TW3 JS preset in 0.37. All names match what
|
|
9
|
+
components were already using (accordion-down, skeleton-shimmer, etc.)
|
|
10
|
+
— dropping them would silently break animations in Accordion,
|
|
11
|
+
Collapsible, Skeleton, Progress, Spinner, Popover, and the
|
|
12
|
+
processing-ants status dot.
|
|
13
|
+
|
|
14
|
+
Note: `animate-in`, `animate-out`, `fade-in-*`, `zoom-in-*`,
|
|
15
|
+
`slide-in-from-*` come from the `tw-animate-css` plugin (wired in
|
|
16
|
+
shilp-sutra.css), NOT here. This file is for our custom animations.
|
|
5
17
|
═══════════════════════════════════════════════════════════════════ */
|
|
6
18
|
|
|
19
|
+
@theme {
|
|
20
|
+
/* ── Radix-coupled: height animations driven by Radix CSS vars ── */
|
|
21
|
+
--animate-accordion-down: accordion-down 200ms ease-out;
|
|
22
|
+
--animate-accordion-up: accordion-up 200ms ease-out;
|
|
23
|
+
--animate-collapsible-down: collapsible-down 200ms ease-out;
|
|
24
|
+
--animate-collapsible-up: collapsible-up 200ms ease-out;
|
|
25
|
+
|
|
26
|
+
/* ── CSS-only looping animations ── */
|
|
27
|
+
--animate-progress-indeterminate: progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite;
|
|
28
|
+
--animate-skeleton-shimmer: skeleton-shimmer var(--duration-slow-02) linear infinite;
|
|
29
|
+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
|
|
30
|
+
|
|
31
|
+
/* ── One-shot animations ── */
|
|
32
|
+
--animate-timer-bar: timer-bar linear forwards;
|
|
33
|
+
--animate-popover-in: popover-in 150ms var(--ease-productive-entrance);
|
|
34
|
+
--animate-popover-out: popover-out 100ms var(--ease-productive-exit);
|
|
35
|
+
|
|
36
|
+
/* ── Processing-ants (three speeds keyed to status-dot state) ── */
|
|
37
|
+
--animate-processing-ants-ambient: processing-ants-rotate 3s linear infinite;
|
|
38
|
+
--animate-processing-ants-working: processing-ants-rotate 2s linear infinite;
|
|
39
|
+
--animate-processing-ants-urgent: processing-ants-rotate 1s linear infinite;
|
|
40
|
+
--animate-processing-ants-march: processing-ants-march 1s linear infinite;
|
|
41
|
+
--animate-processing-ants-svg: processing-ants-svg 1s linear infinite;
|
|
42
|
+
|
|
43
|
+
/* ── Shake — used by AI command-bar on invalid input ── */
|
|
44
|
+
--animate-shake: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
48
|
+
@keyframes definitions
|
|
49
|
+
Referenced by --animate-* entries above and by inline
|
|
50
|
+
`animation:` in components (e.g. DevalokGrain's border-angle dance).
|
|
51
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
52
|
+
|
|
53
|
+
/* Radix-coupled: the target height comes from Radix's runtime-injected
|
|
54
|
+
CSS var (--radix-accordion-content-height / --radix-collapsible-content-height). */
|
|
55
|
+
@keyframes accordion-down {
|
|
56
|
+
from { height: 0; }
|
|
57
|
+
to { height: var(--radix-accordion-content-height); }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@keyframes accordion-up {
|
|
61
|
+
from { height: var(--radix-accordion-content-height); }
|
|
62
|
+
to { height: 0; }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes collapsible-down {
|
|
66
|
+
from { height: 0; }
|
|
67
|
+
to { height: var(--radix-collapsible-content-height); }
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes collapsible-up {
|
|
71
|
+
from { height: var(--radix-collapsible-content-height); }
|
|
72
|
+
to { height: 0; }
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Progress bars — indeterminate slider */
|
|
76
|
+
@keyframes progress-indeterminate {
|
|
77
|
+
0% { transform: translateX(-100%); }
|
|
78
|
+
100% { transform: translateX(250%); }
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Skeleton — left-to-right shimmer pass */
|
|
82
|
+
@keyframes skeleton-shimmer {
|
|
83
|
+
0% { background-position: -200% 0; }
|
|
84
|
+
100% { background-position: 200% 0; }
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* InputOTP caret blink */
|
|
88
|
+
@keyframes caret-blink {
|
|
89
|
+
0%, 70%, 100% { opacity: 1; }
|
|
90
|
+
20%, 50% { opacity: 0; }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Toast / countdown timer bar — shrinks left-to-right */
|
|
94
|
+
@keyframes timer-bar {
|
|
95
|
+
0% { transform: scaleX(1); }
|
|
96
|
+
100% { transform: scaleX(0); }
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Popover micro-animations (scale + fade) */
|
|
100
|
+
@keyframes popover-in {
|
|
101
|
+
from { opacity: 0; transform: scale(0.95); }
|
|
102
|
+
to { opacity: 1; transform: scale(1); }
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@keyframes popover-out {
|
|
106
|
+
from { opacity: 1; transform: scale(1); }
|
|
107
|
+
to { opacity: 0; transform: scale(0.95); }
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Processing-ants status-dot effect: rotate the --border-angle
|
|
111
|
+
@property through a full turn. Used at three speeds (ambient,
|
|
112
|
+
working, urgent) via separate --animate-* entries above. */
|
|
7
113
|
@keyframes processing-ants-rotate {
|
|
8
114
|
to { --border-angle: 360deg; }
|
|
9
115
|
}
|
|
10
116
|
|
|
117
|
+
/* Processing-ants border — marching-ants background-position shift */
|
|
11
118
|
@keyframes processing-ants-march {
|
|
12
|
-
to {
|
|
119
|
+
to {
|
|
120
|
+
background-position:
|
|
121
|
+
16px 0,
|
|
122
|
+
100% 16px,
|
|
123
|
+
calc(100% - 16px) 100%,
|
|
124
|
+
0 calc(100% - 16px);
|
|
125
|
+
}
|
|
13
126
|
}
|
|
14
127
|
|
|
128
|
+
/* Processing-ants SVG stroke — dashoffset animation */
|
|
15
129
|
@keyframes processing-ants-svg {
|
|
16
130
|
to { stroke-dashoffset: -10; }
|
|
17
131
|
}
|
|
132
|
+
|
|
133
|
+
/* Shake — horizontal oscillation for invalid input feedback (AI command bar) */
|
|
134
|
+
@keyframes shake {
|
|
135
|
+
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
|
136
|
+
20%, 80% { transform: translate3d(2px, 0, 0); }
|
|
137
|
+
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
|
138
|
+
40%, 60% { transform: translate3d(4px, 0, 0); }
|
|
139
|
+
}
|
|
@@ -154,6 +154,7 @@
|
|
|
154
154
|
--amber-bright-3: oklch(0.92 0.08 70);
|
|
155
155
|
--amber-bright-4: oklch(0.88 0.11 70);
|
|
156
156
|
--amber-bright-5: oklch(0.84 0.14 70);
|
|
157
|
+
--amber-bright-6: oklch(0.80 0.155 68); /* interpolated 5↔7 — added 0.37.0-next.1 */
|
|
157
158
|
--amber-bright-7: oklch(0.75 0.17 65);
|
|
158
159
|
--amber-bright-9: oklch(0.78 0.16 65);
|
|
159
160
|
--amber-bright-10: oklch(0.74 0.16 65);
|
|
@@ -434,6 +435,7 @@
|
|
|
434
435
|
--amber-bright-3: oklch(0.25 0.045 65);
|
|
435
436
|
--amber-bright-4: oklch(0.32 0.065 65);
|
|
436
437
|
--amber-bright-5: oklch(0.38 0.085 65);
|
|
438
|
+
--amber-bright-6: oklch(0.44 0.11 65); /* interpolated 5↔7 — added 0.37.0-next.1 */
|
|
437
439
|
--amber-bright-7: oklch(0.50 0.13 65);
|
|
438
440
|
--amber-bright-9: oklch(0.57 0.17 65);
|
|
439
441
|
--amber-bright-10: oklch(0.52 0.17 65);
|
package/dist/tokens/semantic.css
CHANGED
|
@@ -131,9 +131,37 @@
|
|
|
131
131
|
--color-secondary-12: var(--purple-12);
|
|
132
132
|
--color-secondary-fg: var(--neutral-1);
|
|
133
133
|
|
|
134
|
+
/* ───────────────────────────────────────────────────────────
|
|
135
|
+
NEUTRAL (primitive → @theme alias)
|
|
136
|
+
Bridges `:root`-declared `--neutral-*` primitives into the
|
|
137
|
+
TW4 `--color-*` namespace so `bg-neutral-5`, `border-neutral-7`,
|
|
138
|
+
`text-neutral-11`, etc. actually emit utilities. Without this,
|
|
139
|
+
every CVA referencing bg-neutral-* silently renders unstyled.
|
|
140
|
+
─────────────────────────────────────────────────────────── */
|
|
141
|
+
--color-neutral-1: var(--neutral-1);
|
|
142
|
+
--color-neutral-2: var(--neutral-2);
|
|
143
|
+
--color-neutral-3: var(--neutral-3);
|
|
144
|
+
--color-neutral-4: var(--neutral-4);
|
|
145
|
+
--color-neutral-5: var(--neutral-5);
|
|
146
|
+
--color-neutral-6: var(--neutral-6);
|
|
147
|
+
--color-neutral-7: var(--neutral-7);
|
|
148
|
+
--color-neutral-8: var(--neutral-8);
|
|
149
|
+
--color-neutral-9: var(--neutral-9);
|
|
150
|
+
--color-neutral-10: var(--neutral-10);
|
|
151
|
+
--color-neutral-11: var(--neutral-11);
|
|
152
|
+
--color-neutral-12: var(--neutral-12);
|
|
153
|
+
|
|
134
154
|
/* ───────────────────────────────────────────────────────────
|
|
135
155
|
SURFACE
|
|
136
156
|
─────────────────────────────────────────────────────────── */
|
|
157
|
+
/* Numeric layering aliases — canonical per CLAUDE.md surface rule.
|
|
158
|
+
Consumers and stories use bg-surface-1..4; without these @theme
|
|
159
|
+
entries TW4 emits zero rules for them. */
|
|
160
|
+
--color-surface-1: var(--neutral-1);
|
|
161
|
+
--color-surface-2: var(--neutral-2);
|
|
162
|
+
--color-surface-3: var(--neutral-3);
|
|
163
|
+
--color-surface-4: var(--neutral-4);
|
|
164
|
+
|
|
137
165
|
--color-surface-base: var(--neutral-2);
|
|
138
166
|
--color-surface-sunken: var(--color-surface-0);
|
|
139
167
|
--color-surface-raised: var(--neutral-1);
|
|
@@ -152,13 +180,22 @@
|
|
|
152
180
|
--color-surface-border-subtle: var(--neutral-5);
|
|
153
181
|
--color-backdrop: oklch(0 0 0 / 0.4);
|
|
154
182
|
|
|
183
|
+
/* Overlay + disabled — promoted from internal :root into @theme so
|
|
184
|
+
`bg-overlay`, `text-overlay`, `bg-disabled`, `text-disabled` emit. */
|
|
185
|
+
--color-overlay: oklch(0 0 0 / 0.50);
|
|
186
|
+
--color-disabled: var(--neutral-5);
|
|
187
|
+
|
|
155
188
|
/* ───────────────────────────────────────────────────────────
|
|
156
189
|
STATUS — Error
|
|
190
|
+
Full step subset: 2, 3, 4, 5, 6, 7, 9, 10, 11.
|
|
191
|
+
Step 6 added in 0.37.0-next.1 (missed in original migration)
|
|
192
|
+
— SplitButton soft variants and status-dot muted tones use it.
|
|
157
193
|
─────────────────────────────────────────────────────────── */
|
|
158
194
|
--color-error-2: var(--red-2);
|
|
159
195
|
--color-error-3: var(--red-3);
|
|
160
196
|
--color-error-4: var(--red-4);
|
|
161
197
|
--color-error-5: var(--red-5);
|
|
198
|
+
--color-error-6: var(--red-6);
|
|
162
199
|
--color-error-7: var(--red-7);
|
|
163
200
|
--color-error-9: var(--red-9);
|
|
164
201
|
--color-error-10: var(--red-10);
|
|
@@ -170,6 +207,7 @@
|
|
|
170
207
|
--color-success-3: var(--green-3);
|
|
171
208
|
--color-success-4: var(--green-4);
|
|
172
209
|
--color-success-5: var(--green-5);
|
|
210
|
+
--color-success-6: var(--green-6);
|
|
173
211
|
--color-success-7: var(--green-7);
|
|
174
212
|
--color-success-9: var(--green-9);
|
|
175
213
|
--color-success-10: var(--green-10);
|
|
@@ -181,6 +219,7 @@
|
|
|
181
219
|
--color-warning-3: var(--amber-bright-3);
|
|
182
220
|
--color-warning-4: var(--amber-bright-4);
|
|
183
221
|
--color-warning-5: var(--amber-bright-5);
|
|
222
|
+
--color-warning-6: var(--amber-bright-6);
|
|
184
223
|
--color-warning-7: var(--amber-bright-7);
|
|
185
224
|
--color-warning-9: var(--amber-bright-9);
|
|
186
225
|
--color-warning-10: var(--amber-bright-10);
|
|
@@ -192,6 +231,7 @@
|
|
|
192
231
|
--color-info-3: var(--blue-3);
|
|
193
232
|
--color-info-4: var(--blue-4);
|
|
194
233
|
--color-info-5: var(--blue-5);
|
|
234
|
+
--color-info-6: var(--blue-6);
|
|
195
235
|
--color-info-7: var(--blue-7);
|
|
196
236
|
--color-info-9: var(--blue-9);
|
|
197
237
|
--color-info-10: var(--blue-10);
|
|
@@ -250,7 +290,8 @@
|
|
|
250
290
|
--color-skeleton-shimmer: var(--neutral-2);
|
|
251
291
|
|
|
252
292
|
/* ───────────────────────────────────────────────────────────
|
|
253
|
-
SPACING
|
|
293
|
+
SPACING — numeric scale
|
|
294
|
+
Generates p-ds-* / m-ds-* / gap-ds-* / w-ds-* / h-ds-* / etc.
|
|
254
295
|
─────────────────────────────────────────────────────────── */
|
|
255
296
|
--spacing-ds-01: 2px;
|
|
256
297
|
--spacing-ds-02: 4px;
|
|
@@ -269,12 +310,32 @@
|
|
|
269
310
|
--spacing-ds-12: 96px;
|
|
270
311
|
--spacing-ds-13: 160px;
|
|
271
312
|
|
|
272
|
-
/*
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
--spacing-ds-
|
|
277
|
-
--spacing-ds-
|
|
313
|
+
/* Named component sizes — drive w-ds-{xs|sm|md|lg|xl}, h-ds-*, min-w-ds-*, min-h-ds-*.
|
|
314
|
+
These are the heights of Avatar, Button, Input, IconButton, etc.
|
|
315
|
+
In TW4, spacing-namespaced tokens ALSO emit w-/h-/min-w/min-h/max-* utilities,
|
|
316
|
+
so one `--spacing-ds-<name>` entry covers all sizing utilities. */
|
|
317
|
+
--spacing-ds-xs: 24px;
|
|
318
|
+
--spacing-ds-xs-plus: 28px;
|
|
319
|
+
--spacing-ds-sm: 32px;
|
|
320
|
+
--spacing-ds-sm-plus: 36px;
|
|
321
|
+
--spacing-ds-md: 40px;
|
|
322
|
+
--spacing-ds-lg: 48px;
|
|
323
|
+
--spacing-ds-xl: 56px;
|
|
324
|
+
|
|
325
|
+
/* Icon sizes — drive w-ico-{sm|md|lg|xl}, h-ico-*. Same spacing-namespace
|
|
326
|
+
rule applies: one var emits both w- and h- utilities. */
|
|
327
|
+
--spacing-ico-sm: 16px;
|
|
328
|
+
--spacing-ico-md: 20px;
|
|
329
|
+
--spacing-ico-lg: 24px;
|
|
330
|
+
--spacing-ico-xl: 32px;
|
|
331
|
+
|
|
332
|
+
/* Layout spacing (responsive via @media in :root below).
|
|
333
|
+
Generates p-page-x, p-page-y, gap-section-gap, gap-card-gap, gap-stack-gap. */
|
|
334
|
+
--spacing-page-x: var(--spacing-ds-05);
|
|
335
|
+
--spacing-page-y: var(--spacing-ds-07);
|
|
336
|
+
--spacing-section-gap: var(--spacing-ds-08);
|
|
337
|
+
--spacing-card-gap: var(--spacing-ds-05);
|
|
338
|
+
--spacing-stack-gap: var(--spacing-ds-06);
|
|
278
339
|
|
|
279
340
|
/* ───────────────────────────────────────────────────────────
|
|
280
341
|
RADIUS
|
|
@@ -377,9 +438,11 @@
|
|
|
377
438
|
--action-focus-opacity: 0.12;
|
|
378
439
|
--action-active-opacity: 0.12;
|
|
379
440
|
|
|
380
|
-
/*
|
|
381
|
-
|
|
382
|
-
|
|
441
|
+
/* NOTE: --color-overlay and --color-disabled have been promoted to
|
|
442
|
+
@theme above (so TW4 emits `bg-overlay`, `text-disabled`, etc.).
|
|
443
|
+
The dark-mode override below and forced-colors override further
|
|
444
|
+
down still work because TW4 honors scoped redeclarations of
|
|
445
|
+
@theme vars. */
|
|
383
446
|
|
|
384
447
|
/* Shadow internals — the `--shadow-xs-internal` etc. are composed into
|
|
385
448
|
the public `--shadow-raised`/`--shadow-floating` @theme values above.
|
|
@@ -554,8 +617,8 @@
|
|
|
554
617
|
═══════════════════════════════════════════════════════════════════ */
|
|
555
618
|
@media (min-width: 768px) {
|
|
556
619
|
:root {
|
|
557
|
-
--spacing-
|
|
558
|
-
--spacing-
|
|
620
|
+
--spacing-page-x: var(--spacing-ds-06);
|
|
621
|
+
--spacing-section-gap: var(--spacing-ds-10);
|
|
559
622
|
}
|
|
560
623
|
}
|
|
561
624
|
|
|
@@ -25,6 +25,19 @@
|
|
|
25
25
|
@import "./utilities.css";
|
|
26
26
|
@import "./variants.css";
|
|
27
27
|
|
|
28
|
+
/* tw-animate-css — TW4-native rewrite of tailwindcss-animate. Provides the
|
|
29
|
+
`animate-in`, `animate-out`, `fade-in-*`, `zoom-in-*`, `slide-in-from-*`
|
|
30
|
+
utility set that Radix primitives and our composed components (Dialog,
|
|
31
|
+
Popover, Avatar, etc.) rely on for enter/exit animations.
|
|
32
|
+
|
|
33
|
+
Imported as CSS (not a JS `@plugin`) because tw-animate-css ships a
|
|
34
|
+
pre-compiled stylesheet via its `"style"` export condition. Declared
|
|
35
|
+
in our `dependencies` so pnpm installs it transitively for consumers.
|
|
36
|
+
|
|
37
|
+
Without this, every `animate-*` class used by the DS silently emits
|
|
38
|
+
zero CSS → Avatar + motion-using components render without animation. */
|
|
39
|
+
@import "tw-animate-css";
|
|
40
|
+
|
|
28
41
|
/* TW4 content detection — scan our shipped dist JS for utility classes
|
|
29
42
|
so consumers don't have to configure "content" for us.
|
|
30
43
|
|
|
@@ -274,3 +274,55 @@
|
|
|
274
274
|
@utility duration-moderate-02 { transition-duration: var(--duration-moderate-02); }
|
|
275
275
|
@utility duration-slow-01 { transition-duration: var(--duration-slow-01); }
|
|
276
276
|
@utility duration-slow-02 { transition-duration: var(--duration-slow-02); }
|
|
277
|
+
|
|
278
|
+
/* ───────────────────────────────────────────────────────────────────
|
|
279
|
+
BORDER WIDTH — named DS scale
|
|
280
|
+
|
|
281
|
+
TW4 has no `--border-width-*` auto-namespace. The old preset exposed
|
|
282
|
+
these as `border-ds-{sm,md,lg}` and `border-focus`. Components use
|
|
283
|
+
`border-focus` for focus-ring thickness; DS-scale border classes are
|
|
284
|
+
available for consumers that need non-default border widths keyed to
|
|
285
|
+
our design tokens.
|
|
286
|
+
─────────────────────────────────────────────────────────────────── */
|
|
287
|
+
|
|
288
|
+
@utility border-ds-sm { border-width: var(--border-width-sm); }
|
|
289
|
+
@utility border-ds-md { border-width: var(--border-width-md); }
|
|
290
|
+
@utility border-ds-lg { border-width: var(--border-width-lg); }
|
|
291
|
+
@utility border-focus { border-width: var(--border-focus-width); }
|
|
292
|
+
|
|
293
|
+
/* ───────────────────────────────────────────────────────────────────
|
|
294
|
+
OPACITY — action-state opacities
|
|
295
|
+
|
|
296
|
+
TW4 has no `--opacity-*` auto-namespace. The old preset mapped
|
|
297
|
+
`--action-*-opacity` runtime vars to `opacity-action-*` classes.
|
|
298
|
+
Used for ripple/hover/selection overlays that blend with the
|
|
299
|
+
underlying surface via opacity rather than a solid color.
|
|
300
|
+
─────────────────────────────────────────────────────────────────── */
|
|
301
|
+
|
|
302
|
+
@utility opacity-action-hover { opacity: var(--action-hover-opacity); }
|
|
303
|
+
@utility opacity-action-selected { opacity: var(--action-selected-opacity); }
|
|
304
|
+
@utility opacity-action-disabled { opacity: var(--action-disabled-opacity); }
|
|
305
|
+
@utility opacity-action-focus { opacity: var(--action-focus-opacity); }
|
|
306
|
+
@utility opacity-action-active { opacity: var(--action-active-opacity); }
|
|
307
|
+
|
|
308
|
+
/* ───────────────────────────────────────────────────────────────────
|
|
309
|
+
MAX-WIDTH — named layout widths
|
|
310
|
+
|
|
311
|
+
TW4's `max-w-*` utilities come from the `--container-*` or
|
|
312
|
+
`--spacing-*` namespaces. Our `--max-width` / `--max-width-body`
|
|
313
|
+
names don't match either, so declare explicit utilities.
|
|
314
|
+
─────────────────────────────────────────────────────────────────── */
|
|
315
|
+
|
|
316
|
+
@utility max-w-layout { max-width: var(--max-width); }
|
|
317
|
+
@utility max-w-layout-body { max-width: var(--max-width-body); }
|
|
318
|
+
|
|
319
|
+
/* ───────────────────────────────────────────────────────────────────
|
|
320
|
+
BACKGROUND IMAGE — brand gradients
|
|
321
|
+
|
|
322
|
+
TW4's `bg-*` from `--color-*` wouldn't accept gradient values. The
|
|
323
|
+
old preset declared these under `backgroundImage` — migrating to
|
|
324
|
+
explicit utilities here. Consumed by DevalokGrain and brand chrome.
|
|
325
|
+
─────────────────────────────────────────────────────────────────── */
|
|
326
|
+
|
|
327
|
+
@utility bg-gradient-brand { background-image: var(--gradient-brand-light); }
|
|
328
|
+
@utility bg-gradient-brand-dark { background-image: var(--gradient-brand-dark); }
|
package/llms-full.txt
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
> All variant values and props verified from source CVA definitions.
|
|
6
6
|
>
|
|
7
7
|
> Package: @devalok/shilp-sutra
|
|
8
|
-
> Version: 0.37.0
|
|
8
|
+
> Version: 0.37.0
|
|
9
9
|
>
|
|
10
10
|
> **If you are an AI agent reading this file top-to-bottom:** the Setup
|
|
11
11
|
> section below is authoritative. If any later per-component doc or a
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devalok/shilp-sutra",
|
|
3
|
-
"version": "0.37.0
|
|
3
|
+
"version": "0.37.0",
|
|
4
4
|
"description": "Devalok Design System — tokens, components, and patterns for Next.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"class-variance-authority": "^0.7.1",
|
|
25
25
|
"clsx": "^2.1.1",
|
|
26
|
+
"tw-animate-css": "^1.4.0",
|
|
26
27
|
"use-sync-external-store": "^1.5.0"
|
|
27
28
|
},
|
|
28
29
|
"exports": {
|
|
@@ -313,6 +314,11 @@
|
|
|
313
314
|
"import": "./dist/ui/spinner.js",
|
|
314
315
|
"default": "./dist/ui/spinner.js"
|
|
315
316
|
},
|
|
317
|
+
"./ui/split-button": {
|
|
318
|
+
"types": "./dist/ui/split-button.d.ts",
|
|
319
|
+
"import": "./dist/ui/split-button.js",
|
|
320
|
+
"default": "./dist/ui/split-button.js"
|
|
321
|
+
},
|
|
316
322
|
"./ui/stack": {
|
|
317
323
|
"types": "./dist/ui/stack.d.ts",
|
|
318
324
|
"import": "./dist/ui/stack.js",
|