/* SalesCRM css 02: Semantic design tokens. Portable across the TenScan Blazor fleet. */ /* ============================================================================ Tokens are named for ROLE, not appearance. The layer in 01 names tokens after colours (--white, --gray-500, --green). That forces the light theme to make the names lie: it redefines --white to #1B1E24, so `color: var(--white)` renders near-black, and inverts --gray-600 through --gray-800 from dark greys into light ones. Every new component then has to guess which lie applies, which is why 21-theme-radzen.css accumulated 365 separate [data-theme="light"] override rules - one per component that guessed wrong. Here a token says what it is FOR (--foreground, --border, --danger-subtle). Both themes assign real values to the same role, so component CSS is written once and is theme-correct by construction. The dark values below are SalesCRM's EXISTING palette, unchanged, so adopting this layer is visually a no-op in dark theme. The light theme is where the roles start earning their keep. Legacy names are kept at the bottom as aliases onto these roles, so the existing ~5,750 lines keep working while components migrate incrementally. Porting to another site in the fleet: copy this file, change the BRAND block and nothing else. ============================================================================ */ :root { /* ---- Brand ------------------------------------------------------------- The only block that differs per site. Everything else derives from role. */ --brand: #13EF95; --brand-ink: #04120C; /* text on a filled brand surface */ /* ---- Surfaces (lowest to highest elevation) ---------------------------- --canvas is the page behind everything; --background is the app body. SalesCRM keeps them distinct (pure black behind a near-black shell). */ --canvas: #000000; --background: #0A0A0A; --surface: #101014; /* rails, headers, sunken strips */ --card: #1A1A1F; /* panels sitting on the page */ --card-hover: #202027; --popover: #1A1A1F; /* menus, dialogs, tooltips */ /* ---- Ink --------------------------------------------------------------- foreground = primary text, muted = labels/secondary, subtle = de-emphasised */ --foreground: #FFFFFF; --foreground-muted: #B0B7C0; --foreground-subtle: #8A9099; /* 4.6:1 on --card; #6B7280 was only 3.1:1 */ /* ---- Lines ------------------------------------------------------------- */ --border: #262630; --border-strong: #363642; --ring: var(--brand); /* focus ring */ /* ---- Intent ------------------------------------------------------------ Each intent has a solid, an ink for text on the solid, and a subtle tint for badge/pill backgrounds. */ --primary: var(--brand); --primary-ink: var(--brand-ink); --primary-subtle: rgba(19, 239, 149, 0.12); --success: #13EF95; --success-ink: #04120C; --success-subtle: rgba(19, 239, 149, 0.12); --danger: #FB7185; --danger-ink: #1A0508; --danger-subtle: rgba(251, 113, 133, 0.12); --warning: #FACC15; --warning-ink: #1A1200; --warning-subtle: rgba(250, 204, 21, 0.12); --info: #149AFB; --info-ink: #04121A; --info-subtle: rgba(20, 154, 251, 0.12); --accent: #7800ED; /* violet, used decoratively in gradients */ /* Ink for text in the accent colour, and NOT the fill even on dark. Accent is the one intent whose dark value (#7800ED) is a deep violet chosen for gradients, not a bright dark-theme colour like the others - as ink on a dark surface it measures 2.3:1. #C084FC is the value the chips carried hardcoded, and it was right for dark. */ --accent-strong: #C084FC; --neutral-subtle: rgba(176, 183, 192, 0.12); /* ---- Intent inks for TEXT --------------------------------------------- An intent value has two jobs that pull in opposite directions: it fills a solid surface (wants to be dark enough for white ink) and it colours text on the matching 12% tint (wants to be dark enough against a near-white tint). One value cannot do both in a light theme. So: --{intent} stays the FILL, --{intent}-strong is the ink for text on a tint or on --surface. On dark they are the same value; the light block below overrides them. Any rule that sets `color:` to an intent must use -strong. Any rule that sets `background:` or `border-color:` keeps the plain token. */ --primary-strong: var(--primary); --success-strong: var(--success); --danger-strong: var(--danger); --warning-strong: var(--warning); --info-strong: var(--info); /* ---- Charts ------------------------------------------------------------ Categorical series colours in a fixed order, interleaved by hue so no two adjacent series collapse together under deuteranopia (green, violet, amber, blue, rose - never green, blue, violet, amber, rose). */ --chart-1: #13EF95; --chart-2: #A78BFA; --chart-3: #FBBF24; --chart-4: #38BDF8; --chart-5: #FB7185; /* ---- Gradients ---------------------------------------------------------- */ --gradient-primary: linear-gradient(90deg, var(--info), var(--brand)); --gradient-text: linear-gradient(90deg, var(--info), var(--brand)); /* ---- Geometry ----------------------------------------------------------- */ --radius: 4px; --radius-sm: 2px; --radius-lg: 8px; --radius-pill: 999px; --hairline: 1px; /* ---- Elevation ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44); /* ---- Motion ------------------------------------------------------------- */ --transition: 140ms ease; /* ---- Overlay channels --------------------------------------------------- Not colours: raw "r, g, b" triplets consumed as rgba(var(--overlay), a) by the legacy call sites that tint a surface by alpha. --overlay is the ink-coloured tint (light on dark), --overlay-inv its opposite. They must be restated per theme rather than aliased, because they are not colours. */ --overlay: 255, 255, 255; --overlay-inv: 0, 0, 0; /* ---- Scrim -------------------------------------------------------------- The wash behind a modal or a mobile drawer. NOT a theme-inverted tint: a scrim's job is to push the page back, and pushing back always means darker. Built from --overlay-inv it would go WHITE in light theme, lifting the page to the same value as the dialog sitting on it. */ --scrim: rgba(0, 0, 0, 0.55); } [data-theme="light"] { --canvas: #ECEEF1; --background: #F1F2F4; --surface: #F7F8FA; --card: #FFFFFF; --card-hover: #F7F8FA; --popover: #FFFFFF; --foreground: #1B1E24; /* #4A5260 cleared 4.5:1 on the card but measured 4.28:1 on the tinted panels this text also lands on, so it is a shade darker than the obvious choice. */ --foreground-muted: #414957; --foreground-subtle: #5F6879; /* 4.9:1 on the tinted panel; #667085 was 4.46:1 there */ --border: #DCDFE4; --border-strong: #C6CAD1; /* Saturated neon fails contrast on white; the light theme uses deeper, print-friendly versions of the same hues. Roles are unchanged. --brand is one step darker than --success on purpose: it is the intent whose SOLID fill carries white ink (primary buttons, active pills), and white on #059669 is 3.77:1, under the AA floor. #047857 takes it to 5.5:1. */ --brand: #047857; --brand-ink: #FFFFFF; --primary-subtle: rgba(5, 150, 105, 0.10); --success: #059669; --success-ink: #FFFFFF; --success-subtle: rgba(5, 150, 105, 0.10); --danger: #E11D48; --danger-ink: #FFFFFF; --danger-subtle: rgba(225, 29, 72, 0.10); --warning: #B45309; --warning-ink: #FFFFFF; --warning-subtle: rgba(180, 83, 9, 0.10); --info: #0284C7; --info-ink: #FFFFFF; --info-subtle: rgba(2, 132, 199, 0.10); --accent: #7C3AED; --accent-strong: #5B21B6; /* #7C3AED as text measured 2.05:1 on its own tint */ --neutral-subtle: rgba(74, 82, 96, 0.10); /* Text-on-tint inks. These are what a `color:` rule must use - the fills above are too light against a 10% tint on a near-white card. */ --primary-strong: #036B4E; --success-strong: #047857; --danger-strong: #BE123C; --warning-strong: #92400E; --info-strong: #0369A1; /* Chart series, deepened for a light surface while keeping the hue order. */ --chart-1: #059669; --chart-2: #7C3AED; --chart-3: #B45309; --chart-4: #0284C7; --chart-5: #BE123C; --overlay: 0, 0, 0; --overlay-inv: 255, 255, 255; /* Less alpha needed to separate from a pale page. */ --scrim: rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); } /* ============================================================================ LEGACY ALIASES Everything below exists so the ~5,750 lines written against the old appearance-named palette keep working unchanged. Each maps onto a role above, so both themes now flow from ONE definition instead of two parallel palettes. Do not use these in new code. When a component is touched, swap its var(--white) for var(--foreground), var(--gray-500) for var(--foreground-subtle), and so on, and delete its [data-theme="light"] override in 21 - the override only exists because the name lied. ============================================================================ */ :root, [data-theme="light"] { --black: var(--canvas); --bg: var(--background); --bg-elevated: var(--surface); --bg-card: var(--card); /* Ink scale. 100-500 are text weights, darkest to lightest on dark theme. */ --white: var(--foreground); --gray-100: var(--foreground); --gray-200: var(--foreground-muted); --gray-300: var(--foreground-muted); --gray-400: var(--foreground-muted); --gray-500: var(--foreground-subtle); /* 600-800 are LINE and SURFACE weights, not ink - which is precisely why the old light theme had to invert them from dark greys to light ones by hand. */ --gray-600: var(--border-strong); --gray-700: var(--border); --gray-800: var(--surface); /* --green maps to the INK, not the fill. The legacy palette had one green and the old code paints TEXT with it - account links, status badges, headings. Aliased to --success (#059669 in light) those measured 3.3-3.7:1 on a white card, under the 4.5 floor; --success-strong (#047857) takes them to 5.5:1. Identical in dark theme, where the two are the same value, so this is a light-theme-only correction. --green-border keeps the fill, which is what a border wants. */ --green: var(--success-strong); --green-dim: var(--success-subtle); --green-bg: var(--success-subtle); --green-border: var(--success); --cyan: var(--info); --purple: var(--accent-strong); --yellow: var(--warning); }