diff --git a/apps/app/src/plugins/primevue/defaults.ts b/apps/app/src/plugins/primevue/defaults.ts new file mode 100644 index 00000000..786c0c62 --- /dev/null +++ b/apps/app/src/plugins/primevue/defaults.ts @@ -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 diff --git a/apps/app/src/plugins/primevue/index.ts b/apps/app/src/plugins/primevue/index.ts new file mode 100644 index 00000000..83f00a39 --- /dev/null +++ b/apps/app/src/plugins/primevue/index.ts @@ -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) +} diff --git a/apps/app/src/plugins/primevue/theme.ts b/apps/app/src/plugins/primevue/theme.ts new file mode 100644 index 00000000..c5116271 --- /dev/null +++ b/apps/app/src/plugins/primevue/theme.ts @@ -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