/* TutOS web NexaCRM theme. * * Ported from the purchased Shadcn Studio NexaCRM template (src/app/globals.css), * converting its oklch tokens to the HSL triplets this repo's Tailwind 3 config * expects (hsl(var(--token) / )). * * RootLayout emits html.tutos-admin before hydration so every web route and * portal inherits the template palette, including entry and recovery pages. * Shell unmounts must not remove it. Specificity matches this repo's * html:root.dark blocks. Rollback: disable the existing admin shell flag. * * This block is SELF-CONTAINED for every role it overrides. That matters: the * shell changes `--destructive` (the template's #e5484d, hue 358) away from the * global value (hue 1), so it must also carry that role's muted surface, text * and border rather than inheriting a surface tuned to a different colour. * * The ported values are pinned to the template by * src/design/__tests__/nexacrm-admin-theme.test.ts, which re-derives them from * the template's own oklch values. Do not edit a value here to satisfy a test. */ /* Source radius scale. Namespaced aliases avoid changing legacy token owners * when the existing presentation scope is disabled. */ html:root.tutos-admin { --nexa-radius-sm: calc(var(--radius) * 0.6); --nexa-radius-md: calc(var(--radius) * 0.8); --nexa-radius-lg: var(--radius); --nexa-radius-xl: calc(var(--radius) * 1.4); --nexa-radius-2xl: calc(var(--radius) * 1.8); --nexa-radius-3xl: calc(var(--radius) * 2.2); --nexa-radius-4xl: calc(var(--radius) * 2.6); /* Purchased Tailwind shadow scales, independent of legacy shadow tokens. */ --nexa-popup-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --nexa-popup-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --nexa-tab-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } /* Typography must land on body because next/font declares --font-sans there. * Both body text and headings inherit the root-loaded Manrope typeface. */ html:root.tutos-admin body { --font-sans: var(--font-manrope); --font-heading: var(--font-manrope); --tutos-font-family: var(--font-manrope); } html:root.tutos-admin:not(.dark) { --background: 0 0% 100%; --foreground: 0 0% 20%; --card: 0 0% 100%; --card-foreground: 0 0% 20%; --popover: 0 0% 100%; --popover-foreground: 0 0% 20%; --primary: 240 6% 10%; --primary-foreground: 0 0% 98%; --brand: 226 70% 56%; --brand-foreground: 0 0% 100%; --secondary: 0 0% 95%; --secondary-foreground: 0 0% 20%; --muted: 0 0% 95%; --muted-foreground: 0 0% 40%; --accent: 0 0% 95%; --accent-foreground: 0 0% 20%; --destructive: 358 75% 59%; --destructive-foreground: 0 0% 100%; /* Status semantics the shell previously lacked (mirrors the legacy --t-good/--t-warn). Kept as tokens so status colour is theme-aware and never a one-off palette value. The template carries no success/warning/info role, so these stay TutCart's own. */ --success: 152 60% 33%; --success-foreground: 0 0% 100%; --warning: 32 95% 36%; --warning-foreground: 0 0% 100%; --border: 0 0% 92%; --input: 0 0% 92%; --ring: 240 5% 59%; --sidebar: 0 0% 98%; --sidebar-foreground: 0 0% 20%; --sidebar-primary: 240 6% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 0 0% 95%; --sidebar-accent-foreground: 0 0% 20%; --sidebar-border: 0 0% 92%; --sidebar-ring: 240 6% 64%; /* Muted surfaces, readable text and borders for the roles this block owns. One token per mode instead of a palette tint plus a `dark:` twin, and the text token is SOLID (never alpha) so it cannot fail contrast. */ --destructive-muted: 358 86% 97%; --destructive-muted-foreground: 358 74% 32%; --destructive-border: 358 80% 86%; --success-muted: 152 65% 96%; --success-muted-foreground: 152 65% 22%; --success-border: 152 50% 80%; --warning-muted: 48 100% 96%; --warning-muted-foreground: 32 95% 25%; --warning-border: 48 85% 78%; /* The template carries no info role either; this stays TutCart's own so status can distinguish "in progress / published" from "done". */ --info: 199 100% 42%; --info-foreground: 203 36% 99%; --info-muted: 204 100% 97%; --info-muted-foreground: 199 90% 26%; --info-border: 199 85% 82%; /* The template's chart palette (chart-1 differs between modes). */ --chart-1: 226 70% 56%; --chart-2: 173 81% 36%; --chart-3: 23 93% 52%; --chart-4: 272 51% 54%; --chart-5: 322 65% 54%; /* The template's base radius (globals.css: --radius: 0.45rem). */ --radius: 0.45rem; } html:root.tutos-admin.dark { --background: 0 0% 9%; --foreground: 0 0% 92%; --card: 0 0% 9%; --card-foreground: 0 0% 92%; --popover: 0 0% 11%; --popover-foreground: 0 0% 92%; --primary: 240 6% 90%; --primary-foreground: 240 6% 10%; --brand: 226 70% 56%; --brand-foreground: 0 0% 100%; --secondary: 0 3% 14%; --secondary-foreground: 0 0% 92%; --muted: 0 0% 19%; --muted-foreground: 0 0% 70%; --accent: 0 0% 16%; --accent-foreground: 0 0% 92%; --destructive: 358 75% 59%; --destructive-foreground: 0 0% 100%; /* Dark-mode status: lightened for contrast on the dark surfaces. */ --success: 152 55% 64%; --success-foreground: 0 0% 10%; --warning: 38 95% 62%; --warning-foreground: 0 0% 10%; --border: 0 0% 13%; --input: 0 1% 20%; --ring: 240 4% 46%; --sidebar: 0 0% 10%; --sidebar-foreground: 0 0% 92%; --sidebar-primary: 225 84% 49%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 0 0% 16%; --sidebar-accent-foreground: 0 0% 92%; --sidebar-border: 0 0% 13%; --sidebar-ring: 240 4% 46%; --destructive-muted: 358 40% 13%; --destructive-muted-foreground: 358 90% 78%; --destructive-border: 358 40% 30%; --success-muted: 152 32% 12%; --success-muted-foreground: 152 55% 74%; --success-border: 152 32% 27%; --warning-muted: 38 42% 13%; --warning-muted-foreground: 38 92% 74%; --warning-border: 38 42% 29%; --info: 199 86% 56%; --info-foreground: 209 76% 2%; --info-muted: 199 42% 14%; --info-muted-foreground: 199 85% 74%; --info-border: 199 42% 31%; --chart-1: 227 73% 61%; --chart-2: 173 81% 36%; --chart-3: 23 93% 52%; --chart-4: 272 51% 54%; --chart-5: 322 65% 54%; --radius: 0.45rem; } /* --------------------------------------------------------------------------- High-contrast preference (WCAG 2.2 AA 1.4.3 / 1.4.11). The NexaCRM template ships no high-contrast layer, so this one is ours: when the user asks for more contrast we deepen ink and sharpen boundaries instead of leaning on the default palette. Scoped to the admin shell, so the rest of the product keeps its own theme. The muted role pairs are re-derived here too — leaving them at their default values would undo the strengthening on exactly the surfaces that carry status and money. --------------------------------------------------------------------------- */ @media (prefers-contrast: more) { html:root.tutos-admin:not(.dark) { --foreground: 0 0% 0%; --muted-foreground: 0 0% 20%; --border: 0 0% 32%; --input: 0 0% 32%; --ring: 0 0% 20%; --destructive: 0 80% 34%; --success: 152 75% 20%; --warning: 32 95% 24%; --destructive-muted: 0 90% 96%; --destructive-muted-foreground: 0 85% 24%; --destructive-border: 0 85% 45%; --success-muted: 152 70% 95%; --success-muted-foreground: 152 80% 15%; --success-border: 152 70% 35%; --warning-muted: 48 100% 95%; --warning-muted-foreground: 32 95% 18%; --warning-border: 48 95% 40%; --info: 199 100% 30%; --info-muted: 204 100% 95%; --info-muted-foreground: 199 95% 18%; --info-border: 199 90% 38%; --sidebar-border: 0 0% 32%; } html:root.tutos-admin.dark { --foreground: 0 0% 100%; --muted-foreground: 0 0% 84%; --border: 0 0% 60%; --input: 0 0% 60%; --ring: 0 0% 80%; --destructive: 0 95% 74%; --success: 152 70% 78%; --warning: 38 100% 78%; --destructive-muted: 0 45% 16%; --destructive-muted-foreground: 0 100% 88%; --destructive-border: 0 70% 60%; --success-muted: 152 40% 14%; --success-muted-foreground: 152 75% 88%; --success-border: 152 60% 50%; --warning-muted: 38 45% 14%; --warning-muted-foreground: 38 100% 88%; --warning-border: 38 80% 55%; --info: 199 90% 76%; --info-muted: 199 45% 14%; --info-muted-foreground: 199 95% 88%; --info-border: 199 70% 55%; --sidebar-border: 0 0% 60%; } } /* --------------------------------------------------------------------------- Forced colours (Windows high-contrast). The OS owns the palette, so this layer only guarantees that structure and the focused element stay visible rather than relying on our own colours. --------------------------------------------------------------------------- */ @media (forced-colors: active) { html:root.tutos-admin .t-shell-header, html:root.tutos-admin [data-sidebar="sidebar"] { border-color: CanvasText; } html:root.tutos-admin :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } }