/* ===== DESIGN TOKENS - Single Source of Truth ===== */ /* This file is imported by both dashboard.html and article.html */ /* Provides unified spacing, typography, colors, and other design values */ :root { /* ===== SPACING (8px base unit) ===== */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; /* ===== TYPOGRAPHY ===== */ /* Unified 1.25 scale across all pages */ --text-xs: 0.64rem; /* 10.24px */ --text-sm: 0.8rem; /* 12.8px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.56rem; /* 24.96px */ --text-2xl: 1.95rem; /* 31.2px */ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; /* ===== COLORS - Dark Theme (default; overridden by html.light-theme, PB-258) ===== */ /* Dark theme background — softened ramp (PB-228): lifted off near-black for reduced eye strain while staying clearly dark. Faint cool-neutral. */ --color-bg-primary: #1e1f22; --color-bg-secondary: #26272b; --color-bg-tertiary: #2e2f34; --color-surface: #33343a; --color-surface-hover: #3b3c43; --color-surface-active: #43444c; /* Text colors - Enhanced contrast for WCAG AA */ --color-text-primary: #e8e8e8; --color-text-secondary: #b8b8b8; /* Increased from #a8a8a8 for better contrast */ --color-text-tertiary: #8f8f8f; /* Increased from #808080 for better contrast */ --color-text-disabled: #606060; /* Border color - Enhanced visibility */ --color-border: rgba(255, 255, 255, 0.12); /* Increased from 0.08 for visibility */ /* Accent colors */ --color-accent: #64b5f6; /* Blue */ --color-accent-light: #90caf9; --color-accent-dark: #2196f3; --color-success: #4caf50; --color-warning: #ffc107; --color-danger: #f44336; --color-info: #2196f3; /* Semantic colors with opacity */ --color-accent-subtle: rgba(100, 181, 246, 0.15); --color-accent-medium: rgba(100, 181, 246, 0.25); --color-accent-strong: rgba(100, 181, 246, 0.4); /* Tag system */ --color-tag-bg: rgba(100, 181, 246, 0.15); --color-tag-hover-bg: rgba(100, 181, 246, 0.25); /* Focus ring */ --color-focus-ring: rgba(100, 181, 246, 0.3); /* Scrollbar */ --scrollbar-track-bg: transparent; --scrollbar-thumb-bg: rgba(100, 181, 246, 0.45); --scrollbar-thumb-hover-bg: rgba(100, 181, 246, 0.6); /* Modal backdrop */ --modal-backdrop-bg: rgba(0, 0, 0, 0.5); /* Disabled state */ --opacity-disabled: 0.5; /* ===== BORDER RADIUS ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3); /* ===== TRANSITIONS ===== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX SCALE ===== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ===== BREAKPOINTS ===== */ --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1536px; } /* Light theme variant (PB-258). * * Keyed off the `html.light-theme` class, NOT `prefers-color-scheme`. Every * page that links this stylesheet (admin.html, article.html, reader.html) * also inlines the pre-paint theme bootstrap (and loads static/js/theme.js, * PB-219) which resolves the effective theme — including the "system" * preference — and sets `light-theme` on before first paint. Once * that class is set it is the single source of truth; a `prefers-color-scheme` * media query here would fight the class whenever the OS preference and the * app's stored theme disagree (e.g. app theme = dark, OS = light), which was * exactly the PB-258 bug. There is no no-JS consumer of these tokens, so the * media query is intentionally not kept as a fallback — see landing.html, * which does NOT use these tokens and is unaffected. */ html.light-theme { --color-bg-primary: #ffffff; --color-bg-secondary: #f5f5f5; --color-bg-tertiary: #eeeeee; --color-surface: #f9f9f9; --color-surface-hover: #f0f0f0; --color-surface-active: #e8e8e8; --color-text-primary: #1a1a1a; --color-text-secondary: #424242; /* Darker for better contrast on light bg */ --color-text-tertiary: #626262; /* Darker for better contrast */ --color-text-disabled: #aaaaaa; --color-border: rgba(0, 0, 0, 0.12); /* Dark border for light theme */ /* Light theme tags */ --color-tag-bg: rgba(25, 118, 210, 0.12); --color-tag-hover-bg: rgba(25, 118, 210, 0.2); /* Light theme focus ring */ --color-focus-ring: rgba(25, 118, 210, 0.25); /* Light theme scrollbar */ --scrollbar-track-bg: transparent; --scrollbar-thumb-bg: rgba(25, 118, 210, 0.4); --scrollbar-thumb-hover-bg: rgba(25, 118, 210, 0.6); /* Light theme modal backdrop */ --modal-backdrop-bg: rgba(0, 0, 0, 0.3); } /* E-ink theme (PB-282). * * Wallabag's e-ink theme is one of its few widely-praised UI features: * crisp black-on-near-white, minimal chrome, no gradients or shadows — * built for reading on e-paper displays and for readers who just want * maximum contrast with nothing decorative competing for attention. * * Keyed off `html.eink-theme`, set by the same pre-paint bootstrap and * static/js/theme.js that own `html.light-theme` (PB-258) — same mechanism, * a third value in the theme cycle rather than a parallel system. Reuses * every token name the rest of the CSS already consumes, so no component * stylesheet needs its own e-ink branch. */ html.eink-theme { color-scheme: light; --color-bg-primary: #ffffff; --color-bg-secondary: #fafafa; --color-bg-tertiary: #f2f2f2; --color-surface: #ffffff; --color-surface-hover: #ececec; --color-surface-active: #e0e0e0; /* Near-black ink, not pure #000 — slightly easier on the eye at high contrast while still reading as "e-ink black". */ --color-text-primary: #0a0a0a; --color-text-secondary: #3a3a3a; --color-text-tertiary: #5a5a5a; --color-text-disabled: #9a9a9a; /* Hairlines preserved, but solid rather than translucent — e-ink has no concept of alpha blending, so a flat gray hairline reads truer to the reference. */ --color-border: #d4d4d4; /* One muted accent, kept low-chroma so it never competes with the black-on-white contrast that is the whole point of this theme. */ --color-accent: #55595e; --color-accent-light: #74787d; --color-accent-dark: #3a3d41; --color-success: #3d6b3d; --color-warning: #7a5b00; --color-danger: #7a2e2e; --color-info: #3a3d41; --color-accent-subtle: rgba(85, 89, 94, 0.1); --color-accent-medium: rgba(85, 89, 94, 0.18); --color-accent-strong: rgba(85, 89, 94, 0.3); --color-tag-bg: rgba(85, 89, 94, 0.1); --color-tag-hover-bg: rgba(85, 89, 94, 0.18); --color-focus-ring: rgba(85, 89, 94, 0.35); --scrollbar-track-bg: transparent; --scrollbar-thumb-bg: rgba(85, 89, 94, 0.35); --scrollbar-thumb-hover-bg: rgba(85, 89, 94, 0.5); --modal-backdrop-bg: rgba(0, 0, 0, 0.25); }