@stridge/noctis-design-tokens 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +226 -0
  2. package/dist/apply-scopes.d.ts +12 -0
  3. package/dist/apply-scopes.js +30 -0
  4. package/dist/css.d.ts +10 -0
  5. package/dist/css.js +36 -0
  6. package/dist/graph/components.d.ts +6 -0
  7. package/dist/graph/components.js +4488 -0
  8. package/dist/graph/index.d.ts +11 -0
  9. package/dist/graph/index.js +26 -0
  10. package/dist/graph/inputs.d.ts +1 -0
  11. package/dist/graph/inputs.js +23 -0
  12. package/dist/graph/model.d.ts +205 -0
  13. package/dist/graph/model.js +282 -0
  14. package/dist/graph/registry.d.ts +67 -0
  15. package/dist/graph/registry.js +118 -0
  16. package/dist/graph/roles.d.ts +5 -0
  17. package/dist/graph/roles.js +151 -0
  18. package/dist/graph/scales.d.ts +1 -0
  19. package/dist/graph/scales.js +1296 -0
  20. package/dist/graph/serialize.d.ts +16 -0
  21. package/dist/graph/serialize.js +25 -0
  22. package/dist/graph/statics.d.ts +1 -0
  23. package/dist/graph/statics.js +419 -0
  24. package/dist/index.d.ts +26 -0
  25. package/dist/index.js +25 -0
  26. package/dist/palettes.d.ts +70 -0
  27. package/dist/palettes.js +114 -0
  28. package/dist/react/provider.d.ts +23 -0
  29. package/dist/react/provider.js +28 -0
  30. package/dist/react.d.ts +3 -0
  31. package/dist/react.js +3 -0
  32. package/dist/scales.d.ts +186 -0
  33. package/dist/scales.js +186 -0
  34. package/dist/semantic.d.ts +36 -0
  35. package/dist/semantic.js +49 -0
  36. package/dist/swatches.d.ts +24 -0
  37. package/dist/swatches.js +57 -0
  38. package/dist/tokens.css +2607 -0
  39. package/dist/tokens.dtcg.json +3475 -0
  40. package/dist/tokens.json +14658 -0
  41. package/dist/tokens.tailwind.css +479 -0
  42. package/package.json +67 -0
