diff --git a/dev-docs/CREWLI-DESIGN-TOKENS.md b/dev-docs/CREWLI-DESIGN-TOKENS.md new file mode 100644 index 00000000..6db6ce79 --- /dev/null +++ b/dev-docs/CREWLI-DESIGN-TOKENS.md @@ -0,0 +1,280 @@ +# Crewli Design Tokens — Audit & Decision Register + +| Field | Value | +| ---------------------- | ------------------------------------------- | +| Source design system | crewli-starter / PrimeVue Aura | +| Aura preset version | `@primeuix/themes` 4.5.x | +| Tailwind version | v4 (CSS-first `@theme`, no `tailwind.config.ts`) | +| Audit date | 2026-05-21 | +| Phase-1 decided tokens | Typography (AD-2.5-T1) | +| Plan reference | RFC-WS-PRIMEVUE-PLAN-2-5 §6 (Track B) | +| Related docs | [PRIMEVUE_COMPONENTS.md](./PRIMEVUE_COMPONENTS.md), [RFC-WS-PRIMEVUE-PLAN-2-5.md](./RFC-WS-PRIMEVUE-PLAN-2-5.md) | + +## 1. Purpose & scope + +This document is the **inventory and decision register** for the design tokens currently live in the Crewli SPA. It is generated as **Track B** of `RFC-WS-PRIMEVUE-PLAN-2-5` and serves as the foundation for Plan 4's template-layer token work. + +**What this doc does:** +- Inventories every token source (Tailwind v4 `@theme`, PrimeVue Aura preset, component-level CSS variables, store-managed runtime attributes). +- Classifies each token as **Brand-essential**, **Bespoke**, or **Generic** per the RFC §6.2 framework. +- Records the **Typography Decision Register** (AD-2.5-T1) end-to-end, including the historical Public Sans removal across both the CSS path and the webfontloader JS path. +- Flags drift, inconsistencies, and follow-up items for Plan 4. + +**What this doc does NOT do:** +- Make new token decisions beyond Typography (per RFC §6.4, the rest is deferred to Plan 2.5b or absorbed into Plan 4). +- Refactor, consolidate, or move any token value. This is a read-only audit; the doc records state without changing it. +- Decide on density-aware component spacing, focus-ring tuning, surface-tone overrides, or radius-scale customization — all explicitly deferred. + +If a token value changes after this audit date, update the relevant row + the **Audit date** field; do not silently let the inventory drift. + +## 2. Classification scheme + +Each token is one of (verbatim from RFC §6.2): + +- **Brand-essential** — token carries Crewli brand identity. Keep current value. Examples: `--p-primary-color` (teal), gradient definitions, Crewli wordmark colors. +- **Bespoke** — token has a non-default value with deliberate design intent. Keep current value with rationale. Examples: the brand-square recipe (32px / `rounded-lg` / `px-4`), the density axis attribute, custom topbar height. +- **Generic** — token has a non-default value with no documented intent. Default decision: **revert to framework default**. Override requires explicit rationale. + +## 3. Token sources + +| Source | Type | Notes | +| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| [`apps/app/src/assets/styles/tailwind.css`](../apps/app/src/assets/styles/tailwind.css) | Tailwind v4 `@theme` + `:root` | Single source for Tailwind tokens. Houses `--font-sans` (`@theme`), `--crewli-font-family` (`:root`), and the `@custom-variant dark` selector binding. | +| [`apps/app/src/plugins/primevue/theme.ts`](../apps/app/src/plugins/primevue/theme.ts) | PrimeVue Aura preset (programmatic) | `definePreset(Aura, {...})` — overrides ONLY the `semantic.primary` palette + the light/dark `colorScheme` bindings. Everything else inherits Aura defaults. | +| [`apps/app/src/plugins/primevue/index.ts`](../apps/app/src/plugins/primevue/index.ts) | PrimeVue runtime config | `darkModeSelector: '.dark'`, `cssLayer: false`, Dutch locale, empty `pt` defaults. | +| [`apps/app/src/plugins/iconify.ts`](../apps/app/src/plugins/iconify.ts) | Iconify runtime | Tabler set eager-loaded; icon name convention `tabler-` (dash, NOT Iconify standard colon). | +| [`apps/app/src/stores/useShellUiStore.ts`](../apps/app/src/stores/useShellUiStore.ts) | Pinia store (runtime DOM attribute writer) | Writes `` (theme) and `` (density) via `applyDomAttributes()`. | +| [`apps/app/src/utils/v2/gradient.ts`](../apps/app/src/utils/v2/gradient.ts) | Component data | The 8-pair gradient palette consumed by the WorkspaceSwitcher avatar (per-org gradient via deterministic hash). | +| Component scoped CSS (`