@neuravision/construct 1.1.6 → 1.3.1
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/components/chart.css +369 -0
- package/components/index.css +2 -0
- package/components/tree.css +328 -0
- package/docs/guidelines.md +59 -0
- package/package.json +1 -1
- package/tokens/tokens.css +43 -3
- package/tokens/tokens.js +53 -3
- package/tokens/tokens.json +43 -3
- package/tokens/tokens.ts +53 -3
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
/* ── Chart ──
|
|
2
|
+
*
|
|
3
|
+
* Framework-agnostic styling skin for SVG data-visualisation primitives
|
|
4
|
+
* (line / area, bar, donut, sparkline, gauge). The geometry (path data,
|
|
5
|
+
* scales, arcs) is produced by the consuming layer (e.g. the ng-construct
|
|
6
|
+
* `af-*-chart` components); this file only themes the resulting SVG and the
|
|
7
|
+
* accessible data-table fallback that every chart ships with.
|
|
8
|
+
*
|
|
9
|
+
* Series colour is carried via `color` on a `.ct-chart__series--N` element and
|
|
10
|
+
* read back through `currentColor`, so line, fill, dots and legend swatch all
|
|
11
|
+
* share a single source of truth and consumers can override one custom
|
|
12
|
+
* property to re-theme a series.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
.ct-chart {
|
|
16
|
+
--ct-chart-grid: var(--color-border-subtle);
|
|
17
|
+
--ct-chart-axis: var(--color-border-default);
|
|
18
|
+
--ct-chart-label: var(--color-text-muted);
|
|
19
|
+
--ct-chart-track: var(--color-bg-muted);
|
|
20
|
+
--ct-chart-area-opacity: 0.16;
|
|
21
|
+
--ct-chart-line-width: 2px;
|
|
22
|
+
--ct-chart-gauge-width: 14px;
|
|
23
|
+
--ct-chart-radius: var(--radius-xs);
|
|
24
|
+
|
|
25
|
+
--ct-chart-series-1: var(--color-chart-series-1);
|
|
26
|
+
--ct-chart-series-2: var(--color-chart-series-2);
|
|
27
|
+
--ct-chart-series-3: var(--color-chart-series-3);
|
|
28
|
+
--ct-chart-series-4: var(--color-chart-series-4);
|
|
29
|
+
--ct-chart-series-5: var(--color-chart-series-5);
|
|
30
|
+
--ct-chart-series-6: var(--color-chart-series-6);
|
|
31
|
+
--ct-chart-series-7: var(--color-chart-series-7);
|
|
32
|
+
--ct-chart-series-8: var(--color-chart-series-8);
|
|
33
|
+
|
|
34
|
+
display: block;
|
|
35
|
+
inline-size: 100%;
|
|
36
|
+
color: var(--color-text-primary);
|
|
37
|
+
font-family: var(--font-family-body);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ct-chart__figure {
|
|
41
|
+
margin: 0;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: var(--space-5);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ct-chart__svg {
|
|
48
|
+
display: block;
|
|
49
|
+
inline-size: 100%;
|
|
50
|
+
block-size: auto;
|
|
51
|
+
overflow: visible;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* ── Series colour mapping ── */
|
|
55
|
+
.ct-chart__series--1 { color: var(--ct-chart-series-1); }
|
|
56
|
+
.ct-chart__series--2 { color: var(--ct-chart-series-2); }
|
|
57
|
+
.ct-chart__series--3 { color: var(--ct-chart-series-3); }
|
|
58
|
+
.ct-chart__series--4 { color: var(--ct-chart-series-4); }
|
|
59
|
+
.ct-chart__series--5 { color: var(--ct-chart-series-5); }
|
|
60
|
+
.ct-chart__series--6 { color: var(--ct-chart-series-6); }
|
|
61
|
+
.ct-chart__series--7 { color: var(--ct-chart-series-7); }
|
|
62
|
+
.ct-chart__series--8 { color: var(--ct-chart-series-8); }
|
|
63
|
+
|
|
64
|
+
/* ── Axes & grid ── */
|
|
65
|
+
.ct-chart__grid-line {
|
|
66
|
+
stroke: var(--ct-chart-grid);
|
|
67
|
+
stroke-width: 1px;
|
|
68
|
+
shape-rendering: crispEdges;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.ct-chart__axis-line {
|
|
72
|
+
stroke: var(--ct-chart-axis);
|
|
73
|
+
stroke-width: 1px;
|
|
74
|
+
shape-rendering: crispEdges;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.ct-chart__tick-label,
|
|
78
|
+
.ct-chart__axis-title {
|
|
79
|
+
fill: var(--ct-chart-label);
|
|
80
|
+
font-size: var(--font-size-xs);
|
|
81
|
+
font-family: var(--font-family-body);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.ct-chart__axis-title {
|
|
85
|
+
font-weight: var(--font-weight-medium);
|
|
86
|
+
fill: var(--color-text-secondary);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ── Line & area ── */
|
|
90
|
+
.ct-chart__line {
|
|
91
|
+
fill: none;
|
|
92
|
+
stroke: currentColor;
|
|
93
|
+
stroke-width: var(--ct-chart-line-width);
|
|
94
|
+
stroke-linejoin: round;
|
|
95
|
+
stroke-linecap: round;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ct-chart__area {
|
|
99
|
+
fill: currentColor;
|
|
100
|
+
opacity: var(--ct-chart-area-opacity);
|
|
101
|
+
stroke: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ct-chart__dot {
|
|
105
|
+
fill: currentColor;
|
|
106
|
+
stroke: var(--color-bg-elevated);
|
|
107
|
+
stroke-width: 1.5px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.ct-chart__dot--hollow {
|
|
111
|
+
fill: var(--color-bg-elevated);
|
|
112
|
+
stroke: currentColor;
|
|
113
|
+
stroke-width: var(--ct-chart-line-width);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* ── Bars ── */
|
|
117
|
+
.ct-chart__bar {
|
|
118
|
+
fill: currentColor;
|
|
119
|
+
rx: var(--ct-chart-radius);
|
|
120
|
+
transition: opacity var(--duration-fast) var(--easing-standard);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.ct-chart__bar:hover {
|
|
124
|
+
opacity: 0.85;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* ── Donut / pie ── */
|
|
128
|
+
.ct-chart__slice {
|
|
129
|
+
fill: currentColor;
|
|
130
|
+
stroke: var(--color-bg-elevated);
|
|
131
|
+
stroke-width: 2px;
|
|
132
|
+
transition: opacity var(--duration-fast) var(--easing-standard);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ct-chart__slice:hover {
|
|
136
|
+
opacity: 0.85;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Focus parity for interactive marks: any chart shape the consumer makes
|
|
140
|
+
* keyboard-focusable (tabindex) gets the same visible affordance as :hover. */
|
|
141
|
+
.ct-chart__bar:focus-visible,
|
|
142
|
+
.ct-chart__slice:focus-visible,
|
|
143
|
+
.ct-chart__dot:focus-visible {
|
|
144
|
+
outline: var(--border-medium) solid var(--color-focus-ring);
|
|
145
|
+
outline-offset: 1px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.ct-chart__donut-value {
|
|
149
|
+
fill: var(--color-text-primary);
|
|
150
|
+
font-size: var(--font-size-2xl);
|
|
151
|
+
font-weight: var(--font-weight-bold);
|
|
152
|
+
font-family: var(--font-family-heading);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.ct-chart__donut-label {
|
|
156
|
+
fill: var(--color-text-muted);
|
|
157
|
+
font-size: var(--font-size-xs);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* ── Gauge ── */
|
|
161
|
+
.ct-chart__gauge-track {
|
|
162
|
+
fill: none;
|
|
163
|
+
stroke: var(--ct-chart-track);
|
|
164
|
+
stroke-width: var(--ct-chart-gauge-width);
|
|
165
|
+
stroke-linecap: round;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.ct-chart__gauge-value {
|
|
169
|
+
fill: none;
|
|
170
|
+
stroke: currentColor;
|
|
171
|
+
stroke-width: var(--ct-chart-gauge-width);
|
|
172
|
+
stroke-linecap: round;
|
|
173
|
+
transition: stroke-dashoffset var(--duration-normal) var(--easing-standard);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.ct-chart__gauge-value--default { color: var(--color-brand-primary); }
|
|
177
|
+
.ct-chart__gauge-value--success { color: var(--color-state-success); }
|
|
178
|
+
.ct-chart__gauge-value--warning { color: var(--color-state-warning); }
|
|
179
|
+
.ct-chart__gauge-value--danger { color: var(--color-state-danger); }
|
|
180
|
+
|
|
181
|
+
.ct-chart__gauge-text {
|
|
182
|
+
fill: var(--color-text-primary);
|
|
183
|
+
font-size: var(--font-size-3xl);
|
|
184
|
+
font-weight: var(--font-weight-bold);
|
|
185
|
+
font-family: var(--font-family-heading);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.ct-chart__gauge-caption {
|
|
189
|
+
fill: var(--color-text-muted);
|
|
190
|
+
font-size: var(--font-size-xs);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* ── Sparkline ── */
|
|
194
|
+
.ct-chart--sparkline {
|
|
195
|
+
inline-size: auto;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.ct-chart--sparkline .ct-chart__svg {
|
|
199
|
+
inline-size: auto;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Compact, inline empty state for sparklines (overrides the card-sized default). */
|
|
203
|
+
.ct-chart--sparkline .ct-chart__empty {
|
|
204
|
+
display: inline;
|
|
205
|
+
min-block-size: 0;
|
|
206
|
+
padding: 0;
|
|
207
|
+
background: none;
|
|
208
|
+
border: 0;
|
|
209
|
+
font-size: var(--font-size-xs);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* ── Legend ── */
|
|
213
|
+
.ct-chart__legend {
|
|
214
|
+
display: flex;
|
|
215
|
+
flex-wrap: wrap;
|
|
216
|
+
gap: var(--space-4) var(--space-6);
|
|
217
|
+
margin: 0;
|
|
218
|
+
padding: 0;
|
|
219
|
+
list-style: none;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.ct-chart__legend-item {
|
|
223
|
+
display: inline-flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
gap: var(--space-3);
|
|
226
|
+
font-size: var(--font-size-sm);
|
|
227
|
+
color: var(--color-text-secondary);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.ct-chart__legend-marker {
|
|
231
|
+
inline-size: 12px;
|
|
232
|
+
block-size: 12px;
|
|
233
|
+
flex: none;
|
|
234
|
+
border-radius: var(--radius-xs);
|
|
235
|
+
background: currentColor;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.ct-chart__legend-marker--line {
|
|
239
|
+
block-size: 3px;
|
|
240
|
+
border-radius: var(--radius-pill);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* ── Accessible data-table fallback ──
|
|
244
|
+
* Hidden visually by default; revealed when the consumer toggles
|
|
245
|
+
* `.ct-chart--show-table`. Always present in the DOM for assistive tech. */
|
|
246
|
+
.ct-chart__table-wrap {
|
|
247
|
+
position: absolute;
|
|
248
|
+
inline-size: 1px;
|
|
249
|
+
block-size: 1px;
|
|
250
|
+
margin: -1px;
|
|
251
|
+
padding: 0;
|
|
252
|
+
overflow: hidden;
|
|
253
|
+
clip: rect(0 0 0 0);
|
|
254
|
+
white-space: nowrap;
|
|
255
|
+
border: 0;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.ct-chart--show-table .ct-chart__table-wrap {
|
|
259
|
+
position: static;
|
|
260
|
+
inline-size: auto;
|
|
261
|
+
block-size: auto;
|
|
262
|
+
margin: 0;
|
|
263
|
+
overflow: visible;
|
|
264
|
+
clip: auto;
|
|
265
|
+
white-space: normal;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.ct-chart__table {
|
|
269
|
+
inline-size: 100%;
|
|
270
|
+
border-collapse: collapse;
|
|
271
|
+
font-size: var(--font-size-sm);
|
|
272
|
+
text-align: start;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.ct-chart__table caption {
|
|
276
|
+
text-align: start;
|
|
277
|
+
color: var(--color-text-muted);
|
|
278
|
+
padding-block-end: var(--space-3);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.ct-chart__table th,
|
|
282
|
+
.ct-chart__table td {
|
|
283
|
+
border: var(--border-thin) solid var(--color-border-subtle);
|
|
284
|
+
padding: var(--space-3) var(--space-4);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.ct-chart__table th {
|
|
288
|
+
background: var(--color-bg-muted);
|
|
289
|
+
font-weight: var(--font-weight-semibold);
|
|
290
|
+
text-align: start;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.ct-chart__table td {
|
|
294
|
+
font-variant-numeric: tabular-nums;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* ── Toggle button for the table fallback ── */
|
|
298
|
+
.ct-chart__toolbar {
|
|
299
|
+
display: flex;
|
|
300
|
+
justify-content: flex-end;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.ct-chart__toggle {
|
|
304
|
+
appearance: none;
|
|
305
|
+
background: transparent;
|
|
306
|
+
border: var(--border-thin) solid var(--color-border-default);
|
|
307
|
+
border-radius: var(--radius-control);
|
|
308
|
+
color: var(--color-text-secondary);
|
|
309
|
+
font: inherit;
|
|
310
|
+
font-size: var(--font-size-sm);
|
|
311
|
+
min-block-size: 24px;
|
|
312
|
+
padding: var(--space-2) var(--space-4);
|
|
313
|
+
cursor: pointer;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.ct-chart__toggle:hover {
|
|
317
|
+
background: var(--color-bg-muted);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.ct-chart__toggle:focus-visible {
|
|
321
|
+
outline: var(--border-medium) solid var(--color-focus-ring);
|
|
322
|
+
outline-offset: 2px;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* ── Empty state ── */
|
|
326
|
+
.ct-chart__empty {
|
|
327
|
+
display: flex;
|
|
328
|
+
align-items: center;
|
|
329
|
+
justify-content: center;
|
|
330
|
+
min-block-size: 120px;
|
|
331
|
+
padding: var(--space-7);
|
|
332
|
+
color: var(--color-text-muted);
|
|
333
|
+
font-size: var(--font-size-sm);
|
|
334
|
+
text-align: center;
|
|
335
|
+
background: var(--color-bg-surface);
|
|
336
|
+
border: var(--border-thin) dashed var(--color-border-subtle);
|
|
337
|
+
border-radius: var(--radius-card);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* ── Motion & high-contrast ── */
|
|
341
|
+
@media (prefers-reduced-motion: reduce) {
|
|
342
|
+
.ct-chart__bar,
|
|
343
|
+
.ct-chart__slice,
|
|
344
|
+
.ct-chart__gauge-value {
|
|
345
|
+
transition: none;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
@media (forced-colors: active) {
|
|
350
|
+
/* Data marks encode meaning through colour, so they opt out of the forced
|
|
351
|
+
* palette to stay internally consistent — otherwise a coloured legend would
|
|
352
|
+
* describe monochrome lines. The always-present data-table fallback remains
|
|
353
|
+
* the fully forced-colors-compliant path to the underlying values. */
|
|
354
|
+
.ct-chart__line,
|
|
355
|
+
.ct-chart__area,
|
|
356
|
+
.ct-chart__dot,
|
|
357
|
+
.ct-chart__bar,
|
|
358
|
+
.ct-chart__slice,
|
|
359
|
+
.ct-chart__legend-marker,
|
|
360
|
+
.ct-chart__gauge-track,
|
|
361
|
+
.ct-chart__gauge-value {
|
|
362
|
+
forced-color-adjust: none;
|
|
363
|
+
}
|
|
364
|
+
/* Chrome (grid & axes) follows the user's forced palette. */
|
|
365
|
+
.ct-chart__grid-line,
|
|
366
|
+
.ct-chart__axis-line {
|
|
367
|
+
stroke: GrayText;
|
|
368
|
+
}
|
|
369
|
+
}
|
package/components/index.css
CHANGED
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
/* ── Tree (WAI-ARIA Tree View) ─────────────────────── */
|
|
2
|
+
|
|
3
|
+
.ct-tree {
|
|
4
|
+
--ct-tree-indent: 1.5rem;
|
|
5
|
+
--ct-tree-row-height: 2rem;
|
|
6
|
+
--ct-tree-row-padding-y: var(--space-2);
|
|
7
|
+
--ct-tree-row-padding-x: var(--space-4);
|
|
8
|
+
--ct-tree-row-gap: var(--space-3);
|
|
9
|
+
--ct-tree-row-radius: var(--radius-sm);
|
|
10
|
+
--ct-tree-row-bg: transparent;
|
|
11
|
+
--ct-tree-row-bg-hover: var(--color-bg-muted);
|
|
12
|
+
--ct-tree-row-bg-selected: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
|
|
13
|
+
--ct-tree-row-color: var(--color-text-primary);
|
|
14
|
+
--ct-tree-row-color-selected: var(--color-brand-primary);
|
|
15
|
+
|
|
16
|
+
--ct-tree-guide-color: var(--color-border-subtle);
|
|
17
|
+
--ct-tree-guide-width: 1px;
|
|
18
|
+
|
|
19
|
+
--ct-tree-toggle-size: 1rem;
|
|
20
|
+
--ct-tree-toggle-color: var(--color-text-muted);
|
|
21
|
+
--ct-tree-toggle-color-hover: var(--color-text-primary);
|
|
22
|
+
--ct-tree-toggle-radius: var(--radius-xs);
|
|
23
|
+
|
|
24
|
+
--ct-tree-orphan-color: var(--color-state-warning-text);
|
|
25
|
+
--ct-tree-orphan-bg: var(--color-state-warning-surface);
|
|
26
|
+
--ct-tree-orphan-border: var(--color-state-warning-border);
|
|
27
|
+
|
|
28
|
+
--ct-tree-actions-opacity: 0;
|
|
29
|
+
|
|
30
|
+
display: block;
|
|
31
|
+
margin: 0;
|
|
32
|
+
padding: 0;
|
|
33
|
+
list-style: none;
|
|
34
|
+
font-size: var(--font-size-sm);
|
|
35
|
+
font-family: var(--font-family-body);
|
|
36
|
+
color: var(--ct-tree-row-color);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ct-tree__group {
|
|
40
|
+
display: block;
|
|
41
|
+
margin: 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
list-style: none;
|
|
44
|
+
position: relative;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ct-tree__node {
|
|
48
|
+
display: block;
|
|
49
|
+
position: relative;
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ct-tree__node[aria-expanded='false'] > .ct-tree__group {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* ── Row (focus + click target) ── */
|
|
59
|
+
|
|
60
|
+
.ct-tree__row {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: var(--ct-tree-row-gap);
|
|
64
|
+
min-height: var(--ct-tree-row-height);
|
|
65
|
+
padding-block: var(--ct-tree-row-padding-y);
|
|
66
|
+
padding-inline-end: var(--ct-tree-row-padding-x);
|
|
67
|
+
/* Indent: --ct-level is 1-based and set inline by consumers */
|
|
68
|
+
padding-inline-start: calc(
|
|
69
|
+
var(--ct-tree-row-padding-x) +
|
|
70
|
+
var(--ct-tree-indent) * (var(--ct-level, 1) - 1)
|
|
71
|
+
);
|
|
72
|
+
border-radius: var(--ct-tree-row-radius);
|
|
73
|
+
background: var(--ct-tree-row-bg);
|
|
74
|
+
color: inherit;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
user-select: none;
|
|
77
|
+
transition: background var(--duration-fast) var(--easing-standard),
|
|
78
|
+
color var(--duration-fast) var(--easing-standard);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media (hover: hover) {
|
|
82
|
+
.ct-tree__row:hover {
|
|
83
|
+
background: var(--ct-tree-row-bg-hover);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ct-tree__row:hover .ct-tree__actions {
|
|
87
|
+
--ct-tree-actions-opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Focus lives on the `<li role="treeitem">`; outline is rendered on the row */
|
|
92
|
+
.ct-tree__node:focus {
|
|
93
|
+
outline: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ct-tree__node:focus-visible > .ct-tree__row {
|
|
97
|
+
outline: 2px solid var(--color-focus-ring);
|
|
98
|
+
outline-offset: -2px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* ── Toggle (chevron) ── */
|
|
102
|
+
|
|
103
|
+
.ct-tree__toggle,
|
|
104
|
+
.ct-tree__spacer {
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
inline-size: var(--ct-tree-toggle-size);
|
|
107
|
+
block-size: var(--ct-tree-toggle-size);
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ct-tree__toggle {
|
|
114
|
+
padding: 0;
|
|
115
|
+
margin: 0;
|
|
116
|
+
background: transparent;
|
|
117
|
+
border: none;
|
|
118
|
+
border-radius: var(--ct-tree-toggle-radius);
|
|
119
|
+
color: var(--ct-tree-toggle-color);
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
transition: color var(--duration-fast) var(--easing-standard),
|
|
122
|
+
background var(--duration-fast) var(--easing-standard);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@media (hover: hover) {
|
|
126
|
+
.ct-tree__toggle:hover {
|
|
127
|
+
color: var(--ct-tree-toggle-color-hover);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.ct-tree__chevron {
|
|
132
|
+
inline-size: 0.75rem;
|
|
133
|
+
block-size: 0.75rem;
|
|
134
|
+
transition: transform var(--duration-fast) var(--easing-standard);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.ct-tree__node[aria-expanded='true'] > .ct-tree__row .ct-tree__chevron {
|
|
138
|
+
transform: rotate(90deg);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[dir='rtl'] .ct-tree__chevron {
|
|
142
|
+
transform: rotate(180deg);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[dir='rtl'] .ct-tree__node[aria-expanded='true'] > .ct-tree__row .ct-tree__chevron {
|
|
146
|
+
transform: rotate(90deg);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ── Content / actions slots ── */
|
|
150
|
+
|
|
151
|
+
.ct-tree__content {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: var(--space-3);
|
|
155
|
+
min-inline-size: 0;
|
|
156
|
+
flex: 1;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
text-overflow: ellipsis;
|
|
159
|
+
white-space: nowrap;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.ct-tree__content > svg {
|
|
163
|
+
flex-shrink: 0;
|
|
164
|
+
inline-size: var(--icon-sm);
|
|
165
|
+
block-size: var(--icon-sm);
|
|
166
|
+
color: var(--color-text-secondary);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.ct-tree__label {
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
text-overflow: ellipsis;
|
|
172
|
+
white-space: nowrap;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.ct-tree__label mark {
|
|
176
|
+
background: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
|
|
177
|
+
color: inherit;
|
|
178
|
+
border-radius: 2px;
|
|
179
|
+
padding-inline: 1px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.ct-tree__actions {
|
|
183
|
+
display: inline-flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
gap: var(--space-2);
|
|
186
|
+
flex-shrink: 0;
|
|
187
|
+
margin-inline-start: auto;
|
|
188
|
+
opacity: var(--ct-tree-actions-opacity);
|
|
189
|
+
transition: opacity var(--duration-fast) var(--easing-standard);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.ct-tree__node:focus-visible > .ct-tree__row .ct-tree__actions,
|
|
193
|
+
.ct-tree__row:focus-within .ct-tree__actions {
|
|
194
|
+
--ct-tree-actions-opacity: 1;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* ── Selection ── */
|
|
198
|
+
|
|
199
|
+
.ct-tree__node[aria-selected='true'] > .ct-tree__row,
|
|
200
|
+
.ct-tree__node--selected > .ct-tree__row {
|
|
201
|
+
background: var(--ct-tree-row-bg-selected);
|
|
202
|
+
color: var(--ct-tree-row-color-selected);
|
|
203
|
+
font-weight: var(--font-weight-semibold);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.ct-tree__node[aria-selected='true'] > .ct-tree__row .ct-tree__content > svg,
|
|
207
|
+
.ct-tree__node--selected > .ct-tree__row .ct-tree__content > svg {
|
|
208
|
+
color: var(--ct-tree-row-color-selected);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* ── Disabled ── */
|
|
212
|
+
|
|
213
|
+
.ct-tree__node[aria-disabled='true'] > .ct-tree__row {
|
|
214
|
+
opacity: var(--opacity-disabled);
|
|
215
|
+
cursor: not-allowed;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.ct-tree__node[aria-disabled='true'] > .ct-tree__row:hover {
|
|
219
|
+
background: var(--ct-tree-row-bg);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* ── Async loading (aria-busy on the `<li role="treeitem">`) ── */
|
|
223
|
+
|
|
224
|
+
.ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__chevron {
|
|
225
|
+
animation: ct-spin var(--duration-xslow) linear infinite;
|
|
226
|
+
transform-origin: center;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__toggle {
|
|
230
|
+
pointer-events: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* ── Orphan state ── */
|
|
234
|
+
|
|
235
|
+
.ct-tree__node--orphan > .ct-tree__row {
|
|
236
|
+
--ct-tree-row-bg: var(--ct-tree-orphan-bg);
|
|
237
|
+
border: 1px dashed var(--ct-tree-orphan-border);
|
|
238
|
+
color: var(--ct-tree-orphan-color);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.ct-tree__node--orphan > .ct-tree__row .ct-tree__content > svg {
|
|
242
|
+
color: var(--ct-tree-orphan-color);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* ── Modifier: indent guides ── */
|
|
246
|
+
|
|
247
|
+
.ct-tree--guides .ct-tree__group::before {
|
|
248
|
+
content: '';
|
|
249
|
+
position: absolute;
|
|
250
|
+
inset-block: 0;
|
|
251
|
+
/* Anchor guide under parent's chevron centre */
|
|
252
|
+
inset-inline-start: calc(
|
|
253
|
+
var(--ct-tree-row-padding-x) +
|
|
254
|
+
var(--ct-tree-indent) * (var(--ct-parent-level, 0)) +
|
|
255
|
+
var(--ct-tree-toggle-size) / 2
|
|
256
|
+
);
|
|
257
|
+
inline-size: var(--ct-tree-guide-width);
|
|
258
|
+
background: var(--ct-tree-guide-color);
|
|
259
|
+
pointer-events: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* ── Modifier: dense ── */
|
|
263
|
+
|
|
264
|
+
.ct-tree--dense {
|
|
265
|
+
--ct-tree-row-height: 1.5rem;
|
|
266
|
+
--ct-tree-row-padding-y: var(--space-1);
|
|
267
|
+
--ct-tree-row-gap: var(--space-2);
|
|
268
|
+
font-size: var(--font-size-xs);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* ── Modifier: bordered (optional surface variant) ── */
|
|
272
|
+
|
|
273
|
+
.ct-tree--bordered {
|
|
274
|
+
border: var(--border-thin) solid var(--color-border-subtle);
|
|
275
|
+
border-radius: var(--radius-md);
|
|
276
|
+
padding: var(--space-2);
|
|
277
|
+
background: var(--color-bg-elevated);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* ── Reduced motion ── */
|
|
281
|
+
|
|
282
|
+
@media (prefers-reduced-motion: reduce) {
|
|
283
|
+
.ct-tree__row,
|
|
284
|
+
.ct-tree__chevron,
|
|
285
|
+
.ct-tree__toggle,
|
|
286
|
+
.ct-tree__actions {
|
|
287
|
+
transition: none;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.ct-tree__node[aria-busy='true'] > .ct-tree__row .ct-tree__chevron {
|
|
291
|
+
animation: none;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* ── Forced colors / High-contrast ── */
|
|
296
|
+
|
|
297
|
+
@media (forced-colors: active) {
|
|
298
|
+
.ct-tree__row {
|
|
299
|
+
border: 1px solid transparent;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.ct-tree__node:focus-visible > .ct-tree__row {
|
|
303
|
+
outline: 2px solid Highlight;
|
|
304
|
+
outline-offset: -2px;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.ct-tree__node[aria-selected='true'] > .ct-tree__row,
|
|
308
|
+
.ct-tree__node--selected > .ct-tree__row {
|
|
309
|
+
border: 2px solid Highlight;
|
|
310
|
+
background: Canvas;
|
|
311
|
+
color: HighlightText;
|
|
312
|
+
forced-color-adjust: none;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.ct-tree--guides .ct-tree__group::before {
|
|
316
|
+
background: CanvasText;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.ct-tree__node--orphan > .ct-tree__row {
|
|
320
|
+
border: 1px dashed Mark;
|
|
321
|
+
color: Mark;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.ct-tree__chevron,
|
|
325
|
+
.ct-tree__content > svg {
|
|
326
|
+
forced-color-adjust: auto;
|
|
327
|
+
}
|
|
328
|
+
}
|
package/docs/guidelines.md
CHANGED
|
@@ -82,6 +82,65 @@ A consistent, accessible, professional design system for modern web applications
|
|
|
82
82
|
- **Close**: On blur and Esc
|
|
83
83
|
- **Role**: `role="tooltip"` with `aria-describedby`
|
|
84
84
|
|
|
85
|
+
### Tree (`ct-tree`)
|
|
86
|
+
|
|
87
|
+
Hierarchical disclosure following the [WAI-ARIA Tree View pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). Use it for n-level nested data such as file explorers, organisation hierarchies, or category trees.
|
|
88
|
+
|
|
89
|
+
**Roles**
|
|
90
|
+
- Container: `<ul role="tree">` with an `aria-label` or `aria-labelledby` reference
|
|
91
|
+
- Node: `<li role="treeitem">` with `aria-level` (1-based), `aria-setsize`, `aria-posinset`
|
|
92
|
+
- Children container: `<ul role="group">`
|
|
93
|
+
- Expandable nodes carry `aria-expanded="true|false"`. Leaf nodes omit the attribute.
|
|
94
|
+
|
|
95
|
+
**Indent**
|
|
96
|
+
Set `--ct-level` inline on each `.ct-tree__row` (matches the node's `aria-level`). The bundled JS controller used in Storybook fills it in automatically; framework wrappers should generate it during render.
|
|
97
|
+
|
|
98
|
+
**Keyboard**
|
|
99
|
+
- `↑` / `↓`: focus previous / next visible row
|
|
100
|
+
- `→`: if collapsed, expand. If expanded, focus first child. Leaf: nothing.
|
|
101
|
+
- `←`: if expanded, collapse. Otherwise, focus parent row.
|
|
102
|
+
- `Home` / `End`: focus first / last visible row
|
|
103
|
+
- `Enter`: activate (consumer-defined; emit `ct-tree:activate`)
|
|
104
|
+
- `Space`: toggle selection (multi/single) or activate (no selection)
|
|
105
|
+
- `*`: expand all siblings on the same level
|
|
106
|
+
- Type-ahead (`A`–`Z`): focus next row whose label starts with the typed prefix; buffer resets after 500 ms
|
|
107
|
+
|
|
108
|
+
**Roving tabindex**
|
|
109
|
+
Exactly one `<li role="treeitem">` carries `tabindex="0"`. All others carry `tabindex="-1"`. Arrow keys move focus — and the `tabindex` — along with them. The `tabindex` lives on the element with the `treeitem` role, never on the inner `.ct-tree__row` `<div>`: a focused `<div>` without a role would orphan the screen-reader announcement of level, posinset, expanded and selected state.
|
|
110
|
+
|
|
111
|
+
**Toggle / chevron**
|
|
112
|
+
The `.ct-tree__toggle` is a non-focusable `<span aria-hidden="true">`. Expand/collapse is reachable via keyboard through `←`/`→` on the row and via mouse through clicking the chevron. We deliberately avoid making the toggle a `<button>`: a focusable button inside a focusable row violates `aria-hidden-focus` / `nested-interactive`, and the row already provides the keyboard affordance.
|
|
113
|
+
|
|
114
|
+
**Row actions**
|
|
115
|
+
Buttons in the `.ct-tree__actions` slot live inside the focusable treeitem. Give them `tabindex="-1"` so the tree exposes a single Tab stop, as required by the WAI-ARIA Tree View pattern. Reach them via mouse, or expose a row-level action hotkey from the consuming framework.
|
|
116
|
+
|
|
117
|
+
**Selection**
|
|
118
|
+
- `aria-selected="true|false"` on the `<li role="treeitem">` (only when selection is active).
|
|
119
|
+
- For multi-selection, the container needs `aria-multiselectable="true"`. The Storybook controller (`attachTree`) sets and tears this down automatically when invoked with `selection: 'multi'`.
|
|
120
|
+
- Construct only styles selection — the consumer decides whether to clear other rows (`single`) or keep them (`multi`).
|
|
121
|
+
|
|
122
|
+
**Async children**
|
|
123
|
+
Set `aria-busy="true"` on the `<li role="treeitem">` while its children are loading. The chevron switches to a spinner via the existing `ct-spin` keyframe and the toggle becomes non-interactive while busy.
|
|
124
|
+
|
|
125
|
+
**Disabled nodes**
|
|
126
|
+
Use `aria-disabled="true"` on the `<li>`. Do **not** use the HTML `disabled` attribute — `treeitem` is not a form control. The Storybook controller skips activation, selection and toggle for disabled nodes; arrow-key navigation still passes through them so screen readers can announce them.
|
|
127
|
+
|
|
128
|
+
**Orphan state**
|
|
129
|
+
For sub-nodes whose parent reference is missing in the data set, render them on the root level with the `.ct-tree__node--orphan` modifier. They get a warning-tinted surface and a dashed border so the data inconsistency is visible without breaking the tree.
|
|
130
|
+
|
|
131
|
+
**Custom events**
|
|
132
|
+
The Storybook controller emits four bubbling `CustomEvent`s on the focused treeitem so consumers can wire up application logic without re-implementing the keyboard model:
|
|
133
|
+
|
|
134
|
+
| Event | Detail | Fires on |
|
|
135
|
+
|---|---|---|
|
|
136
|
+
| `ct-tree:expand` | `{ node }` | Node opened (click on toggle, `→`, `*`) |
|
|
137
|
+
| `ct-tree:collapse` | `{ node }` | Node closed (click on toggle, `←`) |
|
|
138
|
+
| `ct-tree:select` | `{ node, mode: 'click'\|'enter'\|'space' }` | Selection changed (only when `selection !== 'none'`) |
|
|
139
|
+
| `ct-tree:activate` | `{ node }` | Row primary-action (click, `Enter`, or `Space` when no selection) |
|
|
140
|
+
|
|
141
|
+
**What's not in Phase 1**
|
|
142
|
+
Drag & drop reparenting, virtual scrolling, and tristate parent-derived checkboxes are out of scope and tracked separately.
|
|
143
|
+
|
|
85
144
|
## Component States
|
|
86
145
|
|
|
87
146
|
Use these attributes for state management:
|
package/package.json
CHANGED
package/tokens/tokens.css
CHANGED
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
--color-state-warning-text: var(--color-amber-700);
|
|
276
276
|
--color-state-danger-text: var(--color-red-700);
|
|
277
277
|
--color-overlay-scrim: rgba(14, 23, 32, 0.6);
|
|
278
|
-
--color-focus-ring: var(--color-teal-
|
|
278
|
+
--color-focus-ring: var(--color-teal-600);
|
|
279
279
|
--color-avatar-seed-1-bg: var(--color-ocean-100);
|
|
280
280
|
--color-avatar-seed-1-fg: var(--color-ocean-800);
|
|
281
281
|
--color-avatar-seed-2-bg: var(--color-teal-100);
|
|
@@ -292,6 +292,14 @@
|
|
|
292
292
|
--color-avatar-seed-7-fg: var(--color-pink-800);
|
|
293
293
|
--color-avatar-seed-8-bg: var(--color-slate-200);
|
|
294
294
|
--color-avatar-seed-8-fg: var(--color-slate-800);
|
|
295
|
+
--color-chart-series-1: var(--color-ocean-600);
|
|
296
|
+
--color-chart-series-2: var(--color-amber-600);
|
|
297
|
+
--color-chart-series-3: var(--color-green-600);
|
|
298
|
+
--color-chart-series-4: var(--color-purple-500);
|
|
299
|
+
--color-chart-series-5: var(--color-pink-500);
|
|
300
|
+
--color-chart-series-6: var(--color-teal-600);
|
|
301
|
+
--color-chart-series-7: var(--color-red-500);
|
|
302
|
+
--color-chart-series-8: var(--color-slate-600);
|
|
295
303
|
--theme-color-scheme: light;
|
|
296
304
|
--font-family-heading: var(--font-family-brand);
|
|
297
305
|
--font-family-body: var(--font-family-text);
|
|
@@ -358,6 +366,14 @@
|
|
|
358
366
|
--color-avatar-seed-7-fg: var(--color-pink-200);
|
|
359
367
|
--color-avatar-seed-8-bg: var(--color-slate-700);
|
|
360
368
|
--color-avatar-seed-8-fg: var(--color-slate-200);
|
|
369
|
+
--color-chart-series-1: var(--color-ocean-300);
|
|
370
|
+
--color-chart-series-2: var(--color-amber-300);
|
|
371
|
+
--color-chart-series-3: var(--color-green-300);
|
|
372
|
+
--color-chart-series-4: var(--color-purple-300);
|
|
373
|
+
--color-chart-series-5: var(--color-pink-300);
|
|
374
|
+
--color-chart-series-6: var(--color-teal-300);
|
|
375
|
+
--color-chart-series-7: var(--color-red-300);
|
|
376
|
+
--color-chart-series-8: var(--color-slate-300);
|
|
361
377
|
--theme-color-scheme: dark;
|
|
362
378
|
}
|
|
363
379
|
|
|
@@ -397,7 +413,7 @@
|
|
|
397
413
|
--color-state-warning-text: var(--color-amber-800);
|
|
398
414
|
--color-state-danger-text: var(--color-red-800);
|
|
399
415
|
--color-overlay-scrim: rgba(14, 23, 32, 0.7);
|
|
400
|
-
--color-focus-ring: var(--color-amber-
|
|
416
|
+
--color-focus-ring: var(--color-amber-700);
|
|
401
417
|
--color-avatar-seed-1-bg: var(--color-ocean-50);
|
|
402
418
|
--color-avatar-seed-1-fg: var(--color-ocean-900);
|
|
403
419
|
--color-avatar-seed-2-bg: var(--color-teal-50);
|
|
@@ -414,6 +430,14 @@
|
|
|
414
430
|
--color-avatar-seed-7-fg: var(--color-pink-900);
|
|
415
431
|
--color-avatar-seed-8-bg: var(--color-slate-50);
|
|
416
432
|
--color-avatar-seed-8-fg: var(--color-slate-950);
|
|
433
|
+
--color-chart-series-1: var(--color-ocean-800);
|
|
434
|
+
--color-chart-series-2: var(--color-amber-700);
|
|
435
|
+
--color-chart-series-3: var(--color-green-700);
|
|
436
|
+
--color-chart-series-4: var(--color-purple-700);
|
|
437
|
+
--color-chart-series-5: var(--color-pink-700);
|
|
438
|
+
--color-chart-series-6: var(--color-teal-700);
|
|
439
|
+
--color-chart-series-7: var(--color-red-700);
|
|
440
|
+
--color-chart-series-8: var(--color-slate-800);
|
|
417
441
|
--theme-color-scheme: light;
|
|
418
442
|
}
|
|
419
443
|
|
|
@@ -471,6 +495,14 @@
|
|
|
471
495
|
--color-avatar-seed-7-fg: var(--color-pink-200);
|
|
472
496
|
--color-avatar-seed-8-bg: var(--color-slate-700);
|
|
473
497
|
--color-avatar-seed-8-fg: var(--color-slate-200);
|
|
498
|
+
--color-chart-series-1: var(--color-ocean-300);
|
|
499
|
+
--color-chart-series-2: var(--color-amber-300);
|
|
500
|
+
--color-chart-series-3: var(--color-green-300);
|
|
501
|
+
--color-chart-series-4: var(--color-purple-300);
|
|
502
|
+
--color-chart-series-5: var(--color-pink-300);
|
|
503
|
+
--color-chart-series-6: var(--color-teal-300);
|
|
504
|
+
--color-chart-series-7: var(--color-red-300);
|
|
505
|
+
--color-chart-series-8: var(--color-slate-300);
|
|
474
506
|
--theme-color-scheme: dark;
|
|
475
507
|
}
|
|
476
508
|
}
|
|
@@ -512,7 +544,7 @@
|
|
|
512
544
|
--color-state-warning-text: var(--color-amber-800);
|
|
513
545
|
--color-state-danger-text: var(--color-red-800);
|
|
514
546
|
--color-overlay-scrim: rgba(14, 23, 32, 0.7);
|
|
515
|
-
--color-focus-ring: var(--color-amber-
|
|
547
|
+
--color-focus-ring: var(--color-amber-700);
|
|
516
548
|
--color-avatar-seed-1-bg: var(--color-ocean-50);
|
|
517
549
|
--color-avatar-seed-1-fg: var(--color-ocean-900);
|
|
518
550
|
--color-avatar-seed-2-bg: var(--color-teal-50);
|
|
@@ -529,6 +561,14 @@
|
|
|
529
561
|
--color-avatar-seed-7-fg: var(--color-pink-900);
|
|
530
562
|
--color-avatar-seed-8-bg: var(--color-slate-50);
|
|
531
563
|
--color-avatar-seed-8-fg: var(--color-slate-950);
|
|
564
|
+
--color-chart-series-1: var(--color-ocean-800);
|
|
565
|
+
--color-chart-series-2: var(--color-amber-700);
|
|
566
|
+
--color-chart-series-3: var(--color-green-700);
|
|
567
|
+
--color-chart-series-4: var(--color-purple-700);
|
|
568
|
+
--color-chart-series-5: var(--color-pink-700);
|
|
569
|
+
--color-chart-series-6: var(--color-teal-700);
|
|
570
|
+
--color-chart-series-7: var(--color-red-700);
|
|
571
|
+
--color-chart-series-8: var(--color-slate-800);
|
|
532
572
|
--theme-color-scheme: light;
|
|
533
573
|
}
|
|
534
574
|
}
|
package/tokens/tokens.js
CHANGED
|
@@ -306,7 +306,7 @@ export const semantic = {
|
|
|
306
306
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
307
307
|
},
|
|
308
308
|
"focus": {
|
|
309
|
-
"ring": "#
|
|
309
|
+
"ring": "#167B76"
|
|
310
310
|
},
|
|
311
311
|
"avatarSeed": {
|
|
312
312
|
"1Bg": "#CFE5EC",
|
|
@@ -325,6 +325,16 @@ export const semantic = {
|
|
|
325
325
|
"7Fg": "#461020",
|
|
326
326
|
"8Bg": "#D3DDE7",
|
|
327
327
|
"8Fg": "#263747"
|
|
328
|
+
},
|
|
329
|
+
"chartSeries": {
|
|
330
|
+
"1": "#21657A",
|
|
331
|
+
"2": "#B86600",
|
|
332
|
+
"3": "#237F59",
|
|
333
|
+
"4": "#6F45A8",
|
|
334
|
+
"5": "#B22F58",
|
|
335
|
+
"6": "#167B76",
|
|
336
|
+
"7": "#C93535",
|
|
337
|
+
"8": "#4E667B"
|
|
328
338
|
}
|
|
329
339
|
},
|
|
330
340
|
"theme": {
|
|
@@ -471,7 +481,7 @@ export const semanticThemes = {
|
|
|
471
481
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
472
482
|
},
|
|
473
483
|
"focus": {
|
|
474
|
-
"ring": "#
|
|
484
|
+
"ring": "#167B76"
|
|
475
485
|
},
|
|
476
486
|
"avatarSeed": {
|
|
477
487
|
"1Bg": "#CFE5EC",
|
|
@@ -490,6 +500,16 @@ export const semanticThemes = {
|
|
|
490
500
|
"7Fg": "#461020",
|
|
491
501
|
"8Bg": "#D3DDE7",
|
|
492
502
|
"8Fg": "#263747"
|
|
503
|
+
},
|
|
504
|
+
"chartSeries": {
|
|
505
|
+
"1": "#21657A",
|
|
506
|
+
"2": "#B86600",
|
|
507
|
+
"3": "#237F59",
|
|
508
|
+
"4": "#6F45A8",
|
|
509
|
+
"5": "#B22F58",
|
|
510
|
+
"6": "#167B76",
|
|
511
|
+
"7": "#C93535",
|
|
512
|
+
"8": "#4E667B"
|
|
493
513
|
}
|
|
494
514
|
},
|
|
495
515
|
"theme": {
|
|
@@ -653,6 +673,16 @@ export const semanticThemes = {
|
|
|
653
673
|
"7Fg": "#EA9CB7",
|
|
654
674
|
"8Bg": "#364C5F",
|
|
655
675
|
"8Fg": "#D3DDE7"
|
|
676
|
+
},
|
|
677
|
+
"chartSeries": {
|
|
678
|
+
"1": "#78B1C4",
|
|
679
|
+
"2": "#FFB74D",
|
|
680
|
+
"3": "#70CBA3",
|
|
681
|
+
"4": "#A988D6",
|
|
682
|
+
"5": "#DD6F92",
|
|
683
|
+
"6": "#63C7C1",
|
|
684
|
+
"7": "#EB7575",
|
|
685
|
+
"8": "#B7C6D6"
|
|
656
686
|
}
|
|
657
687
|
},
|
|
658
688
|
"theme": {
|
|
@@ -797,7 +827,7 @@ export const semanticThemes = {
|
|
|
797
827
|
"scrim": "rgba(14, 23, 32, 0.7)"
|
|
798
828
|
},
|
|
799
829
|
"focus": {
|
|
800
|
-
"ring": "#
|
|
830
|
+
"ring": "#8A4D00"
|
|
801
831
|
},
|
|
802
832
|
"avatarSeed": {
|
|
803
833
|
"1Bg": "#E9F4F7",
|
|
@@ -816,6 +846,16 @@ export const semanticThemes = {
|
|
|
816
846
|
"7Fg": "#29080F",
|
|
817
847
|
"8Bg": "#F5F7FA",
|
|
818
848
|
"8Fg": "#0E1720"
|
|
849
|
+
},
|
|
850
|
+
"chartSeries": {
|
|
851
|
+
"1": "#103745",
|
|
852
|
+
"2": "#8A4D00",
|
|
853
|
+
"3": "#1B6145",
|
|
854
|
+
"4": "#432868",
|
|
855
|
+
"5": "#6A1932",
|
|
856
|
+
"6": "#115F5C",
|
|
857
|
+
"7": "#7C1F1F",
|
|
858
|
+
"8": "#263747"
|
|
819
859
|
}
|
|
820
860
|
},
|
|
821
861
|
"theme": {
|
|
@@ -1232,6 +1272,16 @@ export const cssVars = {
|
|
|
1232
1272
|
"7Fg": "var(--color-avatar-seed-7-fg)",
|
|
1233
1273
|
"8Bg": "var(--color-avatar-seed-8-bg)",
|
|
1234
1274
|
"8Fg": "var(--color-avatar-seed-8-fg)"
|
|
1275
|
+
},
|
|
1276
|
+
"chartSeries": {
|
|
1277
|
+
"1": "var(--color-chart-series-1)",
|
|
1278
|
+
"2": "var(--color-chart-series-2)",
|
|
1279
|
+
"3": "var(--color-chart-series-3)",
|
|
1280
|
+
"4": "var(--color-chart-series-4)",
|
|
1281
|
+
"5": "var(--color-chart-series-5)",
|
|
1282
|
+
"6": "var(--color-chart-series-6)",
|
|
1283
|
+
"7": "var(--color-chart-series-7)",
|
|
1284
|
+
"8": "var(--color-chart-series-8)"
|
|
1235
1285
|
}
|
|
1236
1286
|
},
|
|
1237
1287
|
"theme": {
|
package/tokens/tokens.json
CHANGED
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
305
305
|
},
|
|
306
306
|
"focus": {
|
|
307
|
-
"ring": "#
|
|
307
|
+
"ring": "#167B76"
|
|
308
308
|
},
|
|
309
309
|
"avatarSeed": {
|
|
310
310
|
"1Bg": "#CFE5EC",
|
|
@@ -323,6 +323,16 @@
|
|
|
323
323
|
"7Fg": "#461020",
|
|
324
324
|
"8Bg": "#D3DDE7",
|
|
325
325
|
"8Fg": "#263747"
|
|
326
|
+
},
|
|
327
|
+
"chartSeries": {
|
|
328
|
+
"1": "#21657A",
|
|
329
|
+
"2": "#B86600",
|
|
330
|
+
"3": "#237F59",
|
|
331
|
+
"4": "#6F45A8",
|
|
332
|
+
"5": "#B22F58",
|
|
333
|
+
"6": "#167B76",
|
|
334
|
+
"7": "#C93535",
|
|
335
|
+
"8": "#4E667B"
|
|
326
336
|
}
|
|
327
337
|
},
|
|
328
338
|
"theme": {
|
|
@@ -468,7 +478,7 @@
|
|
|
468
478
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
469
479
|
},
|
|
470
480
|
"focus": {
|
|
471
|
-
"ring": "#
|
|
481
|
+
"ring": "#167B76"
|
|
472
482
|
},
|
|
473
483
|
"avatarSeed": {
|
|
474
484
|
"1Bg": "#CFE5EC",
|
|
@@ -487,6 +497,16 @@
|
|
|
487
497
|
"7Fg": "#461020",
|
|
488
498
|
"8Bg": "#D3DDE7",
|
|
489
499
|
"8Fg": "#263747"
|
|
500
|
+
},
|
|
501
|
+
"chartSeries": {
|
|
502
|
+
"1": "#21657A",
|
|
503
|
+
"2": "#B86600",
|
|
504
|
+
"3": "#237F59",
|
|
505
|
+
"4": "#6F45A8",
|
|
506
|
+
"5": "#B22F58",
|
|
507
|
+
"6": "#167B76",
|
|
508
|
+
"7": "#C93535",
|
|
509
|
+
"8": "#4E667B"
|
|
490
510
|
}
|
|
491
511
|
},
|
|
492
512
|
"theme": {
|
|
@@ -650,6 +670,16 @@
|
|
|
650
670
|
"7Fg": "#EA9CB7",
|
|
651
671
|
"8Bg": "#364C5F",
|
|
652
672
|
"8Fg": "#D3DDE7"
|
|
673
|
+
},
|
|
674
|
+
"chartSeries": {
|
|
675
|
+
"1": "#78B1C4",
|
|
676
|
+
"2": "#FFB74D",
|
|
677
|
+
"3": "#70CBA3",
|
|
678
|
+
"4": "#A988D6",
|
|
679
|
+
"5": "#DD6F92",
|
|
680
|
+
"6": "#63C7C1",
|
|
681
|
+
"7": "#EB7575",
|
|
682
|
+
"8": "#B7C6D6"
|
|
653
683
|
}
|
|
654
684
|
},
|
|
655
685
|
"theme": {
|
|
@@ -794,7 +824,7 @@
|
|
|
794
824
|
"scrim": "rgba(14, 23, 32, 0.7)"
|
|
795
825
|
},
|
|
796
826
|
"focus": {
|
|
797
|
-
"ring": "#
|
|
827
|
+
"ring": "#8A4D00"
|
|
798
828
|
},
|
|
799
829
|
"avatarSeed": {
|
|
800
830
|
"1Bg": "#E9F4F7",
|
|
@@ -813,6 +843,16 @@
|
|
|
813
843
|
"7Fg": "#29080F",
|
|
814
844
|
"8Bg": "#F5F7FA",
|
|
815
845
|
"8Fg": "#0E1720"
|
|
846
|
+
},
|
|
847
|
+
"chartSeries": {
|
|
848
|
+
"1": "#103745",
|
|
849
|
+
"2": "#8A4D00",
|
|
850
|
+
"3": "#1B6145",
|
|
851
|
+
"4": "#432868",
|
|
852
|
+
"5": "#6A1932",
|
|
853
|
+
"6": "#115F5C",
|
|
854
|
+
"7": "#7C1F1F",
|
|
855
|
+
"8": "#263747"
|
|
816
856
|
}
|
|
817
857
|
},
|
|
818
858
|
"theme": {
|
package/tokens/tokens.ts
CHANGED
|
@@ -306,7 +306,7 @@ export const semantic = {
|
|
|
306
306
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
307
307
|
},
|
|
308
308
|
"focus": {
|
|
309
|
-
"ring": "#
|
|
309
|
+
"ring": "#167B76"
|
|
310
310
|
},
|
|
311
311
|
"avatarSeed": {
|
|
312
312
|
"1Bg": "#CFE5EC",
|
|
@@ -325,6 +325,16 @@ export const semantic = {
|
|
|
325
325
|
"7Fg": "#461020",
|
|
326
326
|
"8Bg": "#D3DDE7",
|
|
327
327
|
"8Fg": "#263747"
|
|
328
|
+
},
|
|
329
|
+
"chartSeries": {
|
|
330
|
+
"1": "#21657A",
|
|
331
|
+
"2": "#B86600",
|
|
332
|
+
"3": "#237F59",
|
|
333
|
+
"4": "#6F45A8",
|
|
334
|
+
"5": "#B22F58",
|
|
335
|
+
"6": "#167B76",
|
|
336
|
+
"7": "#C93535",
|
|
337
|
+
"8": "#4E667B"
|
|
328
338
|
}
|
|
329
339
|
},
|
|
330
340
|
"theme": {
|
|
@@ -471,7 +481,7 @@ export const semanticThemes = {
|
|
|
471
481
|
"scrim": "rgba(14, 23, 32, 0.6)"
|
|
472
482
|
},
|
|
473
483
|
"focus": {
|
|
474
|
-
"ring": "#
|
|
484
|
+
"ring": "#167B76"
|
|
475
485
|
},
|
|
476
486
|
"avatarSeed": {
|
|
477
487
|
"1Bg": "#CFE5EC",
|
|
@@ -490,6 +500,16 @@ export const semanticThemes = {
|
|
|
490
500
|
"7Fg": "#461020",
|
|
491
501
|
"8Bg": "#D3DDE7",
|
|
492
502
|
"8Fg": "#263747"
|
|
503
|
+
},
|
|
504
|
+
"chartSeries": {
|
|
505
|
+
"1": "#21657A",
|
|
506
|
+
"2": "#B86600",
|
|
507
|
+
"3": "#237F59",
|
|
508
|
+
"4": "#6F45A8",
|
|
509
|
+
"5": "#B22F58",
|
|
510
|
+
"6": "#167B76",
|
|
511
|
+
"7": "#C93535",
|
|
512
|
+
"8": "#4E667B"
|
|
493
513
|
}
|
|
494
514
|
},
|
|
495
515
|
"theme": {
|
|
@@ -653,6 +673,16 @@ export const semanticThemes = {
|
|
|
653
673
|
"7Fg": "#EA9CB7",
|
|
654
674
|
"8Bg": "#364C5F",
|
|
655
675
|
"8Fg": "#D3DDE7"
|
|
676
|
+
},
|
|
677
|
+
"chartSeries": {
|
|
678
|
+
"1": "#78B1C4",
|
|
679
|
+
"2": "#FFB74D",
|
|
680
|
+
"3": "#70CBA3",
|
|
681
|
+
"4": "#A988D6",
|
|
682
|
+
"5": "#DD6F92",
|
|
683
|
+
"6": "#63C7C1",
|
|
684
|
+
"7": "#EB7575",
|
|
685
|
+
"8": "#B7C6D6"
|
|
656
686
|
}
|
|
657
687
|
},
|
|
658
688
|
"theme": {
|
|
@@ -797,7 +827,7 @@ export const semanticThemes = {
|
|
|
797
827
|
"scrim": "rgba(14, 23, 32, 0.7)"
|
|
798
828
|
},
|
|
799
829
|
"focus": {
|
|
800
|
-
"ring": "#
|
|
830
|
+
"ring": "#8A4D00"
|
|
801
831
|
},
|
|
802
832
|
"avatarSeed": {
|
|
803
833
|
"1Bg": "#E9F4F7",
|
|
@@ -816,6 +846,16 @@ export const semanticThemes = {
|
|
|
816
846
|
"7Fg": "#29080F",
|
|
817
847
|
"8Bg": "#F5F7FA",
|
|
818
848
|
"8Fg": "#0E1720"
|
|
849
|
+
},
|
|
850
|
+
"chartSeries": {
|
|
851
|
+
"1": "#103745",
|
|
852
|
+
"2": "#8A4D00",
|
|
853
|
+
"3": "#1B6145",
|
|
854
|
+
"4": "#432868",
|
|
855
|
+
"5": "#6A1932",
|
|
856
|
+
"6": "#115F5C",
|
|
857
|
+
"7": "#7C1F1F",
|
|
858
|
+
"8": "#263747"
|
|
819
859
|
}
|
|
820
860
|
},
|
|
821
861
|
"theme": {
|
|
@@ -1232,6 +1272,16 @@ export const cssVars = {
|
|
|
1232
1272
|
"7Fg": "var(--color-avatar-seed-7-fg)",
|
|
1233
1273
|
"8Bg": "var(--color-avatar-seed-8-bg)",
|
|
1234
1274
|
"8Fg": "var(--color-avatar-seed-8-fg)"
|
|
1275
|
+
},
|
|
1276
|
+
"chartSeries": {
|
|
1277
|
+
"1": "var(--color-chart-series-1)",
|
|
1278
|
+
"2": "var(--color-chart-series-2)",
|
|
1279
|
+
"3": "var(--color-chart-series-3)",
|
|
1280
|
+
"4": "var(--color-chart-series-4)",
|
|
1281
|
+
"5": "var(--color-chart-series-5)",
|
|
1282
|
+
"6": "var(--color-chart-series-6)",
|
|
1283
|
+
"7": "var(--color-chart-series-7)",
|
|
1284
|
+
"8": "var(--color-chart-series-8)"
|
|
1235
1285
|
}
|
|
1236
1286
|
},
|
|
1237
1287
|
"theme": {
|