/** * Liara Engine — Design Tokens * * Single source of truth for all visual design across Liara's documentation * properties (Doxygen API docs, mdBook user guides, the central hub page). * * Every other CSS file in `docs-shared` consumes the variables defined here. * To change a color globally, change it once in this file. * * ---------------------------------------------------------------------------- * Theme strategy * ---------------------------------------------------------------------------- * The theme is selected in this order of priority: * 1. An explicit user choice, persisted to `data-liara-theme` on * (set by the navbar's theme toggle). * 2. The system preference, via `prefers-color-scheme`. * 3. The light defaults below. * * IMPORTANT: dark mode values are declared twice — once in the * @media (prefers-color-scheme: dark) block, once in the explicit * [data-liara-theme="dark"] block. This redundancy is intentional. Keep them * in sync; a CI check (planned) will warn if they drift. * * In addition to light/dark, an opt-in dyslexia-friendly accessibility mode * is available via `data-liara-a11y-dyslexia="true"` on . This mode is * orthogonal to light/dark — it can be combined with either. See the * "Accessibility" section at the bottom of this file. * * ---------------------------------------------------------------------------- * Color philosophy * ---------------------------------------------------------------------------- * The palette is inspired by the soft pastel aesthetic of Enid Sinclair from * Wednesday: rose-pink primary, lavender secondary, cream-yellow accents, on * a near-white base with warm purple-black text. * * Semantic colors (success/warning/danger/info) are deliberately tinted * toward the Enid family rather than using stock UI colors: * - success uses sage rather than emerald * - warning uses peach rather than orange * - danger uses rose-red rather than fire-red * - info uses periwinkle rather than sky blue * They remain functionally distinguishable while keeping the doc visually * coherent. * * ---------------------------------------------------------------------------- * Naming convention * ---------------------------------------------------------------------------- * --liara--[-] * * Categories: brand (primary, secondary, accent), bg, text, border, * semantic (success/warning/danger/info), code, font, radius, * space, shadow, transition. * * Roles within a brand color: * - default mid-tone, the "main" version * - dark used for text or strong emphasis on the soft background * - soft very pale tint, used for hover/selection backgrounds * * Roles within a semantic color: * - bg pale background for the callout/badge * - fg text on top of bg, accessible contrast guaranteed * - border slightly stronger version of bg, for left-borders/strokes */ /* ============================================================================ * LIGHT THEME (default) * ========================================================================== */ :root, :root[data-liara-theme="light"] { /* --- Brand: primary (rose pink) ---------------------------------------- */ --liara-brand-primary: #F4A6C0; --liara-brand-primary-dark: #B7388A; --liara-brand-primary-soft: #FBE4EE; /* --- Brand: secondary (lavender) --------------------------------------- */ --liara-brand-secondary: #D1C4E9; --liara-brand-secondary-dark: #5E35B1; --liara-brand-secondary-soft: #EDE7F6; /* --- Brand: accent (cream yellow) -------------------------------------- */ --liara-brand-accent: #FFF4D6; --liara-brand-accent-dark: #B67E0E; /* --- Backgrounds ------------------------------------------------------- */ --liara-bg-page: #FFFAFC; /* the warm-white base of the page */ --liara-bg-surface: #F8F2F5; /* sidebars, code blocks, muted areas */ --liara-bg-elevated: #FFFFFF; /* cards, popovers, modals */ --liara-bg-overlay: rgba(45, 27, 46, 0.4); /* modal backdrop */ /* --- Borders ----------------------------------------------------------- */ --liara-border-default: #F0DCE7; --liara-border-strong: #E8C8D9; --liara-border-subtle: #F8E8F0; /* --- Text -------------------------------------------------------------- */ --liara-text-primary: #2D1B2E; /* warm purple-black, not pure black */ --liara-text-secondary: #6B5670; --liara-text-tertiary: #9C8997; --liara-text-on-primary: #FFFFFF; /* text on primary-dark backgrounds */ --liara-text-link: var(--liara-brand-primary-dark); --liara-text-link-hover: #8E2A6A; /* --- Semantic: success (sage) ------------------------------------------ */ --liara-semantic-success-bg: #DCEBE0; --liara-semantic-success-fg: #3F6F4D; --liara-semantic-success-border: #A8C8B0; /* --- Semantic: warning (peach) ----------------------------------------- */ --liara-semantic-warning-bg: #FCE5D6; --liara-semantic-warning-fg: #B5560D; --liara-semantic-warning-border: #F0BC9A; /* --- Semantic: danger (rose-red) --------------------------------------- */ --liara-semantic-danger-bg: #F8D5DC; --liara-semantic-danger-fg: #A93351; --liara-semantic-danger-border: #E89BAB; /* --- Semantic: info (periwinkle) --------------------------------------- */ --liara-semantic-info-bg: #DDE5F5; --liara-semantic-info-fg: #4A5FB8; --liara-semantic-info-border: #A8B4E0; /* --- Code highlighting (light) ----------------------------------------- */ --liara-code-bg: #FAF0F5; --liara-code-text: var(--liara-text-primary); --liara-code-comment: var(--liara-text-tertiary); --liara-code-keyword: var(--liara-brand-primary-dark); --liara-code-type: var(--liara-brand-secondary-dark); --liara-code-string: var(--liara-semantic-warning-fg); --liara-code-number: var(--liara-semantic-info-fg); --liara-code-function: var(--liara-text-primary); --liara-code-operator: var(--liara-text-secondary); --liara-code-preprocessor: var(--liara-brand-secondary-dark); --liara-code-constant: var(--liara-semantic-danger-fg); --liara-code-line-highlight: var(--liara-brand-primary-soft); /* --- Shadows (used very sparingly) ------------------------------------- */ --liara-shadow-sm: 0 1px 2px rgba(45, 27, 46, 0.06); --liara-shadow-md: 0 4px 12px rgba(45, 27, 46, 0.08); --liara-shadow-lg: 0 12px 28px rgba(45, 27, 46, 0.12); --liara-shadow-focus: 0 0 0 3px rgba(244, 166, 192, 0.4); } /* ============================================================================ * DARK THEME — system preference * ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-liara-theme="light"]) { /* --- Brand: primary -------------------------------------------- */ --liara-brand-primary: #F4A6C0; --liara-brand-primary-dark: #F8C4D5; --liara-brand-primary-soft: #3D2A35; /* --- Brand: secondary ------------------------------------------ */ --liara-brand-secondary: #C8B6E2; --liara-brand-secondary-dark: #D4C5EB; --liara-brand-secondary-soft: #2E2436; /* --- Brand: accent --------------------------------------------- */ --liara-brand-accent: #FFE6A8; --liara-brand-accent-dark: #FFD478; /* --- Backgrounds ----------------------------------------------- */ --liara-bg-page: #1E1A1F; --liara-bg-surface: #2A242C; --liara-bg-elevated: #322B36; --liara-bg-overlay: rgba(0, 0, 0, 0.55); /* --- Borders --------------------------------------------------- */ --liara-border-default: #3D2F38; --liara-border-strong: #4D3D48; --liara-border-subtle: #322830; /* --- Text ------------------------------------------------------ */ --liara-text-primary: #F5E6EE; --liara-text-secondary: #BFA8B5; --liara-text-tertiary: #877683; --liara-text-on-primary: #1E1A1F; --liara-text-link: var(--liara-brand-primary); --liara-text-link-hover: #F8C4D5; /* --- Semantic: success ----------------------------------------- */ --liara-semantic-success-bg: #2C3F32; --liara-semantic-success-fg: #B5D4BC; --liara-semantic-success-border: #4A6B52; /* --- Semantic: warning ----------------------------------------- */ --liara-semantic-warning-bg: #3F2D1E; --liara-semantic-warning-fg: #E8B98C; --liara-semantic-warning-border: #6B4A2D; /* --- Semantic: danger ------------------------------------------ */ --liara-semantic-danger-bg: #3D2128; --liara-semantic-danger-fg: #E8A6B5; --liara-semantic-danger-border: #6B3848; /* --- Semantic: info -------------------------------------------- */ --liara-semantic-info-bg: #232D44; --liara-semantic-info-fg: #B5C2E8; --liara-semantic-info-border: #424E6B; /* --- Code highlighting (dark) ---------------------------------- */ --liara-code-bg: #1A1418; --liara-code-text: var(--liara-text-primary); --liara-code-comment: var(--liara-text-tertiary); --liara-code-keyword: var(--liara-brand-primary); --liara-code-type: var(--liara-brand-secondary); --liara-code-string: var(--liara-semantic-warning-fg); --liara-code-number: var(--liara-semantic-info-fg); --liara-code-function: var(--liara-text-primary); --liara-code-operator: var(--liara-text-secondary); --liara-code-preprocessor: var(--liara-brand-secondary); --liara-code-constant: var(--liara-semantic-danger-fg); --liara-code-line-highlight: var(--liara-brand-primary-soft); /* --- Shadows --------------------------------------------------- */ --liara-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --liara-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --liara-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5); --liara-shadow-focus: 0 0 0 3px rgba(244, 166, 192, 0.5); } } /* ============================================================================ * DARK THEME — explicit user choice * Duplicates the @media block above. See "Theme strategy" comment at top. * ========================================================================== */ :root[data-liara-theme="dark"] { --liara-brand-primary: #F4A6C0; --liara-brand-primary-dark: #F8C4D5; --liara-brand-primary-soft: #3D2A35; --liara-brand-secondary: #C8B6E2; --liara-brand-secondary-dark: #D4C5EB; --liara-brand-secondary-soft: #2E2436; --liara-brand-accent: #FFE6A8; --liara-brand-accent-dark: #FFD478; --liara-bg-page: #1E1A1F; --liara-bg-surface: #2A242C; --liara-bg-elevated: #322B36; --liara-bg-overlay: rgba(0, 0, 0, 0.55); --liara-border-default: #3D2F38; --liara-border-strong: #4D3D48; --liara-border-subtle: #322830; --liara-text-primary: #F5E6EE; --liara-text-secondary: #BFA8B5; --liara-text-tertiary: #877683; --liara-text-on-primary: #1E1A1F; --liara-text-link: var(--liara-brand-primary); --liara-text-link-hover: #F8C4D5; --liara-semantic-success-bg: #2C3F32; --liara-semantic-success-fg: #B5D4BC; --liara-semantic-success-border: #4A6B52; --liara-semantic-warning-bg: #3F2D1E; --liara-semantic-warning-fg: #E8B98C; --liara-semantic-warning-border: #6B4A2D; --liara-semantic-danger-bg: #3D2128; --liara-semantic-danger-fg: #E8A6B5; --liara-semantic-danger-border: #6B3848; --liara-semantic-info-bg: #232D44; --liara-semantic-info-fg: #B5C2E8; --liara-semantic-info-border: #424E6B; --liara-code-bg: #1A1418; --liara-code-text: var(--liara-text-primary); --liara-code-comment: var(--liara-text-tertiary); --liara-code-keyword: var(--liara-brand-primary); --liara-code-type: var(--liara-brand-secondary); --liara-code-string: var(--liara-semantic-warning-fg); --liara-code-number: var(--liara-semantic-info-fg); --liara-code-function: var(--liara-text-primary); --liara-code-operator: var(--liara-text-secondary); --liara-code-preprocessor: var(--liara-brand-secondary); --liara-code-constant: var(--liara-semantic-danger-fg); --liara-code-line-highlight: var(--liara-brand-primary-soft); --liara-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --liara-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --liara-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5); --liara-shadow-focus: 0 0 0 3px rgba(244, 166, 192, 0.5); } /* ============================================================================ * NON-THEMED TOKENS * Tokens whose values do not change between light and dark mode. * ========================================================================== */ :root { /* --- Typography -------------------------------------------------------- */ --liara-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --liara-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace; --liara-font-serif: Georgia, 'Times New Roman', serif; /* --- Type scale (rem-based, scales with user font-size preference) ----- */ --liara-text-xs: 0.75rem; /* 12px */ --liara-text-sm: 0.875rem; /* 14px */ --liara-text-base: 1rem; /* 16px */ --liara-text-lg: 1.125rem; /* 18px */ --liara-text-xl: 1.25rem; /* 20px */ --liara-text-2xl: 1.5rem; /* 24px */ --liara-text-3xl: 1.875rem; /* 30px */ --liara-text-4xl: 2.25rem; /* 36px */ /* --- Line heights ------------------------------------------------------ */ --liara-leading-tight: 1.25; --liara-leading-snug: 1.4; --liara-leading-normal: 1.6; --liara-leading-relaxed: 1.75; --liara-leading-loose: 2; /* --- Font weights ------------------------------------------------------ */ --liara-weight-normal: 400; --liara-weight-medium: 500; --liara-weight-semibold: 600; --liara-weight-bold: 700; /* --- Spacing scale ----------------------------------------------------- */ --liara-space-0: 0; --liara-space-1: 0.25rem; /* 4px */ --liara-space-2: 0.5rem; /* 8px */ --liara-space-3: 0.75rem; /* 12px */ --liara-space-4: 1rem; /* 16px */ --liara-space-5: 1.5rem; /* 24px */ --liara-space-6: 2rem; /* 32px */ --liara-space-8: 3rem; /* 48px */ --liara-space-10: 4rem; /* 64px */ --liara-space-12: 6rem; /* 96px */ /* --- Border radius ----------------------------------------------------- */ --liara-radius-none: 0; --liara-radius-sm: 4px; --liara-radius-md: 8px; --liara-radius-lg: 12px; --liara-radius-xl: 16px; --liara-radius-pill: 999px; /* --- Borders ----------------------------------------------------------- */ --liara-border-width-thin: 0.5px; --liara-border-width-default: 1px; --liara-border-width-thick: 2px; /* --- Layout sizing ----------------------------------------------------- */ --liara-content-max-width: 72ch; /* optimal reading width */ --liara-page-max-width: 1280px; /* hub and outer wrappers */ --liara-sidebar-width: 260px; /* mdBook-style sidebar */ --liara-navbar-height: 52px; /* shared navbar */ /* --- Z-index scale ----------------------------------------------------- */ --liara-z-base: 0; --liara-z-raised: 10; --liara-z-dropdown: 100; --liara-z-navbar: 500; --liara-z-modal: 1000; --liara-z-toast: 1500; /* --- Transitions ------------------------------------------------------- */ --liara-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --liara-transition-default: 200ms cubic-bezier(0.4, 0, 0.2, 1); --liara-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* --- Focus rings ------------------------------------------------------- * * Always visible on keyboard focus, never via outline:none. Pastels can * be subtle; keyboard users need a clear indicator regardless. */ --liara-focus-ring-width: 3px; --liara-focus-ring-offset: 2px; } /* ============================================================================ * GLOBAL UTILITIES * Minimal global rules that all consumers benefit from. Anything more * specific belongs in the consumer's own CSS (navbar, doxygen-custom, etc.). * ========================================================================== */ /* Smooth color transitions when switching themes */ :root, :root * { transition: background-color var(--liara-transition-default), border-color var(--liara-transition-default), color var(--liara-transition-default); } /* Disable transitions on user request, for accessibility */ @media (prefers-reduced-motion: reduce) { :root, :root * { transition: none !important; animation: none !important; } } /* Ensure focus rings are always visible on keyboard navigation */ :focus-visible { outline: var(--liara-focus-ring-width) solid var(--liara-brand-primary); outline-offset: var(--liara-focus-ring-offset); border-radius: var(--liara-radius-sm); } /* Selection styling — pink highlight, native to the palette */ ::selection { background: var(--liara-brand-primary); color: var(--liara-text-on-primary); } /* ============================================================================ * ACCESSIBILITY — Dyslexia-friendly mode (opt-in) * ============================================================================ */ :root[data-liara-a11y-dyslexia="true"] { --liara-font-sans: 'OpenDyslexic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --liara-font-mono: 'OpenDyslexic Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace; /* Line heights bumped up across the scale */ --liara-leading-tight: 1.5; /* was 1.25 */ --liara-leading-snug: 1.65; /* was 1.4 */ --liara-leading-normal: 1.85; /* was 1.6 */ --liara-leading-relaxed: 2; /* was 1.75 */ --liara-leading-loose: 2.25; /* was 2 */ } :root[data-liara-a11y-dyslexia="true"] body, :root[data-liara-a11y-dyslexia="true"] p, :root[data-liara-a11y-dyslexia="true"] li, :root[data-liara-a11y-dyslexia="true"] dd, :root[data-liara-a11y-dyslexia="true"] dt, :root[data-liara-a11y-dyslexia="true"] td, :root[data-liara-a11y-dyslexia="true"] th { letter-spacing: 0.04em; word-spacing: 0.08em; } /* Replace italics with a primary-colored underline. Italics tilt letterforms * and are notoriously hard for dyslexic readers; underline preserves the * emphasis without the tilt. */ :root[data-liara-a11y-dyslexia="true"] em, :root[data-liara-a11y-dyslexia="true"] i, :root[data-liara-a11y-dyslexia="true"] cite { font-style: normal; text-decoration: underline; text-decoration-color: var(--liara-brand-primary); text-underline-offset: 0.15em; text-decoration-thickness: 1.5px; } /* Code blocks keep their monospaced font even in dyslexia mode if * OpenDyslexic Mono is unavailable, but spacing relaxes for legibility. */ :root[data-liara-a11y-dyslexia="true"] code, :root[data-liara-a11y-dyslexia="true"] pre { letter-spacing: 0.02em; line-height: var(--liara-leading-relaxed); }