@tensor_1/tokens 2.15.0 → 2.16.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/README.md +3 -1
- package/build/css/components.css +1 -1
- package/build/css/styles.css +1 -1
- package/build/css/tokens.css +2 -0
- package/build/tailwind/preset.cjs +1 -0
- package/build/tailwind/theme.css +1 -0
- package/build/ts/tokens.d.ts +1 -1
- package/build/ts/tokens.js +3 -0
- package/package.json +1 -1
- package/styles/components/chart.css +81 -7
- package/styles/components/flow.css +27 -0
- package/styles/components/pipeline.css +140 -5
- package/styles/components/table-toolbar.css +2 -1
- package/tokens/base/color.json +1 -0
- package/tokens/dark/color.json +1 -0
package/build/css/tokens.css
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--uix-accent-hover: color-mix(in srgb, var(--uix-accent) 88%, #000000);
|
|
24
24
|
--uix-accent-fg: var(--uix-brand-fg,#FFFFFF);
|
|
25
25
|
--uix-link: var(--uix-brand,#1447E6);
|
|
26
|
+
--uix-accent-text: color-mix(in srgb, var(--uix-accent) 65%, #000000);
|
|
26
27
|
--uix-ring: var(--uix-brand,#1447E6);
|
|
27
28
|
--uix-brand-muted: color-mix(in srgb, var(--uix-accent) 12%, transparent);
|
|
28
29
|
--uix-success: #047857;
|
|
@@ -172,6 +173,7 @@
|
|
|
172
173
|
--uix-accent: var(--uix-brand,#2563EB);
|
|
173
174
|
--uix-accent-hover: color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF);
|
|
174
175
|
--uix-link: color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF);
|
|
176
|
+
--uix-accent-text: color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF);
|
|
175
177
|
--uix-ring: var(--uix-brand,#3080FF);
|
|
176
178
|
--uix-brand-muted: color-mix(in srgb, var(--uix-accent) 16%, transparent);
|
|
177
179
|
--uix-success: #00D294;
|
|
@@ -24,6 +24,7 @@ module.exports = {
|
|
|
24
24
|
"uix-accent-hover": "var(--uix-accent-hover)",
|
|
25
25
|
"uix-accent-fg": "var(--uix-accent-fg)",
|
|
26
26
|
"uix-link": "var(--uix-link)",
|
|
27
|
+
"uix-accent-text": "var(--uix-accent-text)",
|
|
27
28
|
"uix-ring": "var(--uix-ring)",
|
|
28
29
|
"uix-brand-muted": "var(--uix-brand-muted)",
|
|
29
30
|
"uix-success": "var(--uix-success)",
|
package/build/tailwind/theme.css
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
--color-uix-accent-hover: var(--uix-accent-hover);
|
|
22
22
|
--color-uix-accent-fg: var(--uix-accent-fg);
|
|
23
23
|
--color-uix-link: var(--uix-link);
|
|
24
|
+
--color-uix-accent-text: var(--uix-accent-text);
|
|
24
25
|
--color-uix-ring: var(--uix-ring);
|
|
25
26
|
--color-uix-brand-muted: var(--uix-brand-muted);
|
|
26
27
|
--color-uix-success: var(--uix-success);
|
package/build/ts/tokens.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* GENERATED — do not edit. */
|
|
2
|
-
export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
|
|
2
|
+
export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
|
|
3
3
|
export declare const cssVar: Record<UixTokenName, string>;
|
|
4
4
|
export declare const light: Record<UixTokenName, string>;
|
|
5
5
|
export declare const dark: Partial<Record<UixTokenName, string>>;
|
package/build/ts/tokens.js
CHANGED
|
@@ -24,6 +24,7 @@ export const cssVar = {
|
|
|
24
24
|
"accent-hover": "var(--uix-accent-hover)",
|
|
25
25
|
"accent-fg": "var(--uix-accent-fg)",
|
|
26
26
|
"link": "var(--uix-link)",
|
|
27
|
+
"accent-text": "var(--uix-accent-text)",
|
|
27
28
|
"ring": "var(--uix-ring)",
|
|
28
29
|
"brand-muted": "var(--uix-brand-muted)",
|
|
29
30
|
"success": "var(--uix-success)",
|
|
@@ -178,6 +179,7 @@ export const light = {
|
|
|
178
179
|
"accent-hover": "color-mix(in srgb, var(--uix-accent) 88%, #000000)",
|
|
179
180
|
"accent-fg": "#FFFFFF",
|
|
180
181
|
"link": "#1447E6",
|
|
182
|
+
"accent-text": "color-mix(in srgb, var(--uix-accent) 65%, #000000)",
|
|
181
183
|
"ring": "#1447E6",
|
|
182
184
|
"brand-muted": "color-mix(in srgb, var(--uix-accent) 12%, transparent)",
|
|
183
185
|
"success": "#047857",
|
|
@@ -327,6 +329,7 @@ export const dark = {
|
|
|
327
329
|
"accent": "#2563EB",
|
|
328
330
|
"accent-hover": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)",
|
|
329
331
|
"link": "#5B8DEF",
|
|
332
|
+
"accent-text": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)",
|
|
330
333
|
"ring": "#3080FF",
|
|
331
334
|
"brand-muted": "color-mix(in srgb, var(--uix-accent) 16%, transparent)",
|
|
332
335
|
"success": "#00D294",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.16.0",
|
|
4
4
|
"description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -1,9 +1,83 @@
|
|
|
1
|
-
/* uix chart
|
|
1
|
+
/* uix chart — analytical card chrome and token-aware legend/annotation primitives.
|
|
2
|
+
Pair with semantic SVG/canvas output or the optional @tensor_1/react chart adapter. */
|
|
2
3
|
@layer uix.components {
|
|
3
|
-
.uix-chart {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
.uix-
|
|
4
|
+
.uix-chart {
|
|
5
|
+
position: relative; min-width: 0; overflow: hidden; padding: var(--uix-space-5);
|
|
6
|
+
border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
|
|
7
|
+
background: var(--uix-surface); box-shadow: var(--uix-shadow-sm);
|
|
8
|
+
}
|
|
9
|
+
.uix-chart--flat { box-shadow: none; }
|
|
10
|
+
.uix-chart--hero { padding: var(--uix-space-6); }
|
|
11
|
+
.uix-chart__header {
|
|
12
|
+
display: flex; align-items: flex-start; justify-content: space-between;
|
|
13
|
+
gap: var(--uix-space-4); min-width: 0; margin-bottom: var(--uix-space-4);
|
|
14
|
+
}
|
|
15
|
+
.uix-chart__heading { min-width: 0; }
|
|
16
|
+
.uix-chart__eyebrow {
|
|
17
|
+
margin-bottom: var(--uix-space-2); color: var(--uix-text-muted);
|
|
18
|
+
font-size: var(--uix-text-eyebrow); font-weight: 600;
|
|
19
|
+
letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
|
|
20
|
+
}
|
|
21
|
+
.uix-chart__title { color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; }
|
|
22
|
+
.uix-chart__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); }
|
|
23
|
+
.uix-chart__title + .uix-chart__subtitle { margin-top: var(--uix-space-1); }
|
|
24
|
+
.uix-chart__metric { flex: none; text-align: right; }
|
|
25
|
+
.uix-chart__metric-value {
|
|
26
|
+
color: var(--uix-text); font-family: var(--uix-font-mono); font-size: var(--uix-text-h2);
|
|
27
|
+
font-weight: 600; letter-spacing: var(--uix-tracking-tight); line-height: var(--uix-leading-h2);
|
|
28
|
+
}
|
|
29
|
+
.uix-chart__metric-label { margin-top: var(--uix-space-1); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
|
|
30
|
+
.uix-chart__delta {
|
|
31
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-1);
|
|
32
|
+
margin-top: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 600;
|
|
33
|
+
}
|
|
34
|
+
.uix-chart__delta[data-tone="positive"] { color: var(--uix-success); }
|
|
35
|
+
.uix-chart__delta[data-tone="negative"] { color: var(--uix-danger-text); }
|
|
36
|
+
.uix-chart__delta[data-tone="warning"] { color: var(--uix-warning-text); }
|
|
37
|
+
.uix-chart__plot { position: relative; min-width: 0; }
|
|
38
|
+
.uix-chart__plot[data-loading] { display: grid; min-height: 180px; place-items: center; border-radius: var(--uix-radius-md); background: var(--uix-bg-subtle); }
|
|
39
|
+
.uix-chart__plot[data-loading]::after { content: "Loading chart…"; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
|
|
40
|
+
.uix-chart__plot[data-loading] > * { position: absolute; opacity: 0; pointer-events: none; }
|
|
41
|
+
.uix-chart__plot[data-empty] {
|
|
42
|
+
display: grid; min-height: 180px; place-items: center; padding: var(--uix-space-6);
|
|
43
|
+
border: 1px dashed var(--uix-border-strong); border-radius: var(--uix-radius-md);
|
|
44
|
+
color: var(--uix-text-muted); text-align: center;
|
|
45
|
+
}
|
|
46
|
+
.uix-chart__annotation {
|
|
47
|
+
display: flex; align-items: flex-start; gap: var(--uix-space-2);
|
|
48
|
+
margin-top: var(--uix-space-3); padding: var(--uix-space-3);
|
|
49
|
+
border-left: 3px solid var(--uix-accent); border-radius: 0 var(--uix-radius-sm) var(--uix-radius-sm) 0;
|
|
50
|
+
background: var(--uix-brand-muted); color: var(--uix-text-hushed);
|
|
51
|
+
font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
|
|
52
|
+
}
|
|
53
|
+
.uix-chart__footer {
|
|
54
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
55
|
+
gap: var(--uix-space-4); min-width: 0; margin-top: var(--uix-space-4);
|
|
56
|
+
padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border);
|
|
57
|
+
color: var(--uix-text-muted); font-size: var(--uix-text-meta);
|
|
58
|
+
}
|
|
59
|
+
.uix-chart__source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
60
|
+
.uix-legend { display: flex; flex-wrap: wrap; gap: var(--uix-space-2) var(--uix-space-4); margin: 0; padding: 0; list-style: none; }
|
|
61
|
+
.uix-legend__item { display: inline-flex; align-items: center; gap: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
|
|
62
|
+
.uix-legend__swatch { width: 10px; height: 10px; flex: none; border-radius: var(--uix-radius-xs); background: var(--legend-color, var(--uix-chart-1)); }
|
|
63
|
+
.uix-legend__swatch--line { width: 18px; height: 3px; border-radius: var(--uix-radius-pill); }
|
|
64
|
+
.uix-legend__swatch--dash { width: 18px; height: 0; border-top: 2px dashed var(--legend-color, var(--uix-chart-1)); border-radius: 0; background: transparent; }
|
|
65
|
+
|
|
66
|
+
/* Runtime-free throughput/history strip. Put its accessible summary on the parent figure. */
|
|
67
|
+
.uix-chart-ticks { display: grid; grid-template-columns: repeat(var(--tick-count, 12), minmax(3px, 1fr)); align-items: end; gap: var(--uix-space-1); height: 72px; }
|
|
68
|
+
.uix-chart-tick {
|
|
69
|
+
min-height: 4px; height: calc(var(--tick-value, .25) * 100%);
|
|
70
|
+
border-radius: var(--uix-radius-xs) var(--uix-radius-xs) 0 0;
|
|
71
|
+
background: var(--tick-color, var(--uix-chart-1));
|
|
72
|
+
}
|
|
73
|
+
.uix-chart-tick[data-state="quiet"] { --tick-color: var(--uix-bg-active); }
|
|
74
|
+
.uix-chart-tick[data-state="warning"] { --tick-color: var(--uix-warning); }
|
|
75
|
+
.uix-chart-tick[data-state="danger"] { --tick-color: var(--uix-danger); }
|
|
76
|
+
.uix-chart-tick[data-current] { box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring); }
|
|
77
|
+
@media (max-width: 520px) {
|
|
78
|
+
.uix-chart, .uix-chart--hero { padding: var(--uix-space-4); }
|
|
79
|
+
.uix-chart__header { flex-direction: column; }
|
|
80
|
+
.uix-chart__metric { text-align: left; }
|
|
81
|
+
.uix-chart__footer { align-items: flex-start; flex-direction: column; gap: var(--uix-space-2); }
|
|
82
|
+
}
|
|
9
83
|
}
|
|
@@ -22,9 +22,22 @@
|
|
|
22
22
|
color: var(--tone-fg, var(--uix-text-muted));
|
|
23
23
|
}
|
|
24
24
|
.uix-node__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
|
|
25
|
+
.uix-node--no-icon { grid-template-columns: 1fr; }
|
|
25
26
|
.uix-node__body { min-width: 0; }
|
|
27
|
+
.uix-node__eyebrow {
|
|
28
|
+
margin-bottom: var(--uix-space-1); color: var(--tone-fg, var(--uix-text-muted));
|
|
29
|
+
font-size: var(--uix-text-eyebrow); font-weight: 600;
|
|
30
|
+
letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
|
|
31
|
+
}
|
|
26
32
|
.uix-node__title { font-weight: 500; line-height: 1.25; }
|
|
27
33
|
.uix-node__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
|
|
34
|
+
.uix-node__footer {
|
|
35
|
+
grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
|
|
36
|
+
gap: var(--uix-space-3); min-width: 0; margin-top: var(--uix-space-1);
|
|
37
|
+
padding-top: var(--uix-space-2); border-top: 1px solid var(--uix-border);
|
|
38
|
+
color: var(--uix-text-hushed); font-size: var(--uix-text-meta);
|
|
39
|
+
}
|
|
40
|
+
.uix-node--wide { min-width: 208px; max-width: 280px; }
|
|
28
41
|
.uix-node__status {
|
|
29
42
|
display: inline-flex; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-1);
|
|
30
43
|
font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow);
|
|
@@ -87,6 +100,12 @@
|
|
|
87
100
|
position: relative; width: 100%;
|
|
88
101
|
color: var(--uix-border-strong); /* edges inherit via currentColor */
|
|
89
102
|
}
|
|
103
|
+
.uix-flow--panel {
|
|
104
|
+
padding: var(--uix-space-6); border: 1px solid var(--uix-border);
|
|
105
|
+
border-radius: var(--uix-radius-lg); background-color: var(--uix-bg-subtle);
|
|
106
|
+
background-image: radial-gradient(var(--uix-border) 1px, transparent 1px);
|
|
107
|
+
background-size: 22px 22px; box-shadow: inset 0 1px 0 var(--uix-surface);
|
|
108
|
+
}
|
|
90
109
|
.uix-flow__edges {
|
|
91
110
|
position: absolute; inset: 0; width: 100%; height: 100%;
|
|
92
111
|
overflow: visible; pointer-events: none; /* never block node hover/focus */
|
|
@@ -120,6 +139,8 @@
|
|
|
120
139
|
}
|
|
121
140
|
.uix-flow__connector[data-done] { border-color: var(--uix-success); }
|
|
122
141
|
.uix-flow__connector[data-done]::after { border-color: var(--uix-success); }
|
|
142
|
+
.uix-flow__connector[data-running] { border-color: var(--uix-accent); border-top-style: dashed; }
|
|
143
|
+
.uix-flow__connector[data-running]::after { border-color: var(--uix-accent); }
|
|
123
144
|
|
|
124
145
|
/* ---- branch / loop / mindmap: absolutely-positioned nodes over an SVG edge layer.
|
|
125
146
|
Container aspect-ratio matches each SVG viewBox so % node positions and path
|
|
@@ -193,4 +214,10 @@
|
|
|
193
214
|
.uix-flow:hover .uix-flow__edge,
|
|
194
215
|
.uix-flow:focus-within .uix-flow__edge { animation: none; }
|
|
195
216
|
}
|
|
217
|
+
|
|
218
|
+
@media (max-width: 720px) {
|
|
219
|
+
.uix-flow--panel { padding: var(--uix-space-4); overflow-x: auto; }
|
|
220
|
+
.uix-flow--linear .uix-flow__row { min-width: max-content; flex-wrap: nowrap; }
|
|
221
|
+
.uix-flow--linear .uix-flow__connector { flex-basis: 38px; }
|
|
222
|
+
}
|
|
196
223
|
}
|
|
@@ -1,9 +1,144 @@
|
|
|
1
|
-
/* uix
|
|
1
|
+
/* uix pipeline — compact stage bar + detailed operational stage rail.
|
|
2
|
+
Depends only on --uix-* tokens; state is always repeated in visible text. */
|
|
2
3
|
@layer uix.components {
|
|
3
|
-
.uix-pipeline {
|
|
4
|
-
|
|
4
|
+
.uix-pipeline {
|
|
5
|
+
display: flex;
|
|
6
|
+
gap: var(--uix-space-1);
|
|
7
|
+
min-width: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
list-style: none;
|
|
11
|
+
}
|
|
12
|
+
.uix-pipeline__stage {
|
|
13
|
+
position: relative;
|
|
14
|
+
flex: 1;
|
|
15
|
+
min-width: 0;
|
|
16
|
+
padding: var(--uix-space-2);
|
|
17
|
+
text-align: center;
|
|
18
|
+
font-size: var(--uix-text-meta);
|
|
19
|
+
color: var(--stage-fg, var(--uix-text-muted));
|
|
20
|
+
background: var(--stage-bg, var(--uix-bg-subtle));
|
|
21
|
+
border-color: var(--stage-border, transparent);
|
|
22
|
+
}
|
|
5
23
|
.uix-pipeline__stage:first-child { border-radius: var(--uix-radius-pill) 0 0 var(--uix-radius-pill); }
|
|
6
24
|
.uix-pipeline__stage:last-child { border-radius: 0 var(--uix-radius-pill) var(--uix-radius-pill) 0; }
|
|
7
|
-
.uix-pipeline__stage[data-state="done"]
|
|
8
|
-
.uix-pipeline__stage[data-state="
|
|
25
|
+
.uix-pipeline__stage[data-state="done"],
|
|
26
|
+
.uix-pipeline__stage[data-state="complete"] {
|
|
27
|
+
--stage-bg: var(--uix-accent); --stage-fg: var(--uix-accent-fg); --stage-dot: var(--uix-success);
|
|
28
|
+
}
|
|
29
|
+
.uix-pipeline__stage[data-state="active"],
|
|
30
|
+
.uix-pipeline__stage[data-state="current"],
|
|
31
|
+
.uix-pipeline__stage[data-state="running"] {
|
|
32
|
+
--stage-bg: var(--uix-brand-muted); --stage-fg: var(--uix-link);
|
|
33
|
+
--stage-border: var(--uix-accent); --stage-dot: var(--uix-accent); font-weight: 600;
|
|
34
|
+
}
|
|
35
|
+
.uix-pipeline__stage[data-state="failed"],
|
|
36
|
+
.uix-pipeline__stage[data-state="error"] {
|
|
37
|
+
--stage-bg: var(--uix-danger-bg); --stage-fg: var(--uix-danger-text);
|
|
38
|
+
--stage-border: var(--uix-danger); --stage-dot: var(--uix-danger);
|
|
39
|
+
}
|
|
40
|
+
.uix-pipeline__stage[data-state="blocked"] {
|
|
41
|
+
--stage-bg: var(--uix-warning-bg); --stage-fg: var(--uix-warning-text);
|
|
42
|
+
--stage-border: var(--uix-warning); --stage-dot: var(--uix-warning);
|
|
43
|
+
}
|
|
44
|
+
.uix-pipeline__stage[data-state="waiting"],
|
|
45
|
+
.uix-pipeline__stage[data-state="pending"] { --stage-dot: var(--uix-text-muted); }
|
|
46
|
+
|
|
47
|
+
/* Detailed mode scrolls at narrow widths instead of crushing timing and state. */
|
|
48
|
+
.uix-pipeline--detailed {
|
|
49
|
+
position: relative;
|
|
50
|
+
gap: 0;
|
|
51
|
+
overflow-x: auto;
|
|
52
|
+
padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-4);
|
|
53
|
+
scrollbar-width: thin;
|
|
54
|
+
scrollbar-color: var(--uix-border-strong) transparent;
|
|
55
|
+
scroll-snap-type: x proximity;
|
|
56
|
+
}
|
|
57
|
+
.uix-pipeline--detailed::before {
|
|
58
|
+
content: "";
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: calc(var(--uix-space-1) + 21px);
|
|
61
|
+
right: var(--uix-space-8);
|
|
62
|
+
left: var(--uix-space-8);
|
|
63
|
+
height: 2px;
|
|
64
|
+
background: var(--uix-border);
|
|
65
|
+
}
|
|
66
|
+
.uix-pipeline--detailed .uix-pipeline__stage {
|
|
67
|
+
flex: 1 0 168px;
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-rows: 42px auto;
|
|
70
|
+
gap: var(--uix-space-3);
|
|
71
|
+
padding: 0 var(--uix-space-2);
|
|
72
|
+
text-align: left;
|
|
73
|
+
color: var(--uix-text);
|
|
74
|
+
background: transparent;
|
|
75
|
+
border: 0;
|
|
76
|
+
border-radius: 0;
|
|
77
|
+
scroll-snap-align: start;
|
|
78
|
+
}
|
|
79
|
+
.uix-pipeline__marker {
|
|
80
|
+
position: relative;
|
|
81
|
+
z-index: var(--uix-z-raised);
|
|
82
|
+
display: grid;
|
|
83
|
+
place-items: center;
|
|
84
|
+
align-self: start;
|
|
85
|
+
width: 42px;
|
|
86
|
+
height: 42px;
|
|
87
|
+
border: 1px solid var(--stage-border, var(--uix-border-strong));
|
|
88
|
+
border-radius: var(--uix-radius-pill);
|
|
89
|
+
background: var(--stage-bg, var(--uix-surface));
|
|
90
|
+
color: var(--stage-fg, var(--uix-text-muted));
|
|
91
|
+
box-shadow: 0 0 0 var(--uix-space-1) var(--uix-surface), var(--uix-shadow-sm);
|
|
92
|
+
font-family: var(--uix-font-mono);
|
|
93
|
+
font-size: var(--uix-text-meta);
|
|
94
|
+
font-weight: 600;
|
|
95
|
+
}
|
|
96
|
+
.uix-pipeline__marker svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
|
|
97
|
+
.uix-pipeline__content {
|
|
98
|
+
min-width: 0;
|
|
99
|
+
padding: var(--uix-space-3);
|
|
100
|
+
border: 1px solid var(--stage-border, var(--uix-border));
|
|
101
|
+
border-radius: var(--uix-radius-md);
|
|
102
|
+
background: var(--uix-surface);
|
|
103
|
+
box-shadow: var(--uix-shadow-sm);
|
|
104
|
+
}
|
|
105
|
+
.uix-pipeline__stage[data-state="active"] .uix-pipeline__content,
|
|
106
|
+
.uix-pipeline__stage[data-state="current"] .uix-pipeline__content,
|
|
107
|
+
.uix-pipeline__stage[data-state="running"] .uix-pipeline__content {
|
|
108
|
+
box-shadow: var(--uix-shadow-sm), 0 0 0 3px var(--uix-brand-muted);
|
|
109
|
+
}
|
|
110
|
+
.uix-pipeline__eyebrow {
|
|
111
|
+
display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2);
|
|
112
|
+
margin-bottom: var(--uix-space-2); color: var(--stage-fg, var(--uix-text-muted));
|
|
113
|
+
font-size: var(--uix-text-eyebrow); font-weight: 600;
|
|
114
|
+
letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
|
|
115
|
+
}
|
|
116
|
+
.uix-pipeline__state { display: inline-flex; align-items: center; gap: var(--uix-space-2); }
|
|
117
|
+
.uix-pipeline__state::before {
|
|
118
|
+
content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
|
|
119
|
+
background: var(--stage-dot, var(--uix-text-muted));
|
|
120
|
+
}
|
|
121
|
+
.uix-pipeline__stage[data-state="blocked"] .uix-pipeline__state::before { border-radius: var(--uix-radius-xs); }
|
|
122
|
+
.uix-pipeline__title {
|
|
123
|
+
overflow: hidden; color: var(--uix-text); font-size: var(--uix-text-body); font-weight: 600;
|
|
124
|
+
line-height: var(--uix-leading-body); text-overflow: ellipsis; white-space: nowrap;
|
|
125
|
+
}
|
|
126
|
+
.uix-pipeline__description {
|
|
127
|
+
margin-top: var(--uix-space-1); color: var(--uix-text-muted);
|
|
128
|
+
font-size: var(--uix-text-meta); font-weight: 400; line-height: var(--uix-leading-meta);
|
|
129
|
+
}
|
|
130
|
+
.uix-pipeline__meta {
|
|
131
|
+
display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0;
|
|
132
|
+
margin-top: var(--uix-space-3); padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border);
|
|
133
|
+
color: var(--uix-text-hushed); font-size: var(--uix-text-meta); font-weight: 400;
|
|
134
|
+
}
|
|
135
|
+
.uix-pipeline__meta > :last-child { margin-left: auto; }
|
|
136
|
+
.uix-pipeline__stage:focus-visible,
|
|
137
|
+
.uix-pipeline__stage:has(:focus-visible) .uix-pipeline__content {
|
|
138
|
+
outline: none; border-color: var(--uix-ring);
|
|
139
|
+
box-shadow: 0 0 0 2px var(--uix-surface), 0 0 0 4px var(--uix-ring);
|
|
140
|
+
}
|
|
141
|
+
@media (max-width: 640px) {
|
|
142
|
+
.uix-pipeline--detailed .uix-pipeline__stage { flex-basis: min(78vw, 240px); }
|
|
143
|
+
}
|
|
9
144
|
}
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
|
|
16
16
|
}
|
|
17
17
|
.uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
|
|
18
|
-
.uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
|
|
18
|
+
.uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent-text); }
|
|
19
|
+
.uix-chip:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
|
|
19
20
|
.uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
|
|
20
21
|
.uix-filter-popover { display: grid; gap: var(--uix-space-4); min-width: 260px; padding: var(--uix-space-4); }
|
|
21
22
|
.uix-filter-popover .uix-label { display: grid; gap: var(--uix-space-2); }
|
package/tokens/base/color.json
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 88%, #000000)", "$description": "Primary-button hover. Theme-aware: derived from the live accent so it tracks the brand override (light darkens, dark lightens — see tokens/dark)." },
|
|
22
22
|
"accent-fg": { "$type": "color", "$value": "var(--uix-brand-fg,#FFFFFF)", "$description": "Runtime: chains through --uix-brand-fg." },
|
|
23
23
|
"link": { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
|
|
24
|
+
"accent-text": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 65%, #000000)", "$description": "The brand hue as TEXT on a neutral or --uix-brand-muted surface (a selected filter chip, an active tab label). The raw accent is a fill colour: a bright brand (POSx green, mission-control blue) reads below 3:1 as text on its own tint. Darkened from the live accent so it tracks the brand override; the worst shipped theme is 5.5:1 on brand-muted. Not for text ON a solid accent fill, which is --uix-accent-fg." },
|
|
24
25
|
"ring": { "$type": "color", "$value": "var(--uix-brand,#1447E6)", "$description": "Runtime: chains through --uix-brand." },
|
|
25
26
|
"brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 12%, transparent)", "$description": "Runtime: color-mix of the live accent." },
|
|
26
27
|
|
package/tokens/dark/color.json
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"accent": { "$type": "color", "$value": "var(--uix-brand,#2563EB)" },
|
|
17
17
|
"accent-hover": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 82%, #FFFFFF)", "$description": "On dark, primary-button hover LIGHTENS the accent (the light-theme value darkens). Tracks the live brand override." },
|
|
18
18
|
"link": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-brand,#5B8DEF) 70%, #FFFFFF)", "$description": "Brightened on dark so links read clearly as links and stay distinct from the solid accent button background." },
|
|
19
|
+
"accent-text": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 70%, #FFFFFF)", "$description": "On dark, accent-hued text LIGHTENS the accent (the light-theme value darkens): the solid dark accent measured 3.2:1 on its own 16% tint. Same 70% weight as --uix-link." },
|
|
19
20
|
"ring": { "$type": "color", "$value": "var(--uix-brand,#3080FF)" },
|
|
20
21
|
"brand-muted": { "$type": "color", "$value": "color-mix(in srgb, var(--uix-accent) 16%, transparent)" },
|
|
21
22
|
|