/* * Tuli Admin — design tokens, mirrored from ui/frame's SCSS palette * (see ui/frame/src/styles/config/_colors.scss). * * The full ui/frame palette is exposed verbatim. The pre-existing * `--tuli-*` tokens are aliased to ui/frame equivalents so per-view CSS * keeps working without rewrites. * * Theme switching: ``. Bootstrap's * `data-bs-theme` is also set in lockstep so Bootstrap components flip * alongside our custom styles. */ :root, [data-theme="light"] { /* ---- ui/frame palette --------------------------------------------- */ --black: #000000; --white: #ffffff; --light-side: #FFFEFF; --dark-side: #0D1216; --bloody-100: #A70000; --bloody-75: #FF0000; --bloody-50: #FF5252; --bloody-25: #FF7B7B; --bloody-10: #FFBABA; --bloody-5: #FFF9F9; --mustard-100: #A98600; --mustard-75: #DAB600; --mustard-50: #E9D700; --mustard-25: #F8ED62; --mustard-10: #FFF9AE; --mustard-5: #FFFDE0; --vanilla: #FFFEF3; --green-dark: #002506; --wimbledon-100: #009C1A; --wimbledon-75: #22B600; --wimbledon-50: #26CC00; --wimbledon-25: #7BE382; --wimbledon-10: #D2F2D4; --bluesky-100: #123662; --bluesky-80: #164278; --bluesky-75: #1B5192; --bluesky-60: #5896E1; --bluesky-50: #7FAFE8; --bluesky-40: #A8C8F0; --bluesky-25: #CDE0F6; --bluesky-10: #F1F6FD; --gray-25: #FCFCFC; --gray-100: #F2F3F5; --gray-200: #EFF1F0; --gray-300: #E6EBEF; --gray-400: #D1D2D6; --gray-500: #A0B7CF; --gray-600: #666666; --gray-700: #757575; --rose-lemonade: #E56BA2; --rose-lemonade-light: #EC98BF; --violet-red: #E85274; --pink-dark: #D1005E; --graph-1: #FF7A8F; --graph-2: #FF947A; --graph-3: #FFB369; --graph-4: #FFD663; --graph-5: #F9F871; --purple-5: #F4EFFD; --purple-25: #CEBCF6; --purple-75: #9670E4; --purple-100: #8F63E9; --purple-125: #7036E2; --sunflare-gradient: linear-gradient(135deg, #E56BA2 0%, #FF8785 35%, #FF947A 60%, #FFB369 75%); /* Fonts */ --primary-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --secondary-font: "Iosevka", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; --fw-700: 700; --fw-600: 600; --fw-500: 500; --fw-400: 400; --fw-300: 300; /* Layout */ --navbar-height: 68px; --sidebar-width: 79px; /* ---- App chrome (navbar / sidebar / offcanvas) --------------------- * * Dedicated tokens so the shell chrome is themed independently of the * ui/frame --bluesky-* palette (which stays the semantic "info" blue). * Hover/control/border use white-alpha so they read on any navy depth. */ --app-navbar-bg: #0E2236; /* deep desaturated navy */ --app-sidebar-bg: #122A41; --app-chrome-text: #C5D4E6; /* labels / icons */ --app-chrome-text-strong: #FFFFFF; /* hover / active text */ --app-chrome-hover: rgba(255, 255, 255, 0.08); --app-chrome-control: rgba(255, 255, 255, 0.10); /* user-pill, toggle, collapsed icon */ --app-chrome-control-hover: rgba(255, 255, 255, 0.18); --app-chrome-border: rgba(255, 255, 255, 0.10); /* dividers, sub-item rail, scrollbar */ --app-chrome-active: var(--sunflare-gradient); --app-chrome-accent: var(--rose-lemonade); /* ---- Compat: --tuli-* aliases used by per-view CSS ----------------- */ --tuli-primary: var(--rose-lemonade); --tuli-primary-hover: var(--rose-lemonade-light); --tuli-primary-soft: var(--purple-5); --tuli-on-primary: var(--light-side); --tuli-success: var(--wimbledon-100); --tuli-success-soft: var(--wimbledon-10); --tuli-warning: var(--graph-3); --tuli-warning-soft: var(--mustard-10); --tuli-danger: var(--bloody-75); --tuli-danger-soft: var(--bloody-5); --tuli-info: var(--bluesky-60); --tuli-info-soft: var(--bluesky-10); --tuli-bg: var(--gray-25); --tuli-canvas: var(--gray-25); --tuli-surface: var(--light-side); --tuli-surface-muted: var(--gray-100); --tuli-surface-hover: var(--gray-100); --tuli-border: var(--gray-300); --tuli-border-soft: var(--gray-200); --tuli-text: var(--dark-side); --tuli-text-muted: var(--gray-600); --tuli-text-faint: var(--gray-500); --tuli-debit: var(--bloody-75); --tuli-credit: var(--wimbledon-100); --tuli-radius-sm: 4px; --tuli-radius-md: 6px; --tuli-radius-lg: 10px; --tuli-radius-pill: 9999px; --tuli-shadow-sm: 0 1px 2px rgba(13, 18, 22, 0.06); --tuli-shadow-md: 0 4px 12px rgba(13, 18, 22, 0.08); /* Bootstrap overrides */ --bs-primary: var(--rose-lemonade); --bs-primary-rgb: 229, 107, 162; --bs-link-color: var(--bluesky-60); --bs-link-color-rgb: 88, 150, 225; --bs-link-hover-color: var(--bluesky-75); --bs-body-color: var(--dark-side); --bs-body-bg: var(--tuli-canvas); --bs-border-color: var(--gray-300); } /* Dark mode (admin-app extension; not native to ui/frame). * Rules: * - --light-side / --dark-side stay LITERAL — they're used for text on * always-dark backgrounds (navbar, sidebar) where contrast must not flip. * - --gray-* shift to dark surface values so light surfaces inherit them. * - --tuli-* tokens (text/canvas/surface/border) flip to dark equivalents. */ [data-theme="dark"] { --gray-25: #0F1418; --gray-100: #161B20; --gray-200: #1A2026; --gray-300: #232A31; --gray-400: #2F3942; --gray-500: #6B7A8B; --gray-600: #A6B0BA; --gray-700: #C6CDD3; --tuli-bg: #0D1216; --tuli-canvas: #0D1216; --tuli-surface: #161B20; --tuli-surface-muted: #1A2026; --tuli-surface-hover: #1A2026; --tuli-border: #232A31; --tuli-border-soft: #1A2026; --tuli-text: #F2F3F5; --tuli-text-muted: #A6B0BA; --tuli-text-faint: #6B7A8B; --purple-5: #1F1A2E; /* Chrome blends into the #0D1216 canvas; hairline dividers define edges. * --app-chrome-active / --app-chrome-accent inherit (gradient + rose). */ --app-navbar-bg: #0C131C; --app-sidebar-bg: #0E1620; --app-chrome-text: #AEBED1; --app-chrome-text-strong: #F2F3F5; --app-chrome-hover: rgba(255, 255, 255, 0.05); --app-chrome-control: rgba(255, 255, 255, 0.07); --app-chrome-control-hover: rgba(255, 255, 255, 0.12); --app-chrome-border: rgba(255, 255, 255, 0.08); --bs-body-color: #F2F3F5; --bs-body-bg: #0D1216; --bs-border-color: #232A31; }