/* * Studio theme tokens — shared by every /studio/* page (Boards, * Deviations, Improvements, Dashboard, Pipelines, Reports). * * Each studio template used to inline its own `:root, body.dark-theme * { --st-*: ... }` block, hard-coding dark colours regardless of the * user's theme choice. This file replaces those inline blocks with a * single source of truth that *does* respect the picker: * * Light → body.light-theme * Dark — Rust → body.dark-theme (default forge accent) * Dark — Slate → body.dark-theme.dark-slate (indigo accent) * * The body class is set at first paint by `studio-theme-init.js`. */ /* ------------------------------------------------------------------- Light theme (default fallback if no class set) ------------------------------------------------------------------- */ :root, :root.light-theme, body.light-theme { --st-bg: #f4f5f7; --st-surface: #ffffff; --st-surface-2: #eef0f3; --st-border: #d9dde3; --st-text: #1f2937; /* Bumped from #6b7280 (4.69:1) to #4b5563 (7.0:1) so 11–12 px text hits AA on body and AAA on large — needed for eyebrow + card meta which rely on this token everywhere. */ --st-text-muted: #4b5563; --st-primary: #c9502f; --st-primary-hover:#a8431f; --st-success: #15803d; --st-warning: #b45309; --st-danger: #b91c1c; --st-card-bg: #ffffff; /* Floating action-overlay surface (e.g. board-editor tile toolbar). Page-bg at high opacity so it reads as a translucent chip distinct from both the card it sits on and the surface-2 button-hover. Was hard-coded dark (rgba(15,17,23,0.92)) and didn't follow the theme — icons went dark-on-dark in light mode. */ --st-overlay-bg: rgba(244,245,247,0.94); --st-shadow-sm: 0 1px 2px rgba(15,17,23,0.06); --st-shadow-md: 0 4px 12px rgba(15,17,23,0.08); /* Light theme rail — cool workshop slate (matches DESIGN.md "neutral workshop"). Page bg #f4f5f7, rail slightly darker so the boundary reads, but stays in-family. */ --st-header-from: #e2e6ec; --st-header-to: #d3d8e0; --st-header-accent: #c9502f; --st-header-text: #1f2937; --st-header-text-muted: #6b7280; --st-header-active-bg: rgba(201,80,47,0.10); --st-header-active-text: #1f2937; --st-header-hover-bg: rgba(31,41,55,0.06); --st-header-grid-line: rgba(31,41,55,0.06); --st-header-border: rgba(31,41,55,0.10); /* Severity ladder for kanban cards / health pills */ --st-sev-1: #4ade80; --st-sev-2: #facc15; --st-sev-3: #fb923c; --st-sev-4: #ef4444; --st-sev-5: #991b1b; /* Category palette (light theme — high-contrast text on tints) */ --st-cat-safety: #b91c1c; --st-cat-quality: #92400e; --st-cat-delivery: #1d4ed8; --st-cat-cost: #15803d; --st-cat-people: #6d28d9; /* Console / log surface — used by /preview/tests, /preview/patches, /preview/memos/runs, /preview/memos/library code blocks. Light theme renders a light-grey panel with dark text; dark themes keep the original near-black terminal look. */ --st-log-bg: #f6f7f9; --st-log-text: #1f2937; --st-log-text-muted: #6b7280; --st-log-border: #d9dde3; /* PICK quadrant text colours — light variants */ --st-pick-sweet: #15803d; --st-pick-challenge: #92400e; --st-pick-kill: #6b7280; --st-pick-trash: #b91c1c; /* Focus halo — 3px box-shadow on focused inputs, controls. Resolves to the active theme's primary so slate users get an indigo ring and rust users get a rust ring. Matches DESIGN.md `primary-ring`. */ --st-primary-ring: rgba(201, 80, 47, 0.15); /* Warn-role tokens — copper amber, for PREVIEW pill, IDs toggle, andon-warn, and other "this is a beta / dev / careful" semantics. Decoupled from --st-header-accent so the rail can stay rust while warn pills stay amber. */ --st-warn-accent: #e8a030; --st-warn-tint: rgba(232, 160, 48, 0.15); --st-warn-edge: rgba(232, 160, 48, 0.45); } /* ------------------------------------------------------------------- Dark — Rust (the original Studio palette) ------------------------------------------------------------------- */ :root.dark-theme, body.dark-theme { /* Dark-rust canvas — warmed from cool slate (#0f1117 was R=G>=B) so the warm rail and the page canvas read as the same palette family. Theme audit pass 2 flagged the rail/canvas hue mismatch as the dominant "menu looks like different rust" signal. */ --st-bg: #14110f; --st-surface: #1f1a16; --st-surface-2: #2a231d; --st-border: #322a23; --st-text: #e5e7eb; --st-text-muted: #9ca3af; --st-primary: #c9502f; --st-primary-hover:#a8431f; --st-success: #22c55e; --st-warning: #f59e0b; --st-danger: #ef4444; --st-card-bg: #1d1814; --st-overlay-bg: rgba(20,17,15,0.92); /* warm-dark page-bg glass — see light-theme note */ --st-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --st-shadow-md: 0 4px 12px rgba(0,0,0,0.5); /* Dark theme rail — warm forge. The bottom of the gradient lands close to the new --st-bg so there's no visible rail/canvas seam. */ --st-header-from: #2a1814; --st-header-to: #1c1410; --st-header-accent: #c9502f; --st-header-text: rgba(245,233,216,0.92); --st-header-text-muted: rgba(245,233,216,0.55); /* Active-state composite: bumped from 18% to 28% so the rendered rust on the rail (rust@28% over warm coffee) reads close to the page's solid-rust-on-card-bg, killing the "two different rusts" complaint. Hover is now a faint rust tint instead of white-tint so rail and page-card hover idioms agree. */ --st-header-active-bg: rgba(201,80,47,0.28); --st-header-active-text: #ffffff; --st-header-hover-bg: rgba(201,80,47,0.10); --st-header-grid-line: rgba(255,255,255,0.04); --st-header-border: rgba(255,255,255,0.06); --st-sev-1: #4ade80; --st-sev-2: #facc15; --st-sev-3: #fb923c; --st-sev-4: #ef4444; --st-sev-5: #991b1b; --st-cat-safety: #fca5a5; --st-cat-quality: #fde68a; --st-cat-delivery: #93c5fd; --st-cat-cost: #86efac; --st-cat-people: #d8b4fe; /* Console / log surface — dark terminal look */ --st-log-bg: #0b0d12; --st-log-text: #d1d5db; --st-log-text-muted: #6b7280; --st-log-border: #2a2d3a; /* PICK quadrant text — dark variants */ --st-pick-sweet: #86efac; --st-pick-challenge: #fde68a; --st-pick-kill: #9ca3af; --st-pick-trash: #fca5a5; /* Focus halo — slightly stronger on the dark canvas. */ --st-primary-ring: rgba(201, 80, 47, 0.22); /* Warn-role tokens — copper amber, decoupled from rail accent. */ --st-warn-accent: #e8a030; --st-warn-tint: rgba(232, 160, 48, 0.15); --st-warn-edge: rgba(232, 160, 48, 0.45); } /* ------------------------------------------------------------------- Dark — Slate (indigo primary instead of rust) ------------------------------------------------------------------- */ :root.dark-theme.dark-slate, body.dark-theme.dark-slate { --st-bg: #0e1320; --st-surface: #18203a; --st-surface-2: #20294a; --st-border: #2a335a; --st-text: #e5e7eb; /* Bumped from #94a3b8 (3.9:1 — fail) to #a8b3c5 (4.5:1 — passes AA) on the slate card surface. Same token, same role, just AA-clean. */ --st-text-muted: #a8b3c5; --st-primary: #6366f1; --st-primary-hover:#4f46e5; --st-success: #22c55e; --st-warning: #f59e0b; --st-danger: #ef4444; --st-card-bg: #1c2541; --st-overlay-bg: rgba(14,19,32,0.92); /* slate page-bg glass — see light-theme note */ /* Slate theme rail — cool indigo */ --st-header-from: #18203a; --st-header-to: #0c1226; --st-header-accent: #a5b4fc; --st-header-text: rgba(229,231,235,0.92); --st-header-text-muted: rgba(229,231,235,0.55); --st-header-active-bg: rgba(165,180,252,0.14); --st-header-active-text: #ffffff; --st-header-hover-bg: rgba(255,255,255,0.07); --st-header-grid-line: rgba(255,255,255,0.04); --st-header-border: rgba(255,255,255,0.06); /* Severity ladder + category palette — same as dark-rust, indigo bg contrasts well enough that we keep one ladder for both dark themes */ --st-sev-1: #4ade80; --st-sev-2: #facc15; --st-sev-3: #fb923c; --st-sev-4: #ef4444; --st-sev-5: #991b1b; --st-cat-safety: #fca5a5; --st-cat-quality: #fde68a; --st-cat-delivery: #93c5fd; --st-cat-cost: #86efac; --st-cat-people: #d8b4fe; /* Console / log surface — slightly bluer than rust to match indigo bg */ --st-log-bg: #0a0f1c; --st-log-text: #d1d5db; --st-log-text-muted: #94a3b8; --st-log-border: #2a335a; /* PICK quadrant text — dark variants */ --st-pick-sweet: #86efac; --st-pick-challenge: #fde68a; --st-pick-kill: #94a3b8; --st-pick-trash: #fca5a5; /* Focus halo — indigo on slate */ --st-primary-ring: rgba(99, 102, 241, 0.22); /* Warn-role tokens — copper amber, theme-invariant for warn role */ --st-warn-accent: #e8a030; --st-warn-tint: rgba(232, 160, 48, 0.15); --st-warn-edge: rgba(232, 160, 48, 0.45); } /* The studio templates treat as the painting surface. Make sure the body fill follows the active theme — without this, a light user would see the brand-default dark background bleeding under the page. */ :root.light-theme, body.light-theme, :root.dark-theme, body.dark-theme { background: var(--st-bg); color: var(--st-text); } /* ------------------------------------------------------------------- A11y baseline — global :focus-visible ring + skip-link visibility. Every interactive element gets a deliberate focus ring (2 px solid primary, 2 px offset). Pages can override per-element with a more specific selector when they need a different colour (e.g. kanban cards use the warm-amber accent). Without this, custom-styled buttons in Tauri WebView2 lose the UA default outline and keyboard- only users have no idea where focus is. ------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; border-radius: 2px; } /* Skip-link — visually hidden until focused, then springs into view. */ .cl-skip-link { position: absolute; left: -10000px; top: 8px; background: var(--st-primary); color: #fff; padding: 8px 14px; border-radius: 4px; z-index: 100000; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; } .cl-skip-link:focus { left: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* ------------------------------------------------------------------- Mermaid host — every consumer (chat, memos, pulse boards, pipeline run-detail) renders into a
via the lazy-loader. SVGs scale down to container width; long horizontal diagrams scroll instead of squashing. ------------------------------------------------------------------- */ .mermaid-host { margin: 12px 0; padding: 18px; background: var(--st-card-bg); border: 1px solid var(--st-border); border-radius: 8px; overflow-x: auto; text-align: center; /* Subtle inset highlight + drop shadow gives the diagram a card-like weight that matches the studio chrome. Both directions so the same rule reads under any theme. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); } .mermaid-host svg { max-width: 100%; height: auto; /* Lift the nodes a little — gives them weight without being heavy. SVG drop-shadow filter only paints the painted shapes (not bbox), so it traces every rect/circle/diamond per mermaid's output. */ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); } /* Sharper, slightly thicker edges than mermaid's default 1px hairline — reads better at the small sizes a board widget renders at. */ .mermaid-host svg .edgePath path, .mermaid-host svg .flowchart-link { stroke-width: 1.6px !important; stroke-linecap: round; } /* Mermaid emits arrowheads as inside marker defs; the default fill is currentColor which inherits from the parent. Force them to track the lineColor token cleanly. */ .mermaid-host svg .arrowheadPath, .mermaid-host svg marker path { fill: var(--st-text-muted) !important; } /* Rounded-rectangle nodes with a hint of glow on hover — invites click-through later if we wire up node-actions. */ .mermaid-host svg .node rect, .mermaid-host svg .node polygon, .mermaid-host svg .node circle, .mermaid-host svg .node ellipse, .mermaid-host svg .node path { rx: 6; ry: 6; transition: filter 0.15s, stroke-width 0.15s; } .mermaid-host svg .node:hover rect, .mermaid-host svg .node:hover polygon, .mermaid-host svg .node:hover path { filter: brightness(1.04); stroke-width: 1.8px; } /* Sequence diagrams: tighter actor boxes with a subtle gradient feel via SVG opacity. */ .mermaid-host svg .actor { rx: 6; ry: 6; } /* Edge labels (the "true"/"false" pills on condition branches) need to read against the diagram surface, not float in space. */ .mermaid-host svg .edgeLabel { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .mermaid-host svg .edgeLabel rect { fill: var(--st-card-bg) !important; stroke: var(--st-border) !important; stroke-width: 1px !important; } .mermaid-fallback-note { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--st-danger); margin-bottom: 8px; text-align: left; } .mermaid-fallback { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; background: var(--st-bg); border: 1px solid var(--st-border); border-radius: 4px; padding: 10px 12px; overflow-x: auto; text-align: left; } /* ------------------------------------------------------------------- Reduced motion — respect the user's OS preference. Every transition/animation collapses to ~instant; scroll-behavior drops smooth scrolling. Non-negotiable per DESIGN.md. ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------- fp-modal — shared modal partial. Used by `_modal.html`. Sized variants (DESIGN.md modal width spec): .fp-modal-sm → 480 px (confirmations, single-input prompts) .fp-modal-md → 640 px (default — most CRUD forms) .fp-modal-lg → 960 px (wizards with side panels) All variants use radius 8 (the modal/drawer rung in the radius ladder). ------------------------------------------------------------------- */ .fp-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9000; backdrop-filter: blur(2px); } .fp-modal-backdrop[hidden] { display: none !important; } .fp-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9001; max-height: 92vh; display: flex; flex-direction: column; background: var(--st-card-bg); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); overflow: hidden; color: var(--st-text); } .fp-modal[hidden] { display: none !important; } .fp-modal-sm { width: min(480px, 92vw); } .fp-modal-md { width: min(640px, 94vw); } .fp-modal-lg { width: min(960px, 96vw); } .fp-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--st-border); } .fp-modal-title-wrap { flex: 1; min-width: 0; } .fp-modal-title { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: var(--st-text); } .fp-modal-subtitle { margin-top: 2px; font-size: 11px; color: var(--st-text-muted); } .fp-modal-close { flex: 0 0 auto; width: 30px; height: 30px; background: transparent; color: var(--st-text-muted); border: 1px solid transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; } .fp-modal-close:hover { background: var(--st-surface); color: var(--st-text); border-color: var(--st-border); } .fp-modal-close:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; } .fp-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; } /* Standard footer-actions row, optional. Pages can render their own footer inside the body too. */ .fp-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--st-border); margin: 18px -20px -18px; /* visual hairline anchored to body bottom */ background: var(--st-bg); } /* ------------------------------------------------------------------- Shared page primitives — .fp-canvas / .fp-pagehead / .fp-stat / .fp-section-head / .fp-panel / .fp-btn. Promoted from Claude Design's hand-off so every studio/preview page can use the same canonical shell pieces without inline duplication. Pages that need page-specific tuning override locally — page-level `extra_styles` loads after this file so cascade gives them the win. ------------------------------------------------------------------- */ .fp-canvas { max-width: 1280px; margin: 0 auto; padding: 20px 28px 48px; } /* Page-head — 3 px rust stub on the bottom-left echoes the .cl-active rail-indicator. Stats column on the right is optional. */ .fp-pagehead { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--st-border); position: relative; } .fp-pagehead::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--st-primary); } .fp-pagehead-title { flex: 1; min-width: 0; } .fp-pagehead h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.01em; margin: 6px 0 4px; font-weight: 600; color: var(--st-text); } .fp-pagehead-sub { color: var(--st-text-muted); font-size: 13px; max-width: 620px; } .fp-pagehead-stats { display: flex; gap: 0; } .fp-pagehead-actions { display: flex; gap: 8px; align-items: center; } .fp-stat { text-align: right; padding: 0 16px; border-left: 1px solid var(--st-border); } .fp-stat:first-child { border-left: 0; } .fp-stat-num { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; line-height: 1; font-feature-settings: "tnum"; color: var(--st-text); } .fp-stat-num.fp-warn { color: var(--st-warning); } .fp-stat-num.fp-bad { color: var(--st-danger); } .fp-stat-num.fp-good { color: var(--st-success); } .fp-stat-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--st-text-muted); margin-top: 5px; } /* Section heads — divider hairline + optional right-side link/action */ .fp-section-head { display: flex; align-items: baseline; gap: 18px; margin: 28px 0 12px; } .fp-section-head h2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; } .fp-section-head .fp-section-meta { flex: 1; height: 1px; background: var(--st-border); align-self: center; } .fp-section-head .fp-section-link { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--st-text-muted); text-decoration: none; letter-spacing: 0.04em; } .fp-section-head .fp-section-link:hover { color: var(--st-primary); } /* Panels — generic card primitive. Pages can layer their own .fp-panel-* customizations (e.g. .fp-deck height clamps). */ .fp-panel { background: var(--st-card-bg); border: 1px solid var(--st-border); border-radius: 6px; overflow: hidden; } .fp-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--st-border); background: var(--st-bg); } .fp-panel-head h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; flex: 1; } .fp-panel-head .fp-panel-meta { font-size: 11px; color: var(--st-text-muted); font-family: ui-monospace, monospace; } .fp-panel-body { padding: 16px; } /* Buttons — primary/ghost/sm/danger variants. Used by every Claude- Design-aligned page (Cockpit edit-bar, Knowledge re-index, Files pin-action, etc.). */ .fp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; background: var(--st-card-bg); color: var(--st-text); border: 1px solid var(--st-border); cursor: pointer; text-decoration: none; transition: border-color 0.15s, transform 0.15s, background 0.15s; } .fp-btn:hover { border-color: var(--st-primary); } .fp-btn-primary { background: var(--st-primary); color: #fff; border-color: var(--st-primary); } .fp-btn-primary:hover { background: var(--st-primary-hover); border-color: var(--st-primary-hover); transform: translateY(-1px); } .fp-btn-ghost { background: transparent; border-color: transparent; color: var(--st-text-muted); } .fp-btn-ghost:hover { color: var(--st-text); border-color: var(--st-border); } .fp-btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 4px; } .fp-btn-danger { background: transparent; color: var(--st-danger); border-color: var(--st-danger); } .fp-btn-danger:hover { background: color-mix(in srgb, var(--st-danger) 12%, transparent); } @media (max-width: 720px) { .fp-canvas { padding: 16px 16px 24px; } /* Stack EVERY page header on phones. Pages copied the pagehead pattern under their own prefix (fp-/ag-/kn-/…), each a flex row with .X-pagehead-title{flex:1;min-width:0} that shrank the description to a one-word-per-line column beside the fixed-size stats/actions. The attribute selectors catch them all, so this fixes it once for every page. */ [class$="-pagehead"] { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } [class$="-pagehead-sub"] { max-width: none !important; } [class$="-pagehead-stats"] { justify-content: flex-start !important; } [class$="-pagehead-actions"] { flex-wrap: wrap; } /* Stack EVERY list toolbar on phones. Pages copied the same flex toolbar under their own prefix (ag-/dv-/pb-/wh-/…): a single non-wrapping flex row of [search input | filter chips] that ran the chips off the right edge (e.g. "All / Shared / Rec…" clipped mid-word). Let the row wrap and give the search its own full-width line so the chips sit below it. The attribute selectors catch every prefix, so this fixes it once everywhere. */ [class$="-toolbar"], [class$="-filters"], [class$="-filterbar"] { flex-wrap: wrap !important; row-gap: 10px; } [class$="-toolbar"] > [class$="-search"], [class$="-filters"] > [class$="-search"], [class$="-filterbar"] > [class$="-search"] { flex: 1 1 100% !important; max-width: none !important; } }