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