/* RV brand tokens + the brandable accent system. Translated from rv-theme/src/scss/_custom.scss. The Sass mixins rv-accent-tokens() and rv-palette-derive() are expanded here by hand; the color-mix()/oklch() expressions are the real runtime behaviour. */ :root { /* Base palette (source tokens from _variables.scss) */ --rv-success: #75C31B; --rv-warning: #ffc037; --rv-danger: #d83e7c; --rv-dark-blue: #253056; --rv-info: #0e8fce; --rv-black: #20222a; --rv-gray-50: #f6f7f8; --rv-gray-100: #ecedee; --rv-gray-200: #e6e7ec; --rv-gray-300: #d5d6dd; --rv-gray-400: #bec0ca; --rv-gray-500: #797a7f; --rv-gray-700: #4d4e55; --rv-gray-900: #111827; /* Bright palette — light, vibrant; the dark-mode semantic fills */ --rv-bright-blue: #85d3f9; --rv-bright-red: #fe78a4; --rv-bright-green: #a3e646; --rv-bright-gray: #c3c7e1; --rv-bright-yellow: #ffd540; /* Brandable accent — the per-app primary color. Override --rv-accent and --rv-accent-rgb on :root/, per subtree via [data-accent], or inline. */ --rv-accent: #0e8fce; --rv-accent-rgb: 14, 143, 206; /* @kind color */ /* Default accent IS the brand blue, so its dark-mode bright is pinned to info's bright blue rather than derived. */ --rv-accent-bright: #85d3f9; --rv-primary: var(--rv-accent); --rv-primary-hover: var(--rv-accent-hover); --rv-primary-active: var(--rv-accent-active); --rv-primary-emphasis: var(--rv-accent-emphasis); --rv-primary-subtle: var(--rv-accent-subtle); --rv-primary-border-subtle: var(--rv-accent-border-subtle); /* Fixed semantic hovers (not brandable) */ --rv-success-hover: rgb(93.6, 156, 21.6); --rv-warning-hover: rgb(204, 153.6, 44); --rv-danger-hover: rgb(172.8, 49.6, 99.2); /* Elevated panel surface — cards, navbar, pill tracks */ --rv-surface: #fff; /* Layout / typography tokens */ --rv-card-padding-x: 1.25rem; --rv-card-padding-y: .75rem; --rv-pill-border-radius: 1.25rem; --rv-nav-pills-padding-x-small: .5rem; --rv-nav-pills-padding-y-small: .25rem; --rv-text-bold: 600; /* @kind font */ --rv-logo-part-1: var(--rv-dark-blue); --rv-logo-part-2: var(--rv-info); } /* ── Accent shades + Bootstrap wiring ───────────────────────────────────── Emitted on :root (global accent) AND [data-accent] so scoped overrides recompute. Thresholds from _custom.scss: $rv-fill-label-l-threshold: 0.74 $rv-accent-dark-min-l: 0.65 $rv-accent-light-max-l: 0.65 $rv-accent-chroma-boost: 0.2 */ :root, [data-accent] { --rv-accent-hover: color-mix(in srgb, var(--rv-accent), #000 12%); --rv-accent-active: color-mix(in srgb, var(--rv-accent), #000 20%); --rv-accent-emphasis: color-mix(in srgb, var(--rv-accent), #000 40%); --rv-accent-border-subtle: color-mix(in srgb, var(--rv-accent), #fff 65%); --rv-accent-subtle: color-mix(in srgb, var(--rv-accent), #fff 80%); --rv-accent-tint: var(--rv-accent-bright, oklch(from var(--rv-accent) max(l, 0.65) calc(c + max(0, 0.65 - l) * 0.2) h)); --rv-accent-shade: var(--rv-accent-ink, oklch(from var(--rv-accent) min(l, 0.65) calc(c + max(0, l - 0.65) * 0.2) h)); --rv-on-accent: #fff; --rv-on-accent: oklch(from var(--rv-accent) clamp(0, (0.74 - l) * 1000, 1) 0 0); --rv-on-accent-tint: #fff; --rv-on-accent-tint: oklch(from var(--rv-accent-tint) clamp(0, (0.74 - l) * 1000, 1) 0 0); --bs-primary: var(--rv-accent); --bs-primary-rgb: var(--rv-accent-rgb); --bs-primary-text-emphasis: var(--rv-accent-emphasis); --bs-primary-bg-subtle: var(--rv-accent-subtle); --bs-primary-border-subtle: var(--rv-accent-border-subtle); } /* A custom/preset accent is no longer the default blue — drop the pinned bright/ink so they derive (or an explicit override on this scope wins). */ [data-accent] { --rv-accent-bright: initial; --rv-accent-ink: initial } /* Built-in accent presets for the switcher */ [data-accent='blue'] { --rv-accent: #0e8fce; --rv-accent-rgb: 14, 143, 206; /* @kind color */ --rv-accent-bright: #85d3f9 } [data-accent='green'] { --rv-accent: #75C31B; --rv-accent-rgb: 117, 195, 27; /* @kind color */ } [data-accent='red'] { --rv-accent: #d83e7c; --rv-accent-rgb: 216, 62, 124; /* @kind color */ } [data-accent='yellow'] { --rv-accent: #ffc037; --rv-accent-rgb: 255, 192, 55; /* @kind color */ --rv-on-accent: #20222a } [data-accent='dark-blue'] { --rv-accent: #253056; --rv-accent-rgb: 37, 48, 86; /* @kind color */ } /* ── Semantic palette, light mode ───────────────────────────────────────── Light = saturated brand colors. primary follows the accent; info is always blue — never the accent. */ :root { --rv-fill-secondary: #797a7f; --rv-fill-success: #75C31B; --rv-fill-info: #0e8fce; --rv-fill-warning: #ffc037; --rv-fill-danger: #d83e7c; --rv-fill-light: #ecedee; --rv-fill-dark: #20222a; --rv-on-secondary: #fff; --rv-on-success: #fff; --rv-on-info: #fff; --rv-on-warning: #20222a; --rv-on-danger: #fff; --rv-on-light: #20222a; --rv-on-dark: #fff; --rv-fill-primary: var(--rv-accent); --rv-on-primary: var(--rv-on-accent); } /* rv-palette-derive(#fff, 80%, 65%, #000, 40%) */ :root { --rv-hover-primary: color-mix(in srgb, var(--rv-fill-primary), #000 10%); --rv-active-primary: color-mix(in srgb, var(--rv-fill-primary), #000 16%); --rv-subtle-primary: color-mix(in srgb, var(--rv-fill-primary), #fff 80%); --rv-border-primary: color-mix(in srgb, var(--rv-fill-primary), #fff 65%); --rv-emphasis-primary: color-mix(in srgb, var(--rv-fill-primary), #000 40%); --rv-hover-secondary: color-mix(in srgb, var(--rv-fill-secondary), #000 10%); --rv-active-secondary: color-mix(in srgb, var(--rv-fill-secondary), #000 16%); --rv-subtle-secondary: color-mix(in srgb, var(--rv-fill-secondary), #fff 80%); --rv-border-secondary: color-mix(in srgb, var(--rv-fill-secondary), #fff 65%); --rv-emphasis-secondary: color-mix(in srgb, var(--rv-fill-secondary), #000 40%); --rv-hover-success: color-mix(in srgb, var(--rv-fill-success), #000 10%); --rv-active-success: color-mix(in srgb, var(--rv-fill-success), #000 16%); --rv-subtle-success: color-mix(in srgb, var(--rv-fill-success), #fff 80%); --rv-border-success: color-mix(in srgb, var(--rv-fill-success), #fff 65%); --rv-emphasis-success: color-mix(in srgb, var(--rv-fill-success), #000 40%); --rv-hover-info: color-mix(in srgb, var(--rv-fill-info), #000 10%); --rv-active-info: color-mix(in srgb, var(--rv-fill-info), #000 16%); --rv-subtle-info: color-mix(in srgb, var(--rv-fill-info), #fff 80%); --rv-border-info: color-mix(in srgb, var(--rv-fill-info), #fff 65%); --rv-emphasis-info: color-mix(in srgb, var(--rv-fill-info), #000 40%); --rv-hover-warning: color-mix(in srgb, var(--rv-fill-warning), #000 10%); --rv-active-warning: color-mix(in srgb, var(--rv-fill-warning), #000 16%); --rv-subtle-warning: color-mix(in srgb, var(--rv-fill-warning), #fff 80%); --rv-border-warning: color-mix(in srgb, var(--rv-fill-warning), #fff 65%); --rv-emphasis-warning: color-mix(in srgb, var(--rv-fill-warning), #000 40%); --rv-hover-danger: color-mix(in srgb, var(--rv-fill-danger), #000 10%); --rv-active-danger: color-mix(in srgb, var(--rv-fill-danger), #000 16%); --rv-subtle-danger: color-mix(in srgb, var(--rv-fill-danger), #fff 80%); --rv-border-danger: color-mix(in srgb, var(--rv-fill-danger), #fff 65%); --rv-emphasis-danger: color-mix(in srgb, var(--rv-fill-danger), #000 40%); --rv-hover-light: color-mix(in srgb, var(--rv-fill-light), #000 10%); --rv-active-light: color-mix(in srgb, var(--rv-fill-light), #000 16%); --rv-subtle-light: color-mix(in srgb, var(--rv-fill-light), #fff 80%); --rv-border-light: color-mix(in srgb, var(--rv-fill-light), #fff 65%); --rv-emphasis-light: color-mix(in srgb, var(--rv-fill-light), #000 40%); --rv-hover-dark: color-mix(in srgb, var(--rv-fill-dark), #000 10%); --rv-active-dark: color-mix(in srgb, var(--rv-fill-dark), #000 16%); --rv-subtle-dark: color-mix(in srgb, var(--rv-fill-dark), #fff 80%); --rv-border-dark: color-mix(in srgb, var(--rv-fill-dark), #fff 65%); --rv-emphasis-dark: color-mix(in srgb, var(--rv-fill-dark), #000 40%); } /* ── Dark mode ─────────────────────────────────────────────────────────── Surfaces, gray-ramp flip, and the bright semantic fills. */ [data-bs-theme='dark'] { --rv-surface: #1b202d; /* Gray ramp flips: "50" becomes the darkest surface, "900" the lightest text */ --rv-gray-50: #2b3036; --rv-gray-100: #30363e; --rv-gray-200: #3a414b; --rv-gray-300: #454d58; --rv-gray-400: #79828d; --rv-gray-500: #8b929b; --rv-gray-700: #c7ccd2; --rv-gray-900: #f1f3f5; /* Dark-blue logo half would vanish on a dark navbar */ --rv-logo-part-1: var(--rv-gray-900); --rv-fill-secondary: #c3c7e1; --rv-fill-success: #a3e646; --rv-fill-info: #85d3f9; --rv-fill-warning: #ffd540; --rv-fill-danger: #fe78a4; --rv-fill-light: #e4e6f2; --rv-fill-dark: #3a414b; --rv-on-secondary: #20222a; --rv-on-success: #20222a; --rv-on-info: #20222a; --rv-on-warning: #20222a; --rv-on-danger: #20222a; --rv-on-light: #20222a; --rv-on-dark: #f1f3f5; --rv-fill-primary: var(--rv-accent-tint); --rv-on-primary: var(--rv-on-accent-tint); } /* rv-accent-tokens(#000, 80%, 60%, #fff, 30%) for dark */ [data-bs-theme='dark'], [data-bs-theme='dark'] [data-accent] { --rv-accent-emphasis: color-mix(in srgb, var(--rv-accent), #fff 30%); --rv-accent-border-subtle: color-mix(in srgb, var(--rv-accent), #000 60%); --rv-accent-subtle: color-mix(in srgb, var(--rv-accent), #000 80%); } /* rv-palette-derive(#000, 80%, 60%, #fff, 30%) for dark */ [data-bs-theme='dark'] { --rv-subtle-primary: color-mix(in srgb, var(--rv-fill-primary), #000 80%); --rv-border-primary: color-mix(in srgb, var(--rv-fill-primary), #000 60%); --rv-emphasis-primary: color-mix(in srgb, var(--rv-fill-primary), #fff 30%); --rv-subtle-secondary: color-mix(in srgb, var(--rv-fill-secondary), #000 80%); --rv-border-secondary: color-mix(in srgb, var(--rv-fill-secondary), #000 60%); --rv-emphasis-secondary: color-mix(in srgb, var(--rv-fill-secondary), #fff 30%); --rv-subtle-success: color-mix(in srgb, var(--rv-fill-success), #000 80%); --rv-border-success: color-mix(in srgb, var(--rv-fill-success), #000 60%); --rv-emphasis-success: color-mix(in srgb, var(--rv-fill-success), #fff 30%); --rv-subtle-info: color-mix(in srgb, var(--rv-fill-info), #000 80%); --rv-border-info: color-mix(in srgb, var(--rv-fill-info), #000 60%); --rv-emphasis-info: color-mix(in srgb, var(--rv-fill-info), #fff 30%); --rv-subtle-warning: color-mix(in srgb, var(--rv-fill-warning), #000 80%); --rv-border-warning: color-mix(in srgb, var(--rv-fill-warning), #000 60%); --rv-emphasis-warning: color-mix(in srgb, var(--rv-fill-warning), #fff 30%); --rv-subtle-danger: color-mix(in srgb, var(--rv-fill-danger), #000 80%); --rv-border-danger: color-mix(in srgb, var(--rv-fill-danger), #000 60%); --rv-emphasis-danger: color-mix(in srgb, var(--rv-fill-danger), #fff 30%); --rv-subtle-light: color-mix(in srgb, var(--rv-fill-light), #000 80%); --rv-border-light: color-mix(in srgb, var(--rv-fill-light), #000 60%); --rv-emphasis-light: color-mix(in srgb, var(--rv-fill-light), #fff 30%); --rv-subtle-dark: color-mix(in srgb, var(--rv-fill-dark), #000 80%); --rv-border-dark: color-mix(in srgb, var(--rv-fill-dark), #000 60%); --rv-emphasis-dark: color-mix(in srgb, var(--rv-fill-dark), #fff 30%); }