@tensor_1/tokens 2.55.2 → 2.56.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/build/css/components.css +1 -1
- package/build/css/styles.css +1 -1
- package/build/css/tokens.css +65 -54
- package/build/tailwind/preset.cjs +2 -0
- package/build/tailwind/theme.css +2 -0
- package/build/ts/tokens.d.ts +1 -1
- package/build/ts/tokens.js +76 -54
- package/package.json +1 -1
- package/styles/components/arrive.css +67 -0
- package/styles/components/chart-card.css +87 -0
- package/styles/components/meter.css +12 -0
- package/styles/components/peek.css +9 -5
- package/styles/components/status-pill.css +34 -2
- package/tokens/base/color.json +32 -30
- package/tokens/base/effect.json +9 -0
- package/tokens/dark/color.json +27 -26
|
@@ -24,8 +24,11 @@
|
|
|
24
24
|
.uix-peek[open]::backdrop { opacity: 1; transition-duration: var(--uix-dur-slow); }
|
|
25
25
|
@starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
/* Navigation and close share the first row. The record name gets the full
|
|
28
|
+
next row when navigation exists; hints follow it. Without navigation the
|
|
29
|
+
title stays beside close, so optional regions never leave empty rows. */
|
|
30
|
+
.uix-peek__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
|
|
31
|
+
.uix-peek__nav { grid-column: 1; grid-row: 1; display: inline-flex; gap: var(--uix-space-1); }
|
|
29
32
|
.uix-peek__navbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text); border-radius: var(--uix-radius-sm); cursor: pointer; }
|
|
30
33
|
.uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
|
|
31
34
|
/* boundary nav uses aria-disabled (still focusable, so focus isn't stranded — UIX-A11Y-1);
|
|
@@ -34,12 +37,13 @@
|
|
|
34
37
|
.uix-peek__navbtn[aria-disabled="true"]:hover { background: var(--uix-surface); }
|
|
35
38
|
/* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
|
|
36
39
|
heading font/tracking/leading so it renders exactly like the old <div> */
|
|
37
|
-
.uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
|
|
40
|
+
.uix-peek__title { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
|
|
41
|
+
.uix-peek__header:has(.uix-peek__nav) .uix-peek__title { grid-column: 1 / -1; grid-row: 2; }
|
|
38
42
|
.uix-peek__title a { color: var(--uix-link); }
|
|
39
|
-
.uix-peek__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
|
|
43
|
+
.uix-peek__close { grid-column: 2; grid-row: 1; align-self: start; margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
|
|
40
44
|
.uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
|
|
41
45
|
.uix-peek__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
|
|
42
|
-
.uix-peek__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
46
|
+
.uix-peek__hint { grid-column: 1 / -1; min-width: 0; white-space: normal; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
43
47
|
.uix-peek__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-4); border-top: 1px solid var(--uix-border); }
|
|
44
48
|
|
|
45
49
|
/* a table wired to open the peek (app.js sets data-uix-rowpeek): its rows read as clickable,
|
|
@@ -11,8 +11,11 @@
|
|
|
11
11
|
.uix-pill--info { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
|
|
12
12
|
.uix-pill--warning { --tone-bg: var(--uix-warning-bg); --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning); }
|
|
13
13
|
.uix-pill--danger { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger); }
|
|
14
|
-
/* critical
|
|
15
|
-
|
|
14
|
+
/* critical (calm kit 2.56): no longer a solid red fill. The danger tint with the danger words
|
|
15
|
+
in semibold and the danger dot, so the one thing that is broken now reads apart from a plain
|
|
16
|
+
danger pill without shouting. A solid red fill is kept for the destructive button only. */
|
|
17
|
+
.uix-pill--critical { --tone-bg: var(--uix-danger-bg); --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger-solid); font-weight: 600; }
|
|
18
|
+
/* muted = a quiet, chrome-less label */
|
|
16
19
|
.uix-pill--muted { --tone-bg: transparent; --tone-fg: var(--uix-text-muted); --tone-dot: var(--uix-text-muted); }
|
|
17
20
|
/* time-pressure tones (U1 tokens — distinct from severity and validation-error) */
|
|
18
21
|
.uix-pill--attention { --tone-bg: var(--uix-attention-bg); --tone-fg: var(--uix-attention-text); --tone-dot: var(--uix-attention); }
|
|
@@ -65,3 +68,32 @@
|
|
|
65
68
|
/* the dot treatment has no box at any size: its label lines up with the cell's other text */
|
|
66
69
|
.uix-pill--dot:is(.uix-pill--sm, .uix-pill--lg) { padding-inline: 0; }
|
|
67
70
|
}
|
|
71
|
+
|
|
72
|
+
/* StatusDot (calm kit 2.56): a dot and a word, no box, for the signal ladder on a glance page.
|
|
73
|
+
neutral is ink, info the accent, warning amber and critical red: the word carries the meaning,
|
|
74
|
+
the dot is the glance. Word and dot wear the tone's TEXT role: AA on the surface, the app
|
|
75
|
+
background and the tone's own tint in both modes, so the dot clears 3:1 wherever the word can
|
|
76
|
+
sit (the SOLID role measured 2.78:1 for success and 2.91:1 for warning on their light tints).
|
|
77
|
+
Never pulses. */
|
|
78
|
+
@layer uix.components {
|
|
79
|
+
.uix-status-dot {
|
|
80
|
+
display: inline-flex; align-items: baseline; gap: var(--uix-space-2);
|
|
81
|
+
font-size: var(--uix-text-meta); font-weight: 600; line-height: 1.4; color: var(--tone-fg, var(--uix-text-hushed));
|
|
82
|
+
}
|
|
83
|
+
.uix-status-dot::before {
|
|
84
|
+
content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%;
|
|
85
|
+
background: var(--tone-dot, var(--uix-text-hushed));
|
|
86
|
+
}
|
|
87
|
+
.uix-status-dot--neutral { --tone-fg: var(--uix-text-hushed); --tone-dot: var(--uix-text-hushed); font-weight: 500; }
|
|
88
|
+
.uix-status-dot--info { --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info-text); }
|
|
89
|
+
.uix-status-dot--success { --tone-fg: var(--uix-success-text); --tone-dot: var(--uix-success-text); }
|
|
90
|
+
.uix-status-dot--warning { --tone-fg: var(--uix-warning-text); --tone-dot: var(--uix-warning-text); }
|
|
91
|
+
.uix-status-dot--critical { --tone-fg: var(--uix-danger-text); --tone-dot: var(--uix-danger-text); }
|
|
92
|
+
/* quiet: the word in ink, only the dot keeps the hue (a list of services, a legend line) */
|
|
93
|
+
.uix-status-dot--quiet { color: var(--uix-text-hushed); font-weight: 500; }
|
|
94
|
+
.uix-status-dot--sm { gap: var(--uix-space-1); font-size: var(--uix-text-eyebrow); }
|
|
95
|
+
.uix-status-dot--sm::before { width: 6px; height: 6px; }
|
|
96
|
+
@media (forced-colors: active) {
|
|
97
|
+
.uix-status-dot::before { background: CanvasText; }
|
|
98
|
+
}
|
|
99
|
+
}
|
package/tokens/base/color.json
CHANGED
|
@@ -25,24 +25,24 @@
|
|
|
25
25
|
"ring": { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
|
|
26
26
|
"brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 12%, transparent)", "$description": "Runtime: color-mix of the live accent." },
|
|
27
27
|
|
|
28
|
-
"success": { "$type": "color", "$value": "#047857" },
|
|
28
|
+
"success": { "$type": "color", "$value": "#2B7752", "$description": "Success role, light: the TEXT colour (--uix-success-text aliases it) and the fill of a success button with white --uix-success-fg (5.4:1). Calm kit (2.56): chroma 0.096, was #047857. 4.8:1 on its own tint." },
|
|
29
29
|
"success-fg": { "$type": "color", "$value": "#FFFFFF" },
|
|
30
|
-
"success-bg": { "$type": "color", "$value": "#
|
|
30
|
+
"success-bg": { "$type": "color", "$value": "#E8F4ED" },
|
|
31
31
|
"success-text": { "$type": "color", "$value": "var(--uix-success)", "$description": "Success-toned TEXT (pill, alert icon, stat trend, SLA ok). Light aliases --uix-success (#047857, already AA on the pale tint), so a theme's light success override still reaches text; dark sets its own value in the calibrated status-text band (HAR-1562). Paint text with this, not with --uix-success, which is the solid/dot role on dark." },
|
|
32
|
-
"warning": { "$type": "color", "$value": "#F99C00" },
|
|
32
|
+
"warning": { "$type": "color", "$value": "#D4A03A", "$description": "Warning FILL, light (a warning button or banner bar with the dark --uix-warning-fg, 7.4:1). Calm kit (2.56): a softer amber, was #F99C00. Text is --uix-warning-text; a dot is --uix-warning-solid." },
|
|
33
33
|
"warning-fg": { "$type": "color", "$value": "#1A1A1A" },
|
|
34
|
-
"warning-bg": { "$type": "color", "$value": "#
|
|
35
|
-
"warning-text": { "$type": "color", "$value": "#
|
|
36
|
-
"warning-border": { "$type": "color", "$value": "#
|
|
37
|
-
"info": { "$type": "color", "$value": "#1447E6" },
|
|
34
|
+
"warning-bg": { "$type": "color", "$value": "#FAF2E1" },
|
|
35
|
+
"warning-text": { "$type": "color", "$value": "#8F6213", "$description": "Warning-toned TEXT, light: 5.4:1 on --uix-surface and 4.8:1 on --uix-warning-bg (calm kit 2.56, was #92400E). Dark mode overrides to track --uix-warning. Used by status-pill --warning." },
|
|
36
|
+
"warning-border": { "$type": "color", "$value": "#B8862C", "$description": "Warning-toned BORDER for an outlined container on a neutral surface (stat tile --warning): 3.2:1 on --uix-surface, so it clears the 3:1 non-text minimum (calm kit 2.56, was #D97706)." },
|
|
37
|
+
"info": { "$type": "color", "$value": "#3A5BD0", "$description": "Info role, light: the TEXT colour on --uix-info-bg (5.1:1) and the fill of an info badge with white --uix-info-fg (5.9:1). Calm kit (2.56): no longer the brand blue #1447E6." },
|
|
38
38
|
"info-fg": { "$type": "color", "$value": "#FFFFFF" },
|
|
39
|
-
"info-bg": { "$type": "color", "$value": "#
|
|
40
|
-
"info-text": { "$type": "color", "$value": "#
|
|
41
|
-
"danger": { "$type": "color", "$value": "#E40014" },
|
|
39
|
+
"info-bg": { "$type": "color", "$value": "#ECF0FC" },
|
|
40
|
+
"info-text": { "$type": "color", "$value": "#3A5BD0", "$description": "Info-toned TEXT, legible on --uix-info-bg and the surfaces (5.9:1 on white). Light = --uix-info; dark brightens it. Used by status-pill/alert/node --info." },
|
|
41
|
+
"danger": { "$type": "color", "$value": "#B8433C", "$description": "Danger FILL, light: the destructive button and the solid critical pill (treatment=\"solid\") with white --uix-danger-fg, 5.4:1. Calm kit (2.56): chroma 0.15, was the saturated #E40014 (C 0.24). Text is --uix-danger-text; a dot is --uix-danger-solid." },
|
|
42
42
|
"danger-fg": { "$type": "color", "$value": "#FFFFFF" },
|
|
43
|
-
"danger-bg": { "$type": "color", "$value": "#
|
|
44
|
-
"danger-border": { "$type": "color", "$value": "#
|
|
45
|
-
"danger-text": { "$type": "color", "$value": "#
|
|
43
|
+
"danger-bg": { "$type": "color", "$value": "#FBEDEB" },
|
|
44
|
+
"danger-border": { "$type": "color", "$value": "#D65A50", "$description": "Danger-toned BORDER for an outlined container on a neutral surface (stat tile --danger): 3.9:1 on white, so it clears the 3:1 non-text minimum. Calm kit (2.56), was #E40014." },
|
|
45
|
+
"danger-text": { "$type": "color", "$value": "#B9423C", "$description": "Danger-toned TEXT: 5.4:1 on --uix-surface and 4.7:1 on --uix-danger-bg (calm kit 2.56, was #C20012). --uix-danger stays the FILL role (destructive button, solid critical pill). Dark mode brightens it. Used by pill/alert/stat-trend/field-error/menu/sla/node/audit --danger and StatusDot critical." },
|
|
46
46
|
"amber": { "$type": "color", "$value": "#C98A1E", "$description": "SEV-3 / medium-severity tone — the third tier of the severity ramp (danger = SEV-1, warning = SEV-2, amber = SEV-3). A muted ochre, deliberately distinct from the brighter --uix-warning so the three tiers read apart." },
|
|
47
47
|
"amber-text": { "$type": "color", "$value": "#795006", "$description": "Amber-toned TEXT, legible on a faint amber tint and on dark surfaces (the SEV-3 ochre is too light as text on pale fills). Dark mode brightens it to track --uix-amber. Used by severity-3 badges." },
|
|
48
48
|
"amber-bg": { "$type": "color", "$value": "#FEFCE8", "$description": "Amber-toned wash for SEV-3 pill backgrounds. Completes the amber ramp (amber / amber-text / amber-bg) to match the depth of the warning/danger/info ramps." },
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
"attention-text": { "$type": "color", "$value": "#9A3412", "$description": "Attention-toned TEXT legible on --uix-attention-bg (#FFEDD5). Dark mode brightens to track --uix-attention." },
|
|
53
53
|
"attention-solid": { "$type": "color", "$value": "#EA580C", "$description": "SOLID role for attention fills/dots/pulses (see success-solid)." },
|
|
54
54
|
|
|
55
|
-
"overdue": { "$type": "color", "$value": "#
|
|
56
|
-
"overdue-bg": { "$type": "color", "$value": "#
|
|
57
|
-
"overdue-text": { "$type": "color", "$value": "#
|
|
58
|
-
"overdue-solid": { "$type": "color", "$value": "#
|
|
55
|
+
"overdue": { "$type": "color", "$value": "#B8433C", "$description": "Time-pressure semantic, 'breached / past due'. The danger family as a SEPARATE role so products retheme breach independently of validation error. Calm kit (2.56): follows the softened danger values, was #DC2626." },
|
|
56
|
+
"overdue-bg": { "$type": "color", "$value": "#FBEDEB" },
|
|
57
|
+
"overdue-text": { "$type": "color", "$value": "#B9423C", "$description": "Overdue-toned TEXT legible on --uix-overdue-bg (4.7:1). Calm kit (2.56), was #991B1B. Dark mode brightens." },
|
|
58
|
+
"overdue-solid": { "$type": "color", "$value": "#D65A50", "$description": "SOLID role for overdue fills/dots: 3.9:1 on white (calm kit 2.56, was #EF4444)." },
|
|
59
59
|
|
|
60
60
|
"sev-4": { "$type": "color", "$value": "var(--uix-info)", "$description": "SEV-4 alias → info tone. Full severity ramp: SEV-1=danger, SEV-2=warning, SEV-3=amber, SEV-4=info, SEV-5=neutral. var() reference — no dark override needed." },
|
|
61
61
|
"sev-4-bg": { "$type": "color", "$value": "var(--uix-info-bg)" },
|
|
@@ -64,30 +64,32 @@
|
|
|
64
64
|
"sev-5-bg": { "$type": "color", "$value": "var(--uix-bg-active)" },
|
|
65
65
|
"sev-5-text": { "$type": "color", "$value": "var(--uix-text-hushed)" },
|
|
66
66
|
|
|
67
|
-
"success-solid": { "$type": "color", "$value": "#
|
|
68
|
-
"warning-solid": { "$type": "color", "$value": "#
|
|
69
|
-
"info-solid": { "$type": "color", "$value": "#
|
|
70
|
-
"danger-solid": { "$type": "color", "$value": "#
|
|
67
|
+
"success-solid": { "$type": "color", "$value": "#3FA373", "$description": "SOLID status role: the dot/fill/pulse colour, 3.1:1 on white (calm kit 2.56, was #10B981). Distinct from the legible TEXT role (--uix-success). Products override per brand." },
|
|
68
|
+
"warning-solid": { "$type": "color", "$value": "#B8862C", "$description": "SOLID status role (see success-solid): 3.2:1 on white (calm kit 2.56, was #F59E0B, 2.1:1)." },
|
|
69
|
+
"info-solid": { "$type": "color", "$value": "#5B7BE3", "$description": "SOLID status role (see success-solid): 3.9:1 on white (calm kit 2.56, was #2563EB)." },
|
|
70
|
+
"danger-solid": { "$type": "color", "$value": "#D65A50", "$description": "SOLID status role: the critical DOT (StatusDot, the dot pill), 3.9:1 on white. Calm kit (2.56): was #EF4444. Not a fill for text; that is --uix-danger." },
|
|
71
71
|
|
|
72
72
|
"neutral-solid": { "$type": "color", "$value": "#8A8A8A", "$description": "NEUTRAL status family (HAR-1562): the default, non-alarming status tone (open, scheduled, draft, in progress). Solid = the dot/fill, 3:1 non-text on white. Dark overrides." },
|
|
73
73
|
"neutral-text": { "$type": "color", "$value": "var(--uix-text-hushed)", "$description": "Neutral status TEXT, alias of --uix-text-hushed. var() reference, no dark override needed." },
|
|
74
74
|
"neutral-bg": { "$type": "color", "$value": "var(--uix-bg-active)", "$description": "Neutral status tint, alias of --uix-bg-active." },
|
|
75
75
|
"neutral-border": { "$type": "color", "$value": "var(--uix-border-strong)", "$description": "Neutral status outline, alias of --uix-border-strong." },
|
|
76
76
|
|
|
77
|
-
"chart-1": { "$type": "color", "$value": "#0455E6", "$description": "Categorical palette, light.
|
|
78
|
-
"chart-2": { "$type": "color", "$value": "#
|
|
79
|
-
"chart-3": { "$type": "color", "$value": "#
|
|
80
|
-
"chart-4": { "$type": "color", "$value": "#
|
|
81
|
-
"chart-5": { "$type": "color", "$value": "#
|
|
82
|
-
"chart-6": { "$type": "color", "$value": "#
|
|
83
|
-
"chart-7": { "$type": "color", "$value": "#
|
|
84
|
-
"chart-8": { "$type": "color", "$value": "#
|
|
77
|
+
"chart-1": { "$type": "color", "$value": "#0455E6", "$description": "Categorical palette v2 (calm kit 2.56), light. The first slot is THE series colour (--uix-chart-series) and the brand blue (#0455E6, unchanged from 2.55); 2 teal and 3 violet are the three quiet category hues; 4-8 extend it for report charts. No red slot (red never encodes a series) and no amber slot (amber is reserved for attention). Validated on --uix-surface and --uix-bg-app: L 0.43-0.77, C >= 0.10, adjacent CVD dE >= 8, normal-vision dE >= 15, >= 3:1 (chart-palette.test.mjs)." },
|
|
78
|
+
"chart-2": { "$type": "color", "$value": "#1F978A" },
|
|
79
|
+
"chart-3": { "$type": "color", "$value": "#8C72D6" },
|
|
80
|
+
"chart-4": { "$type": "color", "$value": "#4C9A5A" },
|
|
81
|
+
"chart-5": { "$type": "color", "$value": "#B45E9A" },
|
|
82
|
+
"chart-6": { "$type": "color", "$value": "#7F8A2E" },
|
|
83
|
+
"chart-7": { "$type": "color", "$value": "#2F8FC2" },
|
|
84
|
+
"chart-8": { "$type": "color", "$value": "#5E7D3A" },
|
|
85
|
+
"chart-series": { "$type": "color", "$value": "var(--uix-chart-1)", "$description": "THE series colour of a glance chart (calm kit 2.56): one series in blue, any second one in --uix-chart-comparison grey. Alias of --uix-chart-1, so a theme that re-steps the palette moves it too." },
|
|
86
|
+
"chart-series-soft": { "$type": "color", "$value": "rgba(4,85,230,.14)", "$description": "The series colour as a faint wash: an area under a glance line, a highlighted bucket. Dark overrides." },
|
|
85
87
|
"chart-neutral": { "$type": "color", "$value": "#64748B" },
|
|
86
88
|
"chart-grid": { "$type": "color", "$value": "#EDEDED", "$description": "Chart gridline: a SOLID 1px hairline, recessive. Dashes are reserved for projections and thresholds (HAR-1552)." },
|
|
87
89
|
"chart-axis": { "$type": "color", "$value": "#D4D4D4", "$description": "Chart axis line (labels use --uix-text-muted)." },
|
|
88
90
|
"chart-reference": { "$type": "color", "$value": "#525252", "$description": "Neutral ink for target, budget and baseline reference lines: 7.8:1 on --uix-surface. Not a status colour." },
|
|
89
91
|
"chart-zone-warning": { "$type": "color", "$value": "rgba(217,119,6,.10)", "$description": "Alpha fill for a warning threshold zone behind the series." },
|
|
90
|
-
"chart-zone-danger": { "$type": "color", "$value": "rgba(
|
|
92
|
+
"chart-zone-danger": { "$type": "color", "$value": "rgba(214,90,80,.08)", "$description": "Alpha fill for a danger threshold zone behind the series (the calm danger dot at 8 %)." },
|
|
91
93
|
"chart-forecast-band": { "$type": "color", "$value": "rgba(10,10,10,.06)", "$description": "Alpha fill for a forecast / confidence band; neutral so it works under any series hue." },
|
|
92
94
|
"chart-event": { "$type": "color", "$value": "#737373", "$description": "Event-marker line and label ink (deploys, incidents, releases): 4.7:1 on --uix-surface." },
|
|
93
95
|
"chart-partial": { "$type": "color", "$value": "rgba(10,10,10,.10)", "$description": "Hatch base for a partial (incomplete) period." },
|
package/tokens/base/effect.json
CHANGED
|
@@ -37,7 +37,16 @@
|
|
|
37
37
|
"loop-blink": { "$type": "duration", "$value": "1100ms", "$description": "One caret blink cycle." },
|
|
38
38
|
"loop-pulse": { "$type": "duration", "$value": "2000ms", "$description": "One cycle of the reduced-motion opacity pulse that replaces spinners, shimmer and indeterminate progress, so a still-working indicator stays visibly alive without movement." },
|
|
39
39
|
|
|
40
|
+
"dur-arrive": { "$type": "duration", "$value": "420ms", "$description": "Arrival (calm kit 2.56): how long one card of a glance page takes to fade and rise into place on the first paint of a session. Never on a refresh or a data change." },
|
|
41
|
+
"stagger-arrive": { "$type": "duration", "$value": "45ms", "$description": "Arrival: the gap between one card starting and the next, in reading order." },
|
|
42
|
+
"delay-arrive-trace": { "$type": "duration", "$value": "150ms", "$description": "Arrival: how long after its card starts a chart begins to draw (a line traces, bars grow)." },
|
|
43
|
+
"dur-arrive-trace": { "$type": "duration", "$value": "700ms", "$description": "Arrival: a line or sparkline tracing in from the left." },
|
|
44
|
+
"dur-arrive-grow": { "$type": "duration", "$value": "500ms", "$description": "Arrival: one bar growing from its baseline (paired bars, a bar list, a meter)." },
|
|
45
|
+
"stagger-arrive-grow": { "$type": "duration", "$value": "25ms", "$description": "Arrival: the gap between one bar (or bucket) starting to grow and the next." },
|
|
46
|
+
"dur-arrive-count": { "$type": "duration", "$value": "600ms", "$description": "Arrival: a headline number counting up from zero (Count arrive). Later changes tick once instead." },
|
|
47
|
+
|
|
40
48
|
"lift": { "$type": "dimension", "$value": "4px" },
|
|
49
|
+
"arrive-rise": { "$type": "dimension", "$value": "8px", "$description": "Arrival: how far a card rises while it fades in." },
|
|
41
50
|
|
|
42
51
|
"z-raised": { "$type": "number", "$value": "1", "$description": "z-index ladder (semantic stacking order). raised = locally lifted within a component: a sticky table header & first column, a flow node title over its diamond, a heartbeat dot over its ping." },
|
|
43
52
|
"z-sticky": { "$type": "number", "$value": "3", "$description": "A sticky plane that must outrank raised siblings — the pinned-column header corner, which sits above both the sticky row and the sticky column." },
|
package/tokens/dark/color.json
CHANGED
|
@@ -20,24 +20,24 @@
|
|
|
20
20
|
"ring": { "$type": "color", "$value": "var(--uix-brand,#3080FF)" },
|
|
21
21
|
"brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 16%, transparent)" },
|
|
22
22
|
|
|
23
|
-
"success": { "$type": "color", "$value": "#
|
|
23
|
+
"success": { "$type": "color", "$value": "#5DB887", "$description": "Calibrated (HAR-1562, calm kit 2.56): dark status TEXT tokens share one lightness band (OKLCH L 74-80%, C <= 0.10) near --uix-text-hushed, SOLIDS C <= 0.14, tints = solid at 12% alpha. Dark --uix-success is the fill/dot (dark --uix-success-fg on it, 6.3:1); text is --uix-success-text." },
|
|
24
24
|
"success-fg": { "$type": "color", "$value": "#002C22" },
|
|
25
|
-
"success-bg": { "$type": "color", "$value": "rgba(
|
|
25
|
+
"success-bg": { "$type": "color", "$value": "rgba(93,184,135,.12)" },
|
|
26
26
|
"success-text": { "$type": "color", "$value": "#7CC79F", "$description": "Success-toned TEXT on dark: 9.5:1 on --uix-surface, 8.0:1 on its own tint." },
|
|
27
|
-
"warning": { "$type": "color", "$value": "#
|
|
27
|
+
"warning": { "$type": "color", "$value": "#D9B571", "$description": "On dark --uix-warning carries the calibrated warning TEXT value, because --uix-warning-text chains to it (var(--uix-warning,...)) and that chain is part of the contract. The fill/dot role is --uix-warning-solid. Calm kit (2.56): C 0.096." },
|
|
28
28
|
"warning-fg": { "$type": "color", "$value": "#1A1A1A" },
|
|
29
|
-
"warning-bg": { "$type": "color", "$value": "rgba(217,
|
|
30
|
-
"warning-border": { "$type": "color", "$value": "#
|
|
31
|
-
"warning-text": { "$type": "color", "$value": "var(--uix-warning,#
|
|
32
|
-
"info": { "$type": "color", "$value": "#2563EB" },
|
|
29
|
+
"warning-bg": { "$type": "color", "$value": "rgba(217,168,74,.12)" },
|
|
30
|
+
"warning-border": { "$type": "color", "$value": "#B48C3E", "$description": "On dark, a deeper amber than the warning text so the outline reads as a tone rather than a highlight; 6.1:1 on --uix-surface #111111 (calm kit 2.56, was #CA8A04)." },
|
|
31
|
+
"warning-text": { "$type": "color", "$value": "var(--uix-warning,#D9B571)", "$description": "On dark, warning text tracks --uix-warning live (fallback to the dark warning value: 9.7:1 on --uix-surface, 8.0:1 on its own tint)." },
|
|
32
|
+
"info": { "$type": "color", "$value": "#3D5CC8", "$description": "The dark info FILL with white --uix-info-fg on it: 5.9:1 (calm kit 2.56, was #2563EB, C 0.2). Text is --uix-info-text." },
|
|
33
33
|
"info-fg": { "$type": "color", "$value": "#FFFFFF" },
|
|
34
|
-
"info-bg": { "$type": "color", "$value": "rgba(
|
|
35
|
-
"info-text": { "$type": "color", "$value": "#
|
|
36
|
-
"danger": { "$type": "color", "$value": "#
|
|
34
|
+
"info-bg": { "$type": "color", "$value": "rgba(120,144,230,.12)" },
|
|
35
|
+
"info-text": { "$type": "color", "$value": "#97AEEC", "$description": "On dark, info TEXT in the calibrated band: 8.6:1 on --uix-surface, 7.4:1 on its own tint (calm kit 2.56)." },
|
|
36
|
+
"danger": { "$type": "color", "$value": "#B4444A", "$description": "The dark danger FILL (destructive button, solid critical pill) with white --uix-danger-fg on it: 5.4:1. Calm kit (2.56): C 0.146, was #BE3A41." },
|
|
37
37
|
"danger-fg": { "$type": "color", "$value": "#FFFFFF" },
|
|
38
|
-
"danger-bg": { "$type": "color", "$value": "rgba(218,108,
|
|
39
|
-
"danger-border": { "$type": "color", "$value": "#
|
|
40
|
-
"danger-text": { "$type": "color", "$value": "#
|
|
38
|
+
"danger-bg": { "$type": "color", "$value": "rgba(218,108,100,.12)" },
|
|
39
|
+
"danger-border": { "$type": "color", "$value": "#DA6C64", "$description": "On dark, the danger dot as an outline; 5.7:1 on --uix-surface #111111." },
|
|
40
|
+
"danger-text": { "$type": "color", "$value": "#E4958F", "$description": "On dark, danger-toned TEXT for pill/field-error/stat-trend/menu/node/audit and StatusDot critical. Calibrated band (L 74.8 %, C 0.096): 8.1:1 on --uix-surface, 7.1:1 on its own tint. --uix-danger stays the fill (with white --uix-danger-fg)." },
|
|
41
41
|
"amber": { "$type": "color", "$value": "#E6B25C", "$description": "SEV-3 tone lightened for dark surfaces (the light-mode ochre #C98A1E is too dark on dark)." },
|
|
42
42
|
"amber-text": { "$type": "color", "$value": "#DDB370", "$description": "On dark, amber TEXT in the calibrated status-text band (HAR-1562: C <= 0.10; the old #E6B25C was C 0.12)." },
|
|
43
43
|
"amber-bg": { "$type": "color", "$value": "rgba(201,138,30,.14)" },
|
|
@@ -52,26 +52,27 @@
|
|
|
52
52
|
"overdue-text": { "$type": "color", "$value": "#E89D9F", "$description": "On dark, overdue TEXT: 8.8:1 on --uix-surface, reads AA on the faint overdue-bg." },
|
|
53
53
|
"overdue-solid": { "$type": "color", "$value": "#DA6C6C" },
|
|
54
54
|
|
|
55
|
-
"success-solid": { "$type": "color", "$value": "#
|
|
56
|
-
"warning-solid": { "$type": "color", "$value": "#
|
|
57
|
-
"info-solid": { "$type": "color", "$value": "#
|
|
58
|
-
"danger-solid": { "$type": "color", "$value": "#
|
|
55
|
+
"success-solid": { "$type": "color", "$value": "#5DB887" },
|
|
56
|
+
"warning-solid": { "$type": "color", "$value": "#D9A84A" },
|
|
57
|
+
"info-solid": { "$type": "color", "$value": "#7890E6" },
|
|
58
|
+
"danger-solid": { "$type": "color", "$value": "#DA6C64" },
|
|
59
59
|
"neutral-solid": { "$type": "color", "$value": "#868686", "$description": "Dark neutral status solid (dot/fill): 5.2:1 on --uix-surface." },
|
|
60
60
|
|
|
61
|
-
"chart-1": { "$type": "color", "$value": "#3280FC", "$description": "Categorical palette, dark: the same
|
|
62
|
-
"chart-2": { "$type": "color", "$value": "#
|
|
63
|
-
"chart-3": { "$type": "color", "$value": "#
|
|
64
|
-
"chart-4": { "$type": "color", "$value": "#
|
|
65
|
-
"chart-5": { "$type": "color", "$value": "#
|
|
66
|
-
"chart-6": { "$type": "color", "$value": "#
|
|
67
|
-
"chart-7": { "$type": "color", "$value": "#
|
|
68
|
-
"chart-8": { "$type": "color", "$value": "#
|
|
61
|
+
"chart-1": { "$type": "color", "$value": "#3280FC", "$description": "Categorical palette v2, dark (calm kit 2.56): the same order as light (series blue, teal, violet, then green, plum, olive, cyan, moss), stepped for the dark band (L 0.48-0.67); chart-1 stays the dark brand blue #3280FC, and chart-3/chart-7 are stepped off it so it stands apart from every slot; validated against --uix-surface #111111 and --uix-bg-app." },
|
|
62
|
+
"chart-2": { "$type": "color", "$value": "#22A093" },
|
|
63
|
+
"chart-3": { "$type": "color", "$value": "#A580CF" },
|
|
64
|
+
"chart-4": { "$type": "color", "$value": "#4E9F62" },
|
|
65
|
+
"chart-5": { "$type": "color", "$value": "#C474AC" },
|
|
66
|
+
"chart-6": { "$type": "color", "$value": "#93993A" },
|
|
67
|
+
"chart-7": { "$type": "color", "$value": "#0A819D" },
|
|
68
|
+
"chart-8": { "$type": "color", "$value": "#6E9147" },
|
|
69
|
+
"chart-series-soft": { "$type": "color", "$value": "rgba(50,128,252,.18)" },
|
|
69
70
|
"chart-neutral": { "$type": "color", "$value": "#A1A1A1" },
|
|
70
71
|
"chart-grid": { "$type": "color", "$value": "#232323" },
|
|
71
72
|
"chart-axis": { "$type": "color", "$value": "#3A3A3A" },
|
|
72
73
|
"chart-reference": { "$type": "color", "$value": "#B3B3B3" },
|
|
73
74
|
"chart-zone-warning": { "$type": "color", "$value": "rgba(217,164,64,.10)" },
|
|
74
|
-
"chart-zone-danger": { "$type": "color", "$value": "rgba(218,108,
|
|
75
|
+
"chart-zone-danger": { "$type": "color", "$value": "rgba(218,108,100,.10)" },
|
|
75
76
|
"chart-forecast-band": { "$type": "color", "$value": "rgba(250,250,250,.06)" },
|
|
76
77
|
"chart-event": { "$type": "color", "$value": "#8C8C8C" },
|
|
77
78
|
"chart-partial": { "$type": "color", "$value": "rgba(250,250,250,.12)" },
|