@tensor_1/tokens 2.40.1 → 2.41.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.41.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": [
|
|
@@ -45,7 +45,9 @@
|
|
|
45
45
|
--calendar-hour: 3rem;
|
|
46
46
|
--calendar-gutter: 3.5rem;
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
/* one column that never grows past its container: a child's minimum (a long marker, a 7-day grid)
|
|
49
|
+
scrolls or wraps inside the calendar instead of widening it (TENSOR HAR-1519) */
|
|
50
|
+
display:grid; grid-template-columns:minmax(0,1fr); gap:var(--uix-space-3); min-width:0; color:var(--calendar-chrome-text);
|
|
49
51
|
}
|
|
50
52
|
.uix-scheduling-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); flex-wrap:wrap; }
|
|
51
53
|
.uix-scheduling-calendar__notice { padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); background:var(--calendar-chrome-surface-quiet); font-size:var(--uix-text-meta); }
|
|
@@ -196,7 +198,11 @@
|
|
|
196
198
|
/* the title takes the whole row before it wraps; it is never cut short of the row width */
|
|
197
199
|
.uix-scheduling-calendar__agenda-main { flex:1 1 12rem; display:grid; gap:var(--calendar-gap); min-width:0; overflow-wrap:anywhere; }
|
|
198
200
|
.uix-scheduling-calendar__agenda-meta { color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
|
|
199
|
-
.uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:wrap; gap:var(--uix-space-1) var(--uix-space-2); font-size:var(--uix-text-meta); }
|
|
201
|
+
.uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:wrap; min-width:0; gap:var(--uix-space-1) var(--uix-space-2); font-size:var(--uix-text-meta); }
|
|
202
|
+
/* a full-width agenda row has room to say a marker whole: its label wraps instead of setting the row's width (TENSOR HAR-1519) */
|
|
203
|
+
.uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers > * { min-width:0; }
|
|
204
|
+
.uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker { flex:0 1 auto; min-width:0; }
|
|
205
|
+
.uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker-label { white-space:normal; overflow-wrap:break-word; }
|
|
200
206
|
.uix-scheduling-calendar__agenda-more,.uix-scheduling-calendar__agenda-continues { margin:0; padding:var(--uix-space-2) var(--uix-space-1); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
|
|
201
207
|
button.uix-scheduling-calendar__agenda-more { display:block; border:0; border-radius:var(--uix-radius-xs); background:transparent; color:var(--calendar-chrome-text); font-weight:600; text-align:left; text-decoration:underline; cursor:pointer; }
|
|
202
208
|
button.uix-scheduling-calendar__agenda-more:hover { background:var(--calendar-chrome-surface-quiet); }
|
|
@@ -218,6 +224,7 @@
|
|
|
218
224
|
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:nowrap; min-width:0; overflow:hidden; }
|
|
219
225
|
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers > span { flex:0 1 auto; display:inline-flex; min-width:0.6875rem; overflow:hidden; }
|
|
220
226
|
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker { flex:0 1 auto; min-width:0; }
|
|
227
|
+
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker-label { white-space:nowrap; overflow-wrap:normal; }
|
|
221
228
|
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker::before,.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker-icon { flex:none; }
|
|
222
229
|
.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__status { flex:none; }
|
|
223
230
|
/* a narrow long agenda (the component measures it): taller rows of three lines — the title, the time, then markers and status */
|
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
@layer uix.components {
|
|
3
3
|
/* min-inline-size: 0 + max-inline-size: 100% — a <fieldset> defaults to min-inline-size:
|
|
4
4
|
min-content, so a segmented control on one could never be narrower than its longest words
|
|
5
|
-
and ran past its container at 320 px (WCAG 1.4.10). The options wrap instead
|
|
6
|
-
|
|
5
|
+
and ran past its container at 320 px (WCAG 1.4.10). The options wrap instead: onto a new
|
|
6
|
+
row first, then inside an option at a space, and inside a word only when that one word is
|
|
7
|
+
wider than the whole container (break-word, not anywhere). Before, an option broke inside a word
|
|
8
|
+
as soon as its row was tight (TENSOR HAR-1519: "Monat" read "Mona / t" in the calendar view switcher at 375 px, the
|
|
9
|
+
class HAR-1601 fixed for the ViewMenu alone). */
|
|
10
|
+
.uix-segmented { display: inline-flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
|
|
7
11
|
.uix-segmented__option {
|
|
8
12
|
border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
|
|
9
13
|
padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
|
|
10
|
-
white-space: normal; overflow-wrap:
|
|
14
|
+
min-inline-size: 0; white-space: normal; overflow-wrap: break-word; hyphens: manual;
|
|
11
15
|
transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
|
|
12
16
|
}
|
|
13
17
|
.uix-segmented__option:hover { color: var(--uix-text); }
|
|
@@ -53,18 +53,29 @@
|
|
|
53
53
|
.uix-table__pin svg { width: 15px; height: 15px; }
|
|
54
54
|
.uix-table__pin[data-on] svg { fill: currentColor; }
|
|
55
55
|
|
|
56
|
-
/* frozen first column (opt-in via .uix-table--pinned-col)
|
|
56
|
+
/* frozen first column (opt-in via .uix-table--pinned-col) and frozen trailing actions column
|
|
57
|
+
(opt-in via .uix-table--pinned-actions: the row's quick action — peek, kebab — stays on
|
|
58
|
+
screen while the wrap scrolls sideways). The header cell keeps its sticky top, so it sticks
|
|
59
|
+
on both axes and sits above the pinned body cells that scroll under it. */
|
|
57
60
|
.uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
|
|
58
|
-
.uix-table--pinned-
|
|
59
|
-
.uix-table--pinned-col
|
|
60
|
-
|
|
61
|
+
.uix-table--pinned-actions th:last-child, .uix-table--pinned-actions td:last-child { position: sticky; right: 0; z-index: var(--uix-z-raised); box-shadow: -1px 0 0 var(--uix-border); }
|
|
62
|
+
.uix-table--pinned-col thead th:first-child, .uix-table--pinned-actions thead th:last-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
|
|
63
|
+
/* A pinned cell paints its row's state itself and must be opaque, or the cells scrolling
|
|
64
|
+
under it show through. The dark pinned/selected tints are translucent, so they are layered
|
|
65
|
+
over the surface the row sits on rather than painted bare. */
|
|
66
|
+
.uix-table--pinned-col tbody tr td:first-child, .uix-table--pinned-actions tbody tr td:last-child { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
|
|
67
|
+
.uix-table--pinned-col tbody tr:nth-child(even) td:first-child, .uix-table--pinned-actions tbody tr:nth-child(even) td:last-child { background: var(--uix-row-alt); }
|
|
68
|
+
/* same specificity as the even-row rule above and the state rules below, so the order decides:
|
|
69
|
+
an :nth-child(even) here outranked hover, pinned and selected on every even row */
|
|
61
70
|
.uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
|
|
62
|
-
.uix-table--pinned-
|
|
63
|
-
.uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
|
|
64
|
-
.uix-table--pinned-col tbody tr[data-selected] td:first-child { background: var(--uix-row-selected-bg); }
|
|
65
|
-
.uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
|
|
71
|
+
.uix-table--pinned-actions.uix-table--no-zebra tbody tr td:last-child { background: var(--uix-row); }
|
|
72
|
+
.uix-table--pinned-col tbody tr[data-pinned] td:first-child, .uix-table--pinned-actions tbody tr[data-pinned] td:last-child { background: linear-gradient(var(--uix-row-pinned-bg), var(--uix-row-pinned-bg)) var(--uix-surface); }
|
|
73
|
+
.uix-table--pinned-col tbody tr[data-selected] td:first-child, .uix-table--pinned-actions tbody tr[data-selected] td:last-child { background: linear-gradient(var(--uix-row-selected-bg), var(--uix-row-selected-bg)) var(--uix-surface); }
|
|
74
|
+
.uix-table--pinned-col tbody tr:hover td:first-child, .uix-table--pinned-actions tbody tr:hover td:last-child { background: var(--uix-bg-hover); }
|
|
75
|
+
/* an expanded row's full-width detail cell is both first and last child: keep its own tint */
|
|
76
|
+
.uix-table--pinned-col tbody tr.uix-table__detail > td, .uix-table--pinned-actions tbody tr.uix-table__detail > td { background: var(--uix-bg-subtle); }
|
|
66
77
|
@media (prefers-reduced-motion: reduce) {
|
|
67
|
-
.uix-table tbody tr, .uix-table--pinned-col tbody tr td:first-child { transition: none; }
|
|
78
|
+
.uix-table tbody tr, .uix-table--pinned-col tbody tr td:first-child, .uix-table--pinned-actions tbody tr td:last-child { transition: none; }
|
|
68
79
|
}
|
|
69
80
|
|
|
70
81
|
/* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
|