@wippy-fe/theme 0.0.41 → 0.0.42
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/THEMING.md +39 -1
- package/package.json +2 -1
- package/theme-config.css +140 -0
- package/tokens.json +1484 -0
package/THEMING.md
CHANGED
|
@@ -481,7 +481,7 @@ Same numbered scale pattern as primary (50–950) using `color-mix`.
|
|
|
481
481
|
|
|
482
482
|
**Fixed light-to-dark scale** — 0 is always lightest, 950 always darkest. The scale does NOT flip with dark mode. In dark mode, only 600–950 get warmer undertones.
|
|
483
483
|
|
|
484
|
-
### Semantic variables
|
|
484
|
+
### Semantic variables
|
|
485
485
|
|
|
486
486
|
These **flip with dark mode** — use these for theme-dependent styling.
|
|
487
487
|
|
|
@@ -505,6 +505,44 @@ These **flip with dark mode** — use these for theme-dependent styling.
|
|
|
505
505
|
| `--p-highlight-focus-color` | `primary-800` | `white @ 87%` |
|
|
506
506
|
| `--p-content-border-radius` | `6px` | `6px` |
|
|
507
507
|
|
|
508
|
+
### Family aliases — one grammar, zero exceptions
|
|
509
|
+
|
|
510
|
+
**Why this exists:** a small, fully regular grammar means a human — or an AI agent generating styles — can *predict* the right token instead of looking it up. The contract is two layers:
|
|
511
|
+
|
|
512
|
+
- **Numeric scale** (`--p-<family>-50` … `--p-<family>-950`) — the fixed-hue anchor. **Never theme-switchable**: identical in light and dark. Use it only when you explicitly do *not* want the value to flip.
|
|
513
|
+
- **Semantic aliases** (`-color` / `-contrast-color` / `-hover-color` / `-active-color`) — the theme-switchable layer. `-color` is always paired with `-contrast-color` (the color to place *on top* of it) plus its hover/active states, so a foreground + its guaranteed on-color come as a set with no `dark:` pair needed.
|
|
514
|
+
|
|
515
|
+
Because the grammar is exceptionless, `var(--p-<anything>-color)` / `-contrast-color` / `-hover-color` / `-active-color` is guaranteed to exist for all eight families — nothing to memorize per family, and [`tokens.json`](./tokens.json) is the machine-readable ground truth an agent can load.
|
|
516
|
+
|
|
517
|
+
**Every** color family (`primary`, `secondary`, `danger`, `success`, `warn`, `info`, `help`, `accent`) carries the same four mode-flipping aliases, remapped identically:
|
|
518
|
+
|
|
519
|
+
| Alias | Light | Dark |
|
|
520
|
+
|---|---|---|
|
|
521
|
+
| `--p-<family>-color` | `<family>-500` | `<family>-400` |
|
|
522
|
+
| `--p-<family>-contrast-color` | `surface-0` | `surface-900` |
|
|
523
|
+
| `--p-<family>-hover-color` | `<family>-600` | `<family>-300` |
|
|
524
|
+
| `--p-<family>-active-color` | `<family>-700` | `<family>-200` |
|
|
525
|
+
|
|
526
|
+
So `var(--p-danger-color)` is the mode-correct danger for text/fills, `var(--p-danger-contrast-color)` the text color on top of it — no `dark:` pair needed. The numeric scale (`--p-danger-500`) remains the fixed-hue anchor for uses that must NOT flip.
|
|
527
|
+
|
|
528
|
+
The full inventory (names, both mode values, flip flags) is generated into [`tokens.json`](./tokens.json) on every build; `scripts/build-token-manifest.js` also fails the build if a token ever deviates from this grammar or the duplicated dark blocks drift apart. Treat `tokens.json` as the ground truth for "does token X exist".
|
|
529
|
+
|
|
530
|
+
### Font tokens
|
|
531
|
+
|
|
532
|
+
One grammar per font role: `--p-font-<role>-<prop>` with roles `heading` / `body` / `mono` and props `family`, `scale` (multiplier over the role's base sizes), `line-height`, `letter-spacing`, `stretch`, `variation-settings`. Defaults are visually inert; all are mode-independent.
|
|
533
|
+
|
|
534
|
+
**Reach (what these actually steer):** the RENDERED-CONTENT typography — markdown headings h1–h6, `.data-body` body text and code blocks, including inside chat messages. Host chrome text, PrimeVue component CSS, and child apps' own styles do not read these tokens (the legacy `--v-font-family-head` had exactly the same reach). Every token below has a live consumer in the compiled content styles — none is speculative.
|
|
535
|
+
|
|
536
|
+
```css
|
|
537
|
+
:root {
|
|
538
|
+
--p-font-heading-scale: 1.1; /* rendered-content headings 10% larger */
|
|
539
|
+
--p-font-heading-letter-spacing: -0.01em; /* tighter content headings */
|
|
540
|
+
--p-font-body-stretch: 95%; /* narrower content body text (variable fonts) */
|
|
541
|
+
}
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
`--p-font-heading-family` defaults to the legacy `--v-font-family-head` (which keeps working), `--p-font-mono-family` steers markdown/code blocks. Which font files load — families, kept weights, `size-adjust`, `ascent-override`/`descent-override` (per-font width/vertical-position correction) — is @font-face-level and lives in the facade `fonts` theming param, which the host compiles into distributed CSS (see the host docs; `FontConfig` in `app-config/types.ts`). A `fonts` entry with `roles: ['body']` additionally emits a document-level `body { font-family: … }` rule, so the FAMILY of body text does apply document-wide — the `--p-font-body-*` adjustment vars above remain content-scoped.
|
|
545
|
+
|
|
508
546
|
## Reference — Tailwind utility classes
|
|
509
547
|
|
|
510
548
|
Provided by `tailwindcss-primeui` plugin (included in the shared Tailwind preset).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wippy-fe/theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.42",
|
|
4
4
|
"description": "Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "theme-config.css",
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"theme-config.css",
|
|
16
|
+
"tokens.json",
|
|
16
17
|
"tailwind.config.ts",
|
|
17
18
|
"primevue-plugin.ts",
|
|
18
19
|
"primevue/",
|
package/theme-config.css
CHANGED
|
@@ -129,6 +129,26 @@
|
|
|
129
129
|
--p-surface-900: #171717;
|
|
130
130
|
--p-surface-950: #0a0a0a;
|
|
131
131
|
--p-content-border-radius: 6px;
|
|
132
|
+
|
|
133
|
+
/* Typography tokens — one grammar for every font role (heading/body/mono):
|
|
134
|
+
--p-font-<role>-{family|scale|line-height|letter-spacing|stretch|variation-settings}.
|
|
135
|
+
Scales multiply each role's base sizes; defaults are visually inert.
|
|
136
|
+
@font-face-level control (which weights load, size-adjust, ascent/descent
|
|
137
|
+
overrides) is a facade concern: the `fonts` theming param compiles to
|
|
138
|
+
generated @font-face CSS — these vars only steer how loaded fonts render.
|
|
139
|
+
Mode-independent: declared once, no dark remap. */
|
|
140
|
+
--p-font-heading-family: var(--v-font-family-head, Arial);
|
|
141
|
+
--p-font-heading-scale: 1;
|
|
142
|
+
--p-font-heading-line-height: 1.5;
|
|
143
|
+
--p-font-heading-letter-spacing: normal;
|
|
144
|
+
--p-font-heading-stretch: normal;
|
|
145
|
+
--p-font-heading-variation-settings: normal;
|
|
146
|
+
--p-font-body-scale: 1;
|
|
147
|
+
--p-font-body-line-height: 1.5;
|
|
148
|
+
--p-font-body-letter-spacing: normal;
|
|
149
|
+
--p-font-body-stretch: normal;
|
|
150
|
+
--p-font-body-variation-settings: normal;
|
|
151
|
+
--p-font-mono-family: ui-monospace;
|
|
132
152
|
}
|
|
133
153
|
|
|
134
154
|
/* Light (default semantic mapping) */
|
|
@@ -137,6 +157,37 @@
|
|
|
137
157
|
--p-primary-contrast-color: var(--p-surface-0);
|
|
138
158
|
--p-primary-hover-color: var(--p-primary-600);
|
|
139
159
|
--p-primary-active-color: var(--p-primary-700);
|
|
160
|
+
/* Every color family carries the same four semantic aliases as primary
|
|
161
|
+
(-color / -contrast-color / -hover-color / -active-color), remapped per
|
|
162
|
+
mode. One grammar, zero exceptions — see tokens.json. */
|
|
163
|
+
--p-secondary-color: var(--p-secondary-500);
|
|
164
|
+
--p-secondary-contrast-color: var(--p-surface-0);
|
|
165
|
+
--p-secondary-hover-color: var(--p-secondary-600);
|
|
166
|
+
--p-secondary-active-color: var(--p-secondary-700);
|
|
167
|
+
--p-danger-color: var(--p-danger-500);
|
|
168
|
+
--p-danger-contrast-color: var(--p-surface-0);
|
|
169
|
+
--p-danger-hover-color: var(--p-danger-600);
|
|
170
|
+
--p-danger-active-color: var(--p-danger-700);
|
|
171
|
+
--p-success-color: var(--p-success-500);
|
|
172
|
+
--p-success-contrast-color: var(--p-surface-0);
|
|
173
|
+
--p-success-hover-color: var(--p-success-600);
|
|
174
|
+
--p-success-active-color: var(--p-success-700);
|
|
175
|
+
--p-warn-color: var(--p-warn-500);
|
|
176
|
+
--p-warn-contrast-color: var(--p-surface-0);
|
|
177
|
+
--p-warn-hover-color: var(--p-warn-600);
|
|
178
|
+
--p-warn-active-color: var(--p-warn-700);
|
|
179
|
+
--p-info-color: var(--p-info-500);
|
|
180
|
+
--p-info-contrast-color: var(--p-surface-0);
|
|
181
|
+
--p-info-hover-color: var(--p-info-600);
|
|
182
|
+
--p-info-active-color: var(--p-info-700);
|
|
183
|
+
--p-help-color: var(--p-help-500);
|
|
184
|
+
--p-help-contrast-color: var(--p-surface-0);
|
|
185
|
+
--p-help-hover-color: var(--p-help-600);
|
|
186
|
+
--p-help-active-color: var(--p-help-700);
|
|
187
|
+
--p-accent-color: var(--p-accent-500);
|
|
188
|
+
--p-accent-contrast-color: var(--p-surface-0);
|
|
189
|
+
--p-accent-hover-color: var(--p-accent-600);
|
|
190
|
+
--p-accent-active-color: var(--p-accent-700);
|
|
140
191
|
--p-content-border-color: var(--p-surface-200);
|
|
141
192
|
--p-content-hover-background: var(--p-surface-100);
|
|
142
193
|
--p-content-hover-color: var(--p-surface-800);
|
|
@@ -202,6 +253,35 @@
|
|
|
202
253
|
--p-primary-contrast-color: var(--p-surface-900);
|
|
203
254
|
--p-primary-hover-color: var(--p-primary-300);
|
|
204
255
|
--p-primary-active-color: var(--p-primary-200);
|
|
256
|
+
/* Family aliases, dark remap — mirrors primary's 400/300/200 pattern. */
|
|
257
|
+
--p-secondary-color: var(--p-secondary-400);
|
|
258
|
+
--p-secondary-contrast-color: var(--p-surface-900);
|
|
259
|
+
--p-secondary-hover-color: var(--p-secondary-300);
|
|
260
|
+
--p-secondary-active-color: var(--p-secondary-200);
|
|
261
|
+
--p-danger-color: var(--p-danger-400);
|
|
262
|
+
--p-danger-contrast-color: var(--p-surface-900);
|
|
263
|
+
--p-danger-hover-color: var(--p-danger-300);
|
|
264
|
+
--p-danger-active-color: var(--p-danger-200);
|
|
265
|
+
--p-success-color: var(--p-success-400);
|
|
266
|
+
--p-success-contrast-color: var(--p-surface-900);
|
|
267
|
+
--p-success-hover-color: var(--p-success-300);
|
|
268
|
+
--p-success-active-color: var(--p-success-200);
|
|
269
|
+
--p-warn-color: var(--p-warn-400);
|
|
270
|
+
--p-warn-contrast-color: var(--p-surface-900);
|
|
271
|
+
--p-warn-hover-color: var(--p-warn-300);
|
|
272
|
+
--p-warn-active-color: var(--p-warn-200);
|
|
273
|
+
--p-info-color: var(--p-info-400);
|
|
274
|
+
--p-info-contrast-color: var(--p-surface-900);
|
|
275
|
+
--p-info-hover-color: var(--p-info-300);
|
|
276
|
+
--p-info-active-color: var(--p-info-200);
|
|
277
|
+
--p-help-color: var(--p-help-400);
|
|
278
|
+
--p-help-contrast-color: var(--p-surface-900);
|
|
279
|
+
--p-help-hover-color: var(--p-help-300);
|
|
280
|
+
--p-help-active-color: var(--p-help-200);
|
|
281
|
+
--p-accent-color: var(--p-accent-400);
|
|
282
|
+
--p-accent-contrast-color: var(--p-surface-900);
|
|
283
|
+
--p-accent-hover-color: var(--p-accent-300);
|
|
284
|
+
--p-accent-active-color: var(--p-accent-200);
|
|
205
285
|
--p-content-border-color: var(--p-surface-700);
|
|
206
286
|
--p-content-hover-background: var(--p-surface-800);
|
|
207
287
|
--p-content-hover-color: var(--p-surface-0);
|
|
@@ -253,6 +333,35 @@
|
|
|
253
333
|
--p-primary-contrast-color: var(--p-surface-900);
|
|
254
334
|
--p-primary-hover-color: var(--p-primary-300);
|
|
255
335
|
--p-primary-active-color: var(--p-primary-200);
|
|
336
|
+
/* Family aliases, dark remap — mirrors primary's 400/300/200 pattern. */
|
|
337
|
+
--p-secondary-color: var(--p-secondary-400);
|
|
338
|
+
--p-secondary-contrast-color: var(--p-surface-900);
|
|
339
|
+
--p-secondary-hover-color: var(--p-secondary-300);
|
|
340
|
+
--p-secondary-active-color: var(--p-secondary-200);
|
|
341
|
+
--p-danger-color: var(--p-danger-400);
|
|
342
|
+
--p-danger-contrast-color: var(--p-surface-900);
|
|
343
|
+
--p-danger-hover-color: var(--p-danger-300);
|
|
344
|
+
--p-danger-active-color: var(--p-danger-200);
|
|
345
|
+
--p-success-color: var(--p-success-400);
|
|
346
|
+
--p-success-contrast-color: var(--p-surface-900);
|
|
347
|
+
--p-success-hover-color: var(--p-success-300);
|
|
348
|
+
--p-success-active-color: var(--p-success-200);
|
|
349
|
+
--p-warn-color: var(--p-warn-400);
|
|
350
|
+
--p-warn-contrast-color: var(--p-surface-900);
|
|
351
|
+
--p-warn-hover-color: var(--p-warn-300);
|
|
352
|
+
--p-warn-active-color: var(--p-warn-200);
|
|
353
|
+
--p-info-color: var(--p-info-400);
|
|
354
|
+
--p-info-contrast-color: var(--p-surface-900);
|
|
355
|
+
--p-info-hover-color: var(--p-info-300);
|
|
356
|
+
--p-info-active-color: var(--p-info-200);
|
|
357
|
+
--p-help-color: var(--p-help-400);
|
|
358
|
+
--p-help-contrast-color: var(--p-surface-900);
|
|
359
|
+
--p-help-hover-color: var(--p-help-300);
|
|
360
|
+
--p-help-active-color: var(--p-help-200);
|
|
361
|
+
--p-accent-color: var(--p-accent-400);
|
|
362
|
+
--p-accent-contrast-color: var(--p-surface-900);
|
|
363
|
+
--p-accent-hover-color: var(--p-accent-300);
|
|
364
|
+
--p-accent-active-color: var(--p-accent-200);
|
|
256
365
|
--p-content-border-color: var(--p-surface-700);
|
|
257
366
|
--p-content-hover-background: var(--p-surface-800);
|
|
258
367
|
--p-content-hover-color: var(--p-surface-0);
|
|
@@ -303,6 +412,37 @@
|
|
|
303
412
|
--p-primary-contrast-color: var(--p-surface-0);
|
|
304
413
|
--p-primary-hover-color: var(--p-primary-600);
|
|
305
414
|
--p-primary-active-color: var(--p-primary-700);
|
|
415
|
+
/* Every color family carries the same four semantic aliases as primary
|
|
416
|
+
(-color / -contrast-color / -hover-color / -active-color), remapped per
|
|
417
|
+
mode. One grammar, zero exceptions — see tokens.json. */
|
|
418
|
+
--p-secondary-color: var(--p-secondary-500);
|
|
419
|
+
--p-secondary-contrast-color: var(--p-surface-0);
|
|
420
|
+
--p-secondary-hover-color: var(--p-secondary-600);
|
|
421
|
+
--p-secondary-active-color: var(--p-secondary-700);
|
|
422
|
+
--p-danger-color: var(--p-danger-500);
|
|
423
|
+
--p-danger-contrast-color: var(--p-surface-0);
|
|
424
|
+
--p-danger-hover-color: var(--p-danger-600);
|
|
425
|
+
--p-danger-active-color: var(--p-danger-700);
|
|
426
|
+
--p-success-color: var(--p-success-500);
|
|
427
|
+
--p-success-contrast-color: var(--p-surface-0);
|
|
428
|
+
--p-success-hover-color: var(--p-success-600);
|
|
429
|
+
--p-success-active-color: var(--p-success-700);
|
|
430
|
+
--p-warn-color: var(--p-warn-500);
|
|
431
|
+
--p-warn-contrast-color: var(--p-surface-0);
|
|
432
|
+
--p-warn-hover-color: var(--p-warn-600);
|
|
433
|
+
--p-warn-active-color: var(--p-warn-700);
|
|
434
|
+
--p-info-color: var(--p-info-500);
|
|
435
|
+
--p-info-contrast-color: var(--p-surface-0);
|
|
436
|
+
--p-info-hover-color: var(--p-info-600);
|
|
437
|
+
--p-info-active-color: var(--p-info-700);
|
|
438
|
+
--p-help-color: var(--p-help-500);
|
|
439
|
+
--p-help-contrast-color: var(--p-surface-0);
|
|
440
|
+
--p-help-hover-color: var(--p-help-600);
|
|
441
|
+
--p-help-active-color: var(--p-help-700);
|
|
442
|
+
--p-accent-color: var(--p-accent-500);
|
|
443
|
+
--p-accent-contrast-color: var(--p-surface-0);
|
|
444
|
+
--p-accent-hover-color: var(--p-accent-600);
|
|
445
|
+
--p-accent-active-color: var(--p-accent-700);
|
|
306
446
|
--p-content-border-color: var(--p-surface-200);
|
|
307
447
|
--p-content-hover-background: var(--p-surface-100);
|
|
308
448
|
--p-content-hover-color: var(--p-surface-800);
|