/** * URBINO · PRIMENG AURA PRESET OVERRIDE * ============================================================ * Full override of the Aura preset for PrimeNG v21 on the Manager * surface (Angular). Use with `providePrimeNG({ theme: { preset: UrbinoAura } })`. * * Source of truth: `tokens/semantic.css` in this design system * (Layer 2 of the token architecture; see tokens/README.md). * This preset translates the manager-world semantic tokens into * the names Aura expects. Where Aura asks for a 50–950 ramp we * feed the `--u-blue-*` scale; where it asks for "surface" we * feed `--u-slate-*`; semantic CTAs (success/info/warn/danger) * map to our state tokens. * * Why a full preset (and not a partial extend): * - The manager world is the only PrimeNG consumer; there is no * need to inherit Aura defaults. A full preset gives us a single * place to lock visual identity for tables, forms, dialogs, and * overlays. * * Notes on the `light` block: * - Aura's color tokens are nested under `colorScheme.light.*` (and * `.dark.*`, which we leave out for the pilot). The string values * are the canonical hexes; the live CSS custom properties (defined * in tokens/primitive.css + tokens/semantic.css) mirror them so * non-PrimeNG components on the same page stay in sync. * * Version: 0.1.1 (pilot foundation · v21 import-paths + paddingY fix) * ============================================================ * * PrimeNG v21 NOTE — IMPORT PATHS CHANGED * ---------------------------------------------------------- * As of PrimeNG v21 the theming utilities and built-in presets * were extracted into the framework-agnostic `@primeuix/themes` * package. The old `@primeng/themes/*` paths are gone. * * ✗ pre-v21: import { definePreset } from '@primeng/themes'; * import Aura from '@primeng/themes/aura'; * ✓ v21+: import { definePreset } from '@primeuix/themes'; * import Aura from '@primeuix/themes/aura'; * * `package.json` needs `@primeuix/themes` as a runtime dep * (PrimeNG itself stays at `primeng`). If you're upgrading an * older project, also drop `@primeng/themes` to avoid two copies * of the theme engine. * ============================================================ */ // PrimeNG v21+ — themes live in @primeuix/themes (renamed from @primeng/themes). import { definePreset } from '@primeuix/themes'; import Aura from '@primeuix/themes/aura'; // Canonical Urbino values — keep in sync with tokens/primitive.css. const blue = { 50: '#EEF3FE', 100: '#DBE5FD', 200: '#BCCFFB', 300: '#8FB0F8', 400: '#5C8AF3', 500: '#2E63EB', 600: '#1F4BD1', 700: '#1B3DAB', 800: '#1B358A', 900: '#1B3070', 950: '#131F45', }; const slate = { 0: '#FFFFFF', 50: '#F8FAFC', 100: '#F1F5F9', 200: '#E2E8F0', 300: '#CBD5E1', 400: '#94A3B8', 500: '#64748B', 600: '#475569', 700: '#334155', 800: '#1E293B', 900: '#0F172A', 950: '#020617', }; export const UrbinoAura = definePreset(Aura, { primitive: { borderRadius: { none: '0', xs: '4px', sm: '6px', md: '8px', // default content-radius lg: '10px', xl: '14px', }, }, semantic: { primary: blue, transitionDuration: '180ms', focusRing: { width: '3px', style: 'solid', color: 'rgba(46, 99, 235, 0.25)', offset: '0', }, formField: { // paddingY MUST be non-zero — `0` collapses the intrinsic height of // PrimeNG's input/select/button and visually flattens the controls // (Aura inherits this on all form fields). Values below match the // 32 / 36 / 40 px (sm / md / lg) form-field target heights at the // default 14 px line-height in a metrics-neutral font. // // FONT-METRIC CAVEAT — Plus Jakarta Sans (the manager display face) // has a larger intrinsic em-box than the calculation assumes, so the // 32 / 36 / 40 px targets only land if you drop the default paddingY // to `0.375rem`. If your build uses Plus Jakarta Sans (or any font // with similar metrics), override here: // paddingY: '0.375rem', // sm: { ..., paddingY: '0.25rem' }, // lg: { ..., paddingY: '0.5rem' }, // Verify with a screenshot of , , in a // row — they should share the same outer height. paddingX: '12px', paddingY: '0.5rem', borderRadius: '8px', sm: { fontSize: '12px', paddingX: '10px', paddingY: '0.375rem' }, lg: { fontSize: '15px', paddingX: '14px', paddingY: '0.625rem' }, }, list: { padding: '4px', gap: '2px', header: { padding: '8px 12px' }, option: { padding: '8px 12px', borderRadius: '6px' }, optionGroup: { padding: '6px 12px' }, }, content: { borderRadius: '10px', }, mask: { background: 'rgba(15, 23, 42, 0.45)', transitionDuration: '240ms', }, navigation: { list: { padding: '4px', gap: '2px' }, item: { padding: '7px 8px', borderRadius: '8px', gap: '10px' }, submenuLabel: { padding: '14px 8px 4px', fontWeight: 600 }, submenuIcon: { color: '{primary.color}' }, }, overlay: { select: { borderRadius: '8px', boxShadow: 'var(--u-shadow-md, 0 2px 4px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06))' }, popover:{ borderRadius: '10px', boxShadow: 'var(--u-shadow-md, 0 2px 4px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06))' }, modal: { borderRadius: '14px', boxShadow: 'var(--u-shadow-pop, 0 16px 48px rgba(15,23,42,0.16))' }, }, colorScheme: { light: { // surface = neutral slate; emphasized = darker step for active states surface: slate, primary: { color: blue[500], contrastColor: '#ffffff', hoverColor: blue[600], activeColor: blue[700], }, formField: { background: slate[0], disabledBackground: slate[50], filledBackground: slate[50], filledFocusBackground: slate[0], borderColor: '#E8ECF2', // u-slate-150 hoverBorderColor: slate[300], focusBorderColor: blue[500], invalidBorderColor: '#DC2626', color: slate[900], disabledColor: slate[400], placeholderColor: slate[400], floatLabelColor: slate[500], floatLabelFocusColor: blue[700], floatLabelInvalidColor: '#DC2626', iconColor: slate[500], shadow: 'none', }, text: { color: slate[900], hoverColor: slate[900], mutedColor: slate[500], hoverMutedColor: slate[600], }, content: { background: slate[0], hoverBackground: slate[50], borderColor: '#E8ECF2', color: slate[900], hoverColor: slate[900], }, overlay: { select: { background: slate[0], borderColor: '#E8ECF2', color: slate[900] }, popover: { background: slate[0], borderColor: '#E8ECF2', color: slate[900] }, modal: { background: slate[0], borderColor: '#E8ECF2', color: slate[900] }, }, list: { option: { focusBackground: blue[50], selectedBackground: blue[50], selectedFocusBackground: blue[100], color: slate[900], focusColor: slate[900], selectedColor: blue[700], selectedFocusColor: blue[700], icon: { color: slate[400], focusColor: slate[500], }, }, optionGroup: { background: 'transparent', color: slate[500], }, }, navigation: { item: { focusBackground: slate[100], activeBackground: blue[50], color: slate[600], focusColor: slate[900], activeColor: blue[500], icon: { color: slate[400], focusColor: slate[600], activeColor: blue[500], }, }, submenuLabel: { background: 'transparent', color: slate[400] }, submenuIcon: { color: slate[400], focusColor: slate[500], activeColor: blue[500] }, }, }, }, }, components: { /* ---- Button ---- * * IMPORTANT — Structural (size / spacing / radius) tokens MUST be * nested under `root`. `definePreset`'s deep-merge will NOT lift a * flat `button.paddingY` onto `button.root.paddingY` — Aura reads * the resolved structural tokens from the `root` slot, so flat * declarations are silently ignored. Color variants stay where * they already live (`colorScheme.light.root.`). * * paddingY uses `0.5rem` (sm 0.375rem / lg 0.625rem) to preserve * the 32 / 36 / 40 px button heights; `0` would flatten the button. */ button: { root: { borderRadius: '8px', paddingX: '14px', paddingY: '0.5rem', sm: { paddingX: '10px', paddingY: '0.375rem', fontSize: '12px' }, lg: { paddingX: '18px', paddingY: '0.625rem', fontSize: '15px' }, gap: '8px', iconOnlyWidth: '36px', raisedShadow: 'none', // crisp Manager world — no raised shadow }, colorScheme: { light: { root: { primary: { background: blue[500], hoverBackground:blue[600], activeBackground:blue[700], borderColor: blue[500], hoverBorderColor:blue[600], activeBorderColor:blue[700], color: '#ffffff', hoverColor: '#ffffff', activeColor: '#ffffff', }, secondary: { background: slate[0], hoverBackground:slate[50], activeBackground:slate[100], borderColor: '#E8ECF2', hoverBorderColor:slate[300], activeBorderColor:slate[300], color: slate[900], hoverColor: slate[900], activeColor: slate[900], }, danger: { background: '#DC2626', hoverBackground:'#B91C1C', activeBackground:'#991B1B', borderColor: '#DC2626', hoverBorderColor:'#B91C1C', activeBorderColor:'#991B1B', color: '#ffffff', hoverColor: '#ffffff', activeColor: '#ffffff', }, }, }, }, }, /* ---- Input / Textarea / Select ---- * * These don't have a `root` sub-block in Aura's component schema, * so flat tokens DO merge correctly here — leave them flat. Only * components with variant slots (button, togglebutton, etc.) need * the explicit `root: {}` wrapper. * * paddingY follows the corrected formField scale. */ inputtext: { borderRadius: '8px', paddingX: '12px', paddingY: '0.5rem', sm: { fontSize: '12px', paddingX: '10px', paddingY: '0.375rem' }, lg: { fontSize: '15px', paddingX: '14px', paddingY: '0.625rem' }, }, textarea: { borderRadius: '8px', paddingX: '12px', paddingY: '10px', }, select: { borderRadius: '8px', paddingX: '12px', overlayBorderRadius: '8px', }, multiselect: { borderRadius: '8px', paddingX: '12px', overlayBorderRadius: '8px', chip: { borderRadius: '6px', paddingX: '8px', }, }, datepicker: { borderRadius: '8px', paddingX: '12px', panelBorderRadius: '10px', header: { padding: '12px 14px' }, day: { width: '36px', height: '36px', borderRadius: '8px' }, }, /* ---- DataTable ---- */ datatable: { borderRadius: '10px', header: { background: slate[50], borderColor: '#E8ECF2', padding: '10px 12px', color: slate[500], fontWeight: 500, fontSize: '12px' }, headerCell: { background: slate[50], borderColor: '#E8ECF2', padding: '10px 12px', color: slate[500], fontWeight: 500, fontSize: '12px', hoverBackground: slate[100] }, bodyCell: { padding: '12px', borderColor: '#F1F5F9', color: slate[900], fontSize: '14px' }, footer: { background: slate[50], borderColor: '#E8ECF2', padding: '10px 12px', color: slate[500], fontSize: '12px' }, row: { background: slate[0], stripedBackground: slate[25] || '#FBFCFD', hoverBackground: blue[50], selectedBackground: blue[50], color: slate[900], }, filter: { rowOperator: { background: slate[50], borderColor: '#E8ECF2' }, ruleGap: '6px', constraintList: { background: slate[0] }, }, paginatorTopBorderColor: '#E8ECF2', paginatorBottomBorderColor: '#E8ECF2', }, /* ---- Paginator ---- */ paginator: { padding: '8px 12px', gap: '4px', navButton: { width: '32px', height: '32px', borderRadius: '6px', selectedBackground: blue[50], selectedColor: blue[700], }, }, /* ---- Tag / Chip ---- */ tag: { borderRadius: '6px', padding: '2px 8px', fontWeight: 500, fontSize: '11px', }, chip: { borderRadius: '999px', padding: '4px 10px', }, /* ---- Card / Panel ---- */ card: { borderRadius: '10px', padding: '16px', shadow: 'var(--u-shadow-sm)', borderColor: '#E8ECF2', }, panel: { borderRadius: '10px', borderColor: '#E8ECF2', header: { padding: '12px 16px', background: slate[0] }, content: { padding: '16px' }, }, /* ---- Dialog / Drawer ---- */ dialog: { borderRadius: '14px', shadow: 'var(--u-shadow-pop)', header: { padding: '16px 20px' }, content: { padding: '0 20px 20px' }, footer: { padding: '12px 20px' }, }, drawer: { borderRadius: '0', shadow: 'var(--u-shadow-lg)', header: { padding: '16px 20px' }, content: { padding: '0 20px 20px' }, footer: { padding: '12px 20px' }, }, /* ---- Toast / Inline Message ---- */ toast: { borderRadius: '10px', width: '360px', shadow: 'var(--u-shadow-pop)', }, message: { borderRadius: '8px', content: { padding: '10px 14px' }, }, /* ---- Tooltip ---- */ tooltip: { borderRadius: '6px', padding: '6px 10px', maxWidth: '320px', }, /* ---- Menu / Tieredmenu / Breadcrumb ---- */ menu: { borderRadius: '10px', list: { padding: '4px' }, item: { padding: '7px 10px', borderRadius: '6px' }, }, breadcrumb: { padding: '0', gap: '6px', itemColor: slate[500], itemHoverColor: slate[900], separator: { color: slate[400] }, }, /* ---- Tabs ---- */ tabs: { tabList: { borderColor: '#E8ECF2' }, tab: { padding: '12px 14px', borderRadius: '0', color: slate[600], activeColor: blue[500], activeBorderColor: blue[500], hoverBackground: 'transparent', }, }, }, }); // Convenience export — drop-in for `providePrimeNG({ theme: { preset: ... } })` export default UrbinoAura; /* ============================================================ USAGE — Angular bootstrap ============================================================ // app.config.ts import { providePrimeNG } from 'primeng/config'; import { UrbinoAura } from './tokens/aura-preset'; // NOTE: UrbinoAura internally imports from '@primeuix/themes' (PrimeNG v21+). // The old '@primeng/themes' paths no longer exist; make sure // `@primeuix/themes` is in your package.json runtime deps. export const appConfig: ApplicationConfig = { providers: [ providePrimeNG({ theme: { preset: UrbinoAura, options: { prefix: 'p', darkModeSelector: false, // pilot is light-only // DO NOT enable `cssLayer` here. We tried // cssLayer: { name: 'primeng', order: 'tailwind-base, primeng, tailwind-utilities' } // and it broke PrimeNG datatable internals: checkbox columns // disappeared and filter-popup buttons lost their styling. // Tailwind utilities still override component styles in practice // without it, because PrimeNG ships scoped selectors with higher // specificity than utility classes; the layer-cascade fix isn't // needed for the pilot scope. }, }, }), // ... ], }; // styles.css @import "tailwindcss"; @import "./tokens/colors_and_type.css"; // pulls in primitive + semantic + world-cit + typography // Then the @theme block from tokens/tailwind.preset.cjs (variant A). ============================================================ */