@neuravision/construct 1.2.0 → 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 +1 -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
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": {
|