/* * CartBun brand-palette catalog (PLAN.md Phase T.2). * * Each [data-palette="…"] block overrides ONLY the brand inputs declared in * tokens.css (--brand-hue / --brand-chroma / --brand-l / --brand-fg). tokens.css * derives --accent* / --focus-ring / --selection-bg from those, so a single * data-palette attribute on re-skins the whole app — in BOTH light and * dark, and always single-hue (brightness-only) by construction. * * LOAD ORDER: this file MUST be linked AFTER tokens.css, so a palette's * --brand-fg wins over the dark-mode default fg (matters for the vivid light * palettes that flip to dark text). * * Apply a palette by putting data-palette="" on : * - per product (server) : Branding:Palette in appsettings.json (CartBun.Server → App.razor) * - per product (static/marketing): edit the literal data-palette attribute in the host HTML * - per tenant (runtime) : stamped from tenant settings (PLAN.md Phase T.5) * An absent or unknown key falls back to the tokens.css defaults (indigo / hue-264). * * Keys MUST stay in sync with CartBun.Shared/Theming/BrandPalette.cs. * Reminder: --brand-l is the LIGHT base lightness; dark mode adds +0.10 (see * tokens.css). Vivid light hues raise --brand-l and set a dark --brand-fg so * text stays legible on the bright fill. */ /* Generic reset: every element carrying data-palette starts from the catalog defaults, so a block that only overrides (say) the hue still yields the default lightness/chroma rather than inheriting an ambient value. This makes per-palette preview swatches self-contained even when an ancestor (e.g. ) already has a different palette applied. Specificity equals the [data-palette="key"] blocks below, which come later in source order and therefore win for what they set. */ [data-palette] { --brand-hue: 264; --brand-chroma: 0.22; --brand-l: 0.55; } /* Each block ALSO sets --tint-hue (= the brand hue) so the neutral surfaces + canvas wash track the palette (warm for terracotta, cool for slate, etc.). Without it the neutrals stay at the tokens.css default hue and read cool/gray regardless of the chosen brand. */ /* ---- Core ---- */ [data-palette="indigo"] { --brand-hue: 264; --brand-chroma: 0.22; --tint-hue: 264; } /* == the tokens.css default, as a named pick */ [data-palette="violet"] { --brand-hue: 285; --brand-chroma: 0.19; --tint-hue: 285; } [data-palette="blue"] { --brand-hue: 245; --brand-chroma: 0.16; --tint-hue: 245; } [data-palette="teal"] { --brand-hue: 185; --brand-chroma: 0.12; --tint-hue: 185; } [data-palette="emerald"] { --brand-hue: 155; --brand-chroma: 0.15; --tint-hue: 155; } [data-palette="rose"] { --brand-hue: 15; --brand-chroma: 0.18; --tint-hue: 15; } [data-palette="magenta"] { --brand-hue: 330; --brand-chroma: 0.20; --tint-hue: 330; } [data-palette="salmon"] { --brand-hue: 28; --brand-chroma: 0.13; --tint-hue: 28; } /* ---- Muted & earthy — mature audience (30+); low chroma, white button text ---- */ [data-palette="sand"] { --brand-hue: 80; --brand-chroma: 0.045; --tint-hue: 80; } [data-palette="clay"] { --brand-hue: 45; --brand-chroma: 0.07; --tint-hue: 45; } [data-palette="slate"] { --brand-hue: 255; --brand-chroma: 0.05; --tint-hue: 255; } [data-palette="sage"] { --brand-hue: 140; --brand-chroma: 0.05; --tint-hue: 140; } [data-palette="terracotta"] { --brand-hue: 32; --brand-chroma: 0.095; --tint-hue: 32; } [data-palette="dustysalmon"] { --brand-hue: 28; --brand-chroma: 0.06; --tint-hue: 28; } /* ---- Vibrant & fluo — young audience (18–30); light hues raise --brand-l + dark --brand-fg ---- */ [data-palette="grape"] { --brand-hue: 305; --brand-chroma: 0.27; --brand-l: 0.56; --tint-hue: 305; } [data-palette="lemon"] { --brand-hue: 103; --brand-chroma: 0.18; --brand-l: 0.85; --brand-fg: oklch(0.25 0.03 103); --tint-hue: 103; } [data-palette="peach"] { --brand-hue: 52; --brand-chroma: 0.16; --brand-l: 0.74; --brand-fg: oklch(0.25 0.04 52); --tint-hue: 52; } [data-palette="lime"] { --brand-hue: 142; --brand-chroma: 0.24; --brand-l: 0.78; --brand-fg: oklch(0.25 0.05 142); --tint-hue: 142; } [data-palette="sky"] { --brand-hue: 230; --brand-chroma: 0.15; --brand-l: 0.78; --brand-fg: oklch(0.25 0.04 230); --tint-hue: 230; } [data-palette="brightsalmon"] { --brand-hue: 28; --brand-chroma: 0.155; --brand-l: 0.70; --brand-fg: oklch(0.25 0.05 28); --tint-hue: 28; }