/* theme.css, Jaspr OS design tokens (THE one place for colour + surface) --------------------------------------------------------------------------- Every colour, blur, radius, shadow and timing value the shell uses lives here as a CSS custom property, mirroring the Bodach app's "one place to retune" philosophy. Components reference var(--os-*) and never hardcode a colour. Change an anchor here and the whole desktop moves. Identity: "Bodach dark + orange", a deep navy desktop, warm orange brand accent, frosted-glass window chrome. Original Jaspr OS look, no third-party OS assets. Two themes ship: :root -> DARK (default) :root[data-theme=light] -> LIGHT accent boot.js stamps data-theme onto from the stored preference; Settings flips it. Both themes keep the same orange brand so the identity is stable. */ :root { /* --- Brand anchors ------------------------------------------------------ A small number of solid anchors; every tint below is derived from these so a single edit cascades. */ --os-orange: #ff7a1a; /* primary brand accent */ --os-orange-bright: #ff9440; /* hover / highlight */ --os-orange-deep: #e5620a; /* pressed */ /* Navy family: desktop + chrome base. */ --os-navy-900: #060b16; /* darkest, desktop gradient bottom */ --os-navy-800: #0b1424; /* desktop gradient top */ --os-navy-700: #101d33; /* raised panels */ --os-navy-600: #17263f; /* window body fallback (behind glass) */ /* --- Opacity helpers (as ready-made rgba tints) ------------------------- JS/CSS can't call ink(a) like the app's JS tokens, so we expose the most used steps as named vars. White = "ink", black = "shade". */ --os-ink-04: rgba(255, 255, 255, 0.04); --os-ink-06: rgba(255, 255, 255, 0.06); --os-ink-08: rgba(255, 255, 255, 0.08); --os-ink-12: rgba(255, 255, 255, 0.12); --os-ink-18: rgba(255, 255, 255, 0.18); --os-ink-28: rgba(255, 255, 255, 0.28); --os-shade-24: rgba(0, 0, 0, 0.24); --os-shade-40: rgba(0, 0, 0, 0.40); --os-shade-60: rgba(0, 0, 0, 0.60); /* --- Semantic / role tokens (what components actually use) -------------- */ --os-text: #eaf0fa; /* body text on dark chrome */ --os-text-muted: #9db0cc; /* secondary labels, timestamps */ --os-text-dim: #6f81a0; /* disabled / faint */ --os-brand: var(--os-orange); --os-brand-hover: var(--os-orange-bright); --os-brand-contrast: #1a1000; /* text drawn ON an orange fill */ /* Frosted-glass surfaces. The colour is a translucent navy tint that sits over a backdrop-blur; a solid fallback is applied where blur is not supported (see @supports at the bottom). */ --os-glass: rgba(18, 30, 52, 0.55); --os-glass-strong: rgba(12, 22, 40, 0.78); /* taskbar, start menu */ --os-glass-titlebar: rgba(24, 38, 64, 0.62); --os-blur: 18px; --os-border: var(--os-ink-08); /* faint hairline between surfaces */ --os-border-strong: var(--os-ink-18); --os-focus-ring: var(--os-orange); /* active window / focused control */ --os-fill-soft: var(--os-ink-06); /* hover fill on chrome buttons */ --os-fill-hover: var(--os-ink-12); --os-danger: #ff5a5a; /* destructive actions (clear state) */ --os-success: #46d38a; /* Desktop backdrop (used when no wallpaper image is chosen). */ --os-desktop-top: var(--os-navy-800); --os-desktop-bottom: var(--os-navy-900); /* --- Geometry + motion ------------------------------------------------- */ --os-radius-sm: 6px; --os-radius: 10px; /* windows, menus */ --os-radius-lg: 16px; --os-radius-pill: 999px; --os-gap-xs: 4px; --os-gap-sm: 8px; --os-gap: 12px; --os-gap-lg: 18px; --os-taskbar-h: 52px; /* Shadows: soft, dark, layered, reads as glass lifting off the desktop. */ --os-shadow-window: 0 18px 50px -12px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4); --os-shadow-menu: 0 16px 40px -8px rgba(0, 0, 0, 0.6); --os-shadow-focus: 0 0 0 1px var(--os-ink-18), var(--os-shadow-window); /* Snappy, front-loaded motion (matches the app's "no slow Material slides" preference: 150-350ms with out-easing). */ --os-dur-fast: 140ms; --os-dur: 220ms; --os-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* out(cubic) */ --os-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* out(back) pop */ } /* --- LIGHT theme override --------------------------------------------------- Only the tokens that must change are re-declared; everything else (brand, geometry, motion) inherits from :root. Light keeps the orange brand and a softer glass over a pale blue-grey desktop. */ :root[data-theme="light"] { --os-navy-900: #c7d3e6; --os-navy-800: #dbe4f1; --os-navy-700: #eef2f9; --os-navy-600: #ffffff; --os-text: #172438; --os-text-muted: #4a5b74; --os-text-dim: #8493a8; --os-brand-contrast: #ffffff; --os-glass: rgba(255, 255, 255, 0.62); --os-glass-strong: rgba(244, 248, 255, 0.82); --os-glass-titlebar: rgba(255, 255, 255, 0.7); --os-ink-06: rgba(20, 34, 58, 0.05); --os-ink-08: rgba(20, 34, 58, 0.09); --os-ink-12: rgba(20, 34, 58, 0.12); --os-ink-18: rgba(20, 34, 58, 0.18); --os-border: rgba(20, 34, 58, 0.12); --os-border-strong: rgba(20, 34, 58, 0.22); --os-fill-soft: rgba(20, 34, 58, 0.05); --os-fill-hover: rgba(20, 34, 58, 0.1); --os-desktop-top: #e9eef7; --os-desktop-bottom: #cbd7ea; --os-shadow-window: 0 18px 44px -14px rgba(31, 51, 84, 0.4), 0 2px 6px rgba(31, 51, 84, 0.18); --os-shadow-menu: 0 14px 36px -10px rgba(31, 51, 84, 0.35); } /* Glass fallback: backdrop-filter is widely supported now, but where it is not (or is disabled for performance), swap the translucent surfaces for opaque navy so panels never render as unreadable see-through smears. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --os-glass: var(--os-navy-700); --os-glass-strong: var(--os-navy-800); --os-glass-titlebar: var(--os-navy-600); --os-blur: 0px; } }