@tensor_1/tokens 2.22.0 → 2.24.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.24.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": [
|
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
.uix-diff-viewer__versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--uix-border); }
|
|
9
9
|
.uix-diff-viewer__versions>div { min-width:0; padding:var(--uix-space-3); border-right:1px solid var(--uix-border); background:var(--uix-surface); } .uix-diff-viewer__versions>div:last-child { border-right:0; } .uix-diff-viewer__versions strong { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
|
|
10
10
|
.uix-diff-viewer__versions pre { max-height:14rem; overflow:auto; margin-top:var(--uix-space-2); color:var(--uix-text); font-family:var(--uix-font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
|
|
11
|
+
/* controlSize: entry rows are controls too; md follows --uix-control-h */
|
|
12
|
+
.uix-diff-viewer[data-control-size="md"] .uix-diff-viewer__entry summary { min-height:var(--uix-control-h); }
|
|
13
|
+
.uix-diff-viewer[data-control-size="lg"] .uix-diff-viewer__entry summary { min-height:44px; }
|
|
11
14
|
.uix-diff-viewer__actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-2); padding:var(--uix-space-3); border-top:1px solid var(--uix-border); }
|
|
12
15
|
.uix-diff-viewer--empty { padding:var(--uix-space-6); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); color:var(--uix-text-muted); }
|
|
13
16
|
@media (max-width:720px) { .uix-diff-viewer__versions { grid-template-columns:1fr; } }
|
|
@@ -1,18 +1,71 @@
|
|
|
1
|
-
/* uix table View menu —
|
|
2
|
-
|
|
1
|
+
/* uix table View menu — density / zebra / freeze / columns in one panel with its OWN surface, so it
|
|
2
|
+
renders opaque inside a Popover or inside an overlay shell that adds no chrome. Section titles stay
|
|
3
|
+
pinned while the panel scrolls; a column row is grip · checkbox · name · ⋯.
|
|
4
|
+
Reuses .uix-segmented, .uix-switch, .uix-checkbox, .uix-menu__item. Depends only on --uix-* tokens. */
|
|
3
5
|
@layer uix.components {
|
|
4
|
-
.uix-view-menu {
|
|
6
|
+
.uix-view-menu {
|
|
7
|
+
min-width: 280px; max-width: 360px; max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain;
|
|
8
|
+
padding: var(--uix-space-2); color: var(--uix-text);
|
|
9
|
+
background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover);
|
|
10
|
+
}
|
|
11
|
+
/* Inside a .uix-popover the popover is the surface; don't draw a second border and shadow. */
|
|
12
|
+
.uix-popover > .uix-view-menu { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
|
|
5
13
|
.uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
|
|
6
14
|
.uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
|
|
7
|
-
.uix-view-menu__label {
|
|
15
|
+
.uix-view-menu__label {
|
|
16
|
+
position: sticky; top: calc(-1 * var(--uix-space-2)); z-index: var(--uix-z-raised); padding-block: var(--uix-space-1); margin-bottom: var(--uix-space-1);
|
|
17
|
+
background: var(--uix-surface-2); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted);
|
|
18
|
+
}
|
|
8
19
|
.uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
|
|
9
20
|
.uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
|
|
10
21
|
.uix-view-menu .uix-segmented { display: flex; width: 100%; }
|
|
11
22
|
.uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
|
|
12
|
-
.uix-view-menu__cols { display: flex; flex-direction: column;
|
|
13
|
-
.uix-view-
|
|
14
|
-
.
|
|
23
|
+
.uix-view-menu__cols { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--uix-space-1)); padding: 0; list-style: none; }
|
|
24
|
+
.uix-view-menu__footer { border-top: 1px solid var(--uix-border); padding: var(--uix-space-1) 0 0; }
|
|
25
|
+
/* Column rows. Hover paints the WHOLE row (grip, checkbox, name, ⋯ together), never just the label. */
|
|
26
|
+
.uix-view-menu__col { display: flex; align-items: center; gap: var(--uix-space-1); border-radius: var(--uix-radius-sm); }
|
|
27
|
+
.uix-view-menu__col:hover { background: var(--uix-bg-hover); }
|
|
28
|
+
.uix-view-menu__col[data-dragging] { opacity: .55; }
|
|
29
|
+
.uix-view-menu[data-dragging] { cursor: grabbing; user-select: none; }
|
|
30
|
+
/* The toggle is a .uix-checkbox (or, for a required column, a plain span) — not a .uix-menu__item,
|
|
31
|
+
whose svg rule would recolour and resize the check glyph. */
|
|
32
|
+
.uix-view-menu__col-toggle { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-1); font-size: var(--uix-text-body); color: var(--uix-text); }
|
|
33
|
+
span.uix-view-menu__col-toggle { cursor: default; }
|
|
34
|
+
/* A required column has no checkbox; the box's width is kept so every name starts at the same x. */
|
|
35
|
+
.uix-view-menu__col-box { flex: none; width: 18px; }
|
|
36
|
+
.uix-view-menu__col-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
37
|
+
.uix-view-menu__grip { display: grid; place-items: center; flex: none; width: 20px; height: 28px; padding: 0; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: grab; touch-action: none; }
|
|
38
|
+
.uix-view-menu__grip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
|
|
39
|
+
.uix-view-menu__actions { display: flex; flex: none; align-items: center; }
|
|
40
|
+
.uix-view-menu__row-menu { min-width: 160px; padding: var(--uix-space-1); }
|
|
41
|
+
/* Grip and ⋯ are quiet until the row is hovered or holds focus, the grip is in use, or the menu is
|
|
42
|
+
open — at 75%, the same WCAG 1.4.11 floor as the saved-views row (see below). */
|
|
43
|
+
:is(.uix-view-menu__grip, .uix-view-menu__actions) { opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
44
|
+
.uix-view-menu__col:is(:hover, :focus-within, [data-dragging]) :is(.uix-view-menu__grip, .uix-view-menu__actions),
|
|
45
|
+
.uix-view-menu__actions:has([aria-expanded="true"]) { opacity: 1; }
|
|
46
|
+
/* Saved views: optional titled sections in one scrolling menu; a row is grip · name · overflow.
|
|
47
|
+
Hover and selection paint the WHOLE row; the selected row is an accent tint, never a check glyph. */
|
|
48
|
+
.uix-saved-views { max-width: 400px; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
|
|
49
|
+
.uix-saved-views__section + .uix-saved-views__section { margin-top: var(--uix-space-1); }
|
|
50
|
+
.uix-saved-views__section-label { position: sticky; top: calc(-1 * var(--uix-space-1)); z-index: var(--uix-z-raised); background: var(--uix-surface-2); }
|
|
51
|
+
.uix-saved-views__group { margin: 0; padding: 0; list-style: none; }
|
|
52
|
+
.uix-saved-views__row { display: flex; align-items: center; border-radius: var(--uix-radius-sm); }
|
|
53
|
+
.uix-saved-views__row:hover { background: var(--uix-bg-hover); }
|
|
54
|
+
.uix-saved-views__row[data-active] { background: var(--uix-brand-muted); }
|
|
55
|
+
.uix-saved-views__row[data-dragging] { opacity: .55; }
|
|
56
|
+
.uix-saved-views[data-dragging] { cursor: grabbing; user-select: none; }
|
|
15
57
|
.uix-saved-views__row > .uix-menu__item { min-width: 0; flex: 1; }
|
|
58
|
+
.uix-saved-views__row > .uix-menu__item:is(:hover, [data-active]) { background: transparent; }
|
|
59
|
+
.uix-saved-views__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
60
|
+
.uix-saved-views__grip { display: grid; place-items: center; flex: none; width: 20px; height: 28px; padding: 0; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: grab; touch-action: none; }
|
|
61
|
+
.uix-saved-views__grip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
|
|
62
|
+
.uix-saved-views__actions { display: flex; flex: none; align-items: center; }
|
|
63
|
+
/* Quiet affordances: grip and overflow are dimmed on purpose until the row is hovered or holds focus,
|
|
64
|
+
the grip is in use, or the overflow menu is open. Idle is 75% (not lower): the muted grip on the
|
|
65
|
+
panel surface needs it to keep WCAG 1.4.11 3:1 non-text contrast at rest (3.19:1 light, 4.45:1 dark). */
|
|
66
|
+
:is(.uix-saved-views__grip, .uix-saved-views__actions) { opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
|
|
67
|
+
.uix-saved-views__row:is(:hover, :focus-within, [data-dragging]) :is(.uix-saved-views__grip, .uix-saved-views__actions),
|
|
68
|
+
.uix-saved-views__actions:has([aria-expanded="true"]) { opacity: 1; }
|
|
16
69
|
.uix-saved-views__pin { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer; }
|
|
17
70
|
.uix-saved-views__pin:is(:hover, :focus-visible), .uix-saved-views__pin[data-on] { color: var(--uix-warning-text); background: var(--uix-bg-hover); }
|
|
18
71
|
.uix-saved-views__footer { border-top: 1px solid var(--uix-border); margin-top: var(--uix-space-1); padding: var(--uix-space-2); }
|