/* * Sift next-shell themes. * * Each theme is a set of CSS custom property overrides applied via * `body.theme-`. All modules (sidebar, topbar, splitter, md-viewer, * table) read from these vars and fall back to their own defaults. * * Shares the same vocabulary as projects/shed/themes.css — the two shells * will eventually converge onto a single tokens file (Phase 1). * * STRUCTURAL-TOKEN INVARIANT (specs/ui-platform.yaml §4): * Themes override palette/brand only — colors, borders, shadows, glyphs. * Structural tokens (sizes, spacing, font scale, radii, layout geometry) * live in the theme-agnostic base block below and are the same across * every theme. Switching theme must not shift any element's position or * size. Enforced by app/tests/smoke/theme-structural-tokens.test.js. * * To add a theme: duplicate a body.theme- block below and override * only the palette/brand props you care about. Never declare --sp-*, * --fs-*, --r-*, --ui-topbar-h, or --ui-splitter-thickness inside a theme. */ /* ============================================================ * L1 — Structural tokens (theme-agnostic). Values mirror * specs/ui-platform.yaml §1 tokens.size + tokens.scale. * ============================================================ */ body { --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-lg: 15px; --fs-xl: 17px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --r-sm: 4px; --r-md: 6px; /* --r-lg mirrors specs/ui-platform.yaml shape.radius_card — derived from icon_size.btn/2 so cards, popovers, the sidebar, and the Electron window share one curvature with the round icon-btn. */ --r-lg: 14px; --r-pill: 999px; --ui-topbar-h: 52px; --ui-splitter-thickness: 1px; /* Tooltip — TRK-432. Geometry tokens (theme-agnostic). */ --tooltip-max-width: 240px; --motion-tooltip-fade: 80ms; } /* ============================================================ * L2 — Look-and-Feel (shared by every theme). * * The structural treatment that makes the app feel Mac-native: * island sidebar, border-less topbar, sidebar button dimensions, * splitter transparency, vibrancy hooks. Declared ONCE here so * every theme (sift-default, mac-light, mac-dark, future) * gets identical layout — themes tune palette only (see §4 in * specs/ui-platform.yaml). * * Specificity note: the `body` prefix is deliberate — primitive * modules (sidebar, topbar, table-view) inject their own BASE_CSS * into at module init, AFTER this stylesheet loads. A plain * `.ui-sidebar {}` here would be overridden by the module's own * `.ui-sidebar {}` on ordering alone. `body .ui-sidebar` raises * specificity to (0,1,1), winning regardless of load order. Do NOT * remove the `body` prefix. * * If you find yourself writing `.ui-*` / `.tv-*` / `#nav-*` inside * a body.theme- block below, stop — hoist it here instead. * ============================================================ */ body .ui-topbar { border-bottom: none; padding: 0 var(--sp-4, 16px); } /* Right-column (topbar + main) is the "last island" of the next-shell layout. Keep it on --surface (white in light themes) so the content area reads as the brightest plane even when the shell --bg is tinted (e.g. sift-default off-white). Sidebar + gutter contrast comes from the shell --bg below. */ body #right-column { background: var(--surface); } /* ──── Island shadows ─────────────────────────────────────────────────── * LF shadows follow a single rule (see docs/plan/ui-radius-shadow-map.md): * rounded islands: blur = 2 · border-radius * pills / flat bars: blur = element height * Color is --lf-shadow (per theme), tuned so that on a pure-white surface * the darkest pixel of the gradient lands at ~#F7F7F7 and fades to #FFFFFF * across the blur radius (the macOS light-LF elevation ramp). */ body .ui-sidebar { border-right: none; border-radius: var(--r-lg, 10px); box-shadow: var(--lf-shadow-sidebar); } /* Search pill is a white card (like the Finder back/forward pill), not a gray-tinted chip. Platform default (app/css/06-search-input.css) uses rgba(0,0,0,0.05); override to --surface in every next theme so the pill matches the back/next island treatment and the LF shadow reads. */ body .sift-search { box-shadow: var(--lf-shadow-pill); --search-bg: var(--surface); --search-border: rgba(0, 0, 0, 0.06); } /* Icon islands retired (spec §tokens.lf.icon_islands_retired, 2026-04-21). The nav-hist back/forward pill no longer renders chrome — both chevrons stand alone as standard .sift-icon-btn instances casting their own LF shadows per the platform rule below. Every .ui-topbar__island is a transparent layout slot. */ body .ui-topbar__island { box-shadow: none; background: transparent; } /* Every platform icon-button casts the LF lift shadow. The shadow is painted on an ::after pseudo with `mix-blend-mode: darken` so overlapping shadows in an icon run compose as MAX(alpha) (darkest wins), not SUM — per spec §tokens.lf.non_accumulation. Selector list mirrors the aliases enumerated in app/css/05-icon-btn.css so no alias misses the shadow. */ body .sift-icon-btn::after, body .ui-topbar__btn::after, body .view-menu-btn::after, body .notif-btn::after, body .date-btn::after, body .acct-btn::after, body .flt-btn::after, body .toolbar-icon-btn::after, body .ra-btn::after, body .bulk-dismiss::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: var(--lf-shadow-icon-btn); mix-blend-mode: darken; pointer-events: none; z-index: -1; /* behind the glyph */ } body .tv-cp-trigger { box-shadow: var(--lf-shadow-trigger); } body .placeholder-card { box-shadow: var(--lf-shadow-card); } body .ui-sidebar__rail { padding: 10px 6px 8px; gap: 1px; } body .ui-sidebar__btn { height: 36px; border-radius: 5px; } /* Collapsed rail: same row height as expanded so the icon sits at the same vertical center when toggling (TRK-385: 46→36 to match legacy sift rail). Narrow rail means the icon is centered horizontally inside its row rather than left-padded, but it never shrinks — same 16px glyph in both states. The :not(.is-peek) guard lets peek-on-hover revert to the expanded look (left-aligned, padded, labels visible) without removing is-collapsed. */ body .ui-sidebar.layout-list.is-collapsed:not(.is-peek) .ui-sidebar__btn { width: 100%; height: 36px; border-radius: 5px; justify-content: center; padding: 0; margin: 0; } body .ui-sidebar__btn > svg, body .ui-sidebar__btn > i { flex-shrink: 0; } body .ui-sidebar.layout-list.is-collapsed:not(.is-peek) .ui-sidebar__btn > svg, body .ui-sidebar.layout-list.is-collapsed:not(.is-peek) .ui-sidebar__btn > i { width: 16px; height: 16px; } /* Splitter: transparent track, accent-tinted hover/drag. Each theme supplies --accent; the rgba tint is derived via --ui-splitter-hover-bg (palette override in §4) or falls back to the accent at full opacity. */ body #nav-splitter-mount .ui-splitter { background: transparent; } body #nav-splitter-mount .ui-splitter:hover, body #nav-splitter-mount .ui-splitter.is-dragging { background: var(--ui-splitter-hover-bg, var(--accent)); } /* Vibrancy hooks (Electron `vibrancy: 'sidebar'`) — theme-agnostic. */ body.vibrancy-on #nav-mount, body.vibrancy-on .ui-sidebar, body.vibrancy-on .ui-sidebar__rail, body.vibrancy-on .ui-topbar { background: transparent; } /* ============================================================ * Theme: sift-default — default warm neutral, light + dark * ============================================================ */ body.theme-sift-default { /* TRK-385: sift palette inherits from app/css/01-tokens.css :root — one source of truth for --bg / --surface / --sidebar / --text / --muted / --border / --hover. This block only (a) maps legacy token names to next-shell names, (b) declares tokens the legacy file doesn't have, (c) declares intentional next-shell overrides. Every theme below (.theme-finder-light, .theme-finder-dark) overrides :root via body-class specificity — cascade still works. */ /* (a) legacy → next name maps (values come from 01-tokens.css :root) */ --fg: var(--text); /* (b) next-only tokens */ --code-bg: #F1EDE2; /* (c) intentional override of legacy. 01-tokens.css has --accent: #D4A574 (warm amber); the next shell uses Mac blue to align with the mac_light brand system. */ --accent: #0a58b8; --shadow-sm: none; --shadow-md: none; --shadow-island: none; /* LF shadow system (see docs/plan/ui-radius-shadow-map.md). Light: elevation ramp tuned to the Finder back/forward pill's card shadow — the darkest pixel on --surface lands near #ECECEC (the Finder reference), fading to the surface tone across the blur. The earlier #F7F7F7 floor (alpha 0.03) was invisible on sift-default's near-white shell; 0.08 restores the card affordance. */ --lf-shadow: rgba(0, 0, 0, 0.08); --lf-shadow-sidebar: 0 0 28px var(--lf-shadow); /* 2 · 14px */ --lf-shadow-pill: 0 0 24px var(--lf-shadow); /* height */ --lf-shadow-island: 0 0 16px var(--lf-shadow); /* 2 · 8px */ --lf-shadow-icon-btn: 0 0 24px var(--lf-shadow); /* height */ --lf-shadow-card: 0 0 28px var(--lf-shadow); /* 2 · 14px */ --lf-shadow-trigger: 0 0 12px var(--lf-shadow); /* 2 · 6px */ /* Tooltip is offset-shadowed (popover-style), not radial. Per-theme alpha keyed to the sift cream palette. Spec §tokens.lf.shadow_tooltip + TRK-432. */ --lf-shadow-tooltip: 0 8px 24px rgba(43, 36, 26, 0.16), 0 1px 3px rgba(43, 36, 26, 0.10); --ui-splitter-hover-bg: rgba(10, 88, 184, 0.3); /* Module tokens */ /* Sidebar is a rounded island floating on the app shell. --ui-sidebar-bg MUST differ from --bg so the 14px rounded corners read as negative space — see specs/ui-platform.yaml §3.sidebar edge contract. Sift uses a warmer cream than --surface for the sidebar island; value comes from 01-tokens.css --sidebar (one source of truth). */ --ui-sidebar-bg: var(--sidebar); --ui-sidebar-fg: var(--fg); --ui-sidebar-btn-fg: #6B5E4D; --ui-sidebar-btn-hover: var(--hover); --ui-sidebar-btn-hover-fg: var(--fg); --ui-sidebar-btn-active: #EEEAE1; --ui-sidebar-btn-active-fg: #2B241A; --ui-topbar-bg: var(--bg); --ui-topbar-fg: var(--fg); --ui-topbar-border: var(--border); /* No chrome bg around icon-button islands — the button's own state IS the chrome. Nested chrome (gray pill + colored circle) is a visual bug. */ --ui-topbar-island-bg: transparent; --ui-topbar-accent: var(--accent); /* ── Icon-button palette (consumed by app/css/05-icon-btn.css) ─────── These are the ONLY knobs that tune icon-button colors. Every .sift-icon-btn (and its aliases: .ui-topbar__btn, .view-menu-btn, .notif-btn, .date-btn, .acct-btn, .flt-btn, .toolbar-icon-btn, .ra-btn, .bulk-dismiss) in every app renders from these. Spec: ui-platform.yaml §themes.sift (+ mac_light base) and §components.icon_btn. */ --icon-btn-fg: #2B241A; /* glyph — idle = hover = active */ --icon-btn-hover-fg: #2B241A; --icon-btn-active-fg: #2B241A; --icon-btn-border: rgba(43,36,26,0.22); /* ring for hover/active/selected */ /* ── Tooltip palette (TRK-432) ─────────────────────────────────────── Sift cream surface — near-white tooltip with warm border tuned to the palette. Spec §themes.sift.color.tooltip_*. */ --tooltip-bg: #FBFAF6; --tooltip-fg: #2B241A; --tooltip-border: rgba(43, 36, 26, 0.14); --tooltip-kbd-fg: rgba(43, 36, 26, 0.55); --tv-text: var(--fg); --tv-bg: var(--surface); --tv-thead-bg: var(--tv-bg); --tv-border: var(--border); --tv-border-subtle: #f0f0f2; --tv-muted: var(--muted); --tv-hover: #f5f5f7; --ui-md-bg: transparent; --ui-md-fg: var(--fg); --ui-md-border: var(--border); --ui-md-code-bg: var(--code-bg); --ui-md-accent: var(--accent); --ui-md-muted: var(--muted); } @media (prefers-color-scheme: dark) { body.theme-sift-default { --bg: #161616; --fg: #e4e4e4; --muted: #999; --border: #2a2a2a; --code-bg: #262626; --accent: #7ab8ff; --surface: #1c1c1c; --hover: rgba(255,255,255,0.05); /* 01-tokens.css only declares the light-mode --sidebar cream, so override it here — otherwise the dark sift sidebar would inherit the #F4F3EE cream. Match --surface (same pattern as pre-TRK-385 behavior). */ --sidebar: var(--surface); --ui-sidebar-btn-fg: #aaa; --ui-sidebar-btn-hover-fg: #fff; --ui-sidebar-btn-active: rgba(122,184,255,0.18); --tv-thead-bg: var(--tv-bg); --tv-border-subtle: rgba(255,255,255,0.04); --tv-hover: rgba(255,255,255,0.05); --ui-topbar-island-bg: transparent; /* Dark-mode icon-button palette. */ --icon-btn-fg: #F5F5F7; --icon-btn-hover-fg: #F5F5F7; --icon-btn-active-fg: #F5F5F7; --icon-btn-border: rgba(255,255,255,0.25); /* ring for hover/active/selected */ --shadow-sm: none; --shadow-md: none; --shadow-island: none; /* Dark LF: alpha scaled so the gradient stays perceivable against the darker surface. */ --lf-shadow: rgba(0, 0, 0, 0.38); /* Tooltip — dark Aqua surface, white text. Spec §themes.mac_dark.color.tooltip_*. */ --tooltip-bg: #2D2D2F; --tooltip-fg: #F5F5F7; --tooltip-border: rgba(255, 255, 255, 0.12); --tooltip-kbd-fg: rgba(245, 245, 247, 0.55); --lf-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30); } } /* Sift brand override (spec: ui-platform.yaml > themes.sift.sort_icon): (a) swap the platform chevron pair for bolder lucide arrows — Sift's ALL-CAPS headers pair with a louder indicator than Finder's subtle caret; (b) icon hugs the label text instead of sitting at cell_right. Size, vertical-center, and gap inherit from the platform defaults in table-view.js BASE_CSS. */ body.theme-sift-default { --tv-sort-mask-asc: url("data:image/svg+xml;utf8,"); --tv-sort-mask-desc: url("data:image/svg+xml;utf8,"); } body.theme-sift-default .tv-th { padding-right: 12px; } body.theme-sift-default .tv-sort-arrow { position: static; transform: none; margin-left: 6px; vertical-align: middle; } /* ============================================================ * Theme: mac-light (macOS Finder, light mode) * Palette sampled from Finder list view on macOS Sequoia. * ============================================================ */ body.theme-mac-light { --bg: #FFFFFF; --fg: #1D1D1F; --muted: #6E6E73; --border: #D2D2D7; --code-bg: #F5F5F7; --accent: #0064E1; --accent-fg: #FFFFFF; --surface: #FFFFFF; --hover: rgba(0, 0, 0, 0.04); --shadow-sm: none; --shadow-md: none; --shadow-island: none; /* LF shadow system — light (see docs/plan/ui-radius-shadow-map.md). */ --lf-shadow: rgba(0, 0, 0, 0.08); --lf-shadow-sidebar: 0 0 28px var(--lf-shadow); --lf-shadow-pill: 0 0 24px var(--lf-shadow); --lf-shadow-island: 0 0 16px var(--lf-shadow); --lf-shadow-icon-btn: 0 0 24px var(--lf-shadow); --lf-shadow-card: 0 0 28px var(--lf-shadow); --lf-shadow-trigger: 0 0 12px var(--lf-shadow); --lf-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.10); --ui-splitter-hover-bg: rgba(0, 100, 225, 0.3); --ui-sidebar-bg: #F6F6F9; --ui-sidebar-fg: var(--fg); --ui-sidebar-rail-bg: #F6F6F9; --ui-sidebar-border: #E4E4E8; --ui-sidebar-btn-fg: #3A3A3D; --ui-sidebar-btn-hover: rgba(0, 0, 0, 0.05); --ui-sidebar-btn-hover-fg: var(--fg); --ui-sidebar-btn-active: #DBE8FB; --ui-sidebar-btn-active-fg: var(--accent); --ui-sidebar-island-bg: #F6F6F9; --ui-topbar-bg: var(--bg); --ui-topbar-fg: var(--fg); --ui-topbar-border: #E4E4E8; --ui-topbar-island-bg: transparent; --ui-topbar-muted: var(--muted); --ui-topbar-input-bg: #FFFFFF; --ui-topbar-accent: var(--accent); --ui-topbar-accent-ring: rgba(0, 100, 225, 0.2); /* Mac-light icon-button palette (mac_light theme in the spec). */ --icon-btn-fg: #1D1D1F; /* glyph — idle = hover = active */ --icon-btn-hover-fg: #1D1D1F; --icon-btn-active-fg: #1D1D1F; --icon-btn-border: rgba(0, 0, 0, 0.20); /* ring for hover/active/selected */ /* Tooltip — Aqua light surface. Spec §themes.mac_light.color.tooltip_*. */ --tooltip-bg: #FFFFFF; --tooltip-fg: #1D1D1F; --tooltip-border: rgba(0, 0, 0, 0.10); --tooltip-kbd-fg: rgba(29, 29, 31, 0.55); --ui-splitter-bg: #D2D2D7; --ui-splitter-focus: var(--accent); --tv-text: var(--fg); --tv-bg: #FFFFFF; --tv-thead-bg: var(--tv-bg); --tv-border: #D2D2D7; --tv-border-subtle: #EDEDEF; --tv-muted: var(--muted); --tv-hover: #F4F4F7; --tv-resize-bg: rgba(0, 100, 225, 0.3); --tv-selection-bg: #0064E1; --tv-selection-fg: #FFFFFF; --ui-md-bg: #FFFFFF; --ui-md-fg: var(--fg); --ui-md-border: #E4E4E8; --ui-md-code-bg: #F5F5F7; --ui-md-accent: var(--accent); --ui-md-muted: var(--muted); --ui-md-thead-bg: #F5F5F7; } /* LF rules (island sidebar, border-less topbar, splitter, vibrancy) live in the L2 base block above. This theme contributes palette only. */ /* ============================================================ * Theme: mac-dark (macOS Finder, dark mode) * ============================================================ */ body.theme-mac-dark { --bg: #1E1E1E; --fg: #F5F5F7; --muted: #98989D; --border: #3A3A3D; --code-bg: #2C2C2E; --accent: #0A84FF; --accent-fg: #FFFFFF; --surface: #1E1E1E; --hover: rgba(255, 255, 255, 0.05); --shadow-sm: none; --shadow-md: none; --shadow-island: none; /* LF shadow system — dark. Alpha bumped so the gradient stays perceivable against the darker surface. */ --lf-shadow: rgba(0, 0, 0, 0.38); --lf-shadow-sidebar: 0 0 28px var(--lf-shadow); --lf-shadow-pill: 0 0 24px var(--lf-shadow); --lf-shadow-island: 0 0 16px var(--lf-shadow); --lf-shadow-icon-btn: 0 0 24px var(--lf-shadow); --lf-shadow-card: 0 0 28px var(--lf-shadow); --lf-shadow-trigger: 0 0 12px var(--lf-shadow); --lf-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30); --ui-splitter-hover-bg: rgba(10, 132, 255, 0.3); --ui-sidebar-bg: #252527; --ui-sidebar-fg: var(--fg); --ui-sidebar-rail-bg: #252527; --ui-sidebar-border: #3A3A3D; --ui-sidebar-btn-fg: #BDBDC0; --ui-sidebar-btn-hover: rgba(255, 255, 255, 0.06); --ui-sidebar-btn-hover-fg: var(--fg); --ui-sidebar-btn-active: rgba(10, 132, 255, 0.25); --ui-sidebar-btn-active-fg: #70AEFF; --ui-topbar-bg: var(--bg); --ui-topbar-fg: var(--fg); --ui-topbar-border: #3A3A3D; --ui-topbar-island-bg: transparent; --ui-topbar-muted: var(--muted); --ui-topbar-input-bg: #1E1E1E; /* Mac-dark icon-button palette (mac_dark theme in the spec). */ --icon-btn-fg: #F5F5F7; --icon-btn-hover-fg: #F5F5F7; --icon-btn-active-fg: #F5F5F7; --icon-btn-border: rgba(255, 255, 255, 0.25); /* ring for hover/active/selected */ /* Tooltip — dark Aqua surface, white text. Spec §themes.mac_dark.color.tooltip_*. */ --tooltip-bg: #2D2D2F; --tooltip-fg: #F5F5F7; --tooltip-border: rgba(255, 255, 255, 0.12); --tooltip-kbd-fg: rgba(245, 245, 247, 0.55); --ui-splitter-bg: #3A3A3D; --tv-text: var(--fg); --tv-bg: #1E1E1E; --tv-thead-bg: var(--tv-bg); --tv-border: #3A3A3D; --tv-border-subtle: rgba(255, 255, 255, 0.04); --tv-muted: var(--muted); --tv-hover: rgba(255, 255, 255, 0.06); --tv-resize-bg: rgba(10, 132, 255, 0.3); --tv-selection-bg: #0A84FF; --tv-selection-fg: #FFFFFF; --ui-md-bg: #1E1E1E; --ui-md-fg: var(--fg); --ui-md-border: #3A3A3D; --ui-md-code-bg: #2C2C2E; --ui-md-accent: #70AEFF; --ui-md-muted: var(--muted); --ui-md-thead-bg: #2C2C2E; } body.theme-mac-dark { --icon-pill-bg: #2C2C2E; --icon-pill-border: rgba(255, 255, 255, 0.12); } /* LF rules (island sidebar, border-less topbar, splitter, vibrancy) live in the L2 base block above. This theme contributes palette only. */