@wpic/ui 0.8.8 → 0.9.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/COMPONENTS.md +48 -0
  3. package/dist/components/WPopover.vue.d.ts +2 -0
  4. package/dist/legacy.css +154 -0
  5. package/dist/wpic-ui.cjs +151 -151
  6. package/dist/wpic-ui.css +108 -108
  7. package/dist/wpic-ui.js +4722 -4717
  8. package/package.json +9 -3
  9. package/src/style.css +106 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wpic/ui",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "type": "module",
5
5
  "description": "WPIC shared Vue 3 component library",
6
6
  "publishConfig": {
@@ -23,14 +23,18 @@
23
23
  "require": "./dist/wpic-ui.cjs"
24
24
  },
25
25
  "./style.css": "./dist/wpic-ui.css",
26
- "./dist/wpic-ui.css": "./dist/wpic-ui.css"
26
+ "./dist/wpic-ui.css": "./dist/wpic-ui.css",
27
+ "./legacy.css": "./dist/legacy.css"
27
28
  },
28
29
  "scripts": {
29
30
  "build": "vue-tsc --noEmit && vite build",
30
31
  "dev": "vite build --watch",
31
32
  "test:ui": "vite --config test-ui/vite.config.ts",
32
33
  "postbuild": "node scripts/postbuild.js && node scripts/verify-package.js",
33
- "test:semantic": "playwright test"
34
+ "test:semantic": "playwright test",
35
+ "test:production": "vite build --config test-ui/vite.config.ts && WPIC_TEST_MODE=preview playwright test",
36
+ "test:consumers": "playwright test --config playwright.consumers.config.ts",
37
+ "prepack": "npm run build"
34
38
  },
