@tensor_1/tokens 2.54.0 → 2.54.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tensor_1/tokens",
|
|
3
|
-
"version": "2.54.
|
|
3
|
+
"version": "2.54.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": [
|
|
@@ -7,19 +7,32 @@
|
|
|
7
7
|
@layer uix.components {
|
|
8
8
|
.uix-change-highlight, .uix-changed {
|
|
9
9
|
/* opaque, so a pinned table cell never turns see-through while it is tinted */
|
|
10
|
-
--uix-change-
|
|
10
|
+
--uix-change-strength: 14%;
|
|
11
|
+
--uix-change-tint: color-mix(in srgb, var(--uix-accent) var(--uix-change-strength), var(--uix-surface));
|
|
11
12
|
--uix-change-ring: var(--uix-ring);
|
|
12
13
|
/* about 1.3 s: long enough to find, short enough to be gone before the next glance */
|
|
13
14
|
--uix-change-duration: calc(var(--uix-dur-slower) * 4);
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
/* 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
|
+
|
|
20
|
+
/* room round a value, given back as margin so nothing near it moves. Only the inline wrapper: a
|
|
21
|
+
row or a cell has its own edges, and a ring stands off what it wraps. */
|
|
22
|
+
span.uix-change-highlight:not(.uix-change-highlight--ring) {
|
|
23
|
+
padding: var(--uix-space-1) var(--uix-space-2);
|
|
24
|
+
margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2));
|
|
25
|
+
border-radius: var(--uix-radius-sm);
|
|
26
|
+
box-decoration-break: clone;
|
|
27
|
+
}
|
|
28
|
+
|
|
16
29
|
/* No fill-mode: the last frame is the element's own background, so a pill or a zebra row keeps
|
|
17
30
|
its colour once the tint is gone. */
|
|
18
31
|
@keyframes uix-changed { 0%, 40% { background-color: var(--uix-change-tint); } }
|
|
19
|
-
@keyframes uix-changed-ring { 0%, 40% { outline: 2px solid var(--uix-change-ring); outline-offset:
|
|
32
|
+
@keyframes uix-changed-ring { 0%, 40% { outline: 2px solid var(--uix-change-ring); outline-offset: var(--uix-space-1); } 100% { outline: 2px solid transparent; outline-offset: var(--uix-space-1); } }
|
|
20
33
|
/* reduced motion and forced colours: a steady outline for the same time, then nothing — just
|
|
21
34
|
inside the edge of a row or field, just outside a ringed pill (inside it would cover the label) */
|
|
22
|
-
@keyframes uix-changed-static-ring { 0% { outline: 2px solid var(--uix-change-ring); outline-offset:
|
|
35
|
+
@keyframes uix-changed-static-ring { 0% { outline: 2px solid var(--uix-change-ring); outline-offset: var(--uix-space-1); } 100% { outline: 2px solid transparent; outline-offset: var(--uix-space-1); } }
|
|
23
36
|
@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)); } }
|
|
24
37
|
|
|
25
38
|
/* held, then an even fade: an ease-out would drain most of the tint before anyone looks */
|