@lovett/ui 0.0.10 → 0.0.11
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/dist/index.d.ts +666 -13
- package/dist/index.js +1835 -344
- package/dist/index.js.map +1 -1
- package/dist/styles.css +16 -2
- package/dist/theme-v2.css +228 -0
- package/dist/tokens.css +9 -0
- package/package.json +1 -1
- package/src/__tests__/anchor.test.tsx +422 -0
- package/src/__tests__/combobox.test.tsx +677 -0
- package/src/__tests__/dropdown-menu.test.tsx +418 -0
- package/src/__tests__/helpers/geometry.ts +58 -0
- package/src/__tests__/layer-stack.test.tsx +228 -0
- package/src/__tests__/popover.test.tsx +460 -0
- package/src/__tests__/select.test.tsx +543 -0
- package/src/__tests__/tooltip.test.tsx +355 -0
- package/src/calculator-shell-v2.tsx +19 -39
- package/src/combobox.tsx +796 -0
- package/src/dropdown-menu.tsx +142 -152
- package/src/index.ts +106 -0
- package/src/lib/anchor.ts +427 -0
- package/src/lib/focus.ts +32 -0
- package/src/lib/layer-stack.ts +188 -0
- package/src/lib/refs.ts +31 -0
- package/src/metric-card.tsx +57 -22
- package/src/modal.tsx +31 -48
- package/src/popover.tsx +407 -0
- package/src/select.tsx +646 -0
- package/src/stat-row.tsx +108 -70
- package/src/styles.css +16 -2
- package/src/tokens.css +9 -0
- package/src/tooltip.tsx +297 -0
package/dist/styles.css
CHANGED
|
@@ -31,10 +31,24 @@
|
|
|
31
31
|
*
|
|
32
32
|
* Out of scope for Phase 1: .empty, .skel, .field*, .pg-header, .search-bar,
|
|
33
33
|
* .breadcrumbs, .topbar, .checkbox, .radio, .switch, .reasoning-pulse,
|
|
34
|
-
* .chat-md-list, .selection-reply-btn
|
|
35
|
-
*
|
|
34
|
+
* .chat-md-list, .selection-reply-btn. Those land when their consumers
|
|
35
|
+
* (Field, EmptyState, PageHeader, etc.) arrive in later phases.
|
|
36
|
+
* `::selection` landed 2026-09-04 (ADR-145 amendment) — see TEXT SELECTION.
|
|
36
37
|
*/
|
|
37
38
|
|
|
39
|
+
/* ---- TEXT SELECTION ---- */
|
|
40
|
+
/**
|
|
41
|
+
* Explicit, token-backed highlight. Without this, the only `::selection`
|
|
42
|
+
* rule in the bundle came from `@lovett/shell` (`background:
|
|
43
|
+
* var(--selection-bg)`), whose variable is scoped to `.cs-frame` — so at
|
|
44
|
+
* the root it resolved to nothing and highlighted text was invisible.
|
|
45
|
+
* `--selection-bg` is now a public token in tokens.css (light + dark).
|
|
46
|
+
*/
|
|
47
|
+
::selection {
|
|
48
|
+
background: var(--selection-bg);
|
|
49
|
+
color: inherit;
|
|
50
|
+
}
|
|
51
|
+
|
|
38
52
|
/* ---- PANE MASK ---- */
|
|
39
53
|
/**
|
|
40
54
|
* Opaque fill matching the MainLayout content pane, for a sticky element that
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @lovett/ui — v2 theme, SCOPED.
|
|
3
|
+
*
|
|
4
|
+
* GENERATED. Regenerate with:
|
|
5
|
+
* python3 scripts/figma/emit-theme.py <corpus> --out packages/ui/src/theme-v2.css
|
|
6
|
+
*
|
|
7
|
+
* Opt in by putting `data-ds="v2"` on any element. Everything inside it
|
|
8
|
+
* renders on the v2 palette, including existing @lovett/ui primitives —
|
|
9
|
+
* they read the same token names, which now resolve to different values.
|
|
10
|
+
* Nothing outside the scope changes.
|
|
11
|
+
*
|
|
12
|
+
* Derived from a 13-kit Figma corpus; see docs/design-system/figma-corpus/.
|
|
13
|
+
* The direction is Vertex Lab: pure-white trays, near-neutral greys, a
|
|
14
|
+
* navy-tinted ink used as a SURFACE and not only as text.
|
|
15
|
+
*
|
|
16
|
+
* The semantic reassignment is the load-bearing change:
|
|
17
|
+
* --accent red brand identity and the primary action, nothing else
|
|
18
|
+
* --success green save, publish, approve, live
|
|
19
|
+
* --destructive AMBER destructive. No longer red.
|
|
20
|
+
* --warning gold caution
|
|
21
|
+
* --info violet
|
|
22
|
+
*
|
|
23
|
+
* Consequence worth knowing before adopting: amber is a weaker danger
|
|
24
|
+
* signal than red, so destructive actions must carry an icon and an
|
|
25
|
+
* explicit verb. Colour alone no longer does that work.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
[data-ds="v2"] {
|
|
29
|
+
/* ── Surfaces ─────────────────────────────────────────────── */
|
|
30
|
+
/* The frame/tray step is 2.1 pts — ratified as `medium`. Both being
|
|
31
|
+
white removes the distinction the card pattern is built on. */
|
|
32
|
+
--page-bg: 240 241 242;
|
|
33
|
+
--background: 240 241 242;
|
|
34
|
+
--main-content-bg: 240 241 242;
|
|
35
|
+
--bg-surface: 248 248 249;
|
|
36
|
+
--surface-frame: 248 248 249;
|
|
37
|
+
--card-frame-bg: 248 248 249;
|
|
38
|
+
--bg-card: 255 255 255;
|
|
39
|
+
--card: 255 255 255;
|
|
40
|
+
--tray-bg: 255 255 255;
|
|
41
|
+
--bg-elevated: 255 255 255;
|
|
42
|
+
--surface-raised: 255 255 255;
|
|
43
|
+
--popover: 255 255 255;
|
|
44
|
+
--bg-input: 255 255 255;
|
|
45
|
+
--bg-card-hover: 250 251 252;
|
|
46
|
+
--bg-input-hover: 250 251 252;
|
|
47
|
+
--muted: 246 247 248;
|
|
48
|
+
--canvas-placement-bg: 246 247 248;
|
|
49
|
+
|
|
50
|
+
/* ── Ink ──────────────────────────────────────────────────── */
|
|
51
|
+
/* Navy-tinted, not black. Vertex uses #1c274c 6,522 times — far too
|
|
52
|
+
many for text: it is a panel colour, so it gets a full ramp. */
|
|
53
|
+
--ink-15: 253 253 253;
|
|
54
|
+
--ink-25: 250 251 254;
|
|
55
|
+
--ink-30: 247 248 252;
|
|
56
|
+
--ink-40: 241 245 253;
|
|
57
|
+
--ink-60: 235 241 254;
|
|
58
|
+
--ink-50: 243 247 255;
|
|
59
|
+
--ink-100: 229 237 254;
|
|
60
|
+
--ink-200: 207 217 238;
|
|
61
|
+
--ink-300: 182 193 217;
|
|
62
|
+
--ink-400: 150 163 191;
|
|
63
|
+
--ink-500: 119 134 165;
|
|
64
|
+
--ink-600: 93 108 140;
|
|
65
|
+
--ink-700: 70 82 109;
|
|
66
|
+
--ink-800: 48 58 80;
|
|
67
|
+
--ink-900: 27 35 51;
|
|
68
|
+
--ink-950: 11 16 28;
|
|
69
|
+
--foreground: 11 16 28;
|
|
70
|
+
--card-foreground: 11 16 28;
|
|
71
|
+
--popover-foreground: 11 16 28;
|
|
72
|
+
--text-secondary: 93 108 140;
|
|
73
|
+
--muted-foreground: 93 108 140;
|
|
74
|
+
--text-tertiary: 119 134 165;
|
|
75
|
+
--text-muted: 150 163 191;
|
|
76
|
+
--secondary: 246 247 248;
|
|
77
|
+
--secondary-foreground: 11 16 28;
|
|
78
|
+
|
|
79
|
+
/* ── Borders ──────────────────────────────────────────────── */
|
|
80
|
+
/* Structure only. Depth is shadow — a hard hairline on a depth
|
|
81
|
+
surface reads as a form field. Inputs keep theirs deliberately. */
|
|
82
|
+
--border: 0 0 0 / 0.05;
|
|
83
|
+
--border-strong: 0 0 0 / 0.10;
|
|
84
|
+
--border-card: 0 0 0 / 0.06;
|
|
85
|
+
--border-input: 0 0 0 / 0.12;
|
|
86
|
+
--main-content-border: 0 0 0 / 0.06;
|
|
87
|
+
--input: 246 247 248;
|
|
88
|
+
|
|
89
|
+
/* ── Brand ────────────────────────────────────────────────── */
|
|
90
|
+
/* --accent is the AA-safe action red (4.77:1 with white). The bright
|
|
91
|
+
step is 4.01:1 and cannot carry a white label, so it is exposed
|
|
92
|
+
separately for accents, marks, charts and active fills. */
|
|
93
|
+
--accent: 221 40 34;
|
|
94
|
+
--accent-bright: 228 70 58;
|
|
95
|
+
--accent-hover: 201 17 17;
|
|
96
|
+
--accent-muted: 228 70 58 / 0.10;
|
|
97
|
+
--accent-subtle: 228 70 58 / 0.05;
|
|
98
|
+
--accent-glow: 228 70 58 / 0.22;
|
|
99
|
+
--primary: 221 40 34;
|
|
100
|
+
--primary-hover: 201 17 17;
|
|
101
|
+
--primary-foreground: 255 255 255;
|
|
102
|
+
--ring: 221 40 34;
|
|
103
|
+
--brand-15: 253 253 253;
|
|
104
|
+
--brand-25: 252 251 250;
|
|
105
|
+
--brand-30: 252 247 246;
|
|
106
|
+
--brand-40: 255 242 240;
|
|
107
|
+
--brand-60: 254 237 234;
|
|
108
|
+
--brand-50: 255 244 242;
|
|
109
|
+
--brand-100: 253 231 228;
|
|
110
|
+
--brand-200: 253 204 196;
|
|
111
|
+
--brand-300: 254 166 154;
|
|
112
|
+
--brand-400: 251 114 99;
|
|
113
|
+
--brand-500: 228 70 58;
|
|
114
|
+
--brand-600: 201 17 17;
|
|
115
|
+
--brand-700: 157 8 9;
|
|
116
|
+
--brand-800: 114 4 4;
|
|
117
|
+
--brand-900: 72 2 2;
|
|
118
|
+
--brand-950: 41 0 0;
|
|
119
|
+
|
|
120
|
+
/* ── Semantic — REASSIGNED ────────────────────────────────── */
|
|
121
|
+
--success: 13 128 75;
|
|
122
|
+
--success-bg: 6 160 93 / 0.12;
|
|
123
|
+
--warning: 100 80 1;
|
|
124
|
+
--warning-bg: 161 131 18 / 0.14;
|
|
125
|
+
/* Amber. The collision between a red brand and a red danger state
|
|
126
|
+
cannot be solved by moving the hue — every credible danger red
|
|
127
|
+
sits within a few degrees of the brand. Moving the MEANING can. */
|
|
128
|
+
--destructive: 115 71 9;
|
|
129
|
+
--destructive-bg: 187 116 2 / 0.14;
|
|
130
|
+
--destructive-foreground: 255 255 255;
|
|
131
|
+
--info: 130 62 210;
|
|
132
|
+
--info-bg: 155 97 235 / 0.12;
|
|
133
|
+
|
|
134
|
+
/* ── Categorical series ───────────────────────────────────── */
|
|
135
|
+
/* Constant lightness so no series outranks another; chroma tuned per
|
|
136
|
+
hue so each is equally vivid rather than equally saturated. */
|
|
137
|
+
--series-1: 226 74 62;
|
|
138
|
+
--series-2: 153 100 229;
|
|
139
|
+
--series-3: 9 160 93;
|
|
140
|
+
--series-4: 186 116 4;
|
|
141
|
+
--series-5: 2 137 234;
|
|
142
|
+
--series-6: 14 154 148;
|
|
143
|
+
--series-7: 212 73 150;
|
|
144
|
+
--series-8: 113 149 3;
|
|
145
|
+
|
|
146
|
+
/* ── Elevation ────────────────────────────────────────────── */
|
|
147
|
+
--shadow-sm: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
|
|
148
|
+
--shadow-md: 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 4px -2px oklch(0 0 0 / 0.08), 0 4px 10px -2px oklch(0 0 0 / 0.06);
|
|
149
|
+
--shadow-lg: 0 0 0 1px oklch(0 0 0 / 0.06), 0 6px 16px -4px oklch(0 0 0 / 0.12);
|
|
150
|
+
--shadow-xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 12px 32px -8px oklch(0 0 0 / 0.18);
|
|
151
|
+
--shadow-2xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 24px 56px -12px oklch(0 0 0 / 0.24);
|
|
152
|
+
--shadow-glow: 0 0 20px oklch(0 0 0 / 0);
|
|
153
|
+
--card-shadow-rest: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
|
|
154
|
+
--card-shadow-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 6px 14px -2px oklch(0 0 0 / 0.08), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
|
|
155
|
+
--inset-highlight: 255 255 255 / 0.9;
|
|
156
|
+
--modal-overlay: 0 0 0 / 0.32;
|
|
157
|
+
/* Solid, matching the base theme — a 3px translucent halo measures ~1.4:1
|
|
158
|
+
against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
|
|
159
|
+
indicator. See the note on --ring-focus in tokens.css. */
|
|
160
|
+
--ring-focus: 0 0 0 2px rgb(var(--accent));
|
|
161
|
+
--ring-error: 0 0 0 2px rgb(var(--destructive));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/*
|
|
165
|
+
* Dark. Derived by SELECTING different steps from the same OKLCH ramps,
|
|
166
|
+
* not by inverting the light values — mechanical inversion is what
|
|
167
|
+
* produces muddy dark modes. The ink ramp supplies the surfaces here,
|
|
168
|
+
* which is the same navy that supplies the text in light.
|
|
169
|
+
*/
|
|
170
|
+
[data-ds="v2"][data-theme="dark"] {
|
|
171
|
+
--page-bg: 11 16 28;
|
|
172
|
+
--background: 11 16 28;
|
|
173
|
+
--main-content-bg: 11 16 28;
|
|
174
|
+
--bg-surface: 27 35 51;
|
|
175
|
+
--surface-frame: 27 35 51;
|
|
176
|
+
--card-frame-bg: 27 35 51;
|
|
177
|
+
--bg-card: 48 58 80;
|
|
178
|
+
--card: 48 58 80;
|
|
179
|
+
--tray-bg: 48 58 80;
|
|
180
|
+
--bg-elevated: 70 82 109;
|
|
181
|
+
--surface-raised: 70 82 109;
|
|
182
|
+
--popover: 70 82 109;
|
|
183
|
+
--bg-input: 27 35 51;
|
|
184
|
+
--bg-card-hover: 70 82 109;
|
|
185
|
+
--bg-input-hover: 48 58 80;
|
|
186
|
+
--muted: 48 58 80;
|
|
187
|
+
--canvas-placement-bg: 27 35 51;
|
|
188
|
+
--foreground: 250 251 252;
|
|
189
|
+
--card-foreground: 250 251 252;
|
|
190
|
+
--popover-foreground: 250 251 252;
|
|
191
|
+
--text-secondary: 192 193 195;
|
|
192
|
+
--muted-foreground: 192 193 195;
|
|
193
|
+
--text-tertiary: 162 163 165;
|
|
194
|
+
--text-muted: 133 134 136;
|
|
195
|
+
--secondary: 48 58 80;
|
|
196
|
+
--secondary-foreground: 250 251 252;
|
|
197
|
+
--border: 255 255 255 / 0.08;
|
|
198
|
+
--border-strong: 255 255 255 / 0.14;
|
|
199
|
+
--border-card: 255 255 255 / 0.08;
|
|
200
|
+
--border-input: 255 255 255 / 0.14;
|
|
201
|
+
--main-content-border: 255 255 255 / 0.08;
|
|
202
|
+
/* Accents brighten in dark — the light-mode steps go muddy on a dark
|
|
203
|
+
surface because the surrounding lightness has moved. */
|
|
204
|
+
--accent: 228 70 58;
|
|
205
|
+
--accent-bright: 251 114 99;
|
|
206
|
+
--accent-hover: 251 114 99;
|
|
207
|
+
--primary: 228 70 58;
|
|
208
|
+
--primary-hover: 251 114 99;
|
|
209
|
+
--success: 80 188 126;
|
|
210
|
+
--warning: 190 160 64;
|
|
211
|
+
--destructive: 218 145 55;
|
|
212
|
+
--info: 181 134 254;
|
|
213
|
+
--success-bg: 6 160 93 / 0.16;
|
|
214
|
+
--warning-bg: 161 131 18 / 0.16;
|
|
215
|
+
--destructive-bg: 187 116 2 / 0.16;
|
|
216
|
+
--info-bg: 155 97 235 / 0.16;
|
|
217
|
+
/* Layered depth shadows are invisible on dark; a single ring reads. */
|
|
218
|
+
--shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.08);
|
|
219
|
+
--shadow-md: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.4);
|
|
220
|
+
--shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.5);
|
|
221
|
+
--shadow-xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 16px 40px oklch(0 0 0 / 0.55);
|
|
222
|
+
--shadow-2xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 24px 60px oklch(0 0 0 / 0.6);
|
|
223
|
+
--card-shadow-rest: 0 0 0 1px oklch(1 0 0 / 0.08);
|
|
224
|
+
--card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
|
|
225
|
+
--inset-highlight: 255 255 255 / 0.05;
|
|
226
|
+
--modal-overlay: 0 0 0 / 0.7;
|
|
227
|
+
--ring-focus: 0 0 0 2px rgb(var(--accent));
|
|
228
|
+
}
|
package/dist/tokens.css
CHANGED
|
@@ -95,6 +95,14 @@
|
|
|
95
95
|
--accent-muted: 207 14 15 / 0.12;
|
|
96
96
|
--accent-subtle: 207 14 15 / 0.06;
|
|
97
97
|
--accent-glow: 207 14 15 / 0.25;
|
|
98
|
+
/* Text-selection highlight. PUBLIC, and a full colour (not a triple) so
|
|
99
|
+
`::selection { background: var(--selection-bg) }` is valid at :root.
|
|
100
|
+
`@lovett/shell` ships that exact global rule while defining the
|
|
101
|
+
variable only inside `.cs-frame`; unset at the root, `background`
|
|
102
|
+
computed to transparent and every selection in the app was invisible
|
|
103
|
+
(ADR-145 amendment, 2026-09-04). Neutral blue like a native selection,
|
|
104
|
+
not the accent — the accent earns impact from scarcity. */
|
|
105
|
+
--selection-bg: rgb(var(--info) / 0.34);
|
|
98
106
|
/* Ink ON an accent fill. PUBLIC, and theme-independent because --accent is:
|
|
99
107
|
the brand red does not change between light and dark, so its foreground
|
|
100
108
|
must not either. Measures 5.64:1 on --accent.
|
|
@@ -460,6 +468,7 @@
|
|
|
460
468
|
[data-theme="light"], [data-theme="combo"] {
|
|
461
469
|
/* Brand accent — base stays, hover darkens, glow softens */
|
|
462
470
|
--accent-hover: 178 8 9;
|
|
471
|
+
--selection-bg: rgb(var(--info) / 0.24);
|
|
463
472
|
/* Brand red passes on a light card (5.64:1) — see the :root note. */
|
|
464
473
|
--accent-ink: var(--accent);
|
|
465
474
|
/* Solved against the DARKEST tint these inks land on, not the lightest.
|