35
39
  "peerDependencies": {
36
40
  "@floating-ui/vue": ">=1",
@@ -45,6 +49,8 @@
45
49
  "@vitejs/plugin-vue": "^6.0.0",
46
50
  "lucide-vue-next": "^0.577.0",
47
51
  "pinia": "^3.0.4",
52
+ "postcss": "^8.5.28",
53
+ "postcss-selector-parser": "^7.1.6",
48
54
  "tailwindcss": "^4.2.1",
49
55
  "typescript": "^5.0.0",
50
56
  "vite": "^7.3.1",
package/src/style.css CHANGED
@@ -11,55 +11,55 @@
11
11
 
12
12
  :root {
13
13
  /* Surfaces */
14
- --bg-main: #fafafa;
15
- --bg-card: #ffffff;
16
- --bg-input: #f4f4f5;
14
+ --wpic-legacy-bg-main: #fafafa;
15
+ --wpic-legacy-bg-card: #ffffff;
16
+ --wpic-legacy-bg-input: #f4f4f5;
17
17
 
18
18
  /* Borders */
19
- --border-subtle: rgba(0, 0, 0, 0.05);
20
- --border-strong: #e4e4e7;
21
- --border-hover: #d4d4d8;
19
+ --wpic-legacy-border-subtle: rgba(0, 0, 0, 0.05);
20
+ --wpic-legacy-border-strong: #e4e4e7;
21
+ --wpic-legacy-border-hover: #d4d4d8;
22
22
 
23
23
  /* Text */
24
- --text-main: #18181b;
25
- --text-muted: #52525b;
26
- --text-dim: #a1a1aa;
24
+ --wpic-legacy-text-main: #18181b;
25
+ --wpic-legacy-text-muted: #52525b;
26
+ --wpic-legacy-text-dim: #a1a1aa;
27
27
 
28
28
  /* Accents */
29
- --color-indigo-neon: #6366f1;
30
- --color-rose-neon: #f43f5e;
31
- --color-teal-neon: #10b981;
32
- --color-wpic-green: #85C531;
29
+ --wpic-legacy-color-indigo-neon: #6366f1;
30
+ --wpic-legacy-color-rose-neon: #f43f5e;
31
+ --wpic-legacy-color-teal-neon: #10b981;
32
+ --wpic-legacy-color-wpic-green: #85C531;
33
33
  }
34
34
 
35
35
  .dark {
36
- --bg-main: #09090b;
37
- --bg-card: #0c0c0e;
38
- --bg-input: #111113;
36
+ --wpic-legacy-bg-main: #09090b;
37
+ --wpic-legacy-bg-card: #0c0c0e;
38
+ --wpic-legacy-bg-input: #111113;
39
39
 
40
- --border-subtle: rgba(255, 255, 255, 0.04);
41
- --border-strong: #1d1d20;
42
- --border-hover: #27272a;
40
+ --wpic-legacy-border-subtle: rgba(255, 255, 255, 0.04);
41
+ --wpic-legacy-border-strong: #1d1d20;
42
+ --wpic-legacy-border-hover: #27272a;
43
43
 
44
- --text-main: #f4f4f5;
45
- --text-muted: #a1a1aa;
46
- --text-dim: #52525b;
44
+ --wpic-legacy-text-main: #f4f4f5;
45
+ --wpic-legacy-text-muted: #a1a1aa;
46
+ --wpic-legacy-text-dim: #52525b;
47
47
  }
48
48
 
49
49
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
50
- .bg-main { background-color: var(--bg-main); }
51
- .bg-card { background-color: var(--bg-card); }
52
- .bg-input { background-color: var(--bg-input); }
50
+ .wpic-legacy-bg-main { background-color: var(--wpic-legacy-bg-main); }
51
+ .wpic-legacy-bg-card { background-color: var(--wpic-legacy-bg-card); }
52
+ .wpic-legacy-bg-input { background-color: var(--wpic-legacy-bg-input); }
53
53
 
54
54
  /* ── Borders ──────────────────────────────────────────────────────────── */
55
- .border-subtle { border-color: var(--border-subtle); }
56
- .border-strong { border-color: var(--border-strong); }
57
- .border-hover { border-color: var(--border-hover); }
55
+ .wpic-legacy-border-subtle { border-color: var(--wpic-legacy-border-subtle); }
56
+ .wpic-legacy-border-strong { border-color: var(--wpic-legacy-border-strong); }
57
+ .wpic-legacy-border-hover { border-color: var(--wpic-legacy-border-hover); }
58
58
 
59
59
  /* WCard owns its border colors. This avoids a missing host Tailwind utility
60
60
  falling back to currentColor and producing a black header separator. */
61
61
  .wpic-card--bordered {
62
- border: 1px solid var(--border-strong);
62
+ border: 1px solid var(--wpic-legacy-border-strong);
63
63
  }
64
64
  .wpic-card--borderless {
65
65
  border: 0;
@@ -80,13 +80,13 @@
80
80
  padding: 0.75rem var(--wpic-card-padding-x);
81
81
  }
82
82
  .wpic-card__header--divided {
83
- border-bottom: 1px solid var(--border-subtle);
83
+ border-bottom: 1px solid var(--wpic-legacy-border-subtle);
84
84
  }
85
85
  .wpic-card__header--undivided {
86
86
  border-bottom: 0;
87
87
  }
88
88
  .wpic-card__footer {
89
- border-top: 1px solid var(--border-subtle);
89
+ border-top: 1px solid var(--wpic-legacy-border-subtle);
90
90
  }
91
91
 
92
92
  /* ── Shared surface padding scale ─────────────────────────────────────────
@@ -110,49 +110,49 @@
110
110
  }
111
111
 
112
112
  /* ── Text ─────────────────────────────────────────────────────────────── */
113
- .text-main { color: var(--text-main); }
114
- .text-muted { color: var(--text-muted); }
115
- .text-dim { color: var(--text-dim); }
113
+ .wpic-legacy-text-main { color: var(--wpic-legacy-text-main); }
114
+ .wpic-legacy-text-muted { color: var(--wpic-legacy-text-muted); }
115
+ .wpic-legacy-text-dim { color: var(--wpic-legacy-text-dim); }
116
116
 
117
117
  /* ── Typography ───────────────────────────────────────────────────────── */
118
- .label-xs {
118
+ .wpic-legacy-label-xs {
119
119
  font-size: 11px;
120
120
  font-weight: 500;
121
121
  letter-spacing: 0.01em;
122
- color: var(--text-dim);
122
+ color: var(--wpic-legacy-text-dim);
123
123
  }
124
- .heading-sm {
124
+ .wpic-legacy-heading-sm {
125
125
  font-size: 0.875rem;
126
126
  font-weight: 600;
127
127
  letter-spacing: -0.025em;
128
- color: var(--text-main);
128
+ color: var(--wpic-legacy-text-main);
129
129
  }
130
130
 
131
131
  /* ── Status badges ────────────────────────────────────────────────────── */
132
- .status-ok { color: rgb(52 211 153); background-color: rgb(52 211 153 / 0.05); border: 1px solid rgb(52 211 153 / 0.1); }
133
- .status-low { color: rgb(251 191 36); background-color: rgb(251 191 36 / 0.05); border: 1px solid rgb(251 191 36 / 0.1); }
134
- .status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
132
+ .wpic-legacy-status-ok { color: rgb(52 211 153); background-color: rgb(52 211 153 / 0.05); border: 1px solid rgb(52 211 153 / 0.1); }
133
+ .wpic-legacy-status-low { color: rgb(251 191 36); background-color: rgb(251 191 36 / 0.05); border: 1px solid rgb(251 191 36 / 0.1); }
134
+ .wpic-legacy-status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
135
135
 
136
136
  /* ── Glass surface ────────────────────────────────────────────────────── */
137
- .glass {
137
+ .wpic-legacy-glass {
138
138
  backdrop-filter: blur(12px);
139
139
  -webkit-backdrop-filter: blur(12px);
140
140
  background-color: rgba(255, 255, 255, 0.05);
141
141
  }
142
142
 
143
143
  /* ── Table header ─────────────────────────────────────────────────────── */
144
- .th {
144
+ .wpic-legacy-th {
145
145
  font-size: 11px;
146
146
  font-weight: 600;
147
147
  letter-spacing: 0.01em;
148
- color: var(--text-dim);
148
+ color: var(--wpic-legacy-text-dim);
149
149
  padding: 0.75rem 1rem;
150
- border-bottom: 1px solid var(--border-subtle);
150
+ border-bottom: 1px solid var(--wpic-legacy-border-subtle);
151
151
  text-align: left;
152
152
  }
153
153
 
154
154
  /* ── Buttons ──────────────────────────────────────────────────────────── */
155
- .btn-primary {
155
+ .wpic-legacy-btn-primary {
156
156
  display: inline-flex; align-items: center; justify-content: center;
157
157
  height: 2rem; padding: 0 0.75rem;
158
158
  border-radius: 0.5rem;
@@ -162,23 +162,23 @@
162
162
  transition: background-color 0.15s;
163
163
  cursor: pointer;
164
164
  }
165
- .btn-primary:hover { background-color: #ffffff; }
166
- .dark .btn-primary { background-color: #27272a; color: #f4f4f5; }
167
- .dark .btn-primary:hover { background-color: #3f3f46; }
165
+ .wpic-legacy-btn-primary:hover { background-color: #ffffff; }
166
+ .dark .wpic-legacy-btn-primary { background-color: #27272a; color: #f4f4f5; }
167
+ .dark .wpic-legacy-btn-primary:hover { background-color: #3f3f46; }
168
168
 
169
- .btn-secondary {
169
+ .wpic-legacy-btn-secondary {
170
170
  display: inline-flex; align-items: center; justify-content: center;
171
171
  height: 2rem; padding: 0 0.75rem;
172
172
  border-radius: 0.5rem;
173
- border: 1px solid var(--border-subtle);
174
- color: var(--text-muted);
173
+ border: 1px solid var(--wpic-legacy-border-subtle);
174
+ color: var(--wpic-legacy-text-muted);
175
175
  font-size: 0.875rem; font-weight: 500;
176
176
  transition: all 0.15s;
177
177
  cursor: pointer;
178
178
  }
179
- .btn-secondary:hover { color: var(--text-main); background-color: rgba(255,255,255,0.05); }
179
+ .wpic-legacy-btn-secondary:hover { color: var(--wpic-legacy-text-main); background-color: rgba(255,255,255,0.05); }
180
180
 
181
- .btn-indigo {
181
+ .wpic-legacy-btn-indigo {
182
182
  display: inline-flex; align-items: center; justify-content: center;
183
183
  height: 2rem; padding: 0 0.75rem;
184
184
  border-radius: 0.5rem;
@@ -189,25 +189,25 @@
189
189
  transition: background-color 0.15s;
190
190
  cursor: pointer;
191
191
  }
192
- .btn-indigo:hover { background-color: #6366f1; }
192
+ .wpic-legacy-btn-indigo:hover { background-color: #6366f1; }
193
193
 
194
- .btn-destructive {
194
+ .wpic-legacy-btn-destructive {
195
195
  display: inline-flex; align-items: center; justify-content: center;
196
196
  background-color: #dc2626; color: #ffffff;
197
197
  font-size: 0.875rem; font-weight: 600;
198
198
  border-radius: 0.5rem;
199
199
  cursor: pointer;
200
200
  }
201
- .btn-destructive:hover { background-color: #ef4444; }
202
- .btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
201
+ .wpic-legacy-btn-destructive:hover { background-color: #ef4444; }
202
+ .wpic-legacy-btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
203
203
 
204
204
  /* ── Spinner ──────────────────────────────────────────────────────────── */
205
205
  @keyframes wpic-spin { to { transform: rotate(360deg); } }
206
206
 
207
- .spinner {
207
+ .wpic-legacy-spinner {
208
208
  width: 1.25rem; height: 1.25rem;
209
209
  border-radius: 9999px;
210
- border: 2px solid var(--border-strong);
210
+ border: 2px solid var(--wpic-legacy-border-strong);
211
211
  border-top-color: transparent;
212
212
  animation: wpic-spin 0.7s linear infinite;
213
213
  }
@@ -223,12 +223,12 @@
223
223
  .wpic-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
224
224
 
225
225
  /* ── Range slider ─────────────────────────────────────────────────────── */
226
- input[type="range"].slider-themed {
226
+ input[type="range"].wpic-legacy-slider-themed {
227
227
  -webkit-appearance: none; appearance: none;
228
228
  height: 4px; border-radius: 2px;
229
- background: var(--border-strong); outline: none;
229
+ background: var(--wpic-legacy-border-strong); outline: none;
230
230
  }
231
- input[type="range"].slider-themed::-webkit-slider-thumb {
231
+ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
232
232
  -webkit-appearance: none;
233
233
  width: 14px; height: 14px;
234
234
  border-radius: 50%; background: #85C531; cursor: pointer;
@@ -238,39 +238,39 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
238
238
  LEGACY — v0.2 wpic-prefixed classes (backward compat)
239
239
  ═══════════════════════════════════════════════════════════════════════════ */
240
240
 
241
- .bg-wpic-black { background-color: var(--bg-main); }
242
- .bg-wpic-dark { background-color: var(--bg-main); }
243
- .bg-wpic-card { background-color: var(--bg-card); }
244
- .bg-wpic-input { background-color: var(--bg-input); }
245
- .bg-wpic-nav-active { background-color: var(--bg-input); }
246
- .bg-wpic-border { background-color: var(--border-strong); }
247
-
248
- .bg-wpic-card-30 { background-color: color-mix(in srgb, var(--bg-card) 30%, transparent); }
249
- .bg-wpic-card-50 { background-color: color-mix(in srgb, var(--bg-card) 50%, transparent); }
250
- .bg-wpic-card-80 { background-color: color-mix(in srgb, var(--bg-card) 80%, transparent); }
251
- .bg-wpic-dark-50 { background-color: color-mix(in srgb, var(--bg-main) 50%, transparent); }
252
- .bg-wpic-input-50 { background-color: color-mix(in srgb, var(--bg-input) 50%, transparent); }
253
- .bg-wpic-border-30 { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
254
- .bg-wpic-border-40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
255
- .bg-wpic-border-50 { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
256
-
257
- .border-wpic-border { border-color: var(--border-strong); }
258
- .border-wpic-border-30 { border-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
259
- .border-wpic-border-40 { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
260
- .border-wpic-border-50 { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
261
- .border-wpic-border-60 { border-color: color-mix(in srgb, var(--border-strong) 60%, transparent); }
262
- .border-wpic-border-80 { border-color: color-mix(in srgb, var(--border-strong) 80%, transparent); }
263
- .border-wpic-border-hover { border-color: var(--border-hover); }
264
- .divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
265
-
266
- .text-wpic-text { color: var(--text-main); }
267
- .text-wpic-muted { color: var(--text-muted); }
268
- .text-wpic-dim { color: var(--text-dim); }
269
- .text-wpic-dim-20 { color: color-mix(in srgb, var(--text-dim) 20%, transparent); }
270
- .text-wpic-dim-30 { color: color-mix(in srgb, var(--text-dim) 30%, transparent); }
271
- .text-wpic-dim-40 { color: color-mix(in srgb, var(--text-dim) 40%, transparent); }
272
- .text-wpic-dim-50 { color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
273
- .text-wpic-dim-60 { color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
241
+ .bg-wpic-black { background-color: var(--wpic-legacy-bg-main); }
242
+ .bg-wpic-dark { background-color: var(--wpic-legacy-bg-main); }
243
+ .bg-wpic-card { background-color: var(--wpic-legacy-bg-card); }
244
+ .bg-wpic-input { background-color: var(--wpic-legacy-bg-input); }
245
+ .bg-wpic-nav-active { background-color: var(--wpic-legacy-bg-input); }
246
+ .bg-wpic-border { background-color: var(--wpic-legacy-border-strong); }
247
+
248
+ .bg-wpic-card-30 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 30%, transparent); }
249
+ .bg-wpic-card-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 50%, transparent); }
250
+ .bg-wpic-card-80 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 80%, transparent); }
251
+ .bg-wpic-dark-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-main) 50%, transparent); }
252
+ .bg-wpic-input-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-input) 50%, transparent); }
253
+ .bg-wpic-border-30 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 30%, transparent); }
254
+ .bg-wpic-border-40 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
255
+ .bg-wpic-border-50 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 50%, transparent); }
256
+
257
+ .border-wpic-border { border-color: var(--wpic-legacy-border-strong); }
258
+ .border-wpic-border-30 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 30%, transparent); }
259
+ .border-wpic-border-40 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
260
+ .border-wpic-border-50 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 50%, transparent); }
261
+ .border-wpic-border-60 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 60%, transparent); }
262
+ .border-wpic-border-80 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 80%, transparent); }
263
+ .border-wpic-border-hover { border-color: var(--wpic-legacy-border-hover); }
264
+ .divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
265
+
266
+ .text-wpic-text { color: var(--wpic-legacy-text-main); }
267
+ .text-wpic-muted { color: var(--wpic-legacy-text-muted); }
268
+ .text-wpic-dim { color: var(--wpic-legacy-text-dim); }
269
+ .text-wpic-dim-20 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 20%, transparent); }
270
+ .text-wpic-dim-30 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 30%, transparent); }
271
+ .text-wpic-dim-40 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 40%, transparent); }
272
+ .text-wpic-dim-50 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 50%, transparent); }
273
+ .text-wpic-dim-60 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 60%, transparent); }
274
274
 
