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:
2026-05-11 01:00:01 +02:00
parent c8dcecbb49
commit 0272961a95
3 changed files with 103 additions and 0 deletions

View 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

View 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 F3F6 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)
}

View 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 F3F6 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