@tensor_1/tokens 2.49.0 → 2.50.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.50.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": [
|
|
@@ -37,4 +37,106 @@
|
|
|
37
37
|
}
|
|
38
38
|
/* a phone: the search takes its own row */
|
|
39
39
|
@media (max-width: 40rem) { .uix-data-workspace__search { flex: 1 1 100%; } }
|
|
40
|
+
|
|
41
|
+
/* ── 2.50: adoption gaps (HAR-2622..2626, ADR-0005 addendum) ─────────────────────────── */
|
|
42
|
+
/* the product's notices between the toolbar (and bulk bar) and the rows */
|
|
43
|
+
.uix-data-workspace__before { display: grid; gap: var(--uix-space-2); min-width: 0; }
|
|
44
|
+
/* a note above the saved-view list ("Saved views could not be loaded") */
|
|
45
|
+
.uix-data-workspace__views-note {
|
|
46
|
+
max-inline-size: 20rem; padding: var(--uix-space-2) var(--uix-space-3); border-bottom: 1px solid var(--uix-border);
|
|
47
|
+
color: var(--uix-text-muted); font-size: var(--uix-text-meta);
|
|
48
|
+
}
|
|
49
|
+
/* "Nothing matches" with the product's action beside Clear filters */
|
|
50
|
+
.uix-data-workspace__state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--uix-space-2); }
|
|
51
|
+
|
|
52
|
+
/* the rich record-id cell: a strong line over a muted one, inside the same button or link */
|
|
53
|
+
.uix-data-workspace__id { max-inline-size: 100%; }
|
|
54
|
+
.uix-data-workspace__id-text { display: inline-flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; text-align: start; }
|
|
55
|
+
.uix-data-workspace__id-text > * { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
56
|
+
.uix-data-workspace__id-link { color: var(--uix-text); text-decoration: none; }
|
|
57
|
+
|
|
58
|
+
/* row groups: each group is a tbody under its header row. The zebra restarts under every header
|
|
59
|
+
with a plain row: the group swaps the two row colours its rows read (no selector here outranks
|
|
60
|
+
a row state; table.css keeps their order). */
|
|
61
|
+
.uix-data-workspace__grid--grouped { --uix-dw-row: var(--uix-row); --uix-dw-row-alt: var(--uix-row-alt); }
|
|
62
|
+
.uix-data-workspace__grid--grouped .uix-data-workspace__group { --uix-row: var(--uix-dw-row-alt); --uix-row-alt: var(--uix-dw-row); }
|
|
63
|
+
.uix-table tbody tr:where(.uix-data-workspace__group-head) { --uix-row-bg: var(--uix-bg-subtle); }
|
|
64
|
+
.uix-data-workspace__group-head > :is(th, td) {
|
|
65
|
+
height: auto; padding-block: var(--uix-space-2); border-bottom: 1px solid var(--uix-border);
|
|
66
|
+
background: linear-gradient(var(--uix-row-bg), var(--uix-row-bg)), var(--uix-surface);
|
|
67
|
+
}
|
|
68
|
+
.uix-data-workspace__group-label { font-weight: 400; text-align: start; }
|
|
69
|
+
/* the label spans several columns: its words stay in view while the table scrolls sideways,
|
|
70
|
+
the cell itself does not stick (it would slide over the aggregates) */
|
|
71
|
+
.uix-data-workspace .uix-data-workspace__group-head > th { position: static; box-shadow: none; }
|
|
72
|
+
.uix-data-workspace__group-title {
|
|
73
|
+
position: sticky; inset-inline-start: var(--uix-space-4); display: inline-flex; flex-wrap: wrap; align-items: center;
|
|
74
|
+
gap: var(--uix-space-1) var(--uix-space-2); max-inline-size: 100%;
|
|
75
|
+
}
|
|
76
|
+
.uix-data-workspace__grid--pin-id .uix-data-workspace__group-title { inset-inline-start: calc(var(--uix-selcol-w) + var(--uix-space-4)); }
|
|
77
|
+
.uix-data-workspace__group-toggle {
|
|
78
|
+
display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0;
|
|
79
|
+
border-radius: var(--uix-radius-xs); background: transparent; color: var(--uix-text-muted); cursor: pointer;
|
|
80
|
+
}
|
|
81
|
+
.uix-data-workspace__group-toggle svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
|
|
82
|
+
.uix-data-workspace__group-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
|
|
83
|
+
.uix-data-workspace__group-toggle:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
|
|
84
|
+
@media (hover: hover) and (pointer: fine) { .uix-data-workspace__group-toggle:hover { background: var(--uix-bg-active); color: var(--uix-text); } }
|
|
85
|
+
.uix-data-workspace__group-name { font-weight: 600; color: var(--uix-text); }
|
|
86
|
+
.uix-data-workspace__group-count, .uix-data-workspace__group-agg { color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-variant-numeric: tabular-nums; }
|
|
87
|
+
@media (prefers-reduced-motion: reduce) { .uix-data-workspace__group-toggle svg { transition: none; } }
|
|
88
|
+
|
|
89
|
+
/* the keyboard row model: one row in the tab order; its ring sits inside the row, so moving
|
|
90
|
+
focus never shifts the layout and the wrap's edge never clips it */
|
|
91
|
+
/* a row a click activates (onRowActivate) */
|
|
92
|
+
.uix-data-workspace__grid--click tbody tr[data-uix-row-id] { cursor: pointer; }
|
|
93
|
+
/* The frozen cells paint over a row's outline, so every cell draws its edge of the ring too
|
|
94
|
+
(forced colours drop box-shadow and keep the outline). A card has no frozen cells: its outline is enough. */
|
|
95
|
+
.uix-data-workspace__grid--rows tbody tr:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
|
|
96
|
+
.uix-data-workspace__table .uix-data-workspace__grid--rows:not(.uix-table--cards) tbody tr[data-uix-row-id]:focus-visible > td { box-shadow: inset 0 2px 0 var(--uix-ring), inset 0 -1px 0 var(--uix-ring); border-bottom-color: var(--uix-ring); }
|
|
97
|
+
.uix-data-workspace__table .uix-data-workspace__grid--rows:not(.uix-table--cards) tbody tr[data-uix-row-id]:focus-visible > td:first-child { box-shadow: inset 2px 0 0 var(--uix-ring), inset 0 2px 0 var(--uix-ring), inset 0 -1px 0 var(--uix-ring); border-bottom-color: var(--uix-ring); }
|
|
98
|
+
.uix-data-workspace__table .uix-data-workspace__grid--rows:not(.uix-table--cards) tbody tr[data-uix-row-id]:focus-visible > td:last-child { box-shadow: inset -2px 0 0 var(--uix-ring), inset 0 2px 0 var(--uix-ring), inset 0 -1px 0 var(--uix-ring); border-bottom-color: var(--uix-ring); }
|
|
99
|
+
/* windowing: the rows outside the window are two plain spacers */
|
|
100
|
+
.uix-table tbody tr:where(.uix-data-workspace__spacer) { --uix-row-bg: transparent; }
|
|
101
|
+
.uix-data-workspace__spacer > td { padding: 0; border: 0; }
|
|
102
|
+
|
|
103
|
+
/* cards (mobile="cards", under 768 px of workspace): the wrap drops its frame and each row is a
|
|
104
|
+
card, a grid in flow. Its first line is the checkbox and the id; every value spans the card
|
|
105
|
+
below, labelled; the row's actions close the card, always shown (a card has no hover to
|
|
106
|
+
reveal them), so word actions ("Renew · Return") never run over a long title. */
|
|
107
|
+
.uix-data-workspace__table--cards { border: 0; border-radius: 0; background: none; }
|
|
108
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) {
|
|
109
|
+
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
|
|
110
|
+
}
|
|
111
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) > td { grid-column: 1 / -1; }
|
|
112
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) > td:is([data-col="select"], [data-col="id"]) {
|
|
113
|
+
grid-row: 1; padding: var(--uix-space-2) 0 var(--uix-space-3); border-bottom: 1px solid var(--uix-border);
|
|
114
|
+
}
|
|
115
|
+
/* placed with the same selector as the span-all rule above, so they outrank it */
|
|
116
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) > td[data-col="select"] { display: block; grid-column: 1; width: auto; }
|
|
117
|
+
/* no column gap: the line under the first line runs unbroken under the checkbox and the id */
|
|
118
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) > td[data-col="id"] { grid-column: 2 / -1; padding-inline-start: var(--uix-space-3); }
|
|
119
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head):not(:has(> td[data-col="select"])) > td[data-col="id"] { grid-column: 1 / -1; padding-inline-start: 0; }
|
|
120
|
+
.uix-data-workspace .uix-table--cards tbody tr:not(.uix-data-workspace__group-head) > td[data-col="actions"] {
|
|
121
|
+
display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--uix-space-1) var(--uix-space-2);
|
|
122
|
+
grid-column: 1 / -1; width: auto; min-inline-size: 0; padding: var(--uix-space-2) 0;
|
|
123
|
+
}
|
|
124
|
+
.uix-data-workspace .uix-table--cards td[data-col="select"]::before, .uix-data-workspace .uix-table--cards td[data-col="actions"]::before { content: none; }
|
|
125
|
+
.uix-data-workspace .uix-table--cards td[data-col="actions"] .uix-rowact { opacity: 1; }
|
|
126
|
+
/* the id's words wrap in a card rather than run under the actions */
|
|
127
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__id, .uix-data-workspace .uix-table--cards .uix-id-cell__btn { white-space: normal; text-align: start; }
|
|
128
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__id-text > * { white-space: normal; overflow-wrap: anywhere; }
|
|
129
|
+
/* a group's header in cards: one line above its cards (checkbox, toggle, name, count, then the aggregates) */
|
|
130
|
+
.uix-data-workspace .uix-table--cards tbody tr.uix-data-workspace__group-head {
|
|
131
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1) var(--uix-space-3);
|
|
132
|
+
margin: var(--uix-space-5) 0 var(--uix-space-2); padding: 0; border: 0; box-shadow: none; background: none;
|
|
133
|
+
}
|
|
134
|
+
.uix-data-workspace .uix-table--cards tbody:first-of-type tr.uix-data-workspace__group-head { margin-block-start: 0; }
|
|
135
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__group-head > :is(th, td) {
|
|
136
|
+
display: flex; align-items: center; gap: var(--uix-space-2); position: static; width: auto; height: auto;
|
|
137
|
+
padding: 0; border: 0; background: none; text-align: start;
|
|
138
|
+
}
|
|
139
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__group-label { flex: 1 1 auto; }
|
|
140
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__group-title { position: static; }
|
|
141
|
+
.uix-data-workspace .uix-table--cards .uix-data-workspace__group-agg:empty { display: none; }
|
|
40
142
|
}
|
|
@@ -27,6 +27,10 @@
|
|
|
27
27
|
/* multi-column sort ordinal (⇧+click adds a secondary key) */
|
|
28
28
|
.uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
|
|
29
29
|
|
|
30
|
+
/* With Th sortOrderLabel the ordinal is said in words inside the button (2.50, HAR-2623), so the
|
|
31
|
+
drawn number gets empty alt text; an engine without the alt syntax keeps the rule above. */
|
|
32
|
+
.uix-table th[data-sort-order][data-sort-labelled]::before { content: attr(data-sort-order) / ""; }
|
|
33
|
+
|
|
30
34
|
/* sortable header's real <button> (UIX-A11Y-2): visually indistinguishable from the old
|
|
31
35
|
plain-text th — inherited font/colour, no chrome — with an inset overlay so the whole
|
|
32
36
|
cell stays the click target (the sticky th is its containing block). The sort arrow and
|