/* ============================================================================ * TaxResolve Pro — theme tokens * ---------------------------------------------------------------------------- * THE ONLY FILE IN THIS SOLUTION THAT CONTAINS COLOUR VALUES. * Everything else (components, pages, utilities) references these tokens. * If you find a hex/oklch literal anywhere outside this file, it is a bug. * * Values are OKLCH, converted from the approved mockup palette * (Desktop\TaxResolvePro mockup redesign\TaxResolvePro.dc.html). * The hex each token came from is kept in a comment for traceability. * * Token names are the shadcn/ui contract that BlazorBlueprint reads — do not * rename them. Project-specific additions are prefixed --brand-* / --tone-*. * * ── Two-tier token system ──────────────────────────────────────────────── * Tier 1, --palette-*, is the ONLY place an oklch() literal may be written — * one per distinct swatch, named by hue, not by business meaning. Tier 2 is * everything BlazorBlueprint/@theme/[data-tone]/[data-accent] actually read * (--primary, --brand-gold, --alert-*, --tone-*, --sidebar-*, --chart-*) and * every one of those resolves through var(--palette-*) instead of restating * a number. This is what "the only file with colour values" means in * practice: a colour used under two business names is ONE fact, aliased * twice, so it cannot drift the way --tone-gold-fg once did (equalled * --alert-warning in light but --brand-gold in dark — see the dark-mode * comment on --tone-gold-fg below). A value with a single consumer stays a * literal at its point of use; promoting it to the palette would add a name * nothing else can ever reuse. * ========================================================================== */ :root { /* ── palette primitives (light) ──────────────────────────────────────── */ --palette-ink: oklch(0.2103 0.0059 285.89); /* #18181B */ --palette-paper: oklch(1.0000 0.0000 89.88); /* #FFFFFF */ --palette-grey-100: oklch(0.9674 0.0013 286.38); /* #F4F4F5 */ --palette-grey-200: oklch(0.9197 0.0040 286.32); /* #E4E4E7 */ --palette-grey-500: oklch(0.5517 0.0138 285.94); /* #71717A */ --palette-navy: oklch(0.2786 0.0648 259.40); /* #142848 */ --palette-gold: oklch(0.7022 0.1318 80.66); /* #C9952A */ --palette-gold-soft: oklch(0.9723 0.0216 83.26); /* #FDF5E6 */ --palette-blue: oklch(0.4882 0.2172 264.38); /* #1D4ED8 */ --palette-blue-tint: oklch(0.9705 0.0129 264.38); --palette-green: oklch(0.5273 0.1371 150.07); --palette-green-tint: oklch(0.9819 0.0181 155.83); --palette-amber: oklch(0.5553 0.1455 49.00); /* #B45309 — warning, distinct from gold */ --palette-red-dark: oklch(0.5054 0.1905 27.52); /* #B91C1C — distinct from --destructive */ --palette-red-tint: oklch(0.9705 0.0129 17.38); /* ── surfaces ─────────────────────────────────────────────────────────── */ --background: var(--palette-paper); /* #FAFAFA page — see note: mockup used a hair off-white, kept literal below */ --foreground: var(--palette-ink); --card: var(--palette-paper); /* #FFFFFF */ --card-foreground: var(--palette-ink); --popover: var(--palette-paper); /* #FFFFFF */ --popover-foreground: var(--palette-ink); /* ── primary = navy. Confirm/submit actions, dark panels, filled buttons */ --primary: var(--palette-navy); /* #142848 */ --primary-foreground: var(--palette-paper); /* #FFFFFF */ /* ── secondary / muted / accent are *neutral surfaces*, not brand colour. * BlazorBlueprint uses --accent for hover states — keeping it grey is * deliberate; gold hovers would be overwhelming. Brand gold lives in * --brand-* below. */ --secondary: var(--palette-grey-100); /* #F4F4F5 */ --secondary-foreground: var(--palette-ink); --muted: var(--palette-grey-100); /* #F4F4F5 */ --muted-foreground: var(--palette-grey-500); /* #71717A */ --accent: var(--palette-grey-100); /* #F4F4F5 */ --accent-foreground: var(--palette-ink); /* Genuinely distinct from --alert-danger/--tone-red-fg (--palette-red-dark) below — this is the brighter shadcn destructive red, not the mockup's darker alert red. Single consumer; not promoted to the palette tier. */ --destructive: oklch(0.5771 0.2152 27.33); /* #DC2626 */ --destructive-foreground:var(--palette-paper); /* ── lines & focus. Focus ring is gold so keyboard nav reads as brand. */ --border: var(--palette-grey-200); /* #E4E4E7 */ --input: var(--palette-grey-200); /* #E4E4E7 */ --ring: var(--palette-gold); /* #C9952A */ /* Mockup cards are 10px, buttons/inputs 6px. --radius drives the scale: sm = radius-4px, md = radius-2px, lg = radius. */ --radius: 0.625rem; /* ── brand (project-specific, not part of the shadcn contract) ───────── */ --brand-gold: var(--palette-gold); /* #C9952A CTAs */ --brand-gold-foreground: var(--palette-ink); --brand-gold-light: oklch(0.7702 0.1053 78.28); /* #D9AC63 on navy — single consumer */ --brand-gold-soft: var(--palette-gold-soft); /* #FDF5E6 tint */ --brand-navy-deep: oklch(0.2400 0.0529 259.01); /* #0F1F38 — single consumer */ --brand-navy-light: oklch(0.3514 0.0838 259.69); /* #1F3A66 — single consumer */ --brand-blue: var(--palette-blue); /* #1D4ED8 links, figures */ /* ── charts: navy → gold → blue → green → amber ─────────────────────── */ --chart-1: var(--palette-navy); --chart-2: var(--palette-gold); --chart-3: var(--palette-blue); --chart-4: var(--palette-green); --chart-5: var(--palette-amber); /* ── sidebar (mockup: white panel, hairline border) ──────────────────── */ /* BlazorBlueprint's CSS reads --sidebar. The shadcn template ships only --sidebar-background, which Blueprint never looks at — leaving var(--sidebar) undefined, so the background declaration is dropped and the page colour shows through. Define --sidebar; keep --sidebar-background as an alias for any third-party theme that expects the older name. */ --sidebar: var(--palette-paper); /* #FFFFFF */ --sidebar-background: var(--sidebar); --sidebar-foreground: var(--palette-ink); --sidebar-primary: var(--palette-navy); --sidebar-primary-foreground: var(--palette-paper); --sidebar-accent: var(--palette-grey-100); --sidebar-accent-foreground: var(--palette-ink); --sidebar-border: var(--palette-grey-200); --sidebar-ring: var(--palette-gold); --sidebar-width: 15.625rem; /* 250px */ /* Collapsed icon rail. Blueprint's default is 3rem/48px, which the 32px brand tile plus its 8px padding exactly fills, so it collided with the border. 4.25rem/68px matches the rail width used in Epsilon Financials. */ --sidebar-width-icon: 4.25rem; /* 68px */ /* Sidebar typography & metrics, matched to the mockup. BlazorBlueprint styles [data-sidebar=group-label] and [data-sidebar=menu-button] from these variables, so this is the supported way to retheme the sidebar — no class overrides, no wrapper components. Defaults are 12px/500 labels and 14px/400 items, which read noticeably lighter and larger than the mockup. */ --sidebar-group-label-font-size: 0.65625rem; /* 10.5px */ --sidebar-group-label-line-height: 1rem; --sidebar-group-label-font-weight: 700; --sidebar-group-label-height: 1.75rem; /* 28px */ --sidebar-group-label-px: 0.625rem; /* 10px */ --sidebar-menu-button-font-size: 0.8125rem; /* 13px */ --sidebar-menu-button-line-height: 1.125rem; /* 18px */ --sidebar-menu-button-font-weight: 500; /* inactive */ --sidebar-menu-button-active-font-weight: 700; /* active */ --sidebar-menu-button-active-color: var(--primary); /* navy */ --sidebar-menu-button-active-bg: var(--secondary); /* #F4F4F5 */ --sidebar-menu-button-px: 0.625rem; /* 10px */ --sidebar-menu-button-py: 0.5625rem; /* 9px */ --sidebar-menu-button-gap: 0.625rem; /* 10px */ --sidebar-menu-gap: 0.125rem; /* 2px between items */ /* ── semantic tones. The mockup's badge/panel families map 1:1 here. * green = accepted/completed · red = rejected/urgent * amber = deadline/locked · blue = informational */ --alert-success: var(--palette-green); --alert-success-foreground: var(--palette-green); --alert-success-bg: var(--palette-green-tint); /* #F0FDF4 */ --alert-info: var(--palette-blue); --alert-info-foreground: var(--palette-blue); --alert-info-bg: var(--palette-blue-tint); --alert-warning: var(--palette-amber); --alert-warning-foreground: var(--palette-amber); --alert-warning-bg: oklch(0.9869 0.0214 95.28); /* #FFFBEB — single consumer */ --alert-danger: var(--palette-red-dark); --alert-danger-foreground: var(--palette-red-dark); --alert-danger-bg: var(--palette-red-tint); /* Tone pairs consumed by [data-tone] (see app-input.css). Runtime-varying colours resolve through these — never through generated class names. */ --tone-neutral-fg: var(--palette-grey-500); --tone-neutral-bg: var(--palette-grey-100); --tone-navy-fg: var(--palette-navy); --tone-navy-bg: oklch(0.9197 0.0140 259.40); /* single consumer — distinct navy tint */ --tone-blue-fg: var(--palette-blue); --tone-blue-bg: var(--palette-blue-tint); /* #EFF6FF */ /* Brand gold, not the amber warning colour. Was accidentally --palette-amber before this file had a palette tier: the two happened to share a literal in light mode only, so the gold ΣΤΑΔΙΟ pill matched --brand-gold in dark but --alert-warning in light. Aliasing both to the SAME primitive in both themes is the fix — see the header note above. */ --tone-gold-fg: var(--palette-gold); --tone-gold-bg: var(--palette-gold-soft); --tone-green-fg: var(--palette-green); --tone-green-bg: var(--palette-green-tint); --tone-red-fg: var(--palette-red-dark); --tone-red-bg: var(--palette-red-tint); --tone-purple-fg: oklch(0.4910 0.2700 292.58); /* #6D28D9 — single consumer */ --tone-purple-bg: oklch(0.9690 0.0160 293.76); /* #F5F3FF — single consumer */ /* ── micro-label grey. NOT the same as --muted-foreground, and that is the * point: the mockup runs two greys and we had collapsed them into one. * #A1A1AA is the 10.5px uppercase label above a figure or a field * (ΠΡΑΞΕΙΣ, ΔΙΕΥΘΥΝΣΗ, TAXISNET); #71717A stays for ordinary secondary * text — captions, hints, and the Στάδιο/Λογιστής rows of the φάκελος * card, which the mockup deliberately keeps darker than the labels above * them. Using muted-foreground for both made every micro-label read a * step too heavy. Single consumer; not promoted to the palette tier. */ --tone-label: oklch(0.7118 0.0129 286.07); /* #A1A1AA */ } /* ============================================================================ * Dark mode — toggled by the `dark` class on (see App.razor). * The mockup is light-only; this exists so that respecting tokens keeps dark * mode a one-line toggle instead of a rewrite. * Note the deliberate flip: navy is too dark to fill buttons on a dark page, * so gold becomes --primary here — mirroring the mockup's own gold-on-navy * buttons inside its dark filing panel. * * Dark has its own --palette-* primitives, independent of :root's — the two * blocks were already fully independent before this refactor (a handful of * values are deliberately lighter/darker per theme, not shared), so aliasing * across them would be the wrong kind of coupling. Each theme is one * self-contained set of facts. * ========================================================================== */ .dark { /* ── palette primitives (dark) ───────────────────────────────────────── */ --palette-paper: oklch(0.9851 0.0000 89.88); --palette-ink: oklch(0.2103 0.0059 285.89); --palette-card: oklch(0.1881 0.0060 285.81); /* #131316 */ --palette-surface: oklch(0.2282 0.0077 285.78); /* #1C1C20 */ --palette-border: oklch(0.2739 0.0055 286.03); /* #27272A */ --palette-gold: oklch(0.7702 0.1053 78.28); --palette-gold-soft:oklch(0.2400 0.0300 83.26); --palette-blue: oklch(0.6500 0.1700 264.38); --palette-green: oklch(0.6300 0.1300 150.07); --palette-green-bg: oklch(0.2200 0.0400 150.07); --palette-amber: oklch(0.6800 0.1400 49.00); --palette-red: oklch(0.6000 0.1800 27.33); --palette-red-bg: oklch(0.2200 0.0400 27.33); --background: oklch(0.1408 0.0044 285.82); /* #09090B */ --foreground: var(--palette-paper); --card: var(--palette-card); --card-foreground: var(--palette-paper); --popover: var(--palette-card); --popover-foreground: var(--palette-paper); --primary: var(--palette-gold); /* gold */ --primary-foreground: var(--palette-ink); --secondary: var(--palette-surface); /* #1C1C20 */ --secondary-foreground: var(--palette-paper); --muted: var(--palette-surface); --muted-foreground: oklch(0.7118 0.0129 286.07); /* #A1A1AA — single consumer here */ --accent: var(--palette-border); /* #27272A */ --accent-foreground: var(--palette-paper); /* Same value as :root's --destructive — coincidence, not a shared fact; each theme's --destructive is independently authored. */ --destructive: oklch(0.5771 0.2152 27.33); --destructive-foreground:var(--palette-paper); --border: var(--palette-border); --input: var(--palette-border); --ring: var(--palette-gold); --brand-gold: var(--palette-gold); --brand-gold-foreground: var(--palette-ink); /* A STEP LIGHTER THAN --brand-gold, and it has to be: dark's --palette-gold is already the light theme's gold-light (#D9AC63), so aliasing this onto it made the two tokens ONE colour here while they stayed distinct in light. Its single consumer is the dashboard's Ροή Υποθέσεων flow, where bars 3 and 4 sit next to each other — in dark mode they rendered as one 20px band and the mockup's gold → pale-gold progression disappeared. Nothing throws; the panel just reads as four stages instead of five. */ --brand-gold-light: oklch(0.8600 0.0750 82.00); --brand-gold-soft: var(--palette-gold-soft); --brand-navy-deep: oklch(0.2400 0.0529 259.01); /* #0F1F38 — unchanged across themes */ --brand-navy-light: oklch(0.3514 0.0838 259.69); /* #1F3A66 — unchanged across themes */ --brand-blue: var(--palette-blue); --chart-1: var(--palette-gold); --chart-2: var(--palette-blue); --chart-3: var(--palette-green); --chart-4: var(--palette-amber); --chart-5: var(--palette-red); --sidebar: var(--palette-card); --sidebar-background: var(--sidebar); --sidebar-foreground: var(--palette-paper); --sidebar-primary: var(--palette-gold); --sidebar-primary-foreground: var(--palette-ink); --sidebar-accent: var(--palette-border); --sidebar-accent-foreground: var(--palette-paper); --sidebar-border: var(--palette-border); --sidebar-ring: var(--palette-gold); /* Navy on a dark sidebar would be unreadable — the active item takes gold here. Metrics/weights are inherited from :root and need no dark-mode variant. */ --sidebar-menu-button-active-color: var(--palette-gold); --sidebar-menu-button-active-bg: var(--palette-border); --alert-success: var(--palette-green); --alert-success-foreground: oklch(0.8000 0.1000 150.07); /* lightened for AA on dark — single consumer */ --alert-success-bg: var(--palette-green-bg); --alert-info: var(--palette-blue); --alert-info-foreground: oklch(0.8000 0.1000 264.38); /* lightened for AA on dark — single consumer */ --alert-info-bg: oklch(0.2200 0.0400 264.38); /* single consumer */ --alert-warning: var(--palette-amber); --alert-warning-foreground: oklch(0.8500 0.1000 49.00); /* lightened for AA on dark — single consumer */ --alert-warning-bg: oklch(0.2200 0.0400 49.00); /* single consumer */ --alert-danger: var(--palette-red); --alert-danger-foreground: oklch(0.8000 0.1000 27.33); /* lightened for AA on dark — single consumer */ --alert-danger-bg: var(--palette-red-bg); --tone-neutral-fg: oklch(0.7118 0.0129 286.07); /* same as --muted-foreground here */ --tone-neutral-bg: var(--palette-surface); --tone-navy-fg: oklch(0.7500 0.0700 259.40); /* single consumer — dark-lightened navy */ --tone-navy-bg: oklch(0.2400 0.0400 259.40); /* single consumer — distinct from brand-navy-deep */ /* See :root's --tone-gold-fg comment — dark mode already aliased brand gold correctly; the fix keeps that and makes light mode match it. */ --tone-gold-fg: var(--palette-gold); --tone-gold-bg: var(--palette-gold-soft); --tone-green-fg: var(--palette-green); --tone-green-bg: var(--palette-green-bg); --tone-blue-fg: oklch(0.7000 0.1500 264.38); /* single consumer — distinct from --alert-info dark */ --tone-blue-bg: oklch(0.2300 0.0500 264.38); /* single consumer */ --tone-red-fg: var(--palette-red); --tone-red-bg: var(--palette-red-bg); --tone-purple-fg: oklch(0.7200 0.1500 292.58); /* single consumer */ --tone-purple-bg: oklch(0.2300 0.0500 292.58); /* single consumer */ /* Inverted on dark: the label sits a step BELOW the body's secondary text, * which is #A1A1AA there — so the label takes the darker grey. The light * theme's pair, swapped. */ --tone-label: oklch(0.5517 0.0138 285.94); /* #71717A */ }