@@ -0,0 +1,479 @@
1
+ /**
2
+ * The Noctis Tailwind adapter: the `@theme` reset, the `@theme inline` bridge, and the `@utility`
3
+ * rules that mint Noctis's semantic utilities (`bg-background`, `border-field`, …).
4
+ *
5
+ * Opt-in — import only when authoring with Tailwind v4, after `@import "tailwindcss"` and alongside
6
+ * the framework-neutral `tokens.css` (which carries the canonical `--noctis-*` declarations every alias
7
+ * here resolves against). Consumers who do not use Tailwind depend on none of this.
8
+ *
9
+ * Generated by `pnpm tokens:gen` — edit the graph in `src/graph/`, not this file.
10
+ */
11
+
12
+ /* ── Tailwind default-theme reset + literal breakpoints ─────────────────────────────────
13
+ * Reset-and-own: every Tailwind default namespace Noctis owns is dropped to `initial` so
14
+ * only the minted `@theme inline` keys below exist — `bg-red-500`, `p-17`, `shadow-2xl`,
15
+ * `blur-3xl` are not even available, and the build is the detection mechanism for unsanctioned
16
+ * usage. `--spacing: initial` kills the bare multiplier behind every numeric spacing utility.
17
+ * `--border-width-*`/`--opacity-*` have no v4 defaults — their resets are forward hygiene
18
+ * against future/plugin keys (the numeric utilities themselves are static bare-value handlers;
19
+ * the minted keys below shadow them). Static utilities with no theme lookup (`leading-none`,
20
+ * `shadow-none`, `animate-none`, `border-0`) survive every reset by construction.
21
+ * Breakpoints are the one family that cannot bridge through `var()` (media query preludes
22
+ * reject it), so each bare key carries the literal value its canonical `--noctis-breakpoint-*`
23
+ * twin declares — duplicated from the same graph node at generation time.
24
+ */
25
+ @theme {
26
+ --color-*: initial;
27
+ --spacing: initial;
28
+ --shadow-*: initial;
29
+ --inset-shadow-*: initial;
30
+ --drop-shadow-*: initial;
31
+ --text-shadow-*: initial;
32
+ --blur-*: initial;
33
+ --leading-*: initial;
34
+ --animate-*: initial;
35
+ --container-*: initial;
36
+ --perspective-*: initial;
37
+ --aspect-*: initial;
38
+ --border-width-*: initial;
39
+ --opacity-*: initial;
40
+
41
+ --breakpoint-sm: 40rem;
42
+ --breakpoint-md: 48rem;
43
+ --breakpoint-lg: 64rem;
44
+ --breakpoint-xl: 80rem;
45
+ --breakpoint-2xl: 96rem;
46
+ }
47
+
48
+ /* ── Tailwind bridge (the only color source) ────────────────────────────────────────────
49
+ * `inline` makes each utility reference the canonical variable directly
50
+ * (`bg-surface` → `background-color: var(--noctis-color-surface)`) instead of through a generated
51
+ * indirection, so live runtime updates to the canonical layer (and the engine primitives behind
52
+ * it) re-theme the app with no rebuild. The bare keys here exist only at build time — runtime
53
+ * overrides must target the `--noctis-*` canonicals, never these aliases.
54
+ */
55
+ @theme inline {
56
+ /* Color bridge — one `--color-*` key per bridged semantic role, aliasing its canonical
57
+ * `--noctis-color-*` twin. Roles whose fill and border are different values (selected, field,
58
+ * checkbox, kbd, tooltip, …) are dedicated `@utility` rules below instead. */
59
+ --color-background: var(--noctis-color-background);
60
+ --color-hover: var(--noctis-color-hover);
61
+ --color-surface: var(--noctis-color-surface);
62
+ --color-surface-hover: var(--noctis-color-surface-hover);
63
+ --color-surface-raised: var(--noctis-color-surface-raised);
64
+ --color-sunken: var(--noctis-color-sunken);
65
+ --color-selected-hover: var(--noctis-color-selected-hover);
66
+ --color-focus: var(--noctis-color-focus);
67
+ --color-overlay: var(--noctis-color-overlay);
68
+ --color-header: var(--noctis-color-header);
69
+ --color-sidebar-item: var(--noctis-color-sidebar-item);
70
+ --color-sidebar-item-active: var(--noctis-color-sidebar-item-active);
71
+ --color-code: var(--noctis-color-code);
72
+ --color-data-grid-header: var(--noctis-color-data-grid-header);
73
+ --color-data-grid-row-hover: var(--noctis-color-data-grid-row-hover);
74
+ --color-data-grid-row-hover-strong: var(--noctis-color-data-grid-row-hover-strong);
75
+ --color-foreground: var(--noctis-color-foreground);
76
+ --color-secondary: var(--noctis-color-secondary);
77
+ --color-muted: var(--noctis-color-muted);
78
+ --color-subtle: var(--noctis-color-subtle);
79
+ --color-placeholder: var(--noctis-color-placeholder);
80
+ --color-link: var(--noctis-color-link);
81
+ --color-code-foreground: var(--noctis-color-code-foreground);
82
+ --color-kbd-foreground: var(--noctis-color-kbd-foreground);
83
+ --color-menu-shortcut: var(--noctis-color-menu-shortcut);
84
+ --color-faint: var(--noctis-color-border-faint);
85
+ --color-border: var(--noctis-color-border);
86
+ --color-strong: var(--noctis-color-border-strong);
87
+ --color-divider: var(--noctis-color-divider);
88
+ --color-ring: var(--noctis-color-ring);
89
+ --color-primary: var(--noctis-color-primary);
90
+ --color-primary-foreground: var(--noctis-color-primary-foreground);
91
+ --color-primary-hover: var(--noctis-color-primary-hover);
92
+ --color-primary-active: var(--noctis-color-primary-active);
93
+ --color-accent: var(--noctis-color-accent);
94
+ --color-accent-foreground: var(--noctis-color-accent-foreground);
95
+ --color-accent-hover: var(--noctis-color-accent-hover);
96
+ --color-accent-active: var(--noctis-color-accent-active);
97
+ --color-accent-muted: var(--noctis-color-accent-muted);
98
+ --color-control: var(--noctis-color-control);
99
+ --color-control-foreground: var(--noctis-color-control-foreground);
100
+ --color-control-hover: var(--noctis-color-control-hover);
101
+ --color-control-selected: var(--noctis-color-control-selected);
102
+ --color-control-selected-hover: var(--noctis-color-control-selected-hover);
103
+ --color-control-ghost: var(--noctis-color-control-ghost);
104
+ --color-control-ghost-hover: var(--noctis-color-control-ghost-hover);
105
+ --color-control-ghost-selected: var(--noctis-color-control-ghost-selected);
106
+ --color-control-ghost-selected-hover: var(--noctis-color-control-ghost-selected-hover);
107
+ --color-toggle-track-off: var(--noctis-color-toggle-track-off);
108
+ --color-toggle-track-off-hover: var(--noctis-color-toggle-track-off-hover);
109
+ --color-toggle-track-on: var(--noctis-color-toggle-track-on);
110
+ --color-toggle-track-on-hover: var(--noctis-color-toggle-track-on-hover);
111
+ --color-toggle-track-on-disabled: var(--noctis-color-toggle-track-on-disabled);
112
+ --color-toggle-thumb: var(--noctis-color-toggle-thumb);
113
+ --color-checkbox-checked: var(--noctis-color-checkbox-checked);
114
+ --color-checkbox-check: var(--noctis-color-checkbox-check);
115
+ --color-radio-checked: var(--noctis-color-radio-checked);
116
+ --color-scrollbar-thumb: var(--noctis-color-scrollbar-thumb);
117
+ --color-scrollbar-track: var(--noctis-color-scrollbar-track);
118
+ --color-selection: var(--noctis-color-selection);
119
+ --color-chart-positive: var(--noctis-color-chart-positive);
120
+ --color-chart-negative: var(--noctis-color-chart-negative);
121
+ --color-chart-neutral: var(--noctis-color-chart-neutral);
122
+ --color-chart-axis: var(--noctis-color-chart-axis);
123
+ --color-chart-track: var(--noctis-color-chart-track);
124
+ --color-chart-tooltip: var(--noctis-color-chart-tooltip);
125
+ --color-danger: var(--noctis-color-danger);
126
+ --color-danger-foreground: var(--noctis-color-danger-foreground);
127
+ --color-danger-muted: var(--noctis-color-danger-muted);
128
+ --color-danger-muted-foreground: var(--noctis-color-danger-muted-foreground);
129
+ --color-danger-hover: var(--noctis-color-danger-hover);
130
+ --color-danger-faint: var(--noctis-color-danger-faint);
131
+ --color-success: var(--noctis-color-success);
132
+ --color-success-foreground: var(--noctis-color-success-foreground);
133
+ --color-success-muted: var(--noctis-color-success-muted);
134
+ --color-success-muted-foreground: var(--noctis-color-success-muted-foreground);
135
+ --color-success-hover: var(--noctis-color-success-hover);
136
+ --color-success-faint: var(--noctis-color-success-faint);
137
+ --color-warning: var(--noctis-color-warning);
138
+ --color-warning-foreground: var(--noctis-color-warning-foreground);
139
+ --color-warning-muted: var(--noctis-color-warning-muted);
140
+ --color-warning-muted-foreground: var(--noctis-color-warning-muted-foreground);
141
+ --color-warning-hover: var(--noctis-color-warning-hover);
142
+ --color-warning-faint: var(--noctis-color-warning-faint);
143
+ --color-info: var(--noctis-color-info);
144
+ --color-info-foreground: var(--noctis-color-info-foreground);
145
+ --color-info-muted: var(--noctis-color-info-muted);
146
+ --color-info-muted-foreground: var(--noctis-color-info-muted-foreground);
147
+ --color-info-hover: var(--noctis-color-info-hover);
148
+ --color-info-faint: var(--noctis-color-info-faint);
149
+ --color-presence-online: var(--noctis-color-presence-online);
150
+ --color-presence-busy: var(--noctis-color-presence-busy);
151
+ --color-presence-focus: var(--noctis-color-presence-focus);
152
+ --color-presence-away: var(--noctis-color-presence-away);
153
+ --color-presence-offline: var(--noctis-color-presence-offline);
154
+ --color-disabled: var(--noctis-color-text-disabled);
155
+ --color-well: var(--noctis-color-well);
156
+ --color-chart-1: var(--noctis-color-chart-1);
157
+ --color-chart-2: var(--noctis-color-chart-2);
158
+ --color-chart-3: var(--noctis-color-chart-3);
159
+ --color-chart-4: var(--noctis-color-chart-4);
160
+ --color-chart-5: var(--noctis-color-chart-5);
161
+ --color-chart-6: var(--noctis-color-chart-6);
162
+ --color-chart-7: var(--noctis-color-chart-7);
163
+ --color-chart-8: var(--noctis-color-chart-8);
164
+ --color-avatar-1: var(--noctis-color-avatar-1);
165
+ --color-avatar-2: var(--noctis-color-avatar-2);
166
+ --color-avatar-3: var(--noctis-color-avatar-3);
167
+ --color-avatar-4: var(--noctis-color-avatar-4);
168
+ --color-avatar-5: var(--noctis-color-avatar-5);
169
+ --color-avatar-6: var(--noctis-color-avatar-6);
170
+ --color-avatar-7: var(--noctis-color-avatar-7);
171
+ --color-avatar-8: var(--noctis-color-avatar-8);
172
+ --color-avatar-9: var(--noctis-color-avatar-9);
173
+ --color-avatar-10: var(--noctis-color-avatar-10);
174
+ --color-avatar-foreground: var(--noctis-color-avatar-foreground);
175
+
176
+ /* Named text sizes + their paired line-height keys (`--text-<size>--line-height`). */
177
+ --text-micro: var(--noctis-text-micro);
178
+ --text-micro--line-height: var(--noctis-leading-micro);
179
+ --text-mini: var(--noctis-text-mini);
180
+ --text-mini--line-height: var(--noctis-leading-mini);
181
+ --text-small: var(--noctis-text-small);
182
+ --text-small--line-height: var(--noctis-leading-small);
183
+ --text-regular: var(--noctis-text-regular);
184
+ --text-regular--line-height: var(--noctis-leading-regular);
185
+ --text-large: var(--noctis-text-large);
186
+ --text-large--line-height: var(--noctis-leading-large);
187
+ --text-title-1: var(--noctis-text-title-1);
188
+ --text-title-1--line-height: var(--noctis-leading-title-1);
189
+ --text-title-2: var(--noctis-text-title-2);
190
+ --text-title-2--line-height: var(--noctis-leading-title-2);
191
+ --text-title-3: var(--noctis-text-title-3);
192
+ --text-title-3--line-height: var(--noctis-leading-title-3);
193
+
194
+ /* Standalone leadings — `leading-snug`/`leading-relaxed` over the owned steps. */
195
+ --leading-snug: var(--noctis-leading-snug);
196
+ --leading-relaxed: var(--noctis-leading-relaxed);
197
+
198
+ /* Spacing ramp — every `p-*`/`m-*`/`gap-*`/`size-*`/`w-*`/… step resolves through the
199
+ * canonical density-scaled scale (fractional keys escaped: `--spacing-1\.5`). */
200
+ --spacing-0: var(--noctis-space-0);
201
+ --spacing-0\.5: var(--noctis-space-0\.5);
202
+ --spacing-1: var(--noctis-space-1);
203
+ --spacing-1\.5: var(--noctis-space-1\.5);
204
+ --spacing-2: var(--noctis-space-2);
205
+ --spacing-2\.5: var(--noctis-space-2\.5);
206
+ --spacing-3: var(--noctis-space-3);
207
+ --spacing-3\.5: var(--noctis-space-3\.5);
208
+ --spacing-4: var(--noctis-space-4);
209
+ --spacing-5: var(--noctis-space-5);
210
+ --spacing-6: var(--noctis-space-6);
211
+ --spacing-7: var(--noctis-space-7);
212
+ --spacing-8: var(--noctis-space-8);
213
+ --spacing-9: var(--noctis-space-9);
214
+ --spacing-10: var(--noctis-space-10);
215
+ --spacing-11: var(--noctis-space-11);
216
+ --spacing-12: var(--noctis-space-12);
217
+ --spacing-14: var(--noctis-space-14);
218
+ --spacing-16: var(--noctis-space-16);
219
+ --spacing-20: var(--noctis-space-20);
220
+ --spacing-24: var(--noctis-space-24);
221
+ --spacing-28: var(--noctis-space-28);
222
+ --spacing-32: var(--noctis-space-32);
223
+ --spacing-36: var(--noctis-space-36);
224
+ --spacing-40: var(--noctis-space-40);
225
+ --spacing-44: var(--noctis-space-44);
226
+ --spacing-48: var(--noctis-space-48);
227
+ --spacing-52: var(--noctis-space-52);
228
+ --spacing-56: var(--noctis-space-56);
229
+ --spacing-60: var(--noctis-space-60);
230
+ --spacing-64: var(--noctis-space-64);
231
+ --spacing-72: var(--noctis-space-72);
232
+ --spacing-80: var(--noctis-space-80);
233
+ --spacing-96: var(--noctis-space-96);
234
+ --spacing-px: var(--noctis-space-px);
235
+
236
+ /* Radius steps — `rounded-*` resolves through the canonical scale. */
237
+ --radius-xs: var(--noctis-radius-xs);
238
+ --radius-sm: var(--noctis-radius-sm);
239
+ --radius-md: var(--noctis-radius-md);
240
+ --radius-lg: var(--noctis-radius-lg);
241
+ --radius-xl: var(--noctis-radius-xl);
242
+ --radius-full: var(--noctis-radius-full);
243
+ --radius-control: var(--noctis-radius-control);
244
+
245
+ /* Easing curves. */
246
+ --ease-standard: var(--noctis-ease-standard);
247
+ --ease-in: var(--noctis-ease-in);
248
+ --ease-out: var(--noctis-ease-out);
249
+ --ease-in-out: var(--noctis-ease-in-out);
250
+ --ease-overlay: var(--noctis-ease-overlay);
251
+
252
+ /* Motion durations — `duration-fast|quick|regular|slow|overlay` read the named stops. */
253
+ --transition-duration-fast: var(--noctis-duration-fast);
254
+ --transition-duration-quick: var(--noctis-duration-quick);
255
+ --transition-duration-regular: var(--noctis-duration-regular);
256
+ --transition-duration-slow: var(--noctis-duration-slow);
257
+ --transition-duration-overlay: var(--noctis-duration-overlay);
258
+
259
+ /* Stacking — `z-raised|dropdown|sticky|overlay|modal|popover|toast` read the z ladder. */
260
+ --z-index-raised: var(--noctis-z-raised);
261
+ --z-index-dropdown: var(--noctis-z-dropdown);
262
+ --z-index-sticky: var(--noctis-z-sticky);
263
+ --z-index-overlay: var(--noctis-z-overlay);
264
+ --z-index-modal: var(--noctis-z-modal);
265
+ --z-index-popover: var(--noctis-z-popover);
266
+ --z-index-toast: var(--noctis-z-toast);
267
+
268
+ /* Typography — families, weights, tracking. */
269
+ --font-sans: var(--noctis-font-sans);
270
+ --font-mono: var(--noctis-font-mono);
271
+ --font-weight-light: var(--noctis-font-weight-light);
272
+ --font-weight-normal: var(--noctis-font-weight-normal);
273
+ --font-weight-medium: var(--noctis-font-weight-medium);
274
+ --font-weight-semibold: var(--noctis-font-weight-semibold);
275
+ --font-weight-bold: var(--noctis-font-weight-bold);
276
+ --font-weight-extrabold: var(--noctis-font-weight-extrabold);
277
+ --font-weight-black: var(--noctis-font-weight-black);
278
+ --tracking-tight: var(--noctis-tracking-tight);
279
+ --tracking-normal: var(--noctis-tracking-normal);
280
+ --tracking-wide: var(--noctis-tracking-wide);
281
+
282
+ /* Box-shadow ladder — semantic utility names over the composed shadow families (the
283
+ * geometry/alpha parts are canonical-only). Utilities: `shadow-card`, `shadow-popover`,
284
+ * `shadow-modal`, `shadow-inset`, `shadow-focus`, plus the mirrored `shadow-sm`. */
285
+ --shadow-card: var(--noctis-shadow-low);
286
+ --shadow-popover: var(--noctis-shadow-medium);
287
+ --shadow-modal: var(--noctis-shadow-high);
288
+ --shadow-inset: var(--noctis-shadow-inset);
289
+ --shadow-focus: var(--noctis-shadow-focus);
290
+ --shadow-sm: var(--noctis-shadow-sm);
291
+
292
+ /* Container widths — named `w-*`/`max-w-*`/`basis-*` sizes read the owned steps. */
293
+ --container-xs: var(--noctis-container-xs);
294
+ --container-sm: var(--noctis-container-sm);
295
+ --container-md: var(--noctis-container-md);
296
+ --container-xl: var(--noctis-container-xl);
297
+ --container-2xl: var(--noctis-container-2xl);
298
+ --container-3xl: var(--noctis-container-3xl);
299
+ --container-7xl: var(--noctis-container-7xl);
300
+
301
+ /* Border widths — `border`/`border-2`/`border-4` resolve through the minted steps. */
302
+ --border-width-1: var(--noctis-border-width-1);
303
+ --border-width-2: var(--noctis-border-width-2);
304
+ --border-width-4: var(--noctis-border-width-4);
305
+
306
+ /* Blur radii — `blur-*` and `backdrop-blur-*` read the owned steps. */
307
+ --blur-sm: var(--noctis-blur-sm);
308
+ --blur-md: var(--noctis-blur-md);
309
+
310
+ /* Animations — `animate-spin` reads the owned set; keyframes ship top-level. */
311
+ --animate-spin: var(--noctis-animate-spin);
312
+ }
313
+
314
+ /* ── Roles whose fill and border are different values ──────────────────────────────────
315
+ * A single Tailwind color shares one value across `bg-*`/`border-*`, so the selected-row
316
+ * surface vs its border, and the field fill vs its border, are defined as explicit
317
+ * utilities pointing at distinct roles.
318
+ */
319
+ @utility bg-selected {
320
+ background-color: var(--noctis-color-selected);
321
+ }
322
+ @utility border-selected {
323
+ border-color: var(--noctis-color-border-selected);
324
+ }
325
+ @utility bg-field {
326
+ background-color: var(--noctis-color-field);
327
+ }
328
+ @utility bg-field-hover {
329
+ background-color: var(--noctis-color-field-hover);
330
+ }
331
+ @utility bg-field-focus {
332
+ background-color: var(--noctis-color-field-focus);
333
+ }
334
+ @utility border-field {
335
+ border-color: var(--noctis-color-field-border);
336
+ }
337
+ @utility border-field-hover {
338
+ border-color: var(--noctis-color-field-border-hover);
339
+ }
340
+ @utility border-field-focus {
341
+ border-color: var(--noctis-color-field-border-focus);
342
+ }
343
+ @utility border-field-invalid {
344
+ border-color: var(--noctis-color-field-border-invalid);
345
+ }
346
+
347
+ /* Form-element fills + borders (a checkbox/radio fill and its border are different values). */
348
+ @utility bg-checkbox {
349
+ background-color: var(--noctis-color-checkbox);
350
+ }
351
+ @utility border-checkbox {
352
+ border-color: var(--noctis-color-checkbox-border);
353
+ }
354
+ @utility border-checkbox-hover {
355
+ border-color: var(--noctis-color-checkbox-border-hover);
356
+ }
357
+ @utility bg-radio {
358
+ background-color: var(--noctis-color-radio);
359
+ }
360
+ @utility border-radio {
361
+ border-color: var(--noctis-color-radio-border);
362
+ }
363
+
364
+ /* Kbd cap fill + 3D-edge border. */
365
+ @utility bg-kbd {
366
+ background-color: var(--noctis-color-kbd);
367
+ }
368
+ @utility border-kbd {
369
+ border-color: var(--noctis-color-kbd-border);
370
+ }
371
+
372
+ /* Status outline borders for muted callouts (`border-<status>` already gives the solid outline). */
373
+ @utility border-danger-subtle {
374
+ border-color: var(--noctis-color-danger-border);
375
+ }
376
+ @utility border-success-subtle {
377
+ border-color: var(--noctis-color-success-border);
378
+ }
379
+ @utility border-warning-subtle {
380
+ border-color: var(--noctis-color-warning-border);
381
+ }
382
+ @utility border-info-subtle {
383
+ border-color: var(--noctis-color-info-border);
384
+ }
385
+
386
+ /* Data-grid gridlines + the high-chroma selected-column border. */
387
+ @utility border-data-grid {
388
+ border-color: var(--noctis-color-data-grid-border);
389
+ }
390
+ @utility border-data-grid-selected {
391
+ border-color: var(--noctis-color-data-grid-column-selected-border);
392
+ }
393
+ @utility border-chart-grid {
394
+ border-color: var(--noctis-color-chart-grid);
395
+ }
396
+
397
+ /* Inverse surface (primary text as a surface) + its text (canvas). */
398
+ @utility bg-inverse {
399
+ background-color: var(--noctis-color-inverse);
400
+ }
401
+ @utility text-inverse {
402
+ color: var(--noctis-color-inverse-foreground);
403
+ }
404
+
405
+ /* Disabled = reduced opacity (the convention, not a color family). */
406
+ @utility opacity-disabled {
407
+ opacity: var(--noctis-opacity-disabled);
408
+ }
409
+
410
+ /* Status-tint gradient surfaces (faint hue → neutral) for status cards. */
411
+ @utility bg-danger-gradient {
412
+ background-image: linear-gradient(var(--noctis-color-danger-faint), var(--noctis-color-surface));
413
+ }
414
+ @utility bg-success-gradient {
415
+ background-image: linear-gradient(var(--noctis-color-success-faint), var(--noctis-color-surface));
416
+ }
417
+ @utility bg-warning-gradient {
418
+ background-image: linear-gradient(var(--noctis-color-warning-faint), var(--noctis-color-surface));
419
+ }
420
+ @utility bg-info-gradient {
421
+ background-image: linear-gradient(var(--noctis-color-info-faint), var(--noctis-color-surface));
422
+ }
423
+
424
+ /* Text selection uses the chromatic accent wash. */
425
+ ::selection {
426
+ background-color: var(--noctis-color-selection);
427
+ }
428
+
429
+ /* The text caret carries the chromatic accent. */
430
+ :where(input, textarea, [contenteditable]) {
431
+ caret-color: var(--noctis-color-accent);
432
+ }
433
+
434
+ /* ── Composite control idioms ───────────────────────────────────────────────────────────
435
+ * The keyboard focus ring (geometry only — pair with a color utility like `outline-ring` /
436
+ * `outline-danger`), the popup open/close chrome shared by floating panels, and the panel-region
437
+ * padding. `outline-style: solid` is set explicitly to sidestep the `--tw-outline-style` reset.
438
+ */
439
+ @utility focus-ring {
440
+ outline-width: var(--noctis-size-focus-ring-width);
441
+ outline-style: solid;
442
+ outline-offset: var(--noctis-size-focus-ring-offset);
443
+ }
444
+ @utility focus-ring-inset {
445
+ outline-width: var(--noctis-size-focus-ring-width);
446
+ outline-style: solid;
447
+ outline-offset: calc(-1 * var(--noctis-size-focus-ring-offset));
448
+ }
449
+ @utility focus-ring-field {
450
+ outline-width: var(--noctis-size-focus-ring-width);
451
+ outline-style: solid;
452
+ outline-offset: -1px;
453
+ }
454
+
455
+ /* Popup chrome: the radius + opacity/scale enter-exit a floating panel adopts (the elevated
456
+ * surface, border, and shadow stay on the Surface primitive). The transition names `scale` — not
457
+ * `transform` — because Tailwind v4's `scale-*` set the standalone `scale` property. */
458
+ @utility popup {
459
+ border-radius: var(--noctis-radius-md);
460
+ transition-property: opacity, scale;
461
+ transition-timing-function: var(--noctis-ease-out);
462
+ transition-duration: var(--noctis-duration-quick);
463
+ &[data-starting-style],
464
+ &[data-ending-style] {
465
+ scale: 0.96;
466
+ opacity: 0;
467
+ }
468
+ &[data-ending-style] {
469
+ transition-duration: var(--noctis-duration-fast);
470
+ }
471
+ @media (prefers-reduced-motion: reduce) {
472
+ transition: none;
473
+ }
474
+ }
475
+
476
+ /* Panel-region padding — the header/body/footer inset of a sheet or rail. */
477
+ @utility p-region {
478
+ padding: var(--noctis-space-region);
479
+ }
package/package.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "name": "@stridge/noctis-design-tokens",
3
+ "version": "1.0.0-beta.0",
4
+ "license": "MIT",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.js"
15
+ },
16
+ "./react": {
17
+ "types": "./dist/react.d.ts",
18
+ "import": "./dist/react.js"
19
+ },
20
+ "./tokens.css": "./dist/tokens.css",
21
+ "./tokens.tailwind.css": "./dist/tokens.tailwind.css",
22
+ "./tokens.json": "./dist/tokens.json",
23
+ "./tokens.dtcg.json": "./dist/tokens.dtcg.json",
24
+ "./package.json": "./package.json"
25
+ },
26
+ "publishConfig": {
27
+ "access": "public"
28
+ },
29
+ "dependencies": {
30
+ "zod": "4.4.3",
31
+ "@stridge/noctis-theme-engine": "1.0.0-beta.0"
32
+ },
33
+ "peerDependencies": {
34
+ "react": "19.2.7"
35
+ },
36
+ "peerDependenciesMeta": {
37
+ "react": {
38
+ "optional": true
39
+ }
40
+ },
41
+ "devDependencies": {
42
+ "@testing-library/react": "16.3.2",
43
+ "@types/node": "25.9.1",
44
+ "@types/react": "19.2.16",
45
+ "@types/culori": "4.0.1",
46
+ "@types/react-dom": "19.2.3",
47
+ "@vitejs/plugin-react": "6.0.2",
48
+ "culori": "4.0.2",
49
+ "jsdom": "29.1.1",
50
+ "publint": "0.3.20",
51
+ "react": "19.2.7",
52
+ "react-dom": "19.2.7",
53
+ "tailwindcss": "4.3.0",
54
+ "tsdown": "0.21.10",
55
+ "typescript": "6.0.3",
56
+ "vitest": "4.1.8",
57
+ "@stridge/noctis-typescript": "0.0.0"
58
+ },
59
+ "scripts": {
60
+ "build": "tsdown && node scripts/copy-dist-assets.mjs",
61
+ "check:publint": "publint",
62
+ "check:publish": "pnpm run check:publint",
63
+ "check:types": "tsc --noEmit",
64
+ "test": "vitest --run",
65
+ "tokens:gen": "node --import ./scripts/register-ts.mjs scripts/generate.ts"
66
+ }
67
+ }