@use 'sass:color'; // Dark theme overrides — opt-in via `[data-theme="dark"]` on . // Drive the toggle from `WrTheme` (provided automatically with // `provideWrTheme(...)`). // // Only semantic tokens flip — palette hues stay so brand-coloured // elements look the same regardless of theme. // Intents re-tuned for the dark canvas. Looped (below) so each gets the // FULL symmetric shade set — the hand blocks used to ship only base+rgb, // leaving -light/-dark/-lighter/-darker baked from the LIGHT palette. // (primary keeps its hand-tuned block; info stays its light values.) $dark-intents: ( success: #34c759, warning: #ffcc33, danger: #ff5c5c, ); [data-theme='dark'] { // Canvas (was `--wr-color-white` in light mode) // Deeper than slate-900 so an elevated surface in slate-800 reads // as a real layer rather than vanishing into the background. --wr-color-white: #0b1120; --wr-color-white-rgb: 11, 17, 32; // Text // Softer than pure-white — easier on the eyes for long reading. --wr-color-dark: #e6ebf3; --wr-color-dark-rgb: 230, 235, 243; // `*-contrast` values are baked at SCSS compile time from the light // palette, so they don't auto-flip when `--wr-color-dark` / // `--wr-color-white` are reassigned for dark mode. Tooltip-style // surfaces (`bg: dark; color: dark-contrast`) would render // white-on-white without this override; re-pair them by hand here. --wr-color-dark-contrast: #0b1120; --wr-color-white-contrast: #e6ebf3; // Borders / tints (was `--wr-color-light`) // Used for two jobs at once: 1-px borders and translucent surface // tints (`rgba(light-rgb, 0.4)` etc.). Sits between the original // slate-800 (#1f2a3d, invisible) and a brighter slate-700 (#334155, // looks like glowing pencil lines). This value reads as a real // divider on cards / inputs without shouting — matches what Vercel // and shadcn ship for the same job. --wr-color-light: #262f44; --wr-color-light-rgb: 38, 47, 68; // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text); // the dark surface above needs light text instead. --wr-color-light-contrast: #e6ebf3; // `*-lighter` / `*-darker` are baked at SCSS compile time from the // LIGHT palette (slate-300 ± 10% lightness ≈ #e8eef5), so without // these overrides the showcase header / sidebar would draw a // bright slate-200 hairline on the dark canvas. Re-derive with the // semantics inverted: "lighter" still means "subtler hairline" // (closer to canvas, so darker absolute color), "darker" still // means "stronger divider" (further from canvas, so lighter). --wr-color-light-lighter: #1a2236; --wr-color-light-darker: #3a4661; // Secondary text (was `--wr-color-medium`) // Lifted from slate-400 → slate-300-ish for better legibility on // the deeper canvas. --wr-color-medium: #9aa6b8; --wr-color-medium-rgb: 154, 166, 184; // Brand-color retune // The default primary (#3969e2) reads a touch dim on the deep // canvas. Bump the base + shade derivations so hover / focus rings // stay visible against slate-900. --wr-color-primary: #5b85ff; --wr-color-primary-rgb: 91, 133, 255; --wr-color-primary-light: #7a9eff; --wr-color-primary-dark: #2f56c9; --wr-color-primary-lighter: #99b6ff; --wr-color-primary-darker: #1f3a99; // success / warning / danger — retuned bases now get the FULL symmetric // shade set in dark too (generated, so no intent can silently drift). @each $name, $base in $dark-intents { --wr-color-#{$name}: #{$base}; --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')}; --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)}; --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)}; --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)}; --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)}; } // Elevation // Black shadows at light-mode alphas vanish on the deep canvas; same // geometry, much stronger ink, so panels keep reading as layers. --wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%); --wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%); --wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%); --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%); --wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%); color-scheme: dark; }