Files
crewli/apps/app/src/plugins/primevue/theme.ts
bert.hausmans 0272961a95 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>
2026-05-11 01:00:01 +02:00

56 lines
1.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// 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