/* * Integra Scientific — Twenty CRM theme override (Requirement 2). * * Target: LIVE public site "Scientific Curator" palette from * integra-web/tailwind.config.ts (mirrored in crm/theme/tokens.json). * NOT the blue #1A3A5C / green #2D7D46 strategy palette. * * Mechanism: Twenty's app reads colours through the public `--t-*` custom * properties declared under `.light` / `.dark` on . Re-declaring them * under `html.light` (higher specificity than `.light`) re-skins every * token-driven surface, including values resolved in JS via useTheme() / * getComputedStyle. No fork, no `!important`. Private `--tw-*` variables are * never touched. * * Scope: LIGHT MODE ONLY. `html.dark` is DEFERRED — no dark tokens are * defined; until a dark ramp set is authored the app shows Twenty's stock * dark theme. Keep Appearance set to Light. * html.dark: deferred * * ACCESSIBILITY RULE (hard): brand gold #C5A059 on white is ≈2.5:1 and FAILS * WCAG AA. Gold is used ONLY as fill, border, or glyph (gold9) — NEVER as * body text. Gold text uses gold11 (#775A19, ≈6.4:1 on white, ≈4.8:1 on * gold3). Purple #4B3F72 on white is ≈7:1 and passes AA as text. * crm/theme/verify-contrast.mjs enforces both. * * Ramp derivation (reproducible: node crm/theme/derive-ramps.mjs): * accent: OKLCH, hue fixed from #4B3F72 (≈303°), 12 steps with * L = 0.97 → 0.30 and C = 0.01 → 0.09 (both linear in step), * rounded to sRGB hex; accent9 pinned to primary #4B3F72, * accent10 pinned to primary-container #34285A. * gold: OKLCH, hue fixed from #C5A059 (≈80°), anchor-fitted L/C table * (see derive-ramps.mjs); gold9 pinned to secondary #C5A059, * gold11 pinned to secondary-container #775A19. * neutrals: sRGB white-mix tints of on-surface-variant / outline. * * Key accent steps: * accent3 #D0CADB selected-row / selected-nav fill. Body text #131B2C * on it ≈10.8:1; link text accent11 on it ≈7.0:1. * accent9 #4B3F72 primary button, active-tab underline, checkbox. * White label on it ≈9.3:1. * accent11 #463161 link / accent text. ≈11.2:1 on white. * * Colour semantics: * accent (purple) = the operator is acting / has selected. Never a status. * gold = a clock is running (renewals, pending, deadlines). * green = "in good standing" — Twenty's stock Radix green ramp is * kept as-is (not overridden) so status pills stay legible. * tomato = danger / overdue / destructive — borrowed from Twenty's * stock Radix tomato ramp, not overridden, not re-invented. * amber is not used anywhere (two yellows would blur the deadline signal). * * Every hex in tokens.json must keep appearing here verbatim (case-sensitive) * or the fidelity gate (verify-fidelity.mjs) fails. */ html.light { /* ------------------------------------------------ Brand palette (Scientific Curator) */ --integra-primary: #4B3F72; --integra-primary-container: #34285A; --integra-secondary: #C5A059; --integra-secondary-container: #775A19; --integra-on-primary: #ffffff; --integra-on-secondary: #ffffff; --integra-background: #F8F9FB; --integra-surface: #ffffff; --integra-surface-container: #F0F1F3; --integra-on-surface: #131B2C; --integra-on-surface-variant: #494550; --integra-outline: #7a7581; /* ------------------------------------------------ Type */ --integra-font-headline: "Manrope", sans-serif; --integra-font-body: "Inter", sans-serif; --t-font-family: "Inter", sans-serif; /* Twenty default is already Inter; pinned */ /* ------------------------------------------------ Backgrounds */ --t-background-primary: #ffffff; /* data surfaces: table body, record body, inputs */ --t-background-secondary: #F8F9FB; /* sidebar, page canvas */ --t-background-tertiary: #F0F1F3; /* app canvas (index.css), hover, chip field */ --t-background-quaternary: #E6E8EC; /* pressed / attachment tile; one step below surface-container, same cool cast */ --t-background-inverted-primary: #131B2C; /* tooltips */ --t-background-transparent-blue: rgb(75 63 114 / 0.1); /* Twenty "blue" tint slot → brand purple */ /* ------------------------------------------------ Font colours */ --t-font-color-primary: #131B2C; /* on-surface ≈17.2:1 on white */ --t-font-color-secondary: #494550; /* on-surface-variant ≈9.3:1 on white */ --t-font-color-tertiary: #6D6A73; /* on-surface-variant @20% white ≈5.3:1 white, ≈4.7:1 on #F0F1F3 */ --t-font-color-light: #7a7581; /* outline; placeholders/disabled only ≈4.5:1 white, ≥3:1 everywhere */ --t-font-color-extra-light: #8A8690; /* outline @12% white; ≥3:1 on all three backgrounds */ --t-font-color-inverted: #ffffff; /* on-primary / on-secondary */ /* --t-font-color-danger: left at Twenty default (tomato11). */ /* ------------------------------------------------ Borders (tints of outline #7a7581) */ --t-border-color-light: #E4E3E6; /* @80% white — hairlines */ --t-border-color-medium: #D0CFD3; /* @65% white — inputs, cards */ --t-border-color-strong: #AFACB3; /* @40% white */ --t-border-color-blue: #77678D; /* accent8 — focus rings (≈5.1:1 on white) */ --t-border-color-inverted: #131B2C; /* --t-border-color-danger: left at Twenty default (tomato). */ /* ------------------------------------------------ Accent ramp (purple, OKLCH hue ≈303°) */ --t-accent-accent1: #F6F4FB; /* subtle background */ --t-accent-accent2: #E3DEEB; /* hover row */ --t-accent-accent3: #D0CADB; /* selected fill */ --t-accent-accent4: #BEB5CB; /* selected + hover */ --t-accent-accent5: #ABA1BB; /* borders */ --t-accent-accent6: #998DAC; --t-accent-accent7: #887A9C; /* disabled accent */ --t-accent-accent8: #77678D; /* focus ring */ --t-accent-accent9: #4B3F72; /* primary (pinned) — button, active tab, checkbox */ --t-accent-accent10: #34285A; /* primary-container (pinned) — button hover */ --t-accent-accent11: #463161; /* link / accent text */ --t-accent-accent12: #372052; /* high-contrast accent text */ /* Semantic accents. Twenty's stock values are translucent tints of the * accent hue (25/20/15/10 %) used for selected/hover fills, so the same * shape is kept with the brand purple. VERIFY in dev tools which of the * four drives selected-row vs hover before adjusting. */ --t-accent-primary: rgb(75 63 114 / 0.25); --t-accent-secondary: rgb(75 63 114 / 0.2); --t-accent-tertiary: rgb(75 63 114 / 0.15); --t-accent-quaternary: rgb(75 63 114 / 0.1); /* ------------------------------------------------ Gold ramp (OKLCH hue ≈80°) — FILL / BORDER / GLYPH */ --t-color-gold1: #F9F4EC; --t-color-gold2: #F4EAD9; --t-color-gold3: #ECDCC1; /* pill fill */ --t-color-gold4: #E4CEA9; --t-color-gold5: #DCC091; --t-color-gold6: #D6B57F; --t-color-gold7: #CFAB6E; --t-color-gold8: #CAA463; --t-color-gold9: #C5A059; /* secondary (pinned) — glyphs, evidence marks, folder icons. NEVER text. */ --t-color-gold10: #B9914B; /* hover */ --t-color-gold11: #775A19; /* secondary-container (pinned) — the ONLY gold used as text */ --t-color-gold12: #4E3914; /* --t-color-green1..12 : Twenty default Radix green kept ("good standing"). * --t-color-tomato1..12 : Twenty default Radix tomato kept ("danger"). * --t-color-blue1..12 : Twenty default kept; brand purple lives in accent. * --t-box-shadow-*, --t-border-radius-*, --t-spacing-* : defaults kept. * Twenty radii xs/sm/md (2/4/8 px) already match the site's * 0.125/0.25/0.5 rem. */ } /* Headline face. Twenty has no headline-family token; page titles and * section headings are plain heading elements or --t-font-size-xl/xxl * text, so the heading elements get Manrope here. Body stays Inter via * --t-font-family. */ html.light h1, html.light h2, html.light h3 { font-family: var(--integra-font-headline); }