275
275
  .text-wpic-green { color: #85C531; }
276
276
  .bg-wpic-green { background-color: #85C531; }
@@ -385,10 +385,10 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
385
385
  border-color: var(--wpic-border);
386
386
  color: var(--wpic-text);
387
387
  }
388
- .wpic-theme.wpic-popover-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
389
- .wpic-theme.wpic-popover-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
390
- .wpic-theme.wpic-popover-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
391
- .wpic-theme.wpic-popover-panel :is(.border-zinc-100, .border-zinc-200) { border-color: var(--wpic-border); }
388
+ .wpic-theme.wpic-popover-panel :is(.wpic\:text-zinc-900, .wpic\:text-zinc-800, .wpic\:text-zinc-700, .wpic\:text-zinc-200, .wpic\:text-zinc-100) { color: var(--wpic-text); }
389
+ .wpic-theme.wpic-popover-panel :is(.wpic\:text-zinc-500, .wpic\:text-zinc-400) { color: var(--wpic-dim); }
390
+ .wpic-theme.wpic-popover-panel :is(.wpic\:bg-zinc-100, .wpic\:bg-zinc-800) { background: var(--wpic-raised); }
391
+ .wpic-theme.wpic-popover-panel :is(.wpic\:border-zinc-100, .wpic\:border-zinc-200) { border-color: var(--wpic-border); }
392
392
  .wpic-theme .wpic-select-option:hover:not(:disabled) { background: var(--wpic-raised); }
393
393
  .wpic-theme .wpic-calendar-day[aria-pressed="true"] { background: var(--wpic-accent); color: var(--wpic-on-accent); }
394
394
  .wpic-theme .wpic-calendar-day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--wpic-raised); }
