@momoi-labs/kiso 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/kiso/README.md +4 -0
- package/kiso/docs/components/README.md +2 -0
- package/kiso/docs/components/chip-input.md +194 -0
- package/kiso/docs/components/sparkline.md +93 -0
- package/kiso/docs/components/table.md +3 -1
- package/kiso/docs/evolution.md +10 -1
- package/kiso/docs/patterns/dashboard.md +3 -2
- package/kiso/docs/patterns/settings.md +1 -0
- package/kiso/docs/tokens.md +54 -36
- package/kiso/ui.css +137 -6
- package/package.json +1 -1
- package/tokens/build/tokens.css +55 -43
- package/tokens/build/tokens.d.ts +34 -12
- package/tokens/build/tokens.json +67 -55
- package/tokens/build/tokens.scss +69 -57
package/kiso/ui.css
CHANGED
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
Kiso v2 — component layer (prototype)
|
|
3
3
|
Every value here resolves to a token in tokens.css. No raw hex, no raw px
|
|
4
4
|
for anything a token covers.
|
|
5
|
+
Fonts are not loaded here: a nested @import after tokens.css is illegal once
|
|
6
|
+
bundlers flatten the sheet. Load Inter and JetBrains Mono from the app, or
|
|
7
|
+
via @momoi-labs/kiso-react/styles.css which places the @import first.
|
|
5
8
|
=========================================================================== */
|
|
6
9
|
|
|
7
|
-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
|
8
|
-
|
|
9
10
|
*, *::before, *::after { box-sizing: border-box; }
|
|
10
11
|
|
|
11
12
|
html { -webkit-text-size-adjust: 100%; }
|
|
@@ -361,6 +362,117 @@ a:hover, .link:hover { text-decoration: underline; }
|
|
|
361
362
|
display: flex; align-items: center; gap: var(--spacing-xs);
|
|
362
363
|
}
|
|
363
364
|
|
|
365
|
+
/* chip input: several structured values in one field */
|
|
366
|
+
.chip-input { position: relative; display: grid; gap: var(--spacing-xs); }
|
|
367
|
+
.chip-input-box {
|
|
368
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs);
|
|
369
|
+
width: 100%;
|
|
370
|
+
min-height: var(--size-control-md);
|
|
371
|
+
padding: var(--spacing-xs);
|
|
372
|
+
border: 1px solid var(--color-input);
|
|
373
|
+
border-radius: var(--radius-md);
|
|
374
|
+
background: var(--color-card);
|
|
375
|
+
box-shadow: var(--shadow-xs);
|
|
376
|
+
cursor: text;
|
|
377
|
+
transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
|
|
378
|
+
}
|
|
379
|
+
.chip-input-box:hover { border-color: var(--color-border-strong); }
|
|
380
|
+
.chip-input-box:focus-within { outline: 2px solid var(--color-ring); outline-offset: 2px; }
|
|
381
|
+
.chip-input-box[aria-invalid="true"] { border-color: var(--color-danger); }
|
|
382
|
+
.chip-input-box[aria-invalid="true"]:focus-within { outline-color: var(--color-danger); }
|
|
383
|
+
.chip-input-box[data-disabled="true"] {
|
|
384
|
+
background: var(--color-disabled-surface);
|
|
385
|
+
color: var(--color-disabled);
|
|
386
|
+
cursor: not-allowed;
|
|
387
|
+
}
|
|
388
|
+
.chip-input-field {
|
|
389
|
+
flex: 1 1 12ch; min-width: 12ch;
|
|
390
|
+
height: var(--size-control-sm);
|
|
391
|
+
padding-inline: var(--spacing-xs);
|
|
392
|
+
border: 0; background: none; color: inherit;
|
|
393
|
+
font: inherit; font-size: var(--type-size-body);
|
|
394
|
+
outline: none;
|
|
395
|
+
}
|
|
396
|
+
.chip-input-field::placeholder { color: var(--color-subtle-foreground); }
|
|
397
|
+
.chip-input-list {
|
|
398
|
+
position: absolute; inset-inline: 0; top: 100%; z-index: 40;
|
|
399
|
+
margin-block-start: var(--spacing-xs);
|
|
400
|
+
max-height: 240px; overflow-y: auto;
|
|
401
|
+
}
|
|
402
|
+
.chip-input-list .menu-item[aria-selected="true"] { background: var(--color-selected); color: var(--color-selected-foreground); }
|
|
403
|
+
.chip-input-list .menu-item .muted { margin-inline-start: auto; }
|
|
404
|
+
|
|
405
|
+
.chip {
|
|
406
|
+
display: inline-flex; align-items: stretch;
|
|
407
|
+
max-width: 100%;
|
|
408
|
+
min-height: var(--size-control-sm);
|
|
409
|
+
padding-inline-start: var(--spacing-sm);
|
|
410
|
+
padding-inline-end: var(--spacing-xs);
|
|
411
|
+
border: 1px solid transparent;
|
|
412
|
+
border-radius: var(--radius-sm);
|
|
413
|
+
background: var(--color-secondary);
|
|
414
|
+
color: var(--color-secondary-foreground);
|
|
415
|
+
font-size: var(--type-size-label);
|
|
416
|
+
line-height: 1;
|
|
417
|
+
}
|
|
418
|
+
.chip:has(.is-editing) { background: var(--color-card); border-color: var(--color-primary); }
|
|
419
|
+
.chip[data-state="invalid"] { background: var(--color-danger-surface); border-color: var(--color-danger-border); color: var(--color-danger); }
|
|
420
|
+
/* The chip reads left to right like a call: what installs it, what it is,
|
|
421
|
+
which version. Segments are divided the way .btn-group divides buttons. */
|
|
422
|
+
.chip-scope, .chip-name {
|
|
423
|
+
display: inline-flex; align-items: center;
|
|
424
|
+
padding-inline-end: var(--spacing-sm);
|
|
425
|
+
font-family: var(--font-mono); font-size: var(--type-size-metadata);
|
|
426
|
+
}
|
|
427
|
+
.chip-scope { color: var(--color-muted-foreground); }
|
|
428
|
+
.chip-scope + .chip-name {
|
|
429
|
+
padding-inline-start: var(--spacing-sm);
|
|
430
|
+
border-inline-start: 1px solid var(--color-border);
|
|
431
|
+
}
|
|
432
|
+
/* The version and each option are the segments people press, so they carry the
|
|
433
|
+
raised fill of a grouped button rather than waiting for a hover to admit
|
|
434
|
+
they are one. Every option gets its own rule, and a list keeps its brackets,
|
|
435
|
+
so name=value and name=[a, b] read as the same kind of fact. */
|
|
436
|
+
.chip-value, .chip-option {
|
|
437
|
+
display: inline-flex; align-items: center;
|
|
438
|
+
padding-inline: var(--spacing-sm);
|
|
439
|
+
border: 0; border-inline-start: 1px solid var(--color-border);
|
|
440
|
+
border-radius: 0;
|
|
441
|
+
background: var(--color-card);
|
|
442
|
+
font-family: var(--font-mono); font-size: var(--type-size-metadata);
|
|
443
|
+
cursor: pointer;
|
|
444
|
+
}
|
|
445
|
+
.chip-value { color: var(--color-link); }
|
|
446
|
+
.chip-option { color: var(--color-foreground); }
|
|
447
|
+
.chip-value:hover, .chip-option:hover { background: var(--color-accent-surface); }
|
|
448
|
+
.chip-option-name { color: var(--color-muted-foreground); }
|
|
449
|
+
.chip-option-mark { color: var(--color-subtle-foreground); }
|
|
450
|
+
.chip-option[data-empty="true"] { color: var(--color-subtle-foreground); }
|
|
451
|
+
.chip-value:last-child, .chip-option:last-child {
|
|
452
|
+
border-start-end-radius: var(--radius-xs);
|
|
453
|
+
border-end-end-radius: var(--radius-xs);
|
|
454
|
+
}
|
|
455
|
+
.chip-value.is-editing, .chip-option.is-editing {
|
|
456
|
+
min-width: 4ch;
|
|
457
|
+
background: var(--color-accent-surface);
|
|
458
|
+
outline: none;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.chip-action {
|
|
462
|
+
display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2xs);
|
|
463
|
+
align-self: center;
|
|
464
|
+
margin-inline-start: var(--spacing-xs);
|
|
465
|
+
min-width: var(--size-icon-sm); height: var(--size-icon-md);
|
|
466
|
+
padding-inline: var(--spacing-2xs);
|
|
467
|
+
border: 0; border-radius: var(--radius-xs);
|
|
468
|
+
background: none; color: var(--color-muted-foreground);
|
|
469
|
+
font: inherit; font-size: var(--type-size-metadata);
|
|
470
|
+
cursor: pointer;
|
|
471
|
+
}
|
|
472
|
+
.chip-action:hover { background: var(--color-accent-surface-hover); color: var(--color-foreground); }
|
|
473
|
+
.chip-action[aria-expanded="true"] { background: var(--color-accent-surface); color: var(--color-foreground); }
|
|
474
|
+
.chip-action .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
|
|
475
|
+
|
|
364
476
|
/* checkbox / radio */
|
|
365
477
|
.check {
|
|
366
478
|
display: inline-flex;
|
|
@@ -777,7 +889,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
|
|
|
777
889
|
inset-block: 2px;
|
|
778
890
|
width: 2px;
|
|
779
891
|
border-radius: var(--radius-full);
|
|
780
|
-
background: var(--color-
|
|
892
|
+
background: var(--color-link); /* the ink, not the primary fill: on dark the fill misses 3:1 against the sidebar */
|
|
781
893
|
}
|
|
782
894
|
.nav-item[aria-current="page"] .icon, .nav-item.active .icon { color: currentColor; }
|
|
783
895
|
.nav-item .badge { margin-inline-start: auto; }
|
|
@@ -911,6 +1023,10 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
|
|
|
911
1023
|
min-height: var(--size-touch-min);
|
|
912
1024
|
}
|
|
913
1025
|
.btn-icon { min-width: var(--size-touch-min); }
|
|
1026
|
+
/* The chip grows with its segments, so the floor goes on the chip and the
|
|
1027
|
+
segments stretch to it. */
|
|
1028
|
+
.chip, .chip-input-field { min-height: var(--size-touch-min); }
|
|
1029
|
+
.chip-action { min-width: var(--size-touch-min); height: var(--size-touch-min); }
|
|
914
1030
|
}
|
|
915
1031
|
|
|
916
1032
|
@media (max-width: 1023px) {
|
|
@@ -1014,9 +1130,24 @@ pre::after {
|
|
|
1014
1130
|
.splitter::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
|
|
1015
1131
|
.splitter:hover, .splitter.dragging { background: var(--color-ring); }
|
|
1016
1132
|
|
|
1017
|
-
/* Chart frame:
|
|
1133
|
+
/* Chart frame: deliberate presentation, one featured series in primary,
|
|
1134
|
+
gridlines at border strength. The area is the line color at low opacity, a
|
|
1135
|
+
flat token fill: no document-level gradient id for a component to forget
|
|
1136
|
+
to define. Supporting, incidental series belong in `.sparkline` instead. */
|
|
1018
1137
|
.chart { width: 100%; height: 200px; display: block; overflow: visible; color: var(--color-primary); }
|
|
1019
1138
|
.chart .grid { stroke: var(--color-border); stroke-width: 1; }
|
|
1020
|
-
.chart .line { fill: none; stroke:
|
|
1021
|
-
.chart .area { fill:
|
|
1139
|
+
.chart .line { fill: none; stroke: currentColor; stroke-width: 1.5; }
|
|
1140
|
+
.chart .area { fill: currentColor; fill-opacity: 0.12; }
|
|
1022
1141
|
.chart-axis { display: flex; justify-content: space-between; font-size: var(--type-size-metadata); color: var(--color-subtle-foreground); margin-block-start: var(--spacing-sm); }
|
|
1142
|
+
|
|
1143
|
+
/* Sparkline — one metric series at cell size (issue #84). No axis, no grid,
|
|
1144
|
+
no legend, no tooltip: the number beside the line carries the precision,
|
|
1145
|
+
the line carries the shape. Recharts draws the path; the frame owns only
|
|
1146
|
+
display, width, and the color tokens. Neutral is the voice of an
|
|
1147
|
+
incidental series in a table cell, `--color-border-strong` like `.bars`;
|
|
1148
|
+
`.primary` marks the series a tile is about, so at most one sibling
|
|
1149
|
+
raises its voice. Fewer than two samples draws nothing — a flat rule
|
|
1150
|
+
across a cell reads as a border, not as a measurement. */
|
|
1151
|
+
.sparkline { display: block; width: 100%; color: var(--color-border-strong); }
|
|
1152
|
+
.sparkline.primary { color: var(--color-primary); }
|
|
1153
|
+
.sparkline svg { display: block; overflow: visible; }
|
package/package.json
CHANGED
package/tokens/build/tokens.css
CHANGED
|
@@ -25,65 +25,77 @@
|
|
|
25
25
|
--color-accent-800: #46309e;
|
|
26
26
|
--color-accent-900: #2e2170;
|
|
27
27
|
--color-accent-950: #211741;
|
|
28
|
-
--color-accent-base: light-dark(#5b3fc4, #
|
|
29
|
-
--color-status-success: light-dark(#0c6b43, #
|
|
30
|
-
--color-status-warning: light-dark(#7a5000, #
|
|
31
|
-
--color-status-danger: light-dark(#ad2f29, #
|
|
32
|
-
--color-status-info: light-dark(#15559e, #
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
39
|
-
--color-
|
|
40
|
-
--color-
|
|
28
|
+
--color-accent-base: light-dark(#5b3fc4, #a793f4);
|
|
29
|
+
--color-status-success: light-dark(#0c6b43, #5bd295);
|
|
30
|
+
--color-status-warning: light-dark(#7a5000, #efc05b);
|
|
31
|
+
--color-status-danger: light-dark(#ad2f29, #f5807f);
|
|
32
|
+
--color-status-info: light-dark(#15559e, #75c4fa);
|
|
33
|
+
--color-dark-50: #f8f6f3;
|
|
34
|
+
--color-dark-100: #eeece9;
|
|
35
|
+
--color-dark-200: #d9d7d3;
|
|
36
|
+
--color-dark-300: #c6c4c0;
|
|
37
|
+
--color-dark-400: #aba9a5;
|
|
38
|
+
--color-dark-450: #94928e;
|
|
39
|
+
--color-dark-500: #6b6965;
|
|
40
|
+
--color-dark-600: #494744;
|
|
41
|
+
--color-dark-700: #3a3834;
|
|
42
|
+
--color-dark-800: #2d2b28;
|
|
43
|
+
--color-dark-900: #211f1c;
|
|
44
|
+
--color-dark-950: #151411;
|
|
45
|
+
--color-background: light-dark(var(--color-neutral-200), var(--color-dark-900));
|
|
46
|
+
--color-surface: light-dark(var(--color-neutral-100), var(--color-dark-800));
|
|
47
|
+
--color-elevated-surface: light-dark(var(--color-white), var(--color-dark-700));
|
|
48
|
+
--color-foreground: light-dark(var(--color-neutral-900), var(--color-dark-100));
|
|
49
|
+
--color-muted-foreground: light-dark(var(--color-neutral-600), var(--color-dark-400));
|
|
50
|
+
--color-subtle-foreground: light-dark(var(--color-neutral-500), var(--color-dark-450));
|
|
51
|
+
--color-border: light-dark(var(--color-neutral-300), var(--color-dark-600));
|
|
52
|
+
--color-primary: light-dark(#5b3fc4, #684bb5);
|
|
41
53
|
--color-accent: light-dark(var(--color-accent-800), var(--color-accent-300));
|
|
42
54
|
--color-success: var(--color-status-success);
|
|
43
55
|
--color-warning: var(--color-status-warning);
|
|
44
56
|
--color-danger: var(--color-status-danger);
|
|
45
57
|
--color-info: var(--color-status-info);
|
|
46
|
-
--color-focus:
|
|
47
|
-
--color-disabled: light-dark(var(--color-neutral-400), var(--color-
|
|
48
|
-
--color-card: light-dark(var(--color-neutral-100), var(--color-
|
|
58
|
+
--color-focus: var(--color-accent-base);
|
|
59
|
+
--color-disabled: light-dark(var(--color-neutral-400), var(--color-dark-600));
|
|
60
|
+
--color-card: light-dark(var(--color-neutral-100), var(--color-dark-800));
|
|
49
61
|
--color-card-foreground: var(--color-foreground);
|
|
50
|
-
--color-popover: light-dark(var(--color-white), var(--color-
|
|
62
|
+
--color-popover: light-dark(var(--color-white), var(--color-dark-700));
|
|
51
63
|
--color-popover-foreground: var(--color-foreground);
|
|
52
|
-
--color-muted: light-dark(var(--color-neutral-200), var(--color-
|
|
53
|
-
--color-sidebar: light-dark(var(--color-neutral-100), var(--color-
|
|
64
|
+
--color-muted: light-dark(var(--color-neutral-200), var(--color-dark-700));
|
|
65
|
+
--color-sidebar: light-dark(var(--color-neutral-100), var(--color-dark-950));
|
|
54
66
|
--color-sidebar-border: var(--color-border);
|
|
55
|
-
--color-border-strong: var(--color-neutral-500);
|
|
67
|
+
--color-border-strong: light-dark(var(--color-neutral-500), var(--color-dark-450));
|
|
56
68
|
--color-input: var(--color-border);
|
|
57
|
-
--color-primary-foreground: light-dark(var(--color-white),
|
|
58
|
-
--color-primary-hover: light-dark(var(--color-accent-800),
|
|
59
|
-
--color-link: var(--color-
|
|
60
|
-
--color-accent-surface: light-dark(var(--color-accent-50),
|
|
61
|
-
--color-accent-surface-hover: light-dark(var(--color-accent-200),
|
|
62
|
-
--color-selected: light-dark(var(--color-accent-300),
|
|
69
|
+
--color-primary-foreground: light-dark(var(--color-white), #f7f5fe);
|
|
70
|
+
--color-primary-hover: light-dark(var(--color-accent-800), #795dc9);
|
|
71
|
+
--color-link: var(--color-accent-base);
|
|
72
|
+
--color-accent-surface: light-dark(var(--color-accent-50), #2d2843);
|
|
73
|
+
--color-accent-surface-hover: light-dark(var(--color-accent-200), #3a3356);
|
|
74
|
+
--color-selected: light-dark(var(--color-accent-300), #49406d);
|
|
63
75
|
--color-selected-foreground: var(--color-foreground);
|
|
64
|
-
--color-secondary: light-dark(var(--color-neutral-300), var(--color-
|
|
76
|
+
--color-secondary: light-dark(var(--color-neutral-300), var(--color-dark-700));
|
|
65
77
|
--color-secondary-foreground: var(--color-foreground);
|
|
66
|
-
--color-secondary-hover: light-dark(var(--color-neutral-400), var(--color-
|
|
78
|
+
--color-secondary-hover: light-dark(var(--color-neutral-400), var(--color-dark-600));
|
|
67
79
|
--color-ring: var(--color-focus);
|
|
68
|
-
--color-disabled-surface: light-dark(var(--color-neutral-200), var(--color-
|
|
69
|
-
--color-skeleton: light-dark(var(--color-neutral-300), var(--color-
|
|
80
|
+
--color-disabled-surface: light-dark(var(--color-neutral-200), var(--color-dark-800));
|
|
81
|
+
--color-skeleton: light-dark(var(--color-neutral-300), var(--color-dark-700));
|
|
70
82
|
--color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
|
|
71
|
-
--color-hatch: light-dark(var(--color-neutral-300), var(--color-
|
|
83
|
+
--color-hatch: light-dark(var(--color-neutral-300), var(--color-dark-700));
|
|
72
84
|
--color-corner-mark: var(--color-border-strong);
|
|
73
85
|
--color-shadow-hairline: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
|
|
74
86
|
--color-shadow-contact: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4));
|
|
75
|
-
--color-success-surface: light-dark(rgba(12, 107, 67, 0.1), rgba(
|
|
76
|
-
--color-success-border: light-dark(rgba(12, 107, 67, 0.3), rgba(
|
|
77
|
-
--color-warning-surface: light-dark(rgba(122, 80, 0, 0.1), rgba(
|
|
78
|
-
--color-warning-border: light-dark(rgba(122, 80, 0, 0.3), rgba(
|
|
79
|
-
--color-danger-surface: light-dark(rgba(173, 47, 41, 0.1), rgba(
|
|
80
|
-
--color-danger-border: light-dark(rgba(173, 47, 41, 0.3), rgba(
|
|
81
|
-
--color-info-surface: light-dark(rgba(21, 85, 158, 0.1), rgba(
|
|
82
|
-
--color-info-border: light-dark(rgba(21, 85, 158, 0.3), rgba(
|
|
83
|
-
--color-danger-foreground: light-dark(var(--color-white), var(--color-
|
|
84
|
-
--color-warning-on-dark: #
|
|
85
|
-
--color-danger-on-dark: #
|
|
86
|
-
--color-info-on-dark: #
|
|
87
|
+
--color-success-surface: light-dark(rgba(12, 107, 67, 0.1), rgba(91, 210, 149, 0.12));
|
|
88
|
+
--color-success-border: light-dark(rgba(12, 107, 67, 0.3), rgba(91, 210, 149, 0.35));
|
|
89
|
+
--color-warning-surface: light-dark(rgba(122, 80, 0, 0.1), rgba(239, 192, 91, 0.12));
|
|
90
|
+
--color-warning-border: light-dark(rgba(122, 80, 0, 0.3), rgba(239, 192, 91, 0.35));
|
|
91
|
+
--color-danger-surface: light-dark(rgba(173, 47, 41, 0.1), rgba(245, 128, 127, 0.12));
|
|
92
|
+
--color-danger-border: light-dark(rgba(173, 47, 41, 0.3), rgba(245, 128, 127, 0.35));
|
|
93
|
+
--color-info-surface: light-dark(rgba(21, 85, 158, 0.1), rgba(117, 196, 250, 0.12));
|
|
94
|
+
--color-info-border: light-dark(rgba(21, 85, 158, 0.3), rgba(117, 196, 250, 0.35));
|
|
95
|
+
--color-danger-foreground: light-dark(var(--color-white), var(--color-dark-950));
|
|
96
|
+
--color-warning-on-dark: #efc05b;
|
|
97
|
+
--color-danger-on-dark: #f5807f;
|
|
98
|
+
--color-info-on-dark: #75c4fa;
|
|
87
99
|
--font-heading: Inter, system-ui, sans-serif;
|
|
88
100
|
--font-body: Inter, system-ui, sans-serif;
|
|
89
101
|
--font-mono: JetBrains Mono, ui-monospace, monospace;
|
package/tokens/build/tokens.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export const colorNeutral600: string;
|
|
|
17
17
|
export const colorNeutral700: string;
|
|
18
18
|
export const colorNeutral800: string;
|
|
19
19
|
export const colorNeutral900: string;
|
|
20
|
-
/** Darkest neutral.
|
|
20
|
+
/** Darkest neutral. Retained for compatibility; the dark theme's sidebar is dark.950. */
|
|
21
21
|
export const colorNeutral950: string;
|
|
22
22
|
/** Lightest lilac. Light-theme tinted surface (row hover, ghost hover). */
|
|
23
23
|
export const colorAccent50: string;
|
|
@@ -30,18 +30,40 @@ export const colorAccent600: string;
|
|
|
30
30
|
export const colorAccent700: string;
|
|
31
31
|
export const colorAccent800: string;
|
|
32
32
|
export const colorAccent900: string;
|
|
33
|
-
/** Darkest lilac.
|
|
33
|
+
/** Darkest lilac. Retained ramp step; the dark accent tints are dedicated literals on the semantic layer. */
|
|
34
34
|
export const colorAccent950: string;
|
|
35
|
-
/** Base accent primitive
|
|
35
|
+
/** Base accent primitive and the theme ink: deeper violet on light (6.36:1 on background), light lilac on dark (6.36:1 on background, 5.5:1 on surface). Flows into link and focus; the deep fill role lives on semantic.primary. */
|
|
36
36
|
export const colorAccentBase: string;
|
|
37
37
|
/** Success status primitive. */
|
|
38
38
|
export const colorStatusSuccess: string;
|
|
39
39
|
/** Warning status primitive. */
|
|
40
40
|
export const colorStatusWarning: string;
|
|
41
|
-
/** Danger status primitive. */
|
|
41
|
+
/** Danger status primitive. The dark step sits at 4.6:1 on elevated-surface; a darker red missed AA there. */
|
|
42
42
|
export const colorStatusDanger: string;
|
|
43
43
|
/** Info status primitive. */
|
|
44
44
|
export const colorStatusInfo: string;
|
|
45
|
+
/** Lightest dark-ramp step. */
|
|
46
|
+
export const colorDark50: string;
|
|
47
|
+
/** Foreground on dark. Text-eligible: passes WCAG AA 4.5:1 on every dark surface. */
|
|
48
|
+
export const colorDark100: string;
|
|
49
|
+
export const colorDark200: string;
|
|
50
|
+
export const colorDark300: string;
|
|
51
|
+
/** Muted foreground on dark. */
|
|
52
|
+
export const colorDark400: string;
|
|
53
|
+
/** Half step. Strong lines and subtle text share it on dark (border-strong, subtle-foreground), as neutral.500 does for both roles on light: dark.500 misses the 3:1 non-text gate on dark.800 and dark.700. */
|
|
54
|
+
export const colorDark450: string;
|
|
55
|
+
/** Free step between the 450 split and the border pair. Not referenced by the semantic layer: 2.6:1 on dark.800 fails the 3:1 non-text gate. */
|
|
56
|
+
export const colorDark500: string;
|
|
57
|
+
/** Borders and inputs on dark. */
|
|
58
|
+
export const colorDark600: string;
|
|
59
|
+
/** Elevated surfaces, muted and secondary fills on dark. */
|
|
60
|
+
export const colorDark700: string;
|
|
61
|
+
/** Surface and card on dark. */
|
|
62
|
+
export const colorDark800: string;
|
|
63
|
+
/** Background on dark. */
|
|
64
|
+
export const colorDark900: string;
|
|
65
|
+
/** Darkest step. Sidebar on dark, and danger-foreground on a danger fill. */
|
|
66
|
+
export const colorDark950: string;
|
|
45
67
|
/** App canvas. Surface role, never text. */
|
|
46
68
|
export const semanticBackground: string;
|
|
47
69
|
/** Cards, panels, table rows. Surface role. */
|
|
@@ -52,11 +74,11 @@ export const semanticElevatedSurface: string;
|
|
|
52
74
|
export const semanticForeground: string;
|
|
53
75
|
/** Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
|
|
54
76
|
export const semanticMutedForeground: string;
|
|
55
|
-
/** Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. */
|
|
77
|
+
/** Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces. */
|
|
56
78
|
export const semanticSubtleForeground: string;
|
|
57
79
|
/** Dividers and input outlines. Non-text role. */
|
|
58
80
|
export const semanticBorder: string;
|
|
59
|
-
/** Primary
|
|
81
|
+
/** Primary fill: primary buttons, solid badges, checked controls, the brand mark. Deep violet in both themes; on dark it is a dedicated fill and is not text-eligible, so ink roles (link, focus) take accent.base instead. */
|
|
60
82
|
export const semanticPrimary: string;
|
|
61
83
|
/** Emphasis and highlight. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
|
|
62
84
|
export const semanticAccent: string;
|
|
@@ -68,7 +90,7 @@ export const semanticWarning: string;
|
|
|
68
90
|
export const semanticDanger: string;
|
|
69
91
|
/** Neutral informational state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
|
|
70
92
|
export const semanticInfo: string;
|
|
71
|
-
/** Focus ring. Non-text role. >=3:1 against background. */
|
|
93
|
+
/** Focus ring. Non-text role. >=3:1 against background. The light ink: alias of accent.base in both themes. */
|
|
72
94
|
export const semanticFocus: string;
|
|
73
95
|
/** Disabled text and controls. Exempt from contrast minimums per WCAG 1.4.3. */
|
|
74
96
|
export const semanticDisabled: string;
|
|
@@ -86,15 +108,15 @@ export const semanticMuted: string;
|
|
|
86
108
|
export const semanticSidebar: string;
|
|
87
109
|
/** Divider between sidebar and content. */
|
|
88
110
|
export const semanticSidebarBorder: string;
|
|
89
|
-
/** Emphasised line: hover outlines, switch tracks, chart gridlines, corner marks. Non-text role, >=3:1 on background, surface and elevated-surface in both themes. */
|
|
111
|
+
/** Emphasised line: hover outlines, switch tracks, chart gridlines, corner marks. Non-text role, >=3:1 on background, surface and elevated-surface in both themes. On dark this is dark.450, sharing the subtle-text step as neutral.500 does on light. */
|
|
90
112
|
export const semanticBorderStrong: string;
|
|
91
113
|
/** Form control outline at rest. */
|
|
92
114
|
export const semanticInput: string;
|
|
93
|
-
/** Text and icons on a primary fill.
|
|
115
|
+
/** Text and icons on a primary fill. Near-white on the deep violet fill in both themes. Passes AA on primary in both themes. */
|
|
94
116
|
export const semanticPrimaryForeground: string;
|
|
95
|
-
/** Primary fill on hover
|
|
117
|
+
/** Primary fill on hover - one step brighter than primary, keeping primary-foreground legible. */
|
|
96
118
|
export const semanticPrimaryHover: string;
|
|
97
|
-
/** Inline and standalone links. */
|
|
119
|
+
/** Inline and standalone links. The light ink: alias of accent.base in both themes, so links stay text-eligible where the primary fill is not. */
|
|
98
120
|
export const semanticLink: string;
|
|
99
121
|
/** Faintest accent tint: row hover, ghost-button hover. Non-text role. */
|
|
100
122
|
export const semanticAccentSurface: string;
|
|
@@ -142,7 +164,7 @@ export const semanticDangerBorder: string;
|
|
|
142
164
|
export const semanticInfoSurface: string;
|
|
143
165
|
/** Info outline for badges and callouts. Non-text role. */
|
|
144
166
|
export const semanticInfoBorder: string;
|
|
145
|
-
/** Text and icons on a danger fill. Inverts with the fill, like primary-foreground. */
|
|
167
|
+
/** Text and icons on a danger fill. Inverts with the fill, like primary-foreground: white on the light-theme red, near-black on the dark-theme salmon. */
|
|
146
168
|
export const semanticDangerForeground: string;
|
|
147
169
|
/** Warning on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text. */
|
|
148
170
|
export const semanticWarningOnDark: string;
|
package/tokens/build/tokens.json
CHANGED
|
@@ -22,65 +22,77 @@
|
|
|
22
22
|
"color-accent-800": {"colorSpace":"srgb","components":[0.2745,0.1882,0.6196],"hex":"#46309e"},
|
|
23
23
|
"color-accent-900": {"colorSpace":"srgb","components":[0.1804,0.1294,0.4392],"hex":"#2e2170"},
|
|
24
24
|
"color-accent-950": {"colorSpace":"srgb","components":[0.1294,0.0902,0.2549],"hex":"#211741"},
|
|
25
|
-
"color-accent-base": {"colorSpace":"srgb","components":[0.
|
|
26
|
-
"color-status-success": {"colorSpace":"srgb","components":[0.
|
|
27
|
-
"color-status-warning": {"colorSpace":"srgb","components":[0.
|
|
28
|
-
"color-status-danger": {"colorSpace":"srgb","components":[0.
|
|
29
|
-
"color-status-info": {"colorSpace":"srgb","components":[0.
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
25
|
+
"color-accent-base": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
26
|
+
"color-status-success": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295"},
|
|
27
|
+
"color-status-warning": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
28
|
+
"color-status-danger": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
29
|
+
"color-status-info": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
30
|
+
"color-dark-50": {"colorSpace":"srgb","components":[0.9725,0.9647,0.9529],"hex":"#f8f6f3"},
|
|
31
|
+
"color-dark-100": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
32
|
+
"color-dark-200": {"colorSpace":"srgb","components":[0.851,0.8431,0.8275],"hex":"#d9d7d3"},
|
|
33
|
+
"color-dark-300": {"colorSpace":"srgb","components":[0.7765,0.7686,0.7529],"hex":"#c6c4c0"},
|
|
34
|
+
"color-dark-400": {"colorSpace":"srgb","components":[0.6706,0.6627,0.6471],"hex":"#aba9a5"},
|
|
35
|
+
"color-dark-450": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
36
|
+
"color-dark-500": {"colorSpace":"srgb","components":[0.4196,0.4118,0.3961],"hex":"#6b6965"},
|
|
37
|
+
"color-dark-600": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
38
|
+
"color-dark-700": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
39
|
+
"color-dark-800": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
40
|
+
"color-dark-900": {"colorSpace":"srgb","components":[0.1294,0.1216,0.1098],"hex":"#211f1c"},
|
|
41
|
+
"color-dark-950": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
42
|
+
"semantic-background": {"colorSpace":"srgb","components":[0.1294,0.1216,0.1098],"hex":"#211f1c"},
|
|
43
|
+
"semantic-surface": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
44
|
+
"semantic-elevated-surface": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
45
|
+
"semantic-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
46
|
+
"semantic-muted-foreground": {"colorSpace":"srgb","components":[0.6706,0.6627,0.6471],"hex":"#aba9a5"},
|
|
47
|
+
"semantic-subtle-foreground": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
48
|
+
"semantic-border": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
49
|
+
"semantic-primary": {"colorSpace":"srgb","components":[0.4078,0.2941,0.7098],"hex":"#684bb5"},
|
|
38
50
|
"semantic-accent": {"colorSpace":"srgb","components":[0.8706,0.8353,0.9843],"hex":"#ded5fb"},
|
|
39
|
-
"semantic-success": {"colorSpace":"srgb","components":[0.
|
|
40
|
-
"semantic-warning": {"colorSpace":"srgb","components":[0.
|
|
41
|
-
"semantic-danger": {"colorSpace":"srgb","components":[0.
|
|
42
|
-
"semantic-info": {"colorSpace":"srgb","components":[0.
|
|
43
|
-
"semantic-focus": {"colorSpace":"srgb","components":[0.
|
|
44
|
-
"semantic-disabled": {"colorSpace":"srgb","components":[0.
|
|
45
|
-
"semantic-card": {"colorSpace":"srgb","components":[0.
|
|
46
|
-
"semantic-card-foreground": {"colorSpace":"srgb","components":[0.
|
|
47
|
-
"semantic-popover": {"colorSpace":"srgb","components":[0.
|
|
48
|
-
"semantic-popover-foreground": {"colorSpace":"srgb","components":[0.
|
|
49
|
-
"semantic-muted": {"colorSpace":"srgb","components":[0.
|
|
50
|
-
"semantic-sidebar": {"colorSpace":"srgb","components":[0.
|
|
51
|
-
"semantic-sidebar-border": {"colorSpace":"srgb","components":[0.
|
|
52
|
-
"semantic-border-strong": {"colorSpace":"srgb","components":[0.
|
|
53
|
-
"semantic-input": {"colorSpace":"srgb","components":[0.
|
|
54
|
-
"semantic-primary-foreground": {"colorSpace":"srgb","components":[0.
|
|
55
|
-
"semantic-primary-hover": {"colorSpace":"srgb","components":[0.
|
|
56
|
-
"semantic-link": {"colorSpace":"srgb","components":[0.
|
|
57
|
-
"semantic-accent-surface": {"colorSpace":"srgb","components":[0.
|
|
58
|
-
"semantic-accent-surface-hover": {"colorSpace":"srgb","components":[0.
|
|
59
|
-
"semantic-selected": {"colorSpace":"srgb","components":[0.
|
|
60
|
-
"semantic-selected-foreground": {"colorSpace":"srgb","components":[0.
|
|
61
|
-
"semantic-secondary": {"colorSpace":"srgb","components":[0.
|
|
62
|
-
"semantic-secondary-foreground": {"colorSpace":"srgb","components":[0.
|
|
63
|
-
"semantic-secondary-hover": {"colorSpace":"srgb","components":[0.
|
|
64
|
-
"semantic-ring": {"colorSpace":"srgb","components":[0.
|
|
65
|
-
"semantic-disabled-surface": {"colorSpace":"srgb","components":[0.
|
|
66
|
-
"semantic-skeleton": {"colorSpace":"srgb","components":[0.
|
|
51
|
+
"semantic-success": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295"},
|
|
52
|
+
"semantic-warning": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
53
|
+
"semantic-danger": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
54
|
+
"semantic-info": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
55
|
+
"semantic-focus": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
56
|
+
"semantic-disabled": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
57
|
+
"semantic-card": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
58
|
+
"semantic-card-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
59
|
+
"semantic-popover": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
60
|
+
"semantic-popover-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
61
|
+
"semantic-muted": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
62
|
+
"semantic-sidebar": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
63
|
+
"semantic-sidebar-border": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
64
|
+
"semantic-border-strong": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
65
|
+
"semantic-input": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
66
|
+
"semantic-primary-foreground": {"colorSpace":"srgb","components":[0.9686,0.9608,0.9961],"hex":"#f7f5fe"},
|
|
67
|
+
"semantic-primary-hover": {"colorSpace":"srgb","components":[0.4745,0.3647,0.7882],"hex":"#795dc9"},
|
|
68
|
+
"semantic-link": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
69
|
+
"semantic-accent-surface": {"colorSpace":"srgb","components":[0.1765,0.1569,0.2627],"hex":"#2d2843"},
|
|
70
|
+
"semantic-accent-surface-hover": {"colorSpace":"srgb","components":[0.2275,0.2,0.3373],"hex":"#3a3356"},
|
|
71
|
+
"semantic-selected": {"colorSpace":"srgb","components":[0.2863,0.251,0.4275],"hex":"#49406d"},
|
|
72
|
+
"semantic-selected-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
73
|
+
"semantic-secondary": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
74
|
+
"semantic-secondary-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
75
|
+
"semantic-secondary-hover": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
76
|
+
"semantic-ring": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
77
|
+
"semantic-disabled-surface": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
78
|
+
"semantic-skeleton": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
67
79
|
"semantic-overlay": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.6},
|
|
68
|
-
"semantic-hatch": {"colorSpace":"srgb","components":[0.
|
|
69
|
-
"semantic-corner-mark": {"colorSpace":"srgb","components":[0.
|
|
80
|
+
"semantic-hatch": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
81
|
+
"semantic-corner-mark": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
70
82
|
"semantic-shadow-hairline": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.3},
|
|
71
83
|
"semantic-shadow-contact": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.4},
|
|
72
|
-
"semantic-success-surface": {"colorSpace":"srgb","components":[0.
|
|
73
|
-
"semantic-success-border": {"colorSpace":"srgb","components":[0.
|
|
74
|
-
"semantic-warning-surface": {"colorSpace":"srgb","components":[0.
|
|
75
|
-
"semantic-warning-border": {"colorSpace":"srgb","components":[0.
|
|
76
|
-
"semantic-danger-surface": {"colorSpace":"srgb","components":[0.
|
|
77
|
-
"semantic-danger-border": {"colorSpace":"srgb","components":[0.
|
|
78
|
-
"semantic-info-surface": {"colorSpace":"srgb","components":[0.
|
|
79
|
-
"semantic-info-border": {"colorSpace":"srgb","components":[0.
|
|
80
|
-
"semantic-danger-foreground": {"colorSpace":"srgb","components":[0.
|
|
81
|
-
"semantic-warning-on-dark": {"colorSpace":"srgb","components":[0.
|
|
82
|
-
"semantic-danger-on-dark": {"colorSpace":"srgb","components":[0.
|
|
83
|
-
"semantic-info-on-dark": {"colorSpace":"srgb","components":[0.
|
|
84
|
+
"semantic-success-surface": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295","alpha":0.12},
|
|
85
|
+
"semantic-success-border": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295","alpha":0.35},
|
|
86
|
+
"semantic-warning-surface": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b","alpha":0.12},
|
|
87
|
+
"semantic-warning-border": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b","alpha":0.35},
|
|
88
|
+
"semantic-danger-surface": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f","alpha":0.12},
|
|
89
|
+
"semantic-danger-border": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f","alpha":0.35},
|
|
90
|
+
"semantic-info-surface": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa","alpha":0.12},
|
|
91
|
+
"semantic-info-border": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa","alpha":0.35},
|
|
92
|
+
"semantic-danger-foreground": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
93
|
+
"semantic-warning-on-dark": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
94
|
+
"semantic-danger-on-dark": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
95
|
+
"semantic-info-on-dark": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
84
96
|
"font-heading": ["Inter","system-ui","sans-serif"],
|
|
85
97
|
"font-body": ["Inter","system-ui","sans-serif"],
|
|
86
98
|
"font-mono": ["JetBrains Mono","ui-monospace","monospace"],
|