/* * RitualOS design tokens. * * One vocabulary for the whole app, consumed by every stylesheet and by the per-request block * in app/shell/head.php. Nothing else declares a colour, a radius or a duration. * * ── Layer order ───────────────────────────────────────────────────────────────────────────── * Declared once here. Unlayered CSS beats every layer, which is what lets a page's own sheet * still win over the shared component layer during a migration. * * ── The look ──────────────────────────────────────────────────────────────────────────────── * RitualOS is a Windows 10 style operating system, so the tokens are the Fluent ones: neutral * flat surfaces with a single accent, sharp corners (2px on controls, 0 on windows), acrylic * only on chrome that floats over the desktop (taskbar, Start, flyouts, Action Center), and * fast decelerating motion. The skin that applies them lives in assets/css/fluent.css. * * ── Theming ───────────────────────────────────────────────────────────────────────────────── * is rendered server-side from settings.theme_mode, so * there is no flash and no pre-paint inline script. Dark is the base (:root); light is a set * of overrides, duplicated for [data-theme="system"] under the light media query because a * selector list would apply light unconditionally. Both light blocks are generated from the * same text, so they cannot drift. * * Three more attributes on are effect switches, written so that ABSENCE means the * default Windows behaviour: * data-transparency="0" turns acrylic off (opaque chrome) * data-accent-chrome="none" keeps the accent off title bars; "titlebars taskbar" tints * the taskbar, Start and Action Center as well * data-density="compact" tighter spacing * * ── Aliases ───────────────────────────────────────────────────────────────────────────────── * The Aero-era names (--glass-*, --aero-*, --halo, --aurora-*, --glow-*) are kept as aliases * onto flat values so the module stylesheets that still reference them keep resolving; each * is a no-op or a flat surface now. tools/tokencheck.py is what enforces that every name used * is defined somewhere, and this is where. */ @layer tokens, base, components, shell, pages, utilities; @layer tokens { :root { /* ── accent ──────────────────────────────────────────────────────────────────────────── --accent and --accent-contrast are overridden per user by the nonced block in app/shell/head.php; everything below derives from them. Windows blue is the default. */ --accent: #0078d7; --accent-contrast: #ffffff; --accent-light1: color-mix(in oklab, var(--accent), white 18%); --accent-light2: color-mix(in oklab, var(--accent), white 36%); --accent-dark1: color-mix(in oklab, var(--accent), black 18%); --accent-dark2: color-mix(in oklab, var(--accent), black 36%); --accent-hover: var(--accent-light1); --accent-press: var(--accent-dark1); --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 55%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent); --accent-text: color-mix(in oklab, var(--accent), white 28%); --accent-grad-end: var(--accent-light1); --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-grad-end) 100%); /* ── surfaces ────────────────────────────────────────────────────────────────────────── Windows 10 dark neutrals. Real elevation steps rather than translucent panes. */ --surface-0: #000000; --surface-1: #101010; --surface-2: #1f1f1f; --surface-3: #2b2b2b; --surface-4: #333333; --surface-inset: #0d0d0d; --surface-scrim: rgba(0, 0, 0, 0.60); /* Overlay tints: the "reveal" hover pair. Inverted in light mode. */ --surface-raise-1: rgba(255, 255, 255, 0.04); --surface-raise-2: rgba(255, 255, 255, 0.08); --surface-raise-3: rgba(255, 255, 255, 0.12); /* ── acrylic ─────────────────────────────────────────────────────────────────────────── Fluent acrylic is a blurred, tinted, faintly noisy pane. It belongs on chrome that floats over the desktop, never on content. --acrylic-filter switches to none when the user turns transparency off (data-transparency="0"). */ --acrylic-blur: 30px; --acrylic-saturate: 1.25; --acrylic-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate)); --acrylic-tint: rgba(32, 32, 32, 0.80); --acrylic-tint-deep: rgba(24, 24, 24, 0.88); --acrylic-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); --taskbar-bg: rgba(16, 16, 16, 0.85); --start-bg: rgba(31, 31, 31, 0.85); /* Legacy glass names, aliased. Panes that read these get a flat surface. */ --glass-blur: var(--acrylic-blur); --glass-saturate: var(--acrylic-saturate); --glass-brightness: 1; --glass-filter: var(--acrylic-filter); --glass-1: rgba(31, 31, 31, 0.80); --glass-2: rgba(31, 31, 31, 0.88); --glass-3: rgba(24, 24, 24, 0.92); --glass-blend: normal; --glass-edge: rgba(255, 255, 255, 0.12); --glass-edge-soft: rgba(255, 255, 255, 0.07); --glass-highlight: 0 0 0 0 transparent; --glass-sheen: linear-gradient(transparent, transparent); --glass-bg: var(--surface-2); --glass-border: var(--border-default); --halo: 0 0 0 transparent; --glow-accent: 0 0 0 1px var(--accent-line); --glow-soft: 0 0 0 0 transparent; --aero-frost: linear-gradient(transparent, transparent); --aero-gloss: linear-gradient(transparent, transparent); --aero-bevel: 0 0 0 0 transparent; --aero-edge: 0 0 0 1px var(--border-strong); --aero-rim: 0 0 0 1px var(--accent-line); --aero-rim-strong: 0 0 0 1px var(--accent); --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; --aurora-4: transparent; /* ── borders ───────────────────────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.20); /* ── text ──────────────────────────────────────────────────────────────────────────── */ --text-primary: #ffffff; --text-secondary: #e6e6e6; --text-muted: #a0a0a0; --text-faint: #6e6e6e; --text-on-accent: var(--accent-contrast); /* ── state ─────────────────────────────────────────────────────────────────────────── */ --success: #6ccb5f; --success-soft: color-mix(in srgb, var(--success) 14%, transparent); --success-line: color-mix(in srgb, var(--success) 45%, transparent); --success-text: #6ccb5f; --danger: #ff5f56; --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent); --danger-line: color-mix(in srgb, var(--danger) 45%, transparent); --danger-text: #ff7b72; --warning: #fce100; --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent); --warning-line: color-mix(in srgb, var(--warning) 45%, transparent); --warning-text: #ffd23f; --info: #4cc2ff; --info-soft: color-mix(in srgb, var(--info) 14%, transparent); --info-line: color-mix(in srgb, var(--info) 45%, transparent); --info-text: #60cdff; --close-red: #e81123; /* ── per-app accents ─────────────────────────────────────────────────────────────────── The office suite reads as a suite of distinct applications rather than one application wearing a dozen names: an app passes one of these as spec.ribbon.accent and it becomes --office-accent, which tints the tab underline, pressed toggles and the current find hit. Defined once rather than per theme, like --success and --danger above and for the same reason: each sits near 45% lightness, so it works as a fill on the dark ground and on the light one, and takes --accent-contrast (white) as its text either way. */ --app-accent-slate: #5d7a92; --app-accent-blue: #2b7cd3; --app-accent-green: #1a8d55; --app-accent-amber: #cf6a1f; --app-accent-violet: #7a53c8; --app-accent-teal: #0e8d8f; --app-accent-indigo: #4a5fc1; --app-accent-plum: #a53d8c; --app-accent-cyan: #1580a0; --app-accent-red: #b8443f; --app-accent-mint: #22936f; --app-accent-sky: #2c7fc4; /* ── elevation ─────────────────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 16px -8px rgba(0, 0, 0, 0.50); --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 32px -12px rgba(0, 0, 0, 0.60); --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.50), 0 32px 64px -16px rgba(0, 0, 0, 0.70); --shadow-accent: 0 4px 16px -4px var(--accent-glow); /* ── spacing, 4px base ─────────────────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ── radius ──────────────────────────────────────────────────────────────────────────── Windows 10 is square. Controls get 2px, panels 4px; windows and menus get none. */ --r-xs: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 4px; --r-xl: 8px; --r-full: 999px; /* ── type ──────────────────────────────────────────────────────────────────────────── */ --font-display: 'Segoe UI Variable Display', 'Segoe UI', 'Open Sans', system-ui, sans-serif; --font-body: 'Segoe UI Variable Text', 'Segoe UI', 'Open Sans', 'Inter', system-ui, sans-serif; --font-mono: 'Cascadia Mono', 'Cascadia Code', 'Consolas', 'IBM Plex Mono', ui-monospace, monospace; --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-base: 0.875rem; --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); --fs-hero: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.5; --fw-light: 300; --fw-semilight: 350; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-wide: 0.06em; /* ── z-index ───────────────────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-broadcast: 90; --z-header: 100; --z-rail: 110; --z-drawer-overlay: 300; --z-drawer: 310; --z-dropdown: 400; --z-actioncenter: 420; --z-modal-overlay: 500; --z-modal: 510; --z-palette: 600; --z-context: 650; --z-toast: 700; --z-lock: 10000; /* ── motion ──────────────────────────────────────────────────────────────────────────── Fluent timings: fast in, decelerating out. */ --dur-fast: 100ms; --dur: 167ms; --dur-slow: 250ms; --dur-slower: 333ms; --ease-decel: cubic-bezier(0.1, 0.9, 0.2, 1); --ease-accel: cubic-bezier(0.7, 0, 1, 0.5); --ease-out: var(--ease-decel); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* ── focus ───────────────────────────────────────────────────────────────────────────── Windows draws a 2px reveal rectangle in the text colour, not the accent. */ --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-primary); /* ── shell metrics ─────────────────────────────────────────────────────────────────── */ --topbar-h: 48px; --taskbar-h: 40px; --win-bar-h: 32px; --caption-w: 46px; --start-w: 648px; --start-h: 640px; --ac-w: 360px; --flyout-w: 360px; --rail-w: 240px; --rail-w-collapsed: 48px; --content-max: 1440px; /* ── wallpaper and page background ─────────────────────────────────────────────────── --wallpaper is a CSS background value set per user by app/shell/head.php (a preset from app/lib/theme.php, or an image URL). --theme-bg-start/-end are the user's solid-colour pair, used by the "solid" wallpaper and as the floor under everything. */ --theme-bg-start: #0c2340; --theme-bg-end: #003a70; --wallpaper: radial-gradient(120% 80% at 50% 45%, #0f4c8a 0%, #0c2340 55%, #050d1a 100%); --app-bg: var(--surface-1); } /* ── effect switches ────────────────────────────────────────────────────────────────────── */ [data-transparency="0"] { --acrylic-filter: none; --glass-filter: none; --acrylic-tint: var(--surface-2); --acrylic-tint-deep: var(--surface-1); --taskbar-bg: var(--surface-1); --start-bg: var(--surface-2); --glass-1: var(--surface-2); --glass-2: var(--surface-2); --glass-3: var(--surface-1); } /* ── light ──────────────────────────────────────────────────────────────────────────────── Only the values that must change. Everything else inherits from :root above. */ [data-theme="light"] { --surface-0: #f3f3f3; --surface-1: #ffffff; --surface-2: #fafafa; --surface-3: #f0f0f0; --surface-4: #e6e6e6; --surface-inset: #f9f9f9; --surface-scrim: rgba(0, 0, 0, 0.40); --surface-raise-1: rgba(0, 0, 0, 0.03); --surface-raise-2: rgba(0, 0, 0, 0.06); --surface-raise-3: rgba(0, 0, 0, 0.09); --acrylic-tint: rgba(243, 243, 243, 0.80); --acrylic-tint-deep: rgba(238, 238, 238, 0.88); --taskbar-bg: rgba(238, 238, 238, 0.85); --start-bg: rgba(243, 243, 243, 0.85); --glass-1: rgba(255, 255, 255, 0.80); --glass-2: rgba(255, 255, 255, 0.88); --glass-3: rgba(243, 243, 243, 0.92); --glass-edge: rgba(0, 0, 0, 0.12); --glass-edge-soft: rgba(0, 0, 0, 0.07); --glass-blend: normal; --glass-brightness: 1; --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.11); --border-strong: rgba(0, 0, 0, 0.20); --text-primary: #000000; --text-secondary: #1a1a1a; --text-muted: #5a5a5a; --text-faint: #8a8a8a; --accent-contrast: #ffffff; --accent-text: color-mix(in oklab, var(--accent), black 18%); --halo: 0 0 0 transparent; --success-text: #0f7b0f; --danger-text: #c42b1c; --warning-text: #9d5d00; --info-text: #005fb8; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.12); --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 16px 32px -12px rgba(0, 0, 0, 0.18); --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.14), 0 32px 64px -16px rgba(0, 0, 0, 0.28); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--text-primary); --app-bg: var(--surface-0); } /* "Follow the system" resolves to the same light overrides. Duplicated rather than shared because a selector list would apply light unconditionally to [data-theme="system"]. */ @media (prefers-color-scheme: light) { [data-theme="system"] { --surface-0: #f3f3f3; --surface-1: #ffffff; --surface-2: #fafafa; --surface-3: #f0f0f0; --surface-4: #e6e6e6; --surface-inset: #f9f9f9; --surface-scrim: rgba(0, 0, 0, 0.40); --surface-raise-1: rgba(0, 0, 0, 0.03); --surface-raise-2: rgba(0, 0, 0, 0.06); --surface-raise-3: rgba(0, 0, 0, 0.09); --acrylic-tint: rgba(243, 243, 243, 0.80); --acrylic-tint-deep: rgba(238, 238, 238, 0.88); --taskbar-bg: rgba(238, 238, 238, 0.85); --start-bg: rgba(243, 243, 243, 0.85); --glass-1: rgba(255, 255, 255, 0.80); --glass-2: rgba(255, 255, 255, 0.88); --glass-3: rgba(243, 243, 243, 0.92); --glass-edge: rgba(0, 0, 0, 0.12); --glass-edge-soft: rgba(0, 0, 0, 0.07); --glass-blend: normal; --glass-brightness: 1; --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.11); --border-strong: rgba(0, 0, 0, 0.20); --text-primary: #000000; --text-secondary: #1a1a1a; --text-muted: #5a5a5a; --text-faint: #8a8a8a; --accent-contrast: #ffffff; --accent-text: color-mix(in oklab, var(--accent), black 18%); --halo: 0 0 0 transparent; --success-text: #0f7b0f; --danger-text: #c42b1c; --warning-text: #9d5d00; --info-text: #005fb8; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.12); --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.12), 0 16px 32px -12px rgba(0, 0, 0, 0.18); --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.14), 0 32px 64px -16px rgba(0, 0, 0, 0.28); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--text-primary); --app-bg: var(--surface-0); } } /* Opaque chrome in light mode, when transparency is off. */ [data-theme="light"][data-transparency="0"] { --acrylic-tint: var(--surface-0); --acrylic-tint-deep: var(--surface-4); --taskbar-bg: var(--surface-4); --start-bg: var(--surface-0); } /* Denser layout for people who want more on screen. Only the values worth changing. */ [data-density="compact"] { --sp-4: 0.75rem; --sp-5: 1rem; --sp-6: 1rem; --sp-8: 1.5rem; --fs-base: 0.8125rem; } }