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,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)
}