@tensor_1/tokens 2.56.0 → 2.57.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/css/components.css +1 -1
- package/build/css/styles.css +1 -1
- package/build/css/tokens.css +82 -0
- package/build/tailwind/preset.cjs +41 -0
- package/build/tailwind/theme.css +41 -0
- package/build/ts/tokens.d.ts +1 -1
- package/build/ts/tokens.js +123 -0
- package/package.json +1 -1
- package/styles/components/file-kit.css +178 -0
- package/styles/components/flow.css +4 -8
- package/styles/components/heartbeat.css +6 -19
- package/tokens/base/color.json +42 -0
- package/tokens/dark/color.json +42 -0
package/build/css/tokens.css
CHANGED
|
@@ -89,6 +89,47 @@
|
|
|
89
89
|
--uix-chart-event: #737373;
|
|
90
90
|
--uix-chart-partial: rgba(10,10,10,.10);
|
|
91
91
|
--uix-chart-comparison: #B8B8B8;
|
|
92
|
+
--uix-file-img: var(--uix-chart-3);
|
|
93
|
+
--uix-file-img-soft: color-mix(in srgb, var(--uix-file-img) 12%, transparent);
|
|
94
|
+
--uix-file-img-strong: color-mix(in srgb, var(--uix-file-img) 22%, transparent);
|
|
95
|
+
--uix-file-img-edge: color-mix(in srgb, var(--uix-file-img) 28%, var(--uix-border));
|
|
96
|
+
--uix-file-img-label: color-mix(in srgb, var(--uix-file-img) 86%, #000000);
|
|
97
|
+
--uix-file-doc: var(--uix-chart-5);
|
|
98
|
+
--uix-file-doc-soft: color-mix(in srgb, var(--uix-file-doc) 12%, transparent);
|
|
99
|
+
--uix-file-doc-strong: color-mix(in srgb, var(--uix-file-doc) 22%, transparent);
|
|
100
|
+
--uix-file-doc-edge: color-mix(in srgb, var(--uix-file-doc) 28%, var(--uix-border));
|
|
101
|
+
--uix-file-doc-label: color-mix(in srgb, var(--uix-file-doc) 86%, #000000);
|
|
102
|
+
--uix-file-sheet: #3F8F55;
|
|
103
|
+
--uix-file-sheet-soft: color-mix(in srgb, var(--uix-file-sheet) 12%, transparent);
|
|
104
|
+
--uix-file-sheet-strong: color-mix(in srgb, var(--uix-file-sheet) 22%, transparent);
|
|
105
|
+
--uix-file-sheet-edge: color-mix(in srgb, var(--uix-file-sheet) 28%, var(--uix-border));
|
|
106
|
+
--uix-file-sheet-label: color-mix(in srgb, var(--uix-file-sheet) 86%, #000000);
|
|
107
|
+
--uix-file-mail: var(--uix-chart-7);
|
|
108
|
+
--uix-file-mail-soft: color-mix(in srgb, var(--uix-file-mail) 12%, transparent);
|
|
109
|
+
--uix-file-mail-strong: color-mix(in srgb, var(--uix-file-mail) 22%, transparent);
|
|
110
|
+
--uix-file-mail-edge: color-mix(in srgb, var(--uix-file-mail) 28%, var(--uix-border));
|
|
111
|
+
--uix-file-mail-label: color-mix(in srgb, var(--uix-file-mail) 86%, #000000);
|
|
112
|
+
--uix-file-code: var(--uix-chart-2);
|
|
113
|
+
--uix-file-code-soft: color-mix(in srgb, var(--uix-file-code) 12%, transparent);
|
|
114
|
+
--uix-file-code-strong: color-mix(in srgb, var(--uix-file-code) 22%, transparent);
|
|
115
|
+
--uix-file-code-edge: color-mix(in srgb, var(--uix-file-code) 28%, var(--uix-border));
|
|
116
|
+
--uix-file-code-label: color-mix(in srgb, var(--uix-file-code) 86%, #000000);
|
|
117
|
+
--uix-file-log: var(--uix-chart-6);
|
|
118
|
+
--uix-file-log-soft: color-mix(in srgb, var(--uix-file-log) 12%, transparent);
|
|
119
|
+
--uix-file-log-strong: color-mix(in srgb, var(--uix-file-log) 22%, transparent);
|
|
120
|
+
--uix-file-log-edge: color-mix(in srgb, var(--uix-file-log) 28%, var(--uix-border));
|
|
121
|
+
--uix-file-log-label: color-mix(in srgb, var(--uix-file-log) 86%, #000000);
|
|
122
|
+
--uix-file-archive: #8A7A66;
|
|
123
|
+
--uix-file-archive-soft: color-mix(in srgb, var(--uix-file-archive) 12%, transparent);
|
|
124
|
+
--uix-file-archive-strong: color-mix(in srgb, var(--uix-file-archive) 22%, transparent);
|
|
125
|
+
--uix-file-archive-edge: color-mix(in srgb, var(--uix-file-archive) 28%, var(--uix-border));
|
|
126
|
+
--uix-file-archive-label: color-mix(in srgb, var(--uix-file-archive) 86%, #000000);
|
|
127
|
+
--uix-file-other: #808080;
|
|
128
|
+
--uix-file-other-soft: color-mix(in srgb, var(--uix-file-other) 12%, transparent);
|
|
129
|
+
--uix-file-other-strong: color-mix(in srgb, var(--uix-file-other) 22%, transparent);
|
|
130
|
+
--uix-file-other-edge: color-mix(in srgb, var(--uix-file-other) 28%, var(--uix-border));
|
|
131
|
+
--uix-file-other-label: color-mix(in srgb, var(--uix-file-other) 86%, #000000);
|
|
132
|
+
--uix-file-label-fg: #FFFFFF;
|
|
92
133
|
--uix-row: #FFFFFF;
|
|
93
134
|
--uix-row-alt: #FAFAFA;
|
|
94
135
|
--uix-row-pinned-bg: #F4F7FF;
|
|
@@ -280,6 +321,47 @@
|
|
|
280
321
|
--uix-chart-event: #8C8C8C;
|
|
281
322
|
--uix-chart-partial: rgba(250,250,250,.12);
|
|
282
323
|
--uix-chart-comparison: #5C5C5C;
|
|
324
|
+
--uix-file-img: #A58FE6;
|
|
325
|
+
--uix-file-img-soft: color-mix(in srgb, var(--uix-file-img) 15%, transparent);
|
|
326
|
+
--uix-file-img-strong: color-mix(in srgb, var(--uix-file-img) 26%, transparent);
|
|
327
|
+
--uix-file-img-edge: color-mix(in srgb, var(--uix-file-img) 32%, var(--uix-border));
|
|
328
|
+
--uix-file-img-label: var(--uix-file-img);
|
|
329
|
+
--uix-file-doc: #CF7FB6;
|
|
330
|
+
--uix-file-doc-soft: color-mix(in srgb, var(--uix-file-doc) 15%, transparent);
|
|
331
|
+
--uix-file-doc-strong: color-mix(in srgb, var(--uix-file-doc) 26%, transparent);
|
|
332
|
+
--uix-file-doc-edge: color-mix(in srgb, var(--uix-file-doc) 32%, var(--uix-border));
|
|
333
|
+
--uix-file-doc-label: var(--uix-file-doc);
|
|
334
|
+
--uix-file-sheet: #5DB07A;
|
|
335
|
+
--uix-file-sheet-soft: color-mix(in srgb, var(--uix-file-sheet) 15%, transparent);
|
|
336
|
+
--uix-file-sheet-strong: color-mix(in srgb, var(--uix-file-sheet) 26%, transparent);
|
|
337
|
+
--uix-file-sheet-edge: color-mix(in srgb, var(--uix-file-sheet) 32%, var(--uix-border));
|
|
338
|
+
--uix-file-sheet-label: var(--uix-file-sheet);
|
|
339
|
+
--uix-file-mail: #55A9D9;
|
|
340
|
+
--uix-file-mail-soft: color-mix(in srgb, var(--uix-file-mail) 15%, transparent);
|
|
341
|
+
--uix-file-mail-strong: color-mix(in srgb, var(--uix-file-mail) 26%, transparent);
|
|
342
|
+
--uix-file-mail-edge: color-mix(in srgb, var(--uix-file-mail) 32%, var(--uix-border));
|
|
343
|
+
--uix-file-mail-label: var(--uix-file-mail);
|
|
344
|
+
--uix-file-code: #3DB5A7;
|
|
345
|
+
--uix-file-code-soft: color-mix(in srgb, var(--uix-file-code) 15%, transparent);
|
|
346
|
+
--uix-file-code-strong: color-mix(in srgb, var(--uix-file-code) 26%, transparent);
|
|
347
|
+
--uix-file-code-edge: color-mix(in srgb, var(--uix-file-code) 32%, var(--uix-border));
|
|
348
|
+
--uix-file-code-label: var(--uix-file-code);
|
|
349
|
+
--uix-file-log: #A3AE4C;
|
|
350
|
+
--uix-file-log-soft: color-mix(in srgb, var(--uix-file-log) 15%, transparent);
|
|
351
|
+
--uix-file-log-strong: color-mix(in srgb, var(--uix-file-log) 26%, transparent);
|
|
352
|
+
--uix-file-log-edge: color-mix(in srgb, var(--uix-file-log) 32%, var(--uix-border));
|
|
353
|
+
--uix-file-log-label: var(--uix-file-log);
|
|
354
|
+
--uix-file-archive: #B0A08A;
|
|
355
|
+
--uix-file-archive-soft: color-mix(in srgb, var(--uix-file-archive) 15%, transparent);
|
|
356
|
+
--uix-file-archive-strong: color-mix(in srgb, var(--uix-file-archive) 26%, transparent);
|
|
357
|
+
--uix-file-archive-edge: color-mix(in srgb, var(--uix-file-archive) 32%, var(--uix-border));
|
|
358
|
+
--uix-file-archive-label: var(--uix-file-archive);
|
|
359
|
+
--uix-file-other: #8C8C8C;
|
|
360
|
+
--uix-file-other-soft: color-mix(in srgb, var(--uix-file-other) 15%, transparent);
|
|
361
|
+
--uix-file-other-strong: color-mix(in srgb, var(--uix-file-other) 26%, transparent);
|
|
362
|
+
--uix-file-other-edge: color-mix(in srgb, var(--uix-file-other) 32%, var(--uix-border));
|
|
363
|
+
--uix-file-other-label: var(--uix-file-other);
|
|
364
|
+
--uix-file-label-fg: #0A0A0A;
|
|
283
365
|
--uix-row: #111111;
|
|
284
366
|
--uix-row-alt: #161616;
|
|
285
367
|
--uix-row-pinned-bg: rgba(48,128,255,.08);
|
|
@@ -90,6 +90,47 @@ module.exports = {
|
|
|
90
90
|
"uix-chart-event": "var(--uix-chart-event)",
|
|
91
91
|
"uix-chart-partial": "var(--uix-chart-partial)",
|
|
92
92
|
"uix-chart-comparison": "var(--uix-chart-comparison)",
|
|
93
|
+
"uix-file-img": "var(--uix-file-img)",
|
|
94
|
+
"uix-file-img-soft": "var(--uix-file-img-soft)",
|
|
95
|
+
"uix-file-img-strong": "var(--uix-file-img-strong)",
|
|
96
|
+
"uix-file-img-edge": "var(--uix-file-img-edge)",
|
|
97
|
+
"uix-file-img-label": "var(--uix-file-img-label)",
|
|
98
|
+
"uix-file-doc": "var(--uix-file-doc)",
|
|
99
|
+
"uix-file-doc-soft": "var(--uix-file-doc-soft)",
|
|
100
|
+
"uix-file-doc-strong": "var(--uix-file-doc-strong)",
|
|
101
|
+
"uix-file-doc-edge": "var(--uix-file-doc-edge)",
|
|
102
|
+
"uix-file-doc-label": "var(--uix-file-doc-label)",
|
|
103
|
+
"uix-file-sheet": "var(--uix-file-sheet)",
|
|
104
|
+
"uix-file-sheet-soft": "var(--uix-file-sheet-soft)",
|
|
105
|
+
"uix-file-sheet-strong": "var(--uix-file-sheet-strong)",
|
|
106
|
+
"uix-file-sheet-edge": "var(--uix-file-sheet-edge)",
|
|
107
|
+
"uix-file-sheet-label": "var(--uix-file-sheet-label)",
|
|
108
|
+
"uix-file-mail": "var(--uix-file-mail)",
|
|
109
|
+
"uix-file-mail-soft": "var(--uix-file-mail-soft)",
|
|
110
|
+
"uix-file-mail-strong": "var(--uix-file-mail-strong)",
|
|
111
|
+
"uix-file-mail-edge": "var(--uix-file-mail-edge)",
|
|
112
|
+
"uix-file-mail-label": "var(--uix-file-mail-label)",
|
|
113
|
+
"uix-file-code": "var(--uix-file-code)",
|
|
114
|
+
"uix-file-code-soft": "var(--uix-file-code-soft)",
|
|
115
|
+
"uix-file-code-strong": "var(--uix-file-code-strong)",
|
|
116
|
+
"uix-file-code-edge": "var(--uix-file-code-edge)",
|
|
117
|
+
"uix-file-code-label": "var(--uix-file-code-label)",
|
|
118
|
+
"uix-file-log": "var(--uix-file-log)",
|
|
119
|
+
"uix-file-log-soft": "var(--uix-file-log-soft)",
|
|
120
|
+
"uix-file-log-strong": "var(--uix-file-log-strong)",
|
|
121
|
+
"uix-file-log-edge": "var(--uix-file-log-edge)",
|
|
122
|
+
"uix-file-log-label": "var(--uix-file-log-label)",
|
|
123
|
+
"uix-file-archive": "var(--uix-file-archive)",
|
|
124
|
+
"uix-file-archive-soft": "var(--uix-file-archive-soft)",
|
|
125
|
+
"uix-file-archive-strong": "var(--uix-file-archive-strong)",
|
|
126
|
+
"uix-file-archive-edge": "var(--uix-file-archive-edge)",
|
|
127
|
+
"uix-file-archive-label": "var(--uix-file-archive-label)",
|
|
128
|
+
"uix-file-other": "var(--uix-file-other)",
|
|
129
|
+
"uix-file-other-soft": "var(--uix-file-other-soft)",
|
|
130
|
+
"uix-file-other-strong": "var(--uix-file-other-strong)",
|
|
131
|
+
"uix-file-other-edge": "var(--uix-file-other-edge)",
|
|
132
|
+
"uix-file-other-label": "var(--uix-file-other-label)",
|
|
133
|
+
"uix-file-label-fg": "var(--uix-file-label-fg)",
|
|
93
134
|
"uix-row": "var(--uix-row)",
|
|
94
135
|
"uix-row-alt": "var(--uix-row-alt)",
|
|
95
136
|
"uix-row-pinned-bg": "var(--uix-row-pinned-bg)",
|
package/build/tailwind/theme.css
CHANGED
|
@@ -87,6 +87,47 @@
|
|
|
87
87
|
--color-uix-chart-event: var(--uix-chart-event);
|
|
88
88
|
--color-uix-chart-partial: var(--uix-chart-partial);
|
|
89
89
|
--color-uix-chart-comparison: var(--uix-chart-comparison);
|
|
90
|
+
--color-uix-file-img: var(--uix-file-img);
|
|
91
|
+
--color-uix-file-img-soft: var(--uix-file-img-soft);
|
|
92
|
+
--color-uix-file-img-strong: var(--uix-file-img-strong);
|
|
93
|
+
--color-uix-file-img-edge: var(--uix-file-img-edge);
|
|
94
|
+
--color-uix-file-img-label: var(--uix-file-img-label);
|
|
95
|
+
--color-uix-file-doc: var(--uix-file-doc);
|
|
96
|
+
--color-uix-file-doc-soft: var(--uix-file-doc-soft);
|
|
97
|
+
--color-uix-file-doc-strong: var(--uix-file-doc-strong);
|
|
98
|
+
--color-uix-file-doc-edge: var(--uix-file-doc-edge);
|
|
99
|
+
--color-uix-file-doc-label: var(--uix-file-doc-label);
|
|
100
|
+
--color-uix-file-sheet: var(--uix-file-sheet);
|
|
101
|
+
--color-uix-file-sheet-soft: var(--uix-file-sheet-soft);
|
|
102
|
+
--color-uix-file-sheet-strong: var(--uix-file-sheet-strong);
|
|
103
|
+
--color-uix-file-sheet-edge: var(--uix-file-sheet-edge);
|
|
104
|
+
--color-uix-file-sheet-label: var(--uix-file-sheet-label);
|
|
105
|
+
--color-uix-file-mail: var(--uix-file-mail);
|
|
106
|
+
--color-uix-file-mail-soft: var(--uix-file-mail-soft);
|
|
107
|
+
--color-uix-file-mail-strong: var(--uix-file-mail-strong);
|
|
108
|
+
--color-uix-file-mail-edge: var(--uix-file-mail-edge);
|
|
109
|
+
--color-uix-file-mail-label: var(--uix-file-mail-label);
|
|
110
|
+
--color-uix-file-code: var(--uix-file-code);
|
|
111
|
+
--color-uix-file-code-soft: var(--uix-file-code-soft);
|
|
112
|
+
--color-uix-file-code-strong: var(--uix-file-code-strong);
|
|
113
|
+
--color-uix-file-code-edge: var(--uix-file-code-edge);
|
|
114
|
+
--color-uix-file-code-label: var(--uix-file-code-label);
|
|
115
|
+
--color-uix-file-log: var(--uix-file-log);
|
|
116
|
+
--color-uix-file-log-soft: var(--uix-file-log-soft);
|
|
117
|
+
--color-uix-file-log-strong: var(--uix-file-log-strong);
|
|
118
|
+
--color-uix-file-log-edge: var(--uix-file-log-edge);
|
|
119
|
+
--color-uix-file-log-label: var(--uix-file-log-label);
|
|
120
|
+
--color-uix-file-archive: var(--uix-file-archive);
|
|
121
|
+
--color-uix-file-archive-soft: var(--uix-file-archive-soft);
|
|
122
|
+
--color-uix-file-archive-strong: var(--uix-file-archive-strong);
|
|
123
|
+
--color-uix-file-archive-edge: var(--uix-file-archive-edge);
|
|
124
|
+
--color-uix-file-archive-label: var(--uix-file-archive-label);
|
|
125
|
+
--color-uix-file-other: var(--uix-file-other);
|
|
126
|
+
--color-uix-file-other-soft: var(--uix-file-other-soft);
|
|
127
|
+
--color-uix-file-other-strong: var(--uix-file-other-strong);
|
|
128
|
+
--color-uix-file-other-edge: var(--uix-file-other-edge);
|
|
129
|
+
--color-uix-file-other-label: var(--uix-file-other-label);
|
|
130
|
+
--color-uix-file-label-fg: var(--uix-file-label-fg);
|
|
90
131
|
--color-uix-row: var(--uix-row);
|
|
91
132
|
--color-uix-row-alt: var(--uix-row-alt);
|
|
92
133
|
--color-uix-row-pinned-bg: var(--uix-row-pinned-bg);
|
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" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-series" | "chart-series-soft" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "dur-arrive" | "stagger-arrive" | "delay-arrive-trace" | "dur-arrive-trace" | "dur-arrive-grow" | "stagger-arrive-grow" | "dur-arrive-count" | "lift" | "arrive-rise" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-standard" | "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" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "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" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-series" | "chart-series-soft" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "file-img" | "file-img-soft" | "file-img-strong" | "file-img-edge" | "file-img-label" | "file-doc" | "file-doc-soft" | "file-doc-strong" | "file-doc-edge" | "file-doc-label" | "file-sheet" | "file-sheet-soft" | "file-sheet-strong" | "file-sheet-edge" | "file-sheet-label" | "file-mail" | "file-mail-soft" | "file-mail-strong" | "file-mail-edge" | "file-mail-label" | "file-code" | "file-code-soft" | "file-code-strong" | "file-code-edge" | "file-code-label" | "file-log" | "file-log-soft" | "file-log-strong" | "file-log-edge" | "file-log-label" | "file-archive" | "file-archive-soft" | "file-archive-strong" | "file-archive-edge" | "file-archive-label" | "file-other" | "file-other-soft" | "file-other-strong" | "file-other-edge" | "file-other-label" | "file-label-fg" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "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" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "dur-arrive" | "stagger-arrive" | "delay-arrive-trace" | "dur-arrive-trace" | "dur-arrive-grow" | "stagger-arrive-grow" | "dur-arrive-count" | "lift" | "arrive-rise" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-standard" | "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
|
@@ -90,6 +90,47 @@ export const cssVar = {
|
|
|
90
90
|
"chart-event": "var(--uix-chart-event)",
|
|
91
91
|
"chart-partial": "var(--uix-chart-partial)",
|
|
92
92
|
"chart-comparison": "var(--uix-chart-comparison)",
|
|
93
|
+
"file-img": "var(--uix-file-img)",
|
|
94
|
+
"file-img-soft": "var(--uix-file-img-soft)",
|
|
95
|
+
"file-img-strong": "var(--uix-file-img-strong)",
|
|
96
|
+
"file-img-edge": "var(--uix-file-img-edge)",
|
|
97
|
+
"file-img-label": "var(--uix-file-img-label)",
|
|
98
|
+
"file-doc": "var(--uix-file-doc)",
|
|
99
|
+
"file-doc-soft": "var(--uix-file-doc-soft)",
|
|
100
|
+
"file-doc-strong": "var(--uix-file-doc-strong)",
|
|
101
|
+
"file-doc-edge": "var(--uix-file-doc-edge)",
|
|
102
|
+
"file-doc-label": "var(--uix-file-doc-label)",
|
|
103
|
+
"file-sheet": "var(--uix-file-sheet)",
|
|
104
|
+
"file-sheet-soft": "var(--uix-file-sheet-soft)",
|
|
105
|
+
"file-sheet-strong": "var(--uix-file-sheet-strong)",
|
|
106
|
+
"file-sheet-edge": "var(--uix-file-sheet-edge)",
|
|
107
|
+
"file-sheet-label": "var(--uix-file-sheet-label)",
|
|
108
|
+
"file-mail": "var(--uix-file-mail)",
|
|
109
|
+
"file-mail-soft": "var(--uix-file-mail-soft)",
|
|
110
|
+
"file-mail-strong": "var(--uix-file-mail-strong)",
|
|
111
|
+
"file-mail-edge": "var(--uix-file-mail-edge)",
|
|
112
|
+
"file-mail-label": "var(--uix-file-mail-label)",
|
|
113
|
+
"file-code": "var(--uix-file-code)",
|
|
114
|
+
"file-code-soft": "var(--uix-file-code-soft)",
|
|
115
|
+
"file-code-strong": "var(--uix-file-code-strong)",
|
|
116
|
+
"file-code-edge": "var(--uix-file-code-edge)",
|
|
117
|
+
"file-code-label": "var(--uix-file-code-label)",
|
|
118
|
+
"file-log": "var(--uix-file-log)",
|
|
119
|
+
"file-log-soft": "var(--uix-file-log-soft)",
|
|
120
|
+
"file-log-strong": "var(--uix-file-log-strong)",
|
|
121
|
+
"file-log-edge": "var(--uix-file-log-edge)",
|
|
122
|
+
"file-log-label": "var(--uix-file-log-label)",
|
|
123
|
+
"file-archive": "var(--uix-file-archive)",
|
|
124
|
+
"file-archive-soft": "var(--uix-file-archive-soft)",
|
|
125
|
+
"file-archive-strong": "var(--uix-file-archive-strong)",
|
|
126
|
+
"file-archive-edge": "var(--uix-file-archive-edge)",
|
|
127
|
+
"file-archive-label": "var(--uix-file-archive-label)",
|
|
128
|
+
"file-other": "var(--uix-file-other)",
|
|
129
|
+
"file-other-soft": "var(--uix-file-other-soft)",
|
|
130
|
+
"file-other-strong": "var(--uix-file-other-strong)",
|
|
131
|
+
"file-other-edge": "var(--uix-file-other-edge)",
|
|
132
|
+
"file-other-label": "var(--uix-file-other-label)",
|
|
133
|
+
"file-label-fg": "var(--uix-file-label-fg)",
|
|
93
134
|
"row": "var(--uix-row)",
|
|
94
135
|
"row-alt": "var(--uix-row-alt)",
|
|
95
136
|
"row-pinned-bg": "var(--uix-row-pinned-bg)",
|
|
@@ -296,6 +337,47 @@ export const light = {
|
|
|
296
337
|
"chart-event": "#737373",
|
|
297
338
|
"chart-partial": "rgba(10,10,10,.10)",
|
|
298
339
|
"chart-comparison": "#B8B8B8",
|
|
340
|
+
"file-img": "var(--uix-chart-3)",
|
|
341
|
+
"file-img-soft": "color-mix(in srgb, var(--uix-file-img) 12%, transparent)",
|
|
342
|
+
"file-img-strong": "color-mix(in srgb, var(--uix-file-img) 22%, transparent)",
|
|
343
|
+
"file-img-edge": "color-mix(in srgb, var(--uix-file-img) 28%, var(--uix-border))",
|
|
344
|
+
"file-img-label": "color-mix(in srgb, var(--uix-file-img) 86%, #000000)",
|
|
345
|
+
"file-doc": "var(--uix-chart-5)",
|
|
346
|
+
"file-doc-soft": "color-mix(in srgb, var(--uix-file-doc) 12%, transparent)",
|
|
347
|
+
"file-doc-strong": "color-mix(in srgb, var(--uix-file-doc) 22%, transparent)",
|
|
348
|
+
"file-doc-edge": "color-mix(in srgb, var(--uix-file-doc) 28%, var(--uix-border))",
|
|
349
|
+
"file-doc-label": "color-mix(in srgb, var(--uix-file-doc) 86%, #000000)",
|
|
350
|
+
"file-sheet": "#3F8F55",
|
|
351
|
+
"file-sheet-soft": "color-mix(in srgb, var(--uix-file-sheet) 12%, transparent)",
|
|
352
|
+
"file-sheet-strong": "color-mix(in srgb, var(--uix-file-sheet) 22%, transparent)",
|
|
353
|
+
"file-sheet-edge": "color-mix(in srgb, var(--uix-file-sheet) 28%, var(--uix-border))",
|
|
354
|
+
"file-sheet-label": "color-mix(in srgb, var(--uix-file-sheet) 86%, #000000)",
|
|
355
|
+
"file-mail": "var(--uix-chart-7)",
|
|
356
|
+
"file-mail-soft": "color-mix(in srgb, var(--uix-file-mail) 12%, transparent)",
|
|
357
|
+
"file-mail-strong": "color-mix(in srgb, var(--uix-file-mail) 22%, transparent)",
|
|
358
|
+
"file-mail-edge": "color-mix(in srgb, var(--uix-file-mail) 28%, var(--uix-border))",
|
|
359
|
+
"file-mail-label": "color-mix(in srgb, var(--uix-file-mail) 86%, #000000)",
|
|
360
|
+
"file-code": "var(--uix-chart-2)",
|
|
361
|
+
"file-code-soft": "color-mix(in srgb, var(--uix-file-code) 12%, transparent)",
|
|
362
|
+
"file-code-strong": "color-mix(in srgb, var(--uix-file-code) 22%, transparent)",
|
|
363
|
+
"file-code-edge": "color-mix(in srgb, var(--uix-file-code) 28%, var(--uix-border))",
|
|
364
|
+
"file-code-label": "color-mix(in srgb, var(--uix-file-code) 86%, #000000)",
|
|
365
|
+
"file-log": "var(--uix-chart-6)",
|
|
366
|
+
"file-log-soft": "color-mix(in srgb, var(--uix-file-log) 12%, transparent)",
|
|
367
|
+
"file-log-strong": "color-mix(in srgb, var(--uix-file-log) 22%, transparent)",
|
|
368
|
+
"file-log-edge": "color-mix(in srgb, var(--uix-file-log) 28%, var(--uix-border))",
|
|
369
|
+
"file-log-label": "color-mix(in srgb, var(--uix-file-log) 86%, #000000)",
|
|
370
|
+
"file-archive": "#8A7A66",
|
|
371
|
+
"file-archive-soft": "color-mix(in srgb, var(--uix-file-archive) 12%, transparent)",
|
|
372
|
+
"file-archive-strong": "color-mix(in srgb, var(--uix-file-archive) 22%, transparent)",
|
|
373
|
+
"file-archive-edge": "color-mix(in srgb, var(--uix-file-archive) 28%, var(--uix-border))",
|
|
374
|
+
"file-archive-label": "color-mix(in srgb, var(--uix-file-archive) 86%, #000000)",
|
|
375
|
+
"file-other": "#808080",
|
|
376
|
+
"file-other-soft": "color-mix(in srgb, var(--uix-file-other) 12%, transparent)",
|
|
377
|
+
"file-other-strong": "color-mix(in srgb, var(--uix-file-other) 22%, transparent)",
|
|
378
|
+
"file-other-edge": "color-mix(in srgb, var(--uix-file-other) 28%, var(--uix-border))",
|
|
379
|
+
"file-other-label": "color-mix(in srgb, var(--uix-file-other) 86%, #000000)",
|
|
380
|
+
"file-label-fg": "#FFFFFF",
|
|
299
381
|
"row": "#FFFFFF",
|
|
300
382
|
"row-alt": "#FAFAFA",
|
|
301
383
|
"row-pinned-bg": "#F4F7FF",
|
|
@@ -487,6 +569,47 @@ export const dark = {
|
|
|
487
569
|
"chart-event": "#8C8C8C",
|
|
488
570
|
"chart-partial": "rgba(250,250,250,.12)",
|
|
489
571
|
"chart-comparison": "#5C5C5C",
|
|
572
|
+
"file-img": "#A58FE6",
|
|
573
|
+
"file-img-soft": "color-mix(in srgb, var(--uix-file-img) 15%, transparent)",
|
|
574
|
+
"file-img-strong": "color-mix(in srgb, var(--uix-file-img) 26%, transparent)",
|
|
575
|
+
"file-img-edge": "color-mix(in srgb, var(--uix-file-img) 32%, var(--uix-border))",
|
|
576
|
+
"file-img-label": "var(--uix-file-img)",
|
|
577
|
+
"file-doc": "#CF7FB6",
|
|
578
|
+
"file-doc-soft": "color-mix(in srgb, var(--uix-file-doc) 15%, transparent)",
|
|
579
|
+
"file-doc-strong": "color-mix(in srgb, var(--uix-file-doc) 26%, transparent)",
|
|
580
|
+
"file-doc-edge": "color-mix(in srgb, var(--uix-file-doc) 32%, var(--uix-border))",
|
|
581
|
+
"file-doc-label": "var(--uix-file-doc)",
|
|
582
|
+
"file-sheet": "#5DB07A",
|
|
583
|
+
"file-sheet-soft": "color-mix(in srgb, var(--uix-file-sheet) 15%, transparent)",
|
|
584
|
+
"file-sheet-strong": "color-mix(in srgb, var(--uix-file-sheet) 26%, transparent)",
|
|
585
|
+
"file-sheet-edge": "color-mix(in srgb, var(--uix-file-sheet) 32%, var(--uix-border))",
|
|
586
|
+
"file-sheet-label": "var(--uix-file-sheet)",
|
|
587
|
+
"file-mail": "#55A9D9",
|
|
588
|
+
"file-mail-soft": "color-mix(in srgb, var(--uix-file-mail) 15%, transparent)",
|
|
589
|
+
"file-mail-strong": "color-mix(in srgb, var(--uix-file-mail) 26%, transparent)",
|
|
590
|
+
"file-mail-edge": "color-mix(in srgb, var(--uix-file-mail) 32%, var(--uix-border))",
|
|
591
|
+
"file-mail-label": "var(--uix-file-mail)",
|
|
592
|
+
"file-code": "#3DB5A7",
|
|
593
|
+
"file-code-soft": "color-mix(in srgb, var(--uix-file-code) 15%, transparent)",
|
|
594
|
+
"file-code-strong": "color-mix(in srgb, var(--uix-file-code) 26%, transparent)",
|
|
595
|
+
"file-code-edge": "color-mix(in srgb, var(--uix-file-code) 32%, var(--uix-border))",
|
|
596
|
+
"file-code-label": "var(--uix-file-code)",
|
|
597
|
+
"file-log": "#A3AE4C",
|
|
598
|
+
"file-log-soft": "color-mix(in srgb, var(--uix-file-log) 15%, transparent)",
|
|
599
|
+
"file-log-strong": "color-mix(in srgb, var(--uix-file-log) 26%, transparent)",
|
|
600
|
+
"file-log-edge": "color-mix(in srgb, var(--uix-file-log) 32%, var(--uix-border))",
|
|
601
|
+
"file-log-label": "var(--uix-file-log)",
|
|
602
|
+
"file-archive": "#B0A08A",
|
|
603
|
+
"file-archive-soft": "color-mix(in srgb, var(--uix-file-archive) 15%, transparent)",
|
|
604
|
+
"file-archive-strong": "color-mix(in srgb, var(--uix-file-archive) 26%, transparent)",
|
|
605
|
+
"file-archive-edge": "color-mix(in srgb, var(--uix-file-archive) 32%, var(--uix-border))",
|
|
606
|
+
"file-archive-label": "var(--uix-file-archive)",
|
|
607
|
+
"file-other": "#8C8C8C",
|
|
608
|
+
"file-other-soft": "color-mix(in srgb, var(--uix-file-other) 15%, transparent)",
|
|
609
|
+
"file-other-strong": "color-mix(in srgb, var(--uix-file-other) 26%, transparent)",
|
|
610
|
+
"file-other-edge": "color-mix(in srgb, var(--uix-file-other) 32%, var(--uix-border))",
|
|
611
|
+
"file-other-label": "var(--uix-file-other)",
|
|
612
|
+
"file-label-fg": "#0A0A0A",
|
|
490
613
|
"row": "#111111",
|
|
491
614
|
"row-alt": "#161616",
|
|
492
615
|
"row-pinned-bg": "rgba(48,128,255,.08)",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.57.1",
|
|
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": [
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/* uix file kit (2.57) — FileKindIcon, FileRow, FileDrop. One hue per kind of file (--uix-file-<kind>):
|
|
2
|
+
the icon draws in it, a row's left edge carries its tint, an upload fills with it, and a drop row
|
|
3
|
+
takes the colours of what is dragged over it. Depends only on --uix-* tokens. */
|
|
4
|
+
@layer uix.components {
|
|
5
|
+
/* Kind plumbing: every piece reads --file-kind*. */
|
|
6
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="img"] { --file-kind: var(--uix-file-img); --file-kind-soft: var(--uix-file-img-soft); --file-kind-strong: var(--uix-file-img-strong); --file-kind-edge: var(--uix-file-img-edge); --file-kind-label: var(--uix-file-img-label); }
|
|
7
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="doc"] { --file-kind: var(--uix-file-doc); --file-kind-soft: var(--uix-file-doc-soft); --file-kind-strong: var(--uix-file-doc-strong); --file-kind-edge: var(--uix-file-doc-edge); --file-kind-label: var(--uix-file-doc-label); }
|
|
8
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="sheet"] { --file-kind: var(--uix-file-sheet); --file-kind-soft: var(--uix-file-sheet-soft); --file-kind-strong: var(--uix-file-sheet-strong); --file-kind-edge: var(--uix-file-sheet-edge); --file-kind-label: var(--uix-file-sheet-label); }
|
|
9
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="mail"] { --file-kind: var(--uix-file-mail); --file-kind-soft: var(--uix-file-mail-soft); --file-kind-strong: var(--uix-file-mail-strong); --file-kind-edge: var(--uix-file-mail-edge); --file-kind-label: var(--uix-file-mail-label); }
|
|
10
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="code"] { --file-kind: var(--uix-file-code); --file-kind-soft: var(--uix-file-code-soft); --file-kind-strong: var(--uix-file-code-strong); --file-kind-edge: var(--uix-file-code-edge); --file-kind-label: var(--uix-file-code-label); }
|
|
11
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="log"] { --file-kind: var(--uix-file-log); --file-kind-soft: var(--uix-file-log-soft); --file-kind-strong: var(--uix-file-log-strong); --file-kind-edge: var(--uix-file-log-edge); --file-kind-label: var(--uix-file-log-label); }
|
|
12
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="archive"] { --file-kind: var(--uix-file-archive); --file-kind-soft: var(--uix-file-archive-soft); --file-kind-strong: var(--uix-file-archive-strong); --file-kind-edge: var(--uix-file-archive-edge); --file-kind-label: var(--uix-file-archive-label); }
|
|
13
|
+
:is(.uix-file-icon, .uix-file-row, .uix-file-drop)[data-file-kind="other"] { --file-kind: var(--uix-file-other); --file-kind-soft: var(--uix-file-other-soft); --file-kind-strong: var(--uix-file-other-strong); --file-kind-edge: var(--uix-file-other-edge); --file-kind-label: var(--uix-file-other-label); }
|
|
14
|
+
|
|
15
|
+
/* A blocked file is amber and a failed upload red, in place of the kind (icon included). */
|
|
16
|
+
.uix-file-row[data-state="blocked"], .uix-file-row[data-state="blocked"] .uix-file-icon {
|
|
17
|
+
--file-kind: var(--uix-warning-text); --file-kind-soft: var(--uix-warning-bg); --file-kind-strong: var(--uix-warning-bg);
|
|
18
|
+
--file-kind-edge: color-mix(in srgb, var(--uix-warning-border) 30%, var(--uix-border)); --file-kind-label: var(--uix-warning-text);
|
|
19
|
+
}
|
|
20
|
+
.uix-file-row[data-state="failed"], .uix-file-row[data-state="failed"] .uix-file-icon {
|
|
21
|
+
--file-kind: var(--uix-danger-text); --file-kind-soft: var(--uix-danger-bg); --file-kind-strong: var(--uix-danger-bg);
|
|
22
|
+
--file-kind-edge: color-mix(in srgb, var(--uix-danger-border) 28%, var(--uix-border)); --file-kind-label: var(--uix-danger-text);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ── FileKindIcon: the kind's glyph in its colour, the type as a solid label on the corner ── */
|
|
26
|
+
.uix-file-icon { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--file-kind, var(--uix-file-other)); }
|
|
27
|
+
.uix-file-icon .uix-file-icon__glyph { width: 28px; height: 28px; transform: translateX(-3px); }
|
|
28
|
+
.uix-file-icon__type {
|
|
29
|
+
position: absolute; right: -4px; bottom: 3px; padding: calc(var(--uix-space-1) / 2) var(--uix-space-1);
|
|
30
|
+
border-radius: var(--uix-radius-xs); background: var(--file-kind-label, var(--uix-file-other-label)); color: var(--uix-file-label-fg);
|
|
31
|
+
font-family: var(--uix-font-sans); font-size: 7.5px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
|
|
32
|
+
box-shadow: 0 0 0 1.5px var(--uix-surface);
|
|
33
|
+
}
|
|
34
|
+
.uix-file-icon--sm { width: 30px; height: 30px; }
|
|
35
|
+
.uix-file-icon--sm .uix-file-icon__glyph { width: 25px; height: 25px; }
|
|
36
|
+
.uix-file-icon--lg { width: 52px; height: 52px; }
|
|
37
|
+
.uix-file-icon--lg .uix-file-icon__glyph { width: 42px; height: 42px; }
|
|
38
|
+
.uix-file-icon--lg .uix-file-icon__type { right: -2px; bottom: 5px; font-size: 9px; }
|
|
39
|
+
|
|
40
|
+
/* ── FileRow ── */
|
|
41
|
+
.uix-file-rows { display: grid; gap: var(--uix-space-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
|
|
42
|
+
.uix-file-row {
|
|
43
|
+
container: uix-file-row / inline-size;
|
|
44
|
+
position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--uix-space-3); min-width: 0;
|
|
45
|
+
padding: var(--uix-space-2) var(--uix-space-2) var(--uix-space-2) var(--uix-space-3);
|
|
46
|
+
border: 1px solid var(--file-kind-edge); border-radius: var(--uix-radius-md);
|
|
47
|
+
background: linear-gradient(to right, var(--file-kind-soft), transparent 55%) var(--uix-surface);
|
|
48
|
+
color: var(--uix-text);
|
|
49
|
+
transition: border-color var(--uix-dur-change) var(--uix-ease-out);
|
|
50
|
+
}
|
|
51
|
+
.uix-file-row:dir(rtl) { background: linear-gradient(to left, var(--file-kind-soft), transparent 55%) var(--uix-surface); }
|
|
52
|
+
.uix-file-row--compact { gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-1) var(--uix-space-2) var(--uix-space-2); }
|
|
53
|
+
.uix-file-row > :is(.uix-file-row__icon, .uix-file-row__text, .uix-file-row__actions) { position: relative; }
|
|
54
|
+
|
|
55
|
+
/* The upload fill: the same tint, soft to strong, scaled to the real progress, with a thin leading edge. */
|
|
56
|
+
.uix-file-row__fill {
|
|
57
|
+
position: absolute; inset: 0; pointer-events: none; transform-origin: left center; transform: scaleX(var(--file-progress, 0));
|
|
58
|
+
background: linear-gradient(to right, var(--file-kind-soft), var(--file-kind-strong));
|
|
59
|
+
transition: transform var(--uix-dur-slow) linear, opacity var(--uix-dur-change) var(--uix-ease-out);
|
|
60
|
+
}
|
|
61
|
+
.uix-file-row__edge {
|
|
62
|
+
position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none;
|
|
63
|
+
border-right: 2px solid color-mix(in srgb, var(--file-kind) 55%, transparent);
|
|
64
|
+
transform: translateX(calc((var(--file-progress, 0) - 1) * 100%));
|
|
65
|
+
transition: transform var(--uix-dur-slow) linear;
|
|
66
|
+
}
|
|
67
|
+
.uix-file-row:dir(rtl) .uix-file-row__fill { transform-origin: right center; background: linear-gradient(to left, var(--file-kind-soft), var(--file-kind-strong)); }
|
|
68
|
+
.uix-file-row:dir(rtl) .uix-file-row__edge { left: auto; right: 0; border-right: 0; border-left: 2px solid color-mix(in srgb, var(--file-kind) 55%, transparent); transform: translateX(calc((1 - var(--file-progress, 0)) * 100%)); }
|
|
69
|
+
/* Done: the fill completes, then fades back to the resting edge. */
|
|
70
|
+
.uix-file-row[data-state="done"] .uix-file-row__fill { opacity: 0; }
|
|
71
|
+
|
|
72
|
+
.uix-file-row__icon { flex: none; display: grid; }
|
|
73
|
+
/* The check draws at the icon's corner, holds, and leaves. */
|
|
74
|
+
.uix-file-row__check {
|
|
75
|
+
position: absolute; right: -4px; top: -3px; width: 16px; height: 16px; display: grid; place-items: center;
|
|
76
|
+
border-radius: var(--uix-radius-pill); background: var(--uix-surface);
|
|
77
|
+
animation: uix-file-check-in var(--uix-dur-slower) var(--uix-ease-out) both, uix-file-check-out var(--uix-dur-exit) var(--uix-ease-out) calc(var(--uix-dur-change) + var(--uix-hold-result)) forwards;
|
|
78
|
+
}
|
|
79
|
+
.uix-file-row__check svg { width: 12px; height: 12px; fill: none; stroke: var(--uix-success-solid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
|
|
80
|
+
.uix-file-row__check path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: uix-file-check-draw var(--uix-dur-slower) var(--uix-ease-out) var(--uix-dur-fast) both; }
|
|
81
|
+
|
|
82
|
+
/* The kit's title rhythm (HAR-1577): a name and its secondary line are --uix-space-1 apart. */
|
|
83
|
+
.uix-file-row__text { flex: 1; min-width: 0; display: grid; gap: var(--uix-space-1); }
|
|
84
|
+
.uix-file-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--uix-text-body); font-weight: 600; }
|
|
85
|
+
.uix-file-row__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); font-variant-numeric: tabular-nums; }
|
|
86
|
+
.uix-file-row__kind { color: var(--file-kind-label); font-weight: 600; }
|
|
87
|
+
/* A refusal is read whole: it wraps instead of ending in an ellipsis. */
|
|
88
|
+
.uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__meta { white-space: normal; overflow-wrap: anywhere; }
|
|
89
|
+
/* In a narrow panel its button moves under the words rather than squeezing them to a column. */
|
|
90
|
+
.uix-file-row:is([data-state="blocked"], [data-state="failed"]) { flex-wrap: wrap; row-gap: var(--uix-space-2); }
|
|
91
|
+
.uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__text { flex: 1 1 12rem; }
|
|
92
|
+
.uix-file-row:is([data-state="blocked"], [data-state="failed"]) .uix-file-row__actions { margin-inline-start: auto; }
|
|
93
|
+
.uix-file-row[data-state="blocked"] .uix-file-row__meta { color: var(--uix-warning-text); }
|
|
94
|
+
.uix-file-row[data-state="failed"] .uix-file-row__meta { color: var(--uix-danger-text); }
|
|
95
|
+
.uix-file-row--compact .uix-file-row__name { font-size: calc(var(--uix-text-body) * .9643); }
|
|
96
|
+
|
|
97
|
+
.uix-file-row__actions { flex: none; display: flex; align-items: center; gap: var(--uix-space-1); }
|
|
98
|
+
/* With a fine pointer the resting actions wait for hover or focus; touch always shows them. */
|
|
99
|
+
@media (hover: hover) and (pointer: fine) {
|
|
100
|
+
.uix-file-row__actions > :not(.uix-file-row__keep) { opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
101
|
+
.uix-file-row:hover .uix-file-row__actions > *,
|
|
102
|
+
.uix-file-row:focus-within .uix-file-row__actions > *,
|
|
103
|
+
.uix-file-row__actions > [aria-expanded="true"] { opacity: 1; }
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* A narrow rail (a row under 280 px, such as TENSOR's 226 px incident side rail, 2.57.1): the name
|
|
107
|
+
wraps to two lines and the meta line wraps, so a name is read instead of being cut to ten
|
|
108
|
+
letters. The row is its own size container, so this follows the row's width, not the screen's. */
|
|
109
|
+
@container uix-file-row (max-width: 280px) {
|
|
110
|
+
.uix-file-row__name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
|
|
111
|
+
.uix-file-row__meta { white-space: normal; overflow-wrap: anywhere; }
|
|
112
|
+
}
|
|
113
|
+
/* With a fine pointer the resting actions are hidden until hover or focus, so in a narrow rail
|
|
114
|
+
they float over the row's end instead of keeping that width empty for the name. */
|
|
115
|
+
@media (hover: hover) and (pointer: fine) {
|
|
116
|
+
@container uix-file-row (max-width: 280px) {
|
|
117
|
+
.uix-file-row:is([data-state="idle"], [data-state="done"]) .uix-file-row__actions {
|
|
118
|
+
position: absolute; inset-block-start: var(--uix-space-1); inset-inline-end: var(--uix-space-1);
|
|
119
|
+
border-radius: var(--uix-radius-sm);
|
|
120
|
+
}
|
|
121
|
+
.uix-file-row:is([data-state="idle"], [data-state="done"]):is(:hover, :focus-within) .uix-file-row__actions,
|
|
122
|
+
.uix-file-row:is([data-state="idle"], [data-state="done"]) .uix-file-row__actions:has([aria-expanded="true"]) {
|
|
123
|
+
background: var(--uix-surface); box-shadow: var(--uix-shadow-sm);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* ── FileDrop (slim) ── */
|
|
129
|
+
.uix-file-drop {
|
|
130
|
+
position: relative; display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0;
|
|
131
|
+
padding: var(--uix-space-2) var(--uix-space-3);
|
|
132
|
+
border: 1.5px dashed var(--uix-border-strong); border-radius: var(--uix-radius-md);
|
|
133
|
+
background: var(--uix-surface); color: var(--uix-text-muted); font-size: var(--uix-text-meta); cursor: pointer;
|
|
134
|
+
transition: border-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
|
|
135
|
+
}
|
|
136
|
+
@media (hover: hover) and (pointer: fine) {
|
|
137
|
+
.uix-file-drop:not([data-disabled]):hover { border-color: var(--uix-text-muted); }
|
|
138
|
+
}
|
|
139
|
+
.uix-file-drop > :not(.uix-file-drop__aura) { position: relative; }
|
|
140
|
+
.uix-file-drop__aura { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--uix-dur-slow) var(--uix-ease-out); }
|
|
141
|
+
.uix-file-drop[data-dragging] { border-color: color-mix(in srgb, var(--file-kind) 55%, var(--uix-border)); color: var(--uix-text); }
|
|
142
|
+
.uix-file-drop[data-dragging] .uix-file-drop__aura { opacity: 1; }
|
|
143
|
+
.uix-file-drop__icon { color: var(--uix-text-muted); }
|
|
144
|
+
.uix-file-drop__line { flex: 1; min-width: 0; display: grid; }
|
|
145
|
+
.uix-file-drop__line > * { grid-area: 1 / 1; min-width: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
146
|
+
/* The summary sits over the sentence in the same cell; it must never take the button's clicks. */
|
|
147
|
+
.uix-file-drop__summary { pointer-events: none; opacity: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--uix-text); }
|
|
148
|
+
.uix-file-drop[data-dragging] .uix-file-drop__text { opacity: 0; }
|
|
149
|
+
.uix-file-drop[data-dragging] .uix-file-drop__summary { opacity: 1; }
|
|
150
|
+
.uix-file-drop__choose {
|
|
151
|
+
margin: 0; padding: 0; border: 0; border-radius: var(--uix-radius-xs); background: none; font: inherit; font-weight: 600; color: var(--uix-link); cursor: pointer;
|
|
152
|
+
text-decoration: underline; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--uix-link) 40%, transparent);
|
|
153
|
+
}
|
|
154
|
+
.uix-file-drop__choose:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
|
|
155
|
+
.uix-file-drop[data-disabled] { cursor: not-allowed; opacity: .6; }
|
|
156
|
+
.uix-file-drop__choose:disabled { cursor: not-allowed; }
|
|
157
|
+
|
|
158
|
+
/* Forced colours drop the label's fill and ring: an outline keeps it a label over the glyph. */
|
|
159
|
+
@media (forced-colors: active) {
|
|
160
|
+
.uix-file-icon__type { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
|
|
161
|
+
.uix-file-row:not([data-state="done"]) .uix-file-row__fill { background: Highlight; opacity: .35; }
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Reduced motion keeps only the fades: the fill jumps (the global policy drops transform), and the check fades in and out instead of growing and drawing. */
|
|
165
|
+
@media (prefers-reduced-motion: reduce) {
|
|
166
|
+
.uix-file-row__check { animation: uix-file-check-fade calc(var(--uix-dur-change) + var(--uix-hold-result) + var(--uix-dur-exit)) linear both !important; }
|
|
167
|
+
.uix-file-row__check path { animation: none !important; }
|
|
168
|
+
}
|
|
169
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
170
|
+
:root[data-motion="reduce"] .uix-file-row__check { animation: uix-file-check-fade calc(var(--uix-dur-change) + var(--uix-hold-result) + var(--uix-dur-exit)) linear both !important; }
|
|
171
|
+
:root[data-motion="reduce"] .uix-file-row__check path { animation: none !important; }
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@keyframes uix-file-check-in { from { opacity: 0; transform: scale(.6); } }
|
|
176
|
+
@keyframes uix-file-check-draw { from { stroke-dashoffset: 1; } }
|
|
177
|
+
@keyframes uix-file-check-out { to { opacity: 0; } }
|
|
178
|
+
@keyframes uix-file-check-fade { 0% { opacity: 0; } 12% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
|
|
@@ -118,13 +118,12 @@
|
|
|
118
118
|
.uix-flow__edge-label { fill: var(--uix-text-muted); font-family: var(--uix-font-sans); font-size: var(--uix-text-eyebrow); }
|
|
119
119
|
.uix-flow__edge-label--loop { fill: var(--uix-accent); }
|
|
120
120
|
|
|
121
|
-
/*
|
|
121
|
+
/* the edges never march (2.57, Rules for apps: no decorative loops); the arrowheads give direction.
|
|
122
|
+
Hovering or focusing a diagram only thickens its edges, at once (no transition). */
|
|
122
123
|
@media (hover: hover) and (pointer: fine) {
|
|
123
|
-
.uix-flow:hover .uix-flow__edge
|
|
124
|
-
.uix-flow:focus-within .uix-flow__edge {
|
|
125
|
-
stroke-dasharray: 5 4; animation: uix-flow-march var(--uix-dur-slow) linear infinite;
|
|
126
|
-
}
|
|
124
|
+
.uix-flow:hover .uix-flow__edge { stroke-width: 2; }
|
|
127
125
|
}
|
|
126
|
+
.uix-flow:focus-within .uix-flow__edge { stroke-width: 2; }
|
|
128
127
|
|
|
129
128
|
/* ---- linear: flex row of nodes + pure-CSS connectors (no SVG) ---- */
|
|
130
129
|
.uix-flow--linear .uix-flow__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uix-space-1); }
|
|
@@ -206,13 +205,10 @@
|
|
|
206
205
|
|
|
207
206
|
/* ============================================================ motion */
|
|
208
207
|
@keyframes uix-flow-spin { to { transform: rotate(360deg); } }
|
|
209
|
-
@keyframes uix-flow-march { to { stroke-dashoffset: -18; } }
|
|
210
208
|
|
|
211
209
|
@media (prefers-reduced-motion: reduce) {
|
|
212
210
|
/* a running node keeps showing it runs: the icon breathes instead of turning */
|
|
213
211
|
.uix-node--running .uix-node__icon svg { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
|
|
214
|
-
.uix-flow:hover .uix-flow__edge,
|
|
215
|
-
.uix-flow:focus-within .uix-flow__edge { animation: none; }
|
|
216
212
|
}
|
|
217
213
|
|
|
218
214
|
@media (max-width: 720px) {
|
|
@@ -1,25 +1,12 @@
|
|
|
1
|
-
/* uix heartbeat / live status indicator — a
|
|
2
|
-
|
|
1
|
+
/* uix heartbeat / live status indicator — a still dot in the state's colour (2.57, Rules for apps:
|
|
2
|
+
no pulsing or looping on status). "Live" is said by the words beside it (LiveIndicator), never by
|
|
3
|
+
motion. The ring span stays in the markup for compatibility and is not drawn. */
|
|
3
4
|
@layer uix.components {
|
|
4
5
|
.uix-heartbeat { position: relative; display: inline-grid; place-items: center; width: 8px; height: 8px; flex: none; }
|
|
5
6
|
.uix-heartbeat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-success); z-index: var(--uix-z-raised); }
|
|
6
|
-
.uix-heartbeat__ping {
|
|
7
|
-
|
|
8
|
-
.uix-heartbeat--
|
|
9
|
-
.uix-heartbeat--danger .uix-heartbeat__dot, .uix-heartbeat--danger .uix-heartbeat__ping { background: var(--uix-danger); }
|
|
7
|
+
.uix-heartbeat__ping { display: none; }
|
|
8
|
+
.uix-heartbeat--warning .uix-heartbeat__dot { background: var(--uix-warning); }
|
|
9
|
+
.uix-heartbeat--danger .uix-heartbeat__dot { background: var(--uix-danger); }
|
|
10
10
|
.uix-heartbeat--idle .uix-heartbeat__dot { background: var(--uix-text-muted); }
|
|
11
|
-
.uix-heartbeat--idle .uix-heartbeat__ping { display: none; }
|
|
12
|
-
@media (prefers-reduced-motion: reduce) {
|
|
13
|
-
.uix-heartbeat__ping { display: none; }
|
|
14
|
-
.uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
|
|
15
|
-
}
|
|
16
11
|
.uix-live { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
|
|
17
12
|
}
|
|
18
|
-
|
|
19
|
-
/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rule */
|
|
20
|
-
@layer uix.components {
|
|
21
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
22
|
-
:root[data-motion="reduce"] .uix-heartbeat__ping { display: none; }
|
|
23
|
-
:root[data-motion="reduce"] .uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
|
|
24
|
-
}
|
|
25
|
-
}
|