@@ -437,18 +437,18 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
437
437
  background: #090a05;
438
438
  border: 0;
439
439
  }
440
- .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
441
- .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
442
- .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
443
- .wpic-theme .wpic-modal-panel :is(.border-zinc-100, .border-zinc-200) { border-color: var(--wpic-border); }
440
+ .wpic-theme .wpic-modal-panel :is(.wpic\:text-zinc-900, .wpic\:text-zinc-800, .wpic\:text-zinc-700, .wpic\:text-zinc-200, .wpic\:text-zinc-100) { color: var(--wpic-text); }
441
+ .wpic-theme .wpic-modal-panel :is(.wpic\:text-zinc-500, .wpic\:text-zinc-400) { color: var(--wpic-dim); }
442
+ .wpic-theme .wpic-modal-panel :is(.wpic\:bg-zinc-100, .wpic\:bg-zinc-800) { background: var(--wpic-raised); }
443
+ .wpic-theme .wpic-modal-panel :is(.wpic\:border-zinc-100, .wpic\:border-zinc-200) { border-color: var(--wpic-border); }
444
444
 
445
445
  /* Opaque row surfaces prevent scrolled content showing through fixed cells.
446
446
  Keep header, summary and hover surfaces in sync with the fixed column. */
447
447
  .wpic-table__scroll { isolation: isolate; }
448
448
  .wpic-table__header,
449
- .wpic-table__row { background: var(--wpic-surface, var(--bg-card)); }
449
+ .wpic-table__row { background: var(--wpic-surface, var(--wpic-legacy-bg-card)); }
450
450
  .wpic-table__summary,
451
- .wpic-table__row:hover { background: var(--wpic-raised, var(--bg-input)); }
451
+ .wpic-table__row:hover { background: var(--wpic-raised, var(--wpic-legacy-bg-input)); }
452
452
  .wpic-table__sticky {
453
453
  background: inherit;
454
454
  }