/* * tokens.css — design tokens for the theming system (Issue #2114). * * One source of truth for every color in the app. Stylesheets reference * these via var(--name). JS reads them the same way at render time * (style.background = 'var(--bg-base)') or via getComputedStyle for * canvas drawing. * * Theme switching: toggles which block * of overrides wins. Default is dark — set inline in before any * stylesheet parses so there's no flash of unstyled content. * * Translucent versions of any token use color-mix() at the call site: * background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); * No separate opacity tokens — keeps the system small. * * Adding a new token later: append it to the :root block, give it a * value, optionally override in [data-theme="…"] blocks. The migration * script (scripts/theme-migrate.js) reads its color→token map for the * find/replace passes; adding a token there is one line. * * Status colors (success/error/warning/info) are deliberately the same * across all themes — they're accessibility cues, not theme accents. */ :root { /* Default to dark scheme for browser-native widgets when no * [data-theme] attribute is set. Each [data-theme] block below * overrides this for its own scheme. */ color-scheme: dark; /* ── PAGE LAYOUT ── shared horizontal frame so the top nav lines up with page content on every page. The nav (header pads the gutter, nav caps the width) and each page's content wrapper (container pads the gutter, wrapper caps the width) read the SAME two tokens, so their left/right edges match at any window width. A page overrides these in its own :root to fit its content; the defaults below are the full-width case (edit page). */ --page-gutter: 2rem; /* left/right page margin (on header + container) */ --page-max: none; /* content cap (on nav + wrapper); none = full width */ /* ── SURFACES ── */ --bg-base: #1a1a1a; /* page background, primary card */ --bg-elevated: #2a2a2a; /* modal, popup, raised surface */ --bg-canvas: #252525; /* mid-tier panel inside a card */ --bg-overlay: #1e1e1e; /* subtle dark fill, dropdown bg */ --bg-sunken: #0a0a0a; /* deepest dark, behind canvases */ /* ── PAGE FIELD ── the full-viewport page-frame background (behind a page's content wrapper). Built ENTIRELY from this theme's own surface + brand tokens, so every theme — current and future — gets a coherent, tuned field with zero per-theme redefinition: a soft top key-light (elevated, warmed a touch by the brand accent) easing through the base tone into a gentle sunken vignette at the lower edges. Replaces the old flat base→elevated slab that read as a dead-dark rectangle. */ --page-field: radial-gradient(135% 105% at 50% -12%, color-mix(in srgb, var(--brand-primary) 6%, var(--bg-elevated)) 0%, var(--bg-base) 42%, var(--bg-base) 68%, var(--bg-sunken) 128%); /* ── BORDERS ── */ --border-soft: #333; /* subtle dividers, low contrast */ --border-default: #444; /* standard component border */ --border-strong: #555; /* hover/active border emphasis */ --grid-line: rgba(255, 255, 255, 0.05); /* #2875 graph-paper: faint light ink on dark themes — matched-contrast across themes */ /* ── TEXT ── */ --text-primary: #e0e0e0; /* body text on dark surfaces */ --text-secondary: #ccc; /* slightly de-emphasized text */ --text-muted: #888; /* hints, metadata, hover-only */ --text-inverse: #fff; /* on saturated backgrounds */ /* ── BRAND ── */ --brand-primary: #ff9800; /* orange — primary accent, CTAs */ --brand-secondary: #00a8e1; /* cyan — Edit section identity */ /* ── STATUS (theme-neutral) ── */ --status-success: #4caf50; --status-error: #f44336; --status-warning: #ff9800; /* shares hex with brand-primary */ --status-info: #2196f3; --status-archive: #9c27b0; /* purple — Archived lifecycle identity (#2875) */ /* ── SEGMENTS (timeline) ── */ --seg-video-bg: #3b82f6; /* video track — blue (IFM identity) */ --seg-audio-bg: #60a5fa; /* video's audio waveform — lighter blue (paired) */ --seg-image-bg: #4caf50; /* image_timeline — green */ --seg-pip-bg: #8b5cf6; /* PiP overlay + PiP audio — violet */ --seg-mp3-bg: #f43f5e; /* MP3 track — rose-red */ --seg-png-bg: #f97316; /* PNG track — orange */ --seg-text-bg: #2dd4bf; /* TEXT track — teal */ --seg-merge-band: #ff9800; /* transition overlap zone */ --seg-cut-line: rgba(255, 255, 255, 0.55); /* cut divider */ /* ── OVERLAYS (asset chrome) ── */ --overlay-png-bg: #9c27b0; /* PNG overlay segment color */ --overlay-text-bg: #00bcd4; /* text overlay segment color */ --overlay-mp3-bg: #ff5722; /* MP3 segment color */ --overlay-chapter: #e91e63; /* chapter marker pink */ /* ── EFFECTS ── */ --focus-ring: #ff9800; --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.5); /* * ── TYPOGRAPHY (Font Size setting) ── * * --root-font-size drives the html element's font-size, so every * rem-based declaration in the app — file cards, menu options, * buttons, tabs, labels, modal body copy, the existing header * tokens below — scales together when the user picks a different * size in Settings. Per-size overrides live in [data-font-size="…"] * blocks below. * * The AI/drop-zone tokens are kept (used by inline style attrs in * the page headers) but no longer override per size — they ride * the root scale like everything else, so the header and the rest * of the UI stay in proportion. * * px-hardcoded text (timeline canvas labels, modal widths) is not * affected; that's intentional — those surfaces are pixel art. */ --root-font-size: 16px; --ai-btn-icon-size: 1rem; /* ✨ in AI nav button */ --ai-btn-label-size: 0.65rem; /* "AI" label under sparkle */ --drop-zone-label-size: 0.7rem; /* Inventory / Edit / etc. labels */ } /* * Anchor the rem unit to --root-font-size. This is the single rule * that lets the Font Size setting flow through the entire app. */ html { font-size: var(--root-font-size); } /* * [data-theme="dark"] — explicit dark theme block. Matches :root values * above; defined so that switching INTO dark from another theme works * without relying on attribute removal. */ [data-theme="dark"] { /* Tell the browser to render native widgets (select, input, scrollbar, * date pickers) in the matching scheme. Without this, an OS in the * opposite scheme overrides our theme on form controls — e.g. light * page with OS-dark default rendered with * dark native styling, producing invisible text on the merge-effect modal. */ color-scheme: dark; /* Identical to :root — listed explicitly so theme-switch always * goes through the same override path. */ --bg-base: #1a1a1a; --bg-elevated: #2a2a2a; --bg-canvas: #252525; --bg-overlay: #1e1e1e; --bg-sunken: #0a0a0a; --border-soft: #333; --border-default: #444; --border-strong: #555; --grid-line: rgba(255, 255, 255, 0.05); /* #2875 graph-paper: faint light ink on dark themes — matched-contrast across themes */ --text-primary: #e0e0e0; --text-secondary: #ccc; --text-muted: #888; --text-inverse: #fff; } /* * [data-theme="light"] — light theme (Issue #2114 PR-5). * * Surface stack inverts from the dark theme: page bg is light, modals * sit a hair brighter, canvas backdrop is the cleanest white. Text * scales darken in the same five-step pattern. Borders shift to a * grey scale visible on white. * * Brand and status hex values stay identical to dark — orange / cyan / * red / green / blue / orange remain accessibility-meaningful regardless * of theme. Only surfaces, borders, and text change. * * Shadows are softer on a light backdrop — heavy dark shadows from the * dark theme would look bruise-like under white surfaces. */ [data-theme="light"] { color-scheme: light; --bg-base: #f4f5f7; /* page background */ --bg-elevated: #ffffff; /* modals, popups */ --bg-canvas: #fafbfc; /* mid-tier panels */ --bg-overlay: #ffffff; /* dropdown bg */ --bg-sunken: #e8eaed; /* sunken / deepest */ --border-soft: #e4e6eb; /* subtle */ --border-default: #d0d4dc; /* standard */ --grid-line: rgba(0, 0, 0, 0.05); /* #2875 graph-paper: faint dark ink on light themes — matched-contrast across themes */ --border-strong: #9aa1ad; /* emphasis */ --text-primary: #1a1d22; --text-secondary: #3a3f47; --text-muted: #6b7280; --text-inverse: #ffffff; /* on saturated brand/status backgrounds */ /* Brand + status colors deliberately unchanged from :root. */ /* Soften shadows for the light backdrop — the dark-theme rgba(0,0,0,0.5) * variant looks bruise-like over white surfaces. */ --shadow-modal: 0 4px 16px rgba(15, 20, 30, 0.18); --shadow-popup: 0 4px 10px rgba(15, 20, 30, 0.16); } /* * [data-theme="midnight"] — pure-black OLED variant of dark. * * For editors working in dark rooms or on OLED panels where dark grey * still emits light. Surfaces collapse toward #000; borders bump up a * notch so component edges remain readable against the deeper black. * Text scale is fractionally brighter than dark to compensate for the * lower surface luminance. */ [data-theme="midnight"] { color-scheme: dark; --bg-base: #000000; --bg-elevated: #0d0d0d; --bg-canvas: #060606; --bg-overlay: #0a0a0a; --bg-sunken: #000000; --border-soft: #1a1a1a; --border-default: #2a2a2a; --border-strong: #3d3d3d; --grid-line: rgba(255, 255, 255, 0.045); /* #2875 graph-paper: faint light ink on pure-black OLED — matched-contrast across themes */ --text-primary: #e8e8e8; --text-secondary: #c0c0c0; --text-muted: #757575; --text-inverse: #ffffff; --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.85); --shadow-popup: 0 4px 14px rgba(0, 0, 0, 0.8); } /* * [data-theme="slate"] — cool blue-grey dark variant. * * The "studio NLE" feel — Premiere / Resolve / Avid all bias their UI * surfaces toward a desaturated cool blue rather than neutral grey. * Same role pattern as dark; every surface is hue-shifted ~210° with * the saturation kept low so it reads as a tinted neutral, not "blue." */ [data-theme="slate"] { color-scheme: dark; --bg-base: #1e2533; --bg-elevated: #2a3142; --bg-canvas: #242b3a; --bg-overlay: #232a39; --bg-sunken: #131826; --border-soft: #2f3648; --border-default: #3d4458; --grid-line: rgba(255, 255, 255, 0.05); /* #2875 graph-paper: faint light ink on dark themes — matched-contrast across themes */ --border-strong: #4f5670; --text-primary: #e2e6f0; --text-secondary: #c4cad8; --text-muted: #8a92a8; --text-inverse: #ffffff; --shadow-modal: 0 4px 20px rgba(5, 10, 20, 0.6); --shadow-popup: 0 4px 12px rgba(5, 10, 20, 0.55); } /* * [data-theme="sepia"] — warm cream / tan light variant. * * Designed for long edit sessions where pure-white surfaces fatigue * the eyes. Backgrounds are warm cream; text shifts to deep brown * rather than near-black; borders are a soft tan scale. Brand/status * hex stays unchanged — orange/cyan/red/green still read as themselves * over cream surfaces. * * Translucent dark washes used elsewhere (rgba(26,26,26,0.6) on header * sections, ifm-storage-breakdown) need per-component sepia overrides; * the dark wash on cream surfaces creates a muddy mid-grey panel. */ /* * ── Font-size scale ── * * Four discrete steps: small / medium (default) / large / extra-large. * Selected via . The medium block is omitted * because :root already carries the 16px default. * * Scale: 14 / 16 / 18 / 21 px — visible but conservative enough that * fixed-pixel containers (modals, drop-zone tiles, timeline strip) * don't overflow with the larger sizes. * * Lives outside the theme blocks deliberately: font-size is orthogonal * to theme, so a user can mix any theme with any size. */ [data-font-size="sm"] { --root-font-size: 14px; } [data-font-size="lg"] { --root-font-size: 18px; } [data-font-size="xl"] { --root-font-size: 21px; } [data-theme="sepia"] { color-scheme: light; --bg-base: #f5ecd6; --bg-elevated: #faf3e2; --bg-canvas: #fbf5e8; --bg-overlay: #faf3e2; --bg-sunken: #e8dcc0; --border-soft: #e0d5b6; --border-default: #c9bb95; --border-strong: #9a8a65; --grid-line: rgba(0, 0, 0, 0.05); /* #2875 graph-paper: faint dark ink on warm cream — matched-contrast across themes */ --text-primary: #3a2f1d; --text-secondary: #5a4a30; --text-muted: #8a7855; --text-inverse: #ffffff; --shadow-modal: 0 4px 16px rgba(90, 60, 20, 0.22); --shadow-popup: 0 4px 10px rgba(90, 60, 20, 0.18); }