feat(primevue): add PrimeVue plugin with Aura preset and Crewli teal tokens
Scaffolds apps/app/src/plugins/primevue/ as three files mirroring the Vuetify plugin structure at apps/app/src/plugins/vuetify/: - theme.ts — CrewliPreset extends Aura via definePreset(). Primary palette (50–950) is the exact token plan from RFC Appendix B, centered on Crewli teal #0D9394 (light primary, primary.500) and #0B7F80 (dark primary, primary.600). Surface tokens use Aura defaults. colorScheme.light/dark map primary.color, hover, active, and contrastColor per Appendix B. - defaults.ts — empty pt (PassThrough) defaults object. F3 ships this scaffold; F4 sub-packages populate component-level defaults as each Vuetify surface migrates. - index.ts — installPrimeVue(app) registers PrimeVue with the preset, Dutch locale (primelocale/nl.json → nl.nl), darkModeSelector: '.dark' (matches Vuexy convention per AD-2), and the three services Toast, Confirmation, Dialog. Theme imports use @primeuix/themes (the maintained successor PrimeVue's official docs prescribe), not RFC v1.0's @primevue/themes. See B1 commit for substitution rationale. RFC will be aligned in B9. The plugin is not yet registered in main.ts — that lands in B4 after Tailwind v4 wiring (B3). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
12
apps/app/src/plugins/primevue/defaults.ts
Normal file
12
apps/app/src/plugins/primevue/defaults.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
// Global PrimeVue PassThrough (pt) defaults. F3 ships this scaffold
|
||||||
|
// empty — F4 sub-packages will populate component-level defaults as
|
||||||
|
// each Vuetify surface migrates and we discover which props need
|
||||||
|
// consistent overrides (analogous to Vuetify's defaults registry at
|
||||||
|
// apps/app/src/plugins/vuetify/defaults.ts).
|
||||||
|
//
|
||||||
|
// Per RFC §6 + AD-1, this object is consumed by the PrimeVue install
|
||||||
|
// call in ./index.ts via the `pt` config option.
|
||||||
|
|
||||||
|
export const ptDefaults = {} as const
|
||||||
|
|
||||||
|
export default ptDefaults
|
||||||
36
apps/app/src/plugins/primevue/index.ts
Normal file
36
apps/app/src/plugins/primevue/index.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
// PrimeVue plugin installer. Registers PrimeVue with the Crewli Aura
|
||||||
|
// preset (theme.ts), the Dutch locale (primelocale/nl), and the three
|
||||||
|
// service modules (Toast, Confirmation, Dialog) the SPA mounts at
|
||||||
|
// App.vue top level.
|
||||||
|
//
|
||||||
|
// Per RFC-WS-FRONTEND-PRIMEVUE AD-2: darkModeSelector matches Vuexy's
|
||||||
|
// `.dark` class convention so existing skin-toggle plumbing continues
|
||||||
|
// to work during the F3–F6 parallel-mode window.
|
||||||
|
|
||||||
|
import type { App } from 'vue'
|
||||||
|
import PrimeVue from 'primevue/config'
|
||||||
|
import ConfirmationService from 'primevue/confirmationservice'
|
||||||
|
import DialogService from 'primevue/dialogservice'
|
||||||
|
import ToastService from 'primevue/toastservice'
|
||||||
|
import nl from 'primelocale/nl.json'
|
||||||
|
|
||||||
|
import { CrewliPreset } from './theme'
|
||||||
|
import { ptDefaults } from './defaults'
|
||||||
|
|
||||||
|
export default function installPrimeVue(app: App) {
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
preset: CrewliPreset,
|
||||||
|
options: {
|
||||||
|
darkModeSelector: '.dark',
|
||||||
|
cssLayer: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
locale: nl.nl,
|
||||||
|
pt: ptDefaults,
|
||||||
|
})
|
||||||
|
|
||||||
|
app.use(ToastService)
|
||||||
|
app.use(ConfirmationService)
|
||||||
|
app.use(DialogService)
|
||||||
|
}
|
||||||
55
apps/app/src/plugins/primevue/theme.ts
Normal file
55
apps/app/src/plugins/primevue/theme.ts
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
// Crewli Aura preset. Token values per RFC-WS-FRONTEND-PRIMEVUE Appendix B.
|
||||||
|
//
|
||||||
|
// Primary palette derives from Crewli teal #0D9394 (light primary) and
|
||||||
|
// #0B7F80 (dark primary) — the same values the Vuetify side uses at
|
||||||
|
// apps/app/src/plugins/vuetify/theme.ts. The two themes are intentionally
|
||||||
|
// kept in lockstep during the F3–F6 parallel-mode window so that pages
|
||||||
|
// in either framework render with identical brand color.
|
||||||
|
//
|
||||||
|
// Imports use @primeuix/themes (PrimeVue 4's officially documented theme
|
||||||
|
// package, per primevue.org/vite/), substituting RFC v1.0's reference to
|
||||||
|
// the deprecated @primevue/themes. See B1 commit for rationale.
|
||||||
|
|
||||||
|
import { definePreset } from '@primeuix/themes'
|
||||||
|
import Aura from '@primeuix/themes/aura'
|
||||||
|
|
||||||
|
export const staticPrimaryColor = '#0D9394'
|
||||||
|
export const staticPrimaryDarkenColor = '#0B7F80'
|
||||||
|
|
||||||
|
export const CrewliPreset = definePreset(Aura, {
|
||||||
|
semantic: {
|
||||||
|
primary: {
|
||||||
|
50: '#E6F4F4',
|
||||||
|
100: '#CCE9EA',
|
||||||
|
200: '#99D3D4',
|
||||||
|
300: '#66BDBE',
|
||||||
|
400: '#33A7A8',
|
||||||
|
500: '#0D9394',
|
||||||
|
600: '#0B7F80',
|
||||||
|
700: '#086B6C',
|
||||||
|
800: '#055758',
|
||||||
|
900: '#034344',
|
||||||
|
950: '#012F30',
|
||||||
|
},
|
||||||
|
colorScheme: {
|
||||||
|
light: {
|
||||||
|
primary: {
|
||||||
|
color: '{primary.500}',
|
||||||
|
contrastColor: '#ffffff',
|
||||||
|
hoverColor: '{primary.600}',
|
||||||
|
activeColor: '{primary.700}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
primary: {
|
||||||
|
color: '{primary.400}',
|
||||||
|
contrastColor: '{surface.900}',
|
||||||
|
hoverColor: '{primary.300}',
|
||||||
|
activeColor: '{primary.200}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export default CrewliPreset
|
||||||
Reference in New Issue
Block a user