feat(theme): Plan 2.5 P2 — Inter typography (AD-2.5-T1)
Per RFC-WS-PRIMEVUE-PLAN-2-5 §4 AD-2.5-T1. Establishes Inter as the canonical Crewli body font via @fontsource/inter (local package, no Google Fonts CDN). Audit findings (pre-change): - No @fontsource/public-sans package was installed. - No <link> tag in index.html loaded Public Sans. - Only one Public Sans reference existed in source: the vendored Vuexy SCSS variable $font-family-custom at src/@core/scss/template/libs/vuetify/_variables.scss, which drives Vuetify's $body-font-family on legacy surfaces during F4. - No src/main.css exists; the Tailwind v4 entry lives at src/assets/styles/tailwind.css with no @theme block yet. Changes: - @fontsource/inter@^5.2.8 added to dependencies; weights 400/500/600/700 imported at main.ts ahead of tailwind.css. - src/assets/styles/tailwind.css: new @theme block declaring --font-sans Inter-first, plus :root --crewli-font-family and html/body font-family applying that variable cascade-wide. - src/@core/scss/template/libs/vuetify/_variables.scss: $font-family-custom switched from the historical body font to Inter (vendored edit, narrowly scoped, F6 removes @core/ entirely). - tests/unit/styles/typography.spec.ts: 3-spec regression lock (Tailwind direct stacks, Vuexy SCSS variable, zero historical references in either file). File-content inspection — jsdom does not cascade from imported stylesheets, so getComputedStyle would always pass. Suite delta: 570 → 573 (+3; the prompt's template was +2 but the audit revealed two distinct font-config files, so each gets its own assertion per the prompt's "cover all sites" rule). vue-tsc clean. Scoped ESLint clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -12,3 +12,35 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "tailwindcss-primeui";
|
||||
@source "../../**/*.{vue,ts,js,tsx,jsx}";
|
||||
|
||||
/* AD-2.5-T1 — typography (RFC-WS-PRIMEVUE-PLAN-2-5).
|
||||
*
|
||||
* Inter is loaded via @fontsource/inter in main.ts (weights 400/500/600/700,
|
||||
* local package, no Google Fonts CDN). The stack falls back to the
|
||||
* platform UI sans-family if Inter fails to load.
|
||||
*
|
||||
* Two declarations are required:
|
||||
* 1. The Tailwind v4 `@theme` token `--font-sans` so utility classes
|
||||
* (e.g. `font-sans`) resolve to Inter.
|
||||
* 2. The cascade-level `html, body { font-family }` so PrimeVue and
|
||||
* Vuetify components — which inherit from `body` — render in Inter
|
||||
* too. `--crewli-font-family` is the named CSS variable carrying
|
||||
* the stack so other consumers can read it without re-declaring.
|
||||
*/
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
"Inter", system-ui, -apple-system, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--crewli-font-family:
|
||||
"Inter", system-ui, -apple-system, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--crewli-font-family);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user