@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.
- package/README.md +226 -0
- package/dist/apply-scopes.d.ts +12 -0
- package/dist/apply-scopes.js +30 -0
- package/dist/css.d.ts +10 -0
- package/dist/css.js +36 -0
- package/dist/graph/components.d.ts +6 -0
- package/dist/graph/components.js +4488 -0
- package/dist/graph/index.d.ts +11 -0
- package/dist/graph/index.js +26 -0
- package/dist/graph/inputs.d.ts +1 -0
- package/dist/graph/inputs.js +23 -0
- package/dist/graph/model.d.ts +205 -0
- package/dist/graph/model.js +282 -0
- package/dist/graph/registry.d.ts +67 -0
- package/dist/graph/registry.js +118 -0
- package/dist/graph/roles.d.ts +5 -0
- package/dist/graph/roles.js +151 -0
- package/dist/graph/scales.d.ts +1 -0
- package/dist/graph/scales.js +1296 -0
- package/dist/graph/serialize.d.ts +16 -0
- package/dist/graph/serialize.js +25 -0
- package/dist/graph/statics.d.ts +1 -0
- package/dist/graph/statics.js +419 -0
- package/dist/index.d.ts +26 -0
- package/dist/index.js +25 -0
- package/dist/palettes.d.ts +70 -0
- package/dist/palettes.js +114 -0
- package/dist/react/provider.d.ts +23 -0
- package/dist/react/provider.js +28 -0
- package/dist/react.d.ts +3 -0
- package/dist/react.js +3 -0
- package/dist/scales.d.ts +186 -0
- package/dist/scales.js +186 -0
- package/dist/semantic.d.ts +36 -0
- package/dist/semantic.js +49 -0
- package/dist/swatches.d.ts +24 -0
- package/dist/swatches.js +57 -0
- package/dist/tokens.css +2607 -0
- package/dist/tokens.dtcg.json +3475 -0
- package/dist/tokens.json +14658 -0
- package/dist/tokens.tailwind.css +479 -0
- 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
|
+
}
|