@sequenceholdings/atlas-ui 0.1.2 → 0.1.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.
Files changed (16) hide show
  1. package/dist/charts.d.ts +160 -0
  2. package/dist/charts.mjs +97 -51
  3. package/dist/index.d.ts +4064 -0
  4. package/dist/index.mjs +36932 -10520
  5. package/dist/tokens.css +0 -36
  6. package/dist/{utils-Dhlckutd.js → utils-D-IFNYlh.js} +566 -516
  7. package/package.json +28 -8
  8. package/theme.v2.css +225 -0
  9. package/tokens.v2.css +537 -0
  10. package/dist/charts.mjs.map +0 -1
  11. package/dist/index.mjs.map +0 -1
  12. package/dist/utils-Dhlckutd.js.map +0 -1
  13. package/src/charts.ts +0 -17
  14. package/src/index.ts +0 -216
  15. package/src/process-env.d.ts +0 -8
  16. package/src/tokens.css +0 -220
package/tokens.v2.css ADDED
@@ -0,0 +1,537 @@
1
+ /* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
2
+ /* Base = the Sequence house brand (parent org) + neutral engine. Tenant-safe: NO opco identity. OpCo themes live in tokens.v2.tenants.css (not published). */
3
+ /* Release-gated on [data-tokens="v2"] — flag off = old tokens, flag on = these. */
4
+
5
+ :root[data-tokens="v2"] {
6
+ color-scheme: light;
7
+ /* ── primitives: ramps ── */
8
+ --ds-functional-50: oklch(0.975 0.001 95.4);
9
+ --ds-functional-100: oklch(0.945 0.002 95.4);
10
+ --ds-functional-200: oklch(0.890 0.003 95.4);
11
+ --ds-functional-300: oklch(0.810 0.005 95.4);
12
+ --ds-functional-400: oklch(0.710 0.006 95.4);
13
+ --ds-functional-500: oklch(0.600 0.008 95.4);
14
+ --ds-functional-600: oklch(0.510 0.008 95.4);
15
+ --ds-functional-700: oklch(0.430 0.007 95.4);
16
+ --ds-functional-800: oklch(0.355 0.006 95.4);
17
+ --ds-functional-900: oklch(0.290 0.006 95.4);
18
+ --ds-functional-950: oklch(0.225 0.005 95.4);
19
+ --ds-expressive-50: oklch(0.975 0.023 172.7);
20
+ --ds-expressive-100: oklch(0.945 0.038 172.7);
21
+ --ds-expressive-200: oklch(0.890 0.069 172.7);
22
+ --ds-expressive-300: oklch(0.810 0.100 172.7);
23
+ --ds-expressive-400: oklch(0.710 0.131 172.7);
24
+ --ds-expressive-500: oklch(0.600 0.116 172.7);
25
+ --ds-expressive-600: oklch(0.510 0.098 172.7);
26
+ --ds-expressive-700: oklch(0.430 0.083 172.7);
27
+ --ds-expressive-800: oklch(0.355 0.068 172.7);
28
+ --ds-expressive-900: oklch(0.290 0.056 172.7);
29
+ --ds-expressive-950: oklch(0.225 0.043 172.7);
30
+ --ds-neutral-0: oklch(1.000 0.000 0.0);
31
+ --ds-neutral-50: oklch(0.985 0.000 0.0);
32
+ --ds-neutral-100: oklch(0.968 0.000 0.0);
33
+ --ds-neutral-150: oklch(0.951 0.000 0.0);
34
+ --ds-neutral-200: oklch(0.933 0.000 0.0);
35
+ --ds-neutral-300: oklch(0.900 0.000 0.0);
36
+ --ds-neutral-400: oklch(0.845 0.000 0.0);
37
+ --ds-neutral-500: oklch(0.710 0.000 0.0);
38
+ --ds-neutral-600: oklch(0.590 0.000 0.0);
39
+ --ds-neutral-700: oklch(0.470 0.000 0.0);
40
+ --ds-neutral-800: oklch(0.355 0.000 0.0);
41
+ --ds-neutral-825: oklch(0.315 0.000 0.0);
42
+ --ds-neutral-850: oklch(0.300 0.000 0.0);
43
+ --ds-neutral-875: oklch(0.280 0.000 0.0);
44
+ --ds-neutral-900: oklch(0.245 0.000 0.0);
45
+ --ds-neutral-925: oklch(0.210 0.000 0.0);
46
+ --ds-neutral-950: oklch(0.180 0.000 0.0);
47
+ --ds-neutral-970: oklch(0.165 0.000 0.0);
48
+ --ds-neutral-990: oklch(0.135 0.000 0.0);
49
+ --ds-blue-50: oklch(0.975 0.013 245.0);
50
+ --ds-blue-100: oklch(0.945 0.028 245.0);
51
+ --ds-blue-200: oklch(0.890 0.058 245.0);
52
+ --ds-blue-300: oklch(0.810 0.091 245.0);
53
+ --ds-blue-400: oklch(0.710 0.119 245.0);
54
+ --ds-blue-500: oklch(0.600 0.140 245.0);
55
+ --ds-blue-600: oklch(0.510 0.128 245.0);
56
+ --ds-blue-700: oklch(0.430 0.108 245.0);
57
+ --ds-blue-800: oklch(0.355 0.089 245.0);
58
+ --ds-blue-900: oklch(0.290 0.073 245.0);
59
+ --ds-blue-950: oklch(0.225 0.057 245.0);
60
+ --ds-teal-50: oklch(0.975 0.021 185.0);
61
+ --ds-teal-100: oklch(0.945 0.035 185.0);
62
+ --ds-teal-200: oklch(0.890 0.063 185.0);
63
+ --ds-teal-300: oklch(0.810 0.091 185.0);
64
+ --ds-teal-400: oklch(0.710 0.119 185.0);
65
+ --ds-teal-500: oklch(0.600 0.106 185.0);
66
+ --ds-teal-600: oklch(0.510 0.090 185.0);
67
+ --ds-teal-700: oklch(0.430 0.076 185.0);
68
+ --ds-teal-800: oklch(0.355 0.063 185.0);
69
+ --ds-teal-900: oklch(0.290 0.051 185.0);
70
+ --ds-teal-950: oklch(0.225 0.040 185.0);
71
+ --ds-green-50: oklch(0.975 0.021 152.0);
72
+ --ds-green-100: oklch(0.945 0.035 152.0);
73
+ --ds-green-200: oklch(0.890 0.063 152.0);
74
+ --ds-green-300: oklch(0.810 0.091 152.0);
75
+ --ds-green-400: oklch(0.710 0.119 152.0);
76
+ --ds-green-500: oklch(0.600 0.140 152.0);
77
+ --ds-green-600: oklch(0.510 0.134 152.0);
78
+ --ds-green-700: oklch(0.430 0.113 152.0);
79
+ --ds-green-800: oklch(0.355 0.093 152.0);
80
+ --ds-green-900: oklch(0.290 0.076 152.0);
81
+ --ds-green-950: oklch(0.225 0.059 152.0);
82
+ --ds-amber-50: oklch(0.975 0.021 80.0);
83
+ --ds-amber-100: oklch(0.945 0.035 80.0);
84
+ --ds-amber-200: oklch(0.890 0.063 80.0);
85
+ --ds-amber-300: oklch(0.810 0.091 80.0);
86
+ --ds-amber-400: oklch(0.710 0.119 80.0);
87
+ --ds-amber-500: oklch(0.600 0.124 80.0);
88
+ --ds-amber-600: oklch(0.510 0.106 80.0);
89
+ --ds-amber-700: oklch(0.430 0.089 80.0);
90
+ --ds-amber-800: oklch(0.355 0.074 80.0);
91
+ --ds-amber-900: oklch(0.290 0.060 80.0);
92
+ --ds-amber-950: oklch(0.225 0.047 80.0);
93
+ --ds-orange-50: oklch(0.975 0.014 50.0);
94
+ --ds-orange-100: oklch(0.945 0.031 50.0);
95
+ --ds-orange-200: oklch(0.890 0.063 50.0);
96
+ --ds-orange-300: oklch(0.810 0.091 50.0);
97
+ --ds-orange-400: oklch(0.710 0.119 50.0);
98
+ --ds-orange-500: oklch(0.600 0.140 50.0);
99
+ --ds-orange-600: oklch(0.510 0.135 50.0);
100
+ --ds-orange-700: oklch(0.430 0.114 50.0);
101
+ --ds-orange-800: oklch(0.355 0.094 50.0);
102
+ --ds-orange-900: oklch(0.290 0.077 50.0);
103
+ --ds-orange-950: oklch(0.225 0.060 50.0);
104
+ --ds-red-50: oklch(0.975 0.012 27.0);
105
+ --ds-red-100: oklch(0.945 0.028 27.0);
106
+ --ds-red-200: oklch(0.890 0.058 27.0);
107
+ --ds-red-300: oklch(0.810 0.091 27.0);
108
+ --ds-red-400: oklch(0.710 0.119 27.0);
109
+ --ds-red-500: oklch(0.600 0.140 27.0);
110
+ --ds-red-600: oklch(0.510 0.140 27.0);
111
+ --ds-red-700: oklch(0.430 0.133 27.0);
112
+ --ds-red-800: oklch(0.355 0.119 27.0);
113
+ --ds-red-900: oklch(0.290 0.105 27.0);
114
+ --ds-red-950: oklch(0.225 0.091 27.0);
115
+ --ds-pink-50: oklch(0.975 0.015 345.0);
116
+ --ds-pink-100: oklch(0.945 0.035 345.0);
117
+ --ds-pink-200: oklch(0.890 0.063 345.0);
118
+ --ds-pink-300: oklch(0.810 0.091 345.0);
119
+ --ds-pink-400: oklch(0.710 0.119 345.0);
120
+ --ds-pink-500: oklch(0.600 0.140 345.0);
121
+ --ds-pink-600: oklch(0.510 0.140 345.0);
122
+ --ds-pink-700: oklch(0.430 0.133 345.0);
123
+ --ds-pink-800: oklch(0.355 0.119 345.0);
124
+ --ds-pink-900: oklch(0.290 0.105 345.0);
125
+ --ds-pink-950: oklch(0.225 0.091 345.0);
126
+ --ds-purple-50: oklch(0.975 0.014 300.0);
127
+ --ds-purple-100: oklch(0.945 0.031 300.0);
128
+ --ds-purple-200: oklch(0.890 0.063 300.0);
129
+ --ds-purple-300: oklch(0.810 0.091 300.0);
130
+ --ds-purple-400: oklch(0.710 0.119 300.0);
131
+ --ds-purple-500: oklch(0.600 0.140 300.0);
132
+ --ds-purple-600: oklch(0.510 0.140 300.0);
133
+ --ds-purple-700: oklch(0.430 0.133 300.0);
134
+ --ds-purple-800: oklch(0.355 0.119 300.0);
135
+ --ds-purple-900: oklch(0.290 0.105 300.0);
136
+ --ds-purple-950: oklch(0.225 0.091 300.0);
137
+ /* ── primitives: brand accents (computed once from the anchors) ── */
138
+ --ds-primary: oklch(0.243 0.008 95.4);
139
+ --ds-primary-hover: oklch(0.193 0.008 95.4);
140
+ --ds-expressive: oklch(0.833 0.154 172.7);
141
+ --ds-expressive-tint: oklch(0.982 0.022 172.7);
142
+ --ds-expressive-border: oklch(0.720 0.110 172.7);
143
+ --ds-expressive-text: oklch(0.470 0.091 172.7);
144
+ /* ── semantic roles: pure aliases onto primitives ── */
145
+ --background: var(--ds-neutral-50);
146
+ --foreground: var(--ds-neutral-950);
147
+ --card: var(--ds-neutral-0);
148
+ --card-foreground: var(--ds-neutral-950);
149
+ --popover: var(--ds-neutral-0);
150
+ --popover-foreground: var(--ds-neutral-950);
151
+ --shell: var(--ds-neutral-200);
152
+ --sidebar: var(--ds-neutral-150);
153
+ --sidebar-foreground: var(--ds-neutral-950);
154
+ --sidebar-accent: var(--ds-neutral-200);
155
+ --sidebar-accent-foreground: var(--ds-neutral-950);
156
+ --primary: var(--ds-primary);
157
+ --primary-foreground: var(--ds-neutral-0);
158
+ --primary-hover: var(--ds-primary-hover);
159
+ --secondary: var(--ds-neutral-150);
160
+ --secondary-foreground: var(--ds-neutral-950);
161
+ --muted: var(--ds-neutral-100);
162
+ --muted-foreground: var(--ds-neutral-600);
163
+ --accent: var(--ds-neutral-100);
164
+ --accent-foreground: var(--ds-neutral-950);
165
+ --expressive: var(--ds-expressive);
166
+ --expressive-tint: var(--ds-expressive-tint);
167
+ --expressive-border: var(--ds-expressive-border);
168
+ --expressive-text: var(--ds-expressive-text);
169
+ --destructive: var(--ds-red-600);
170
+ --destructive-foreground: var(--ds-neutral-0);
171
+ --border: var(--ds-neutral-150);
172
+ --border-strong: var(--ds-neutral-400);
173
+ --input: var(--ds-neutral-150);
174
+ --ring: var(--ds-expressive-border);
175
+ --text-primary: var(--ds-neutral-950);
176
+ --text-secondary: var(--ds-neutral-700);
177
+ --text-muted: var(--ds-neutral-600);
178
+ --text-placeholder: var(--ds-neutral-500);
179
+ --text-disabled: var(--ds-neutral-400);
180
+ --text-on-color: var(--ds-neutral-0);
181
+ --field: var(--ds-neutral-0);
182
+ --field-hover: var(--ds-neutral-50);
183
+ --field-disabled: var(--ds-neutral-100);
184
+ --link: var(--ds-expressive-600);
185
+ --link-hover: var(--ds-expressive-700);
186
+ --link-visited: var(--ds-expressive-800);
187
+ --icon-primary: var(--ds-neutral-950);
188
+ --icon-secondary: var(--ds-neutral-600);
189
+ --icon-on-color: var(--ds-neutral-0);
190
+ --icon-disabled: var(--ds-neutral-400);
191
+ --inverse: var(--ds-neutral-900);
192
+ --inverse-foreground: var(--ds-neutral-0);
193
+ --overlay: color-mix(in oklab, var(--ds-neutral-950) 50%, transparent);
194
+ --skeleton: var(--ds-neutral-100);
195
+ --skeleton-foreground: var(--ds-neutral-200);
196
+ --success: var(--ds-green-600);
197
+ --success-foreground: var(--ds-neutral-0);
198
+ --success-tint: var(--ds-green-100);
199
+ --success-text: var(--ds-green-700);
200
+ --warning: var(--ds-amber-600);
201
+ --warning-foreground: var(--ds-neutral-0);
202
+ --warning-tint: var(--ds-amber-100);
203
+ --warning-text: var(--ds-amber-700);
204
+ --danger: var(--ds-red-600);
205
+ --danger-foreground: var(--ds-neutral-0);
206
+ --danger-tint: var(--ds-red-100);
207
+ --danger-text: var(--ds-red-700);
208
+ --info: var(--ds-blue-600);
209
+ --info-foreground: var(--ds-neutral-0);
210
+ --info-tint: var(--ds-blue-100);
211
+ --info-text: var(--ds-blue-700);
212
+ --chart-1: var(--ds-expressive-500);
213
+ --chart-1-soft: var(--ds-expressive-100);
214
+ --chart-2: var(--ds-blue-200);
215
+ --chart-2-soft: var(--ds-blue-100);
216
+ --chart-3: var(--ds-orange-400);
217
+ --chart-3-soft: var(--ds-orange-100);
218
+ --chart-4: var(--ds-purple-600);
219
+ --chart-4-soft: var(--ds-purple-100);
220
+ --chart-5: var(--ds-neutral-500);
221
+ --chart-5-soft: var(--ds-neutral-100);
222
+ --chart-success: var(--ds-green-400);
223
+ --chart-success-soft: var(--ds-green-100);
224
+ --chart-danger: var(--ds-red-400);
225
+ --chart-danger-soft: var(--ds-red-100);
226
+ --chart-mono-1: var(--ds-functional-800);
227
+ --chart-mono-2: var(--ds-functional-600);
228
+ --chart-mono-3: var(--ds-functional-400);
229
+ --chart-mono-4: var(--ds-functional-300);
230
+ --chart-mono-5: var(--ds-functional-200);
231
+ --chart-adjacent-1: var(--ds-teal-400);
232
+ --chart-adjacent-1-soft: var(--ds-teal-100);
233
+ --chart-adjacent-2: var(--ds-blue-400);
234
+ --chart-adjacent-2-soft: var(--ds-blue-100);
235
+ --chart-adjacent-3: var(--ds-amber-400);
236
+ --chart-adjacent-3-soft: var(--ds-amber-100);
237
+ --chart-adjacent-4: var(--ds-orange-400);
238
+ --chart-adjacent-4-soft: var(--ds-orange-100);
239
+ --chart-adjacent-5: var(--ds-purple-400);
240
+ --chart-adjacent-5-soft: var(--ds-purple-100);
241
+ --identity-1: var(--ds-blue-100);
242
+ --identity-1-text: var(--ds-blue-700);
243
+ --identity-2: var(--ds-orange-100);
244
+ --identity-2-text: var(--ds-orange-700);
245
+ --identity-3: var(--ds-purple-100);
246
+ --identity-3-text: var(--ds-purple-700);
247
+ --identity-4: var(--ds-teal-100);
248
+ --identity-4-text: var(--ds-teal-700);
249
+ --identity-5: var(--ds-pink-100);
250
+ --identity-5-text: var(--ds-pink-700);
251
+ --identity-6: var(--ds-amber-100);
252
+ --identity-6-text: var(--ds-amber-700);
253
+ --identity-7: var(--ds-green-100);
254
+ --identity-7-text: var(--ds-green-700);
255
+ --identity-8: var(--ds-red-100);
256
+ --identity-8-text: var(--ds-red-700);
257
+ --sidebar-primary: var(--ds-primary);
258
+ --sidebar-primary-foreground: var(--ds-neutral-0);
259
+ --sidebar-border: var(--ds-neutral-150);
260
+ --sidebar-ring: var(--ds-expressive-border);
261
+ --surface: var(--ds-neutral-50);
262
+ --surface-hover: var(--ds-neutral-50);
263
+
264
+ /* ── non-colour primitives (DES-298) — values live here, roles only alias ── */
265
+ --ds-size-11: 0.6875rem;
266
+ --ds-size-12: 0.75rem;
267
+ --ds-size-13: 0.8125rem;
268
+ --ds-size-14: 0.875rem;
269
+ --ds-size-16: 1rem;
270
+ --ds-size-24: 1.5rem;
271
+ --ds-leading-tight: 1.2;
272
+ --ds-leading-snug: 1.35;
273
+ --ds-leading-normal: 1.4;
274
+ --ds-leading-relaxed: 1.45;
275
+ --ds-tracking-tight: -0.015em;
276
+ --ds-tracking-wide: 0.06em;
277
+ --ds-weight-regular: 400;
278
+ --ds-weight-medium: 500;
279
+ --ds-weight-semibold: 600;
280
+ --ds-space-4: 0.25rem;
281
+ --ds-space-8: 0.5rem;
282
+ --ds-space-12: 0.75rem;
283
+ --ds-space-16: 1rem;
284
+ --ds-space-24: 1.5rem;
285
+ --ds-radius-4: 4px;
286
+ --ds-radius-8: 8px;
287
+ --ds-radius-12: 12px;
288
+ --ds-radius-full: 9999px;
289
+ --ds-shadow-0: none;
290
+ --ds-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
291
+ --ds-shadow-2: 0 4px 12px rgb(0 0 0 / 0.11);
292
+ --ds-shadow-3: 0 16px 48px rgb(0 0 0 / 0.19);
293
+ --ds-duration-fast: 150ms;
294
+ --ds-duration-base: 200ms;
295
+ --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
296
+ --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
297
+
298
+ /* ── non-colour semantic roles (DES-298) ── */
299
+ /* text-page-title — The h1 of a route. One per page. */
300
+ --type-page-title: var(--ds-size-24);
301
+ --type-page-title-leading: var(--ds-leading-tight);
302
+ --type-page-title-weight: var(--ds-weight-semibold);
303
+ --type-page-title-tracking: var(--ds-tracking-tight);
304
+ /* text-heading — Belongs in the heading outline — render as <h2>/<h3>. Not a field or column label; that is text-eyebrow. */
305
+ --type-heading: var(--ds-size-14);
306
+ --type-heading-leading: var(--ds-leading-normal);
307
+ --type-heading-weight: var(--ds-weight-semibold);
308
+ /* text-body — Default. Prose, values, anything with no more specific role. 13px under compact density. */
309
+ --type-body: var(--ds-size-14);
310
+ --type-body-leading: var(--ds-leading-relaxed);
311
+ --type-body-weight: var(--ds-weight-regular);
312
+ /* text-label — Labels a form control. Inside <Label> or <label>. */
313
+ --type-label: var(--ds-size-14);
314
+ --type-label-leading: var(--ds-leading-normal);
315
+ --type-label-weight: var(--ds-weight-medium);
316
+ /* text-record-name — Names one record in a collection, with a caption line beneath — list row, search result, file entry. NOT in the heading outline. */
317
+ --type-record-name: var(--ds-size-14);
318
+ --type-record-name-leading: var(--ds-leading-relaxed);
319
+ --type-record-name-weight: var(--ds-weight-medium);
320
+ /* text-caption — Secondary information beside or below the thing it describes. Never the primary value. */
321
+ --type-caption: var(--ds-size-12);
322
+ --type-caption-leading: var(--ds-leading-snug);
323
+ --type-caption-weight: var(--ds-weight-medium);
324
+ /* text-eyebrow — An uppercase label naming the field, column or group inside a container — including table column headers. Not in the heading outline. */
325
+ --type-eyebrow: var(--ds-size-11);
326
+ --type-eyebrow-leading: var(--ds-leading-snug);
327
+ --type-eyebrow-weight: var(--ds-weight-semibold);
328
+ --type-eyebrow-tracking: var(--ds-tracking-wide);
329
+ /* text-control — Text inside an interactive control — button, menu item, tab, segmented control. */
330
+ --type-control: var(--ds-size-14);
331
+ --type-control-leading: var(--ds-leading-normal);
332
+ --type-control-weight: var(--ds-weight-medium);
333
+ /* text-control-sm — The small size of an interactive control. A variant of text-control, not a role of its own. */
334
+ --type-control-sm: var(--ds-size-12);
335
+ --type-control-sm-leading: var(--ds-leading-snug);
336
+ --type-control-sm-weight: var(--ds-weight-medium);
337
+ /* text-badge — Text inside a <Badge> or status pill. */
338
+ --type-badge: var(--ds-size-12);
339
+ --type-badge-leading: var(--ds-leading-snug);
340
+ --type-badge-weight: var(--ds-weight-medium);
341
+ /* text-code — An identifier, key, path or machine value. Inside code, pre, kbd. */
342
+ --type-code: var(--ds-size-12);
343
+ --type-code-leading: var(--ds-leading-snug);
344
+ --type-code-weight: var(--ds-weight-regular);
345
+ /* text-metric — The headline number of a KPI tile or stat block. */
346
+ --type-metric: var(--ds-size-24);
347
+ --type-metric-leading: var(--ds-leading-tight);
348
+ --type-metric-weight: var(--ds-weight-semibold);
349
+ --type-metric-tracking: var(--ds-tracking-tight);
350
+ --space-inline-tight: var(--ds-space-4); /* Parts of ONE object that must not read as separate items — icon and its label, a value and its unit, a control cluster. If the two sides could be clicked separately, use inline. */
351
+ --space-inline: var(--ds-space-8); /* Any gap between items in a row. The default horizontal gap. */
352
+ --space-inline-loose: var(--ds-space-12); /* Two distinct groups share a row. */
353
+ --space-compact-tight: var(--ds-space-4); /* Shell chrome whose density is the point — nav row, toolbar, popup shell, inline badge. Reach for compact instead as soon as the container holds prose. */
354
+ --space-compact: var(--ds-space-8); /* A dense container — table cell, list row, chip. */
355
+ --space-default: var(--ds-space-12); /* Default padding for a bordered container. */
356
+ --space-roomy: var(--ds-space-16); /* A container that is the focus of its view. */
357
+ --space-stack-tight: var(--ds-space-4); /* Rows so tightly bound they read as one block — a divider and what it separates, consecutive nav groups in dense chrome. Use stack as soon as each row stands on its own. */
358
+ --space-stack: var(--ds-space-8); /* Between rows inside a group. */
359
+ --space-stack-group: var(--ds-space-16); /* Between groups within a section. */
360
+ --space-stack-section: var(--ds-space-24); /* Between page sections. */
361
+ --corner-control: var(--ds-radius-full); /* Operable AND one line tall — button, toggle, tab, segmented control, input, select trigger. */
362
+ --corner-badge: var(--ds-radius-4); /* A label ABOUT something, not something you operate — badge, tag, count, code chip. */
363
+ --corner-surface-nested: var(--ds-radius-8); /* A container inside another container — inset well, code block in a card, thumbnail. */
364
+ --corner-surface: var(--ds-radius-12); /* A top-level container, or anything taller than one line — card, panel, dialog, menu surface, textarea. */
365
+ --elevation-flat: var(--ds-shadow-0); /* Sits in the page flow, flush with its ground. */
366
+ --elevation-resting: var(--ds-shadow-1); /* A card that lifts off the page but never moves. */
367
+ --elevation-popover: var(--ds-shadow-2); /* Opens over the page and closes on dismiss — menu, select, tooltip. */
368
+ --elevation-modal: var(--ds-shadow-3); /* Blocks the page behind it — dialog, sheet. */
369
+ --motion-hover-duration: var(--ds-duration-fast); /* A state change under the cursor — colour, border, background. */
370
+ --motion-hover-ease: var(--ds-ease-out);
371
+ --motion-enter-duration: var(--ds-duration-base); /* Something appears — popover, dialog, drawer, toast. */
372
+ --motion-enter-ease: var(--ds-ease-out);
373
+ --motion-exit-duration: var(--ds-duration-fast); /* Something leaves. Exits are quicker than entrances. */
374
+ --motion-exit-ease: var(--ds-ease-in);
375
+
376
+ /* ── legacy typography revaluation (DES-93) ── */
377
+ --text-lg: var(--ds-size-24);
378
+ --text-xl: var(--ds-size-24);
379
+ --text-2xl: var(--ds-size-24);
380
+ --text-3xl: var(--ds-size-24);
381
+ --text-4xl: var(--ds-size-24);
382
+ --text-5xl: var(--ds-size-24);
383
+ --text-6xl: var(--ds-size-24);
384
+ --text-7xl: var(--ds-size-24);
385
+ --text-8xl: var(--ds-size-24);
386
+ --text-9xl: var(--ds-size-24);
387
+ }
388
+
389
+ :root[data-tokens="v2"][data-density="compact"], :root[data-tokens="v2"] [data-density="compact"] {
390
+ /* Compact re-aliases roles; it does NOT introduce names. The 12px caption
391
+ floor is deliberately absent — stepping it to 11 would regenerate the
392
+ 2,215 sub-12px sites by construction. */
393
+ --type-body: var(--ds-size-13);
394
+ --type-record-name: var(--ds-size-13);
395
+ --space-default: var(--ds-space-8);
396
+ --space-inline: var(--ds-space-4);
397
+ }
398
+
399
+ :root[data-tokens="v2"] [data-density="default"] {
400
+ /* Overlay reset — a dialog opened from a dense table is not itself dense.
401
+ Same roles, base values, derived from the role definitions so this block
402
+ cannot drift from what it resets. */
403
+ --type-body: var(--ds-size-14);
404
+ --type-record-name: var(--ds-size-14);
405
+ --space-default: var(--ds-space-12);
406
+ --space-inline: var(--ds-space-8);
407
+ }
408
+
409
+ .dark[data-tokens="v2"] {
410
+ color-scheme: dark;
411
+ /* brand-accent primitives differ in dark; ramps are mode-independent */
412
+ --ds-primary: oklch(0.920 0.008 95.4);
413
+ --ds-primary-hover: oklch(0.950 0.008 95.4);
414
+ --ds-expressive: oklch(0.720 0.139 172.7);
415
+ --ds-expressive-tint: oklch(0.280 0.035 172.7);
416
+ --ds-expressive-border: oklch(0.500 0.096 172.7);
417
+ --ds-expressive-text: oklch(0.750 0.120 172.7);
418
+ /* ── semantic roles: pure aliases onto primitives ── */
419
+ --background: var(--ds-neutral-925);
420
+ --foreground: var(--ds-neutral-200);
421
+ --card: var(--ds-neutral-900);
422
+ --card-foreground: var(--ds-neutral-200);
423
+ --popover: var(--ds-neutral-825);
424
+ --popover-foreground: var(--ds-neutral-200);
425
+ --shell: var(--ds-neutral-990);
426
+ --sidebar: var(--ds-neutral-970);
427
+ --sidebar-foreground: var(--ds-neutral-200);
428
+ --sidebar-accent: var(--ds-neutral-900);
429
+ --sidebar-accent-foreground: var(--ds-neutral-200);
430
+ --primary: var(--ds-primary);
431
+ --primary-foreground: var(--ds-neutral-950);
432
+ --primary-hover: var(--ds-primary-hover);
433
+ --secondary: var(--ds-neutral-875);
434
+ --secondary-foreground: var(--ds-neutral-200);
435
+ --muted: var(--ds-neutral-875);
436
+ --muted-foreground: var(--ds-neutral-500);
437
+ --accent: var(--ds-neutral-800);
438
+ --accent-foreground: var(--ds-neutral-200);
439
+ --expressive: var(--ds-expressive);
440
+ --expressive-tint: var(--ds-expressive-tint);
441
+ --expressive-border: var(--ds-expressive-border);
442
+ --expressive-text: var(--ds-expressive-text);
443
+ --destructive: var(--ds-red-500);
444
+ --destructive-foreground: var(--ds-neutral-0);
445
+ --border: color-mix(in oklab, var(--ds-neutral-0) 6%, transparent);
446
+ --border-strong: var(--ds-neutral-700);
447
+ --input: color-mix(in oklab, var(--ds-neutral-0) 6%, transparent);
448
+ --ring: var(--ds-expressive-border);
449
+ --text-primary: var(--ds-neutral-200);
450
+ --text-secondary: var(--ds-neutral-500);
451
+ --text-muted: var(--ds-neutral-600);
452
+ --text-placeholder: var(--ds-neutral-600);
453
+ --text-disabled: var(--ds-neutral-700);
454
+ --text-on-color: var(--ds-neutral-0);
455
+ --field: var(--ds-neutral-900);
456
+ --field-hover: var(--ds-neutral-875);
457
+ --field-disabled: var(--ds-neutral-950);
458
+ --link: var(--ds-expressive-400);
459
+ --link-hover: var(--ds-expressive-300);
460
+ --link-visited: var(--ds-expressive-500);
461
+ --icon-primary: var(--ds-neutral-200);
462
+ --icon-secondary: var(--ds-neutral-500);
463
+ --icon-on-color: var(--ds-neutral-0);
464
+ --icon-disabled: var(--ds-neutral-700);
465
+ --inverse: var(--ds-neutral-100);
466
+ --inverse-foreground: var(--ds-neutral-900);
467
+ --overlay: color-mix(in oklab, var(--ds-neutral-950) 50%, transparent);
468
+ --skeleton: var(--ds-neutral-875);
469
+ --skeleton-foreground: var(--ds-neutral-825);
470
+ --success: var(--ds-green-500);
471
+ --success-foreground: var(--ds-neutral-950);
472
+ --success-tint: var(--ds-green-900);
473
+ --success-text: var(--ds-green-300);
474
+ --warning: var(--ds-amber-500);
475
+ --warning-foreground: var(--ds-neutral-950);
476
+ --warning-tint: var(--ds-amber-900);
477
+ --warning-text: var(--ds-amber-300);
478
+ --danger: var(--ds-red-500);
479
+ --danger-foreground: var(--ds-neutral-0);
480
+ --danger-tint: var(--ds-red-900);
481
+ --danger-text: var(--ds-red-300);
482
+ --info: var(--ds-blue-500);
483
+ --info-foreground: var(--ds-neutral-950);
484
+ --info-tint: var(--ds-blue-900);
485
+ --info-text: var(--ds-blue-300);
486
+ --chart-1: var(--ds-expressive-500);
487
+ --chart-1-soft: var(--ds-expressive-900);
488
+ --chart-2: var(--ds-blue-200);
489
+ --chart-2-soft: var(--ds-blue-900);
490
+ --chart-3: var(--ds-orange-400);
491
+ --chart-3-soft: var(--ds-orange-900);
492
+ --chart-4: var(--ds-purple-600);
493
+ --chart-4-soft: var(--ds-purple-900);
494
+ --chart-5: var(--ds-neutral-500);
495
+ --chart-5-soft: var(--ds-neutral-900);
496
+ --chart-success: var(--ds-green-400);
497
+ --chart-success-soft: var(--ds-green-900);
498
+ --chart-danger: var(--ds-red-400);
499
+ --chart-danger-soft: var(--ds-red-900);
500
+ --chart-mono-1: var(--ds-functional-800);
501
+ --chart-mono-2: var(--ds-functional-600);
502
+ --chart-mono-3: var(--ds-functional-400);
503
+ --chart-mono-4: var(--ds-functional-300);
504
+ --chart-mono-5: var(--ds-functional-200);
505
+ --chart-adjacent-1: var(--ds-teal-400);
506
+ --chart-adjacent-1-soft: var(--ds-teal-900);
507
+ --chart-adjacent-2: var(--ds-blue-400);
508
+ --chart-adjacent-2-soft: var(--ds-blue-900);
509
+ --chart-adjacent-3: var(--ds-amber-400);
510
+ --chart-adjacent-3-soft: var(--ds-amber-900);
511
+ --chart-adjacent-4: var(--ds-orange-400);
512
+ --chart-adjacent-4-soft: var(--ds-orange-900);
513
+ --chart-adjacent-5: var(--ds-purple-400);
514
+ --chart-adjacent-5-soft: var(--ds-purple-900);
515
+ --identity-1: var(--ds-blue-900);
516
+ --identity-1-text: var(--ds-blue-300);
517
+ --identity-2: var(--ds-orange-900);
518
+ --identity-2-text: var(--ds-orange-300);
519
+ --identity-3: var(--ds-purple-900);
520
+ --identity-3-text: var(--ds-purple-300);
521
+ --identity-4: var(--ds-teal-900);
522
+ --identity-4-text: var(--ds-teal-300);
523
+ --identity-5: var(--ds-pink-900);
524
+ --identity-5-text: var(--ds-pink-300);
525
+ --identity-6: var(--ds-amber-900);
526
+ --identity-6-text: var(--ds-amber-300);
527
+ --identity-7: var(--ds-green-900);
528
+ --identity-7-text: var(--ds-green-300);
529
+ --identity-8: var(--ds-red-900);
530
+ --identity-8-text: var(--ds-red-300);
531
+ --sidebar-primary: var(--ds-primary);
532
+ --sidebar-primary-foreground: var(--ds-neutral-950);
533
+ --sidebar-border: color-mix(in oklab, var(--ds-neutral-0) 6%, transparent);
534
+ --sidebar-ring: var(--ds-expressive-border);
535
+ --surface: var(--ds-neutral-925);
536
+ --surface-hover: var(--ds-neutral-800);
537
+ }