@tensor_1/tokens 2.57.1 → 2.58.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.58.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,11 +1,12 @@
|
|
|
1
1
|
/* uix change highlight — "this changed": the sibling of .uix-arrival for a value that changed in
|
|
2
2
|
place (a live update, a transition's result, a rolled-back optimistic change; HAR-2585, motion
|
|
3
3
|
standard §2.5). The element is tinted at once, holds a moment, and the tint fades back to the
|
|
4
|
-
element's own background. React's ChangeHighlight
|
|
5
|
-
(never on the first render)
|
|
4
|
+
element's own background. React's ChangeHighlight, useChangeHighlight and flashChanged set
|
|
5
|
+
[data-uix-changed] (never on the first render) — on any element, so the hook needs no wrapper
|
|
6
|
+
class (HAR-2755); plain markup adds .uix-changed (remove it, force a reflow and add
|
|
6
7
|
it again to replay). Depends only on --uix-* tokens. */
|
|
7
8
|
@layer uix.components {
|
|
8
|
-
.uix-change-highlight, .uix-changed {
|
|
9
|
+
.uix-change-highlight, .uix-changed, [data-uix-changed] {
|
|
9
10
|
/* opaque, so a pinned table cell never turns see-through while it is tinted */
|
|
10
11
|
--uix-change-strength: 14%;
|
|
11
12
|
--uix-change-tint: color-mix(in srgb, var(--uix-accent) var(--uix-change-strength), var(--uix-surface));
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
/* a dark surface swallows a weak tint: this is what still reads there */
|
|
18
|
-
:root:where(.dark,[data-theme="dark"]) :is(.uix-change-highlight, .uix-changed) { --uix-change-strength: 28%; }
|
|
19
|
+
:root:where(.dark,[data-theme="dark"]) :is(.uix-change-highlight, .uix-changed, [data-uix-changed]) { --uix-change-strength: 28%; }
|
|
19
20
|
|
|
20
21
|
/* room round a value, given back as margin so nothing near it moves. Only the inline wrapper: a
|
|
21
22
|
row or a cell has its own edges, and a ring stands off what it wraps. */
|
|
@@ -36,36 +37,36 @@
|
|
|
36
37
|
@keyframes uix-changed-static { 0% { outline: 2px solid var(--uix-change-ring); outline-offset: calc(-1 * var(--uix-space-1)); } 100% { outline: 2px solid transparent; outline-offset: calc(-1 * var(--uix-space-1)); } }
|
|
37
38
|
|
|
38
39
|
/* held, then an even fade: an ease-out would drain most of the tint before anyone looks */
|
|
39
|
-
.uix-changed,
|
|
40
|
+
.uix-changed, [data-uix-changed] { animation: uix-changed var(--uix-change-duration) var(--uix-ease-in-out); }
|
|
40
41
|
/* the ring hugs what it wraps (a pill, a star): inline-flex, pill-round */
|
|
41
42
|
.uix-change-highlight--ring { display: inline-flex; vertical-align: middle; border-radius: var(--uix-radius-pill); }
|
|
42
43
|
.uix-change-highlight--ring[data-uix-changed], .uix-changed.uix-change-highlight--ring { animation-name: uix-changed-ring; }
|
|
43
44
|
/* a row tints its cells: cells paint over the row's own background */
|
|
44
|
-
tr.uix-changed, tr
|
|
45
|
-
tr.uix-changed > :is(td, th), tr
|
|
45
|
+
tr.uix-changed, tr[data-uix-changed] { animation: none; }
|
|
46
|
+
tr.uix-changed > :is(td, th), tr[data-uix-changed] > :is(td, th) { animation: uix-changed var(--uix-change-duration) var(--uix-ease-in-out); }
|
|
46
47
|
|
|
47
48
|
@media (prefers-reduced-motion: reduce) {
|
|
48
49
|
/* !important: the kit's reduced-motion policy ends keyframes at once; this one is the signal.
|
|
49
50
|
A row is outlined as one box, not cell by cell. */
|
|
50
|
-
.uix-changed,
|
|
51
|
-
tr.uix-changed, tr
|
|
51
|
+
.uix-changed, [data-uix-changed],
|
|
52
|
+
tr.uix-changed, tr[data-uix-changed] { animation: uix-changed-static var(--uix-change-duration) step-end !important; }
|
|
52
53
|
.uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end !important; }
|
|
53
|
-
tr.uix-changed > :is(td, th), tr
|
|
54
|
+
tr.uix-changed > :is(td, th), tr[data-uix-changed] > :is(td, th) { animation: none !important; }
|
|
54
55
|
}
|
|
55
56
|
@media (forced-colors: active) {
|
|
56
|
-
.uix-change-highlight, .uix-changed { --uix-change-ring: Highlight; }
|
|
57
|
-
.uix-changed,
|
|
58
|
-
tr.uix-changed, tr
|
|
57
|
+
.uix-change-highlight, .uix-changed, [data-uix-changed] { --uix-change-ring: Highlight; }
|
|
58
|
+
.uix-changed, [data-uix-changed],
|
|
59
|
+
tr.uix-changed, tr[data-uix-changed] { animation: uix-changed-static var(--uix-change-duration) step-end; }
|
|
59
60
|
.uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end; }
|
|
60
|
-
tr.uix-changed > :is(td, th), tr
|
|
61
|
+
tr.uix-changed > :is(td, th), tr[data-uix-changed] > :is(td, th) { animation: none; }
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same outline */
|
|
65
66
|
@layer uix.components {
|
|
66
67
|
@media (prefers-reduced-motion: no-preference) {
|
|
67
|
-
:root[data-motion="reduce"] :is(.uix-changed,
|
|
68
|
+
:root[data-motion="reduce"] :is(.uix-changed, [data-uix-changed]) { animation: uix-changed-static var(--uix-change-duration) step-end !important; }
|
|
68
69
|
:root[data-motion="reduce"] .uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end !important; }
|
|
69
|
-
:root[data-motion="reduce"] :is(tr.uix-changed, tr
|
|
70
|
+
:root[data-motion="reduce"] :is(tr.uix-changed, tr[data-uix-changed]) > :is(td, th) { animation: none !important; }
|
|
70
71
|
}
|
|
71
72
|
}
|
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
outline-offset: 2px;
|
|
55
55
|
border-radius: var(--uix-radius-md);
|
|
56
56
|
}
|
|
57
|
-
|
|
57
|
+
/* a resize dims the widget; a move lifts it ([data-uix-drag="lifted"], drag.css) and keeps it solid */
|
|
58
|
+
.uix-dashboard-canvas__item--dragging:not([data-uix-drag]) { opacity: 0.5; }
|
|
58
59
|
|
|
59
60
|
.uix-dashboard-canvas__handle {
|
|
60
61
|
position: absolute;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
/* uix page header — title/subtitle/actions row. Depends only on --uix-* tokens. */
|
|
2
2
|
@layer uix.components {
|
|
3
3
|
.uix-page-header { display: flex; align-items: flex-start; gap: var(--uix-space-5); flex-wrap: wrap; padding-bottom: var(--uix-space-6); margin-bottom: var(--uix-space-7); border-bottom: 1px solid var(--uix-border); }
|
|
4
|
-
|
|
4
|
+
/* Give titles more room before sharing a row with actions when text is enlarged. */
|
|
5
|
+
.uix-page-header__titles { flex: 1 1 13.75rem; min-width: 0; }
|
|
5
6
|
.uix-page-header__eyebrow { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
|
|
6
|
-
|
|
7
|
+
/* A record name may be one long word, including inside a React node. Let the
|
|
8
|
+
heading shrink beside help and wrap its text rather than disappear outside
|
|
9
|
+
a consumer's clipped container (HAR-2823). */
|
|
10
|
+
.uix-page-header__title { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-size: var(--uix-text-h2); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
|
|
7
11
|
/* title + help ? (React PageHeader `help`): the ? sits beside the heading, not inside it; the row
|
|
8
12
|
carries the title size so the ? (info-tip.css) lands at the top right of the title text */
|
|
9
13
|
.uix-page-header__title-row { display: flex; align-items: baseline; gap: var(--uix-space-1); min-width: 0; font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); }
|