@tensor_1/tokens 2.42.0 → 2.43.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.43.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": [
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/* uix org chart — reporting lines as a top-down chart of person cards (HAR-1807).
|
|
2
|
+
A WAI-ARIA tree (role=tree / treeitem / group) like .uix-tree: the ARIA state lives on the
|
|
3
|
+
<li class="uix-org-chart__item">, so selection, focus and expansion all key off the item.
|
|
4
|
+
|
|
5
|
+
Two layouts from one markup, picked by the chart's OWN width (a container query, so a side
|
|
6
|
+
panel narrows it as well as a phone does):
|
|
7
|
+
- chart (48rem and wider): managers above their reports, joined by connector lines drawn
|
|
8
|
+
with pseudo-elements; a row whose people have no reports of their own is stacked in a
|
|
9
|
+
column with a rail on its left, so a team of eight does not need eight card widths;
|
|
10
|
+
- list (narrower): an indented vertical tree with guide lines. The zoom toolbar steps aside.
|
|
11
|
+
The component reads --org-chart-layout to pick the matching keyboard model. */
|
|
12
|
+
@layer uix.components {
|
|
13
|
+
.uix-org-chart {
|
|
14
|
+
--org-chart-card-width: 15rem;
|
|
15
|
+
--org-chart-rise: var(--uix-space-7); /* vertical room between a card and its reports' row */
|
|
16
|
+
--org-chart-spread: var(--uix-space-3); /* room between neighbouring subtrees */
|
|
17
|
+
--org-chart-indent: var(--uix-space-6); /* stacked rows and the list layout */
|
|
18
|
+
--org-chart-tick: calc(var(--uix-space-3) + 22px); /* card padding + half the 44px avatar: where a tick meets a card */
|
|
19
|
+
/* The lines carry the reporting relationship: 3:1 against the frame in both themes (WCAG 1.4.11). */
|
|
20
|
+
--org-chart-line: var(--uix-neutral-solid);
|
|
21
|
+
container: uix-org-chart / inline-size;
|
|
22
|
+
display: flex; flex-direction: column; gap: var(--uix-space-2); min-width: 0;
|
|
23
|
+
}
|
|
24
|
+
.uix-org-chart__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--uix-space-1); }
|
|
25
|
+
.uix-org-chart__level { min-width: 4.5rem; font-variant-numeric: tabular-nums; }
|
|
26
|
+
.uix-org-chart__viewport {
|
|
27
|
+
--org-chart-layout: chart;
|
|
28
|
+
position: relative; overflow: auto; overscroll-behavior: contain;
|
|
29
|
+
max-height: var(--org-chart-max-height, 70vh);
|
|
30
|
+
padding: var(--uix-space-5);
|
|
31
|
+
border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
|
|
32
|
+
background: var(--uix-bg-subtle);
|
|
33
|
+
cursor: grab;
|
|
34
|
+
}
|
|
35
|
+
.uix-org-chart__viewport[data-panning] { cursor: grabbing; user-select: none; }
|
|
36
|
+
/* Centres a chart narrower than the viewport; a wider one scrolls from its left edge. */
|
|
37
|
+
.uix-org-chart__canvas { display: flex; justify-content: center; width: max-content; min-width: 100%; }
|
|
38
|
+
.uix-org-chart__tree { zoom: var(--org-chart-zoom, 1); }
|
|
39
|
+
.uix-org-chart__tree, .uix-org-chart__group { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; }
|
|
40
|
+
.uix-org-chart__tree { gap: var(--uix-space-6); }
|
|
41
|
+
|
|
42
|
+
.uix-org-chart__item { position: relative; display: flex; flex-direction: column; align-items: center; outline: none; padding: 0 var(--org-chart-spread); cursor: default; }
|
|
43
|
+
.uix-org-chart__tree > .uix-org-chart__item { padding: 0; }
|
|
44
|
+
|
|
45
|
+
/* ── connectors (chart layout) ──
|
|
46
|
+
The group draws the stem down from its manager; each report draws its half of the
|
|
47
|
+
horizontal rule plus the drop to its own card. The outer halves of the first and last
|
|
48
|
+
report stay blank, and an only report keeps just the drop. */
|
|
49
|
+
.uix-org-chart__group { position: relative; padding-top: calc(var(--org-chart-rise) / 2); }
|
|
50
|
+
.uix-org-chart__group::before {
|
|
51
|
+
content: ""; position: absolute; top: 0; left: 50%; height: calc(var(--org-chart-rise) / 2);
|
|
52
|
+
border-left: 1px solid var(--org-chart-line);
|
|
53
|
+
}
|
|
54
|
+
.uix-org-chart__group > .uix-org-chart__item { padding-top: calc(var(--org-chart-rise) / 2); }
|
|
55
|
+
.uix-org-chart__group > .uix-org-chart__item::before,
|
|
56
|
+
.uix-org-chart__group > .uix-org-chart__item::after {
|
|
57
|
+
content: ""; position: absolute; top: 0; width: 50%; height: calc(var(--org-chart-rise) / 2);
|
|
58
|
+
border-top: 1px solid var(--org-chart-line);
|
|
59
|
+
}
|
|
60
|
+
.uix-org-chart__group > .uix-org-chart__item::before { right: 50%; }
|
|
61
|
+
.uix-org-chart__group > .uix-org-chart__item::after { left: 50%; border-left: 1px solid var(--org-chart-line); }
|
|
62
|
+
.uix-org-chart__group > .uix-org-chart__item:first-child::before,
|
|
63
|
+
.uix-org-chart__group > .uix-org-chart__item:last-child::after { border-top: 0; }
|
|
64
|
+
|
|
65
|
+
/* A row of people without reports, stacked: the stem leaves the manager's card near its left
|
|
66
|
+
edge, a rail runs down beside the column, and a tick meets each card at its avatar. */
|
|
67
|
+
.uix-org-chart__group[data-stack] { flex-direction: column; align-items: stretch; width: var(--org-chart-card-width); }
|
|
68
|
+
.uix-org-chart__group[data-stack]::before { left: calc(var(--org-chart-indent) / 2); }
|
|
69
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item { padding: var(--uix-space-2) 0 0 var(--org-chart-indent); align-items: stretch; }
|
|
70
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child { padding-top: 0; }
|
|
71
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item::before {
|
|
72
|
+
right: auto; left: calc(var(--org-chart-indent) / 2); width: 0; height: auto; bottom: 0;
|
|
73
|
+
border-top: 0; border-left: 1px solid var(--org-chart-line);
|
|
74
|
+
}
|
|
75
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:last-child::before { bottom: auto; height: calc(var(--uix-space-2) + var(--org-chart-tick)); }
|
|
76
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child:last-child::before { height: var(--org-chart-tick); }
|
|
77
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item::after {
|
|
78
|
+
left: calc(var(--org-chart-indent) / 2); width: calc(var(--org-chart-indent) / 2); height: 0;
|
|
79
|
+
top: calc(var(--uix-space-2) + var(--org-chart-tick)); border-left: 0; border-top: 1px solid var(--org-chart-line);
|
|
80
|
+
}
|
|
81
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child::after { top: var(--org-chart-tick); }
|
|
82
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:last-child::after { border-top: 1px solid var(--org-chart-line); }
|
|
83
|
+
.uix-org-chart__group[data-stack] .uix-org-chart__node { width: 100%; }
|
|
84
|
+
|
|
85
|
+
/* ── the person card ── */
|
|
86
|
+
.uix-org-chart__node {
|
|
87
|
+
position: relative; box-sizing: border-box; width: var(--org-chart-card-width);
|
|
88
|
+
display: flex; align-items: flex-start; gap: var(--uix-space-3);
|
|
89
|
+
padding: var(--uix-space-3) var(--uix-space-3) var(--uix-space-4);
|
|
90
|
+
border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
|
|
91
|
+
background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm);
|
|
92
|
+
text-align: left; cursor: pointer;
|
|
93
|
+
transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
|
|
94
|
+
}
|
|
95
|
+
.uix-org-chart__item > .uix-org-chart__node:hover { border-color: var(--uix-border-strong); }
|
|
96
|
+
.uix-org-chart__item[aria-selected="true"] > .uix-org-chart__node {
|
|
97
|
+
border-color: var(--uix-accent); box-shadow: 0 0 0 1px var(--uix-accent);
|
|
98
|
+
background: color-mix(in srgb, var(--uix-accent) 7%, var(--uix-surface));
|
|
99
|
+
}
|
|
100
|
+
/* The ring is drawn at 2 px on screen whatever the zoom. */
|
|
101
|
+
.uix-org-chart__item:focus-visible > .uix-org-chart__node,
|
|
102
|
+
.uix-org-chart__item:focus-visible > .uix-org-chart__status {
|
|
103
|
+
outline: calc(2px / var(--org-chart-zoom, 1)) solid var(--uix-ring); outline-offset: calc(2px / var(--org-chart-zoom, 1));
|
|
104
|
+
}
|
|
105
|
+
.uix-org-chart__node .uix-avatar { margin-top: 0; }
|
|
106
|
+
.uix-org-chart__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--uix-space-1); }
|
|
107
|
+
.uix-org-chart__desc { display: flex; flex-direction: column; gap: var(--uix-space-1); min-width: 0; }
|
|
108
|
+
.uix-org-chart__name, .uix-org-chart__title {
|
|
109
|
+
overflow: hidden; overflow-wrap: anywhere;
|
|
110
|
+
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
|
|
111
|
+
}
|
|
112
|
+
.uix-org-chart__name { font-size: var(--uix-text-body); line-height: var(--uix-leading-body); font-weight: 600; }
|
|
113
|
+
.uix-org-chart__title { font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); color: var(--uix-text-muted); }
|
|
114
|
+
.uix-org-chart__meta { display: flex; flex-direction: column; font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta); color: var(--uix-text-hushed); min-width: 0; }
|
|
115
|
+
.uix-org-chart__meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
116
|
+
.uix-org-chart__badge {
|
|
117
|
+
align-self: flex-start; padding: 0 var(--uix-space-2); border-radius: var(--uix-radius-pill);
|
|
118
|
+
font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow); font-weight: 600;
|
|
119
|
+
background: color-mix(in srgb, var(--uix-accent) 14%, transparent); color: var(--uix-accent-text);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* The report count, which is also the expand control: it sits on the card's bottom edge,
|
|
123
|
+
where the connector to the reports leaves. */
|
|
124
|
+
.uix-org-chart__toggle {
|
|
125
|
+
position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
|
|
126
|
+
display: inline-flex; align-items: center; justify-content: center; gap: var(--uix-space-1); min-height: 24px; min-width: 24px;
|
|
127
|
+
padding: 0 var(--uix-space-2); border: 1px solid var(--org-chart-line); border-radius: var(--uix-radius-pill);
|
|
128
|
+
background: var(--uix-surface); color: var(--uix-text-muted); font: inherit; font-size: var(--uix-text-meta);
|
|
129
|
+
font-variant-numeric: tabular-nums; cursor: pointer; z-index: var(--uix-z-raised);
|
|
130
|
+
}
|
|
131
|
+
.uix-org-chart__toggle:hover { color: var(--uix-text); border-color: var(--uix-accent); }
|
|
132
|
+
.uix-org-chart__toggle svg { width: 12px; height: 12px; transition: transform var(--uix-dur) var(--uix-ease-out); }
|
|
133
|
+
.uix-org-chart__item[aria-expanded="false"] > .uix-org-chart__node .uix-org-chart__toggle svg { transform: rotate(-90deg); }
|
|
134
|
+
|
|
135
|
+
/* Reports that are loading, or failed to load: one status row in the reports' place. */
|
|
136
|
+
.uix-org-chart__status {
|
|
137
|
+
display: inline-flex; align-items: center; gap: var(--uix-space-2); white-space: nowrap;
|
|
138
|
+
padding: var(--uix-space-1) var(--uix-space-3); border: 1px dashed var(--org-chart-line); border-radius: var(--uix-radius-pill);
|
|
139
|
+
background: var(--uix-surface); color: var(--uix-text-muted); font-size: var(--uix-text-meta);
|
|
140
|
+
}
|
|
141
|
+
.uix-org-chart__status--error { color: var(--uix-danger-text); border-color: var(--uix-danger-border); cursor: pointer; }
|
|
142
|
+
.uix-org-chart__retry { color: var(--uix-link); text-decoration: underline; text-underline-offset: .15em; }
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ── list layout: below 48rem of chart width ── */
|
|
146
|
+
@layer uix.components {
|
|
147
|
+
@container uix-org-chart (max-width: 47.99rem) {
|
|
148
|
+
.uix-org-chart__toolbar { display: none; }
|
|
149
|
+
.uix-org-chart__viewport { --org-chart-layout: list; max-height: none; overflow: visible; padding: 0; border: 0; background: none; cursor: auto; }
|
|
150
|
+
.uix-org-chart__canvas { display: block; width: auto; min-width: 0; }
|
|
151
|
+
.uix-org-chart__tree { --org-chart-zoom: 1; zoom: 1; }
|
|
152
|
+
/* Past the fourth level the indent stops growing, so deep names keep their room at 320 px. */
|
|
153
|
+
.uix-org-chart__group .uix-org-chart__group .uix-org-chart__group .uix-org-chart__group { --org-chart-indent: var(--uix-space-3); }
|
|
154
|
+
.uix-org-chart__tree, .uix-org-chart__group, .uix-org-chart__group[data-stack] { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; }
|
|
155
|
+
.uix-org-chart__item, .uix-org-chart__tree > .uix-org-chart__item { align-items: stretch; padding: 0; }
|
|
156
|
+
.uix-org-chart__tree > .uix-org-chart__item + .uix-org-chart__item { margin-top: var(--uix-space-2); }
|
|
157
|
+
.uix-org-chart__node, .uix-org-chart__group[data-stack] .uix-org-chart__node { width: 100%; padding-bottom: var(--uix-space-3); }
|
|
158
|
+
.uix-org-chart__group, .uix-org-chart__group[data-stack] { padding: 0 0 0 var(--org-chart-indent); }
|
|
159
|
+
.uix-org-chart__group::before { display: none; }
|
|
160
|
+
/* Guide lines: a rail per report from its top (or the manager above) to its tick. */
|
|
161
|
+
.uix-org-chart__group > .uix-org-chart__item,
|
|
162
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item,
|
|
163
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child { padding: var(--uix-space-2) 0 0; }
|
|
164
|
+
.uix-org-chart__group > .uix-org-chart__item::before,
|
|
165
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item::before {
|
|
166
|
+
right: auto; left: calc(var(--org-chart-indent) / -2); top: 0; bottom: 0; width: 0; height: auto;
|
|
167
|
+
border-top: 0; border-left: 1px solid var(--org-chart-line);
|
|
168
|
+
}
|
|
169
|
+
.uix-org-chart__group > .uix-org-chart__item:last-child::before,
|
|
170
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:last-child::before,
|
|
171
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child:last-child::before { bottom: auto; height: calc(var(--uix-space-2) + var(--org-chart-tick)); }
|
|
172
|
+
.uix-org-chart__group > .uix-org-chart__item::after,
|
|
173
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item::after,
|
|
174
|
+
.uix-org-chart__group[data-stack] > .uix-org-chart__item:first-child::after {
|
|
175
|
+
left: calc(var(--org-chart-indent) / -2); width: calc(var(--org-chart-indent) / 2); height: 0;
|
|
176
|
+
top: calc(var(--uix-space-2) + var(--org-chart-tick)); border-left: 0; border-top: 1px solid var(--org-chart-line);
|
|
177
|
+
}
|
|
178
|
+
.uix-org-chart__group > .uix-org-chart__item:last-child::after { border-top: 1px solid var(--org-chart-line); }
|
|
179
|
+
/* The report count moves to the end of the row; on a touch screen it is a full-size target. */
|
|
180
|
+
.uix-org-chart__toggle { position: static; transform: none; align-self: center; flex: none; }
|
|
181
|
+
.uix-org-chart__status { align-self: flex-start; }
|
|
182
|
+
/* A loading or error row is shorter than a card: its tick meets the row's middle. */
|
|
183
|
+
.uix-org-chart__group > .uix-org-chart__item--status::after { top: calc(var(--uix-space-2) + var(--uix-space-3)); }
|
|
184
|
+
.uix-org-chart__group > .uix-org-chart__item--status:last-child::before { height: calc(var(--uix-space-2) + var(--uix-space-3)); }
|
|
185
|
+
}
|
|
186
|
+
@container uix-org-chart (max-width: 47.99rem) {
|
|
187
|
+
@media (pointer: coarse) {
|
|
188
|
+
.uix-org-chart__toggle { min-height: 44px; min-width: 44px; }
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|