/* * ProcessStack design tokens. * * Semantic-only naming: tokens describe purpose ("surface", "ink", * "brand", "border") rather than appearance ("blue-500", "gray-700"). * Every component value flows through tokens — a unit test * (PhaseOneStyleTokenTests) fails the build if a hex literal appears * outside this file. * * Light defaults live under :root. Dark overrides live under * [data-theme="dark"]. The theme attribute is set on the * element by the theme switcher. */ /* ────────────────────────────────────────────────────────────────── * Fonts * ────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2"); } /* ────────────────────────────────────────────────────────────────── * Light theme (default) * ────────────────────────────────────────────────────────────────── */ :root { /* Surface — page, cards, sunken (input fields, code blocks), overlays */ --color-surface: #FAFAF9; --color-surface-raised: #FFFFFF; --color-surface-sunken: #F4F4F2; --color-surface-overlay: rgba(15, 15, 16, 0.48); /* Ink — text by emphasis */ --color-ink: #1F1F1E; --color-ink-muted: #5C5C5A; --color-ink-subtle: #A3A39F; --color-ink-on-brand: #FFFFFF; --color-ink-on-status: #FFFFFF; /* Border — by emphasis */ --color-border: #E5E5E2; --color-border-strong: #D0D0CC; --color-border-subtle: #EFEFEC; /* Brand — desaturated indigo */ --color-brand: #5B6BC4; --color-brand-hover: #4F5EB5; --color-brand-active: #444FA0; --color-brand-soft: #ECEEFB; /* Foreground for text/icons placed on top of --color-brand. White in light mode; the dark-mode block below keeps it white because the brand swatch stays mid-tone enough to need light-on-dark contrast in either theme. */ --color-on-brand: #FFFFFF; /* Focus ring — used on interactive elements */ --color-focus-ring: rgba(91, 107, 196, 0.40); /* Status — running (info / blue) */ --color-running-fg: #1D4ED8; --color-running-bg-soft: #DBEAFE; --color-running-border: #93C5FD; /* Status — success */ --color-success-fg: #15803D; --color-success-bg-soft: #DCFCE7; --color-success-border: #86EFAC; /* Status — pending (warn / amber) */ --color-pending-fg: #B45309; --color-pending-bg-soft: #FEF3C7; --color-pending-border: #FCD34D; /* Status — error */ --color-error-fg: #B91C1C; --color-error-bg-soft: #FEE2E2; --color-error-border: #FCA5A5; /* Status — agent (purple) */ --color-agent-fg: #6D28D9; --color-agent-bg-soft: #EDE9FE; --color-agent-border: #C4B5FD; /* Typography — families */ --font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-family-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, "Cascadia Code", "Liberation Mono", "Courier New", monospace; /* Typography — sizes */ --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.75rem; /* 12px */ --font-size-base: 0.8125rem; /* 13px */ --font-size-lg: 0.875rem; /* 14px */ --font-size-xl: 1.125rem; /* 18px */ --font-size-2xl: 1.5rem; /* 24px */ /* Typography — weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Typography — line heights */ --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-relaxed: 1.7; /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ /* Radius scale */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; /* Shadow scale */ --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.16); --shadow-pressed-inset: inset 0 1px 2px rgba(0, 0, 0, 0.10); /* Motion — durations */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; /* Modal sizes — panel width by enum step. */ --modal-width-sm: 320px; --modal-width-md: 480px; --modal-width-lg: 640px; --modal-width-xl: 800px; /* Drawer sizes — side-panel width by enum step. */ --drawer-width-sm: 280px; --drawer-width-md: 380px; --drawer-width-lg: 480px; --drawer-width-xl: 640px; /* Designer shell — header strips (editor toolbar + inspector header) share one height so the two columns align pixel-for- pixel at the bottom edge of their headers. Set once here; both components consume it. PR #558 follow-up. */ --designer-header-height: 2.5rem; --designer-header-padding-x: var(--space-3); /* Designer shell — top bar (brand + asset identity + action buttons). Tall enough to host the ProcessStack mark (32x50 viewBox, ~30px wide) with comfortable padding above/below; distinct from --designer-header-height (2.5rem) used by the editor toolbar + inspector headers below it. */ --designer-topbar-height: 4.5rem; /* Responsive breakpoints (#550 — 6g). Match the spec table (≥1200 / 768–1199 / <768) in rem so OS-zoom users get the same shape. Referenced by component @media queries; ad-hoc pixel values in shell CSS still exist (48rem there = --breakpoint-tablet here = 768px) and can converge later. */ --breakpoint-tablet: 48rem; /* 768px */ --breakpoint-desktop: 75rem; /* 1200px */ /* Card padding — body inset by enum step. None lets media slots run flush to the panel edge. */ --card-padding-sm: var(--space-3); --card-padding-md: var(--space-4); --card-padding-lg: var(--space-6); /* Avatar sizes — square diameter; the circle/square shape is picked at the component level via border-radius. */ --avatar-size-xs: 20px; --avatar-size-sm: 24px; --avatar-size-md: 32px; --avatar-size-lg: 40px; --avatar-size-xl: 56px; /* Avatar status dot — outlined indicator overlaid on the bottom-right corner of the avatar. */ --avatar-status-size-xs: 6px; --avatar-status-size-sm: 8px; --avatar-status-size-md: 10px; --avatar-status-size-lg: 12px; --avatar-status-size-xl: 14px; /* Motion — easings */ --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-decel: cubic-bezier(0, 0, 0.2, 1); --easing-accel: cubic-bezier(0.4, 0, 1, 1); } /* ────────────────────────────────────────────────────────────────── * Dark theme * ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Surface */ --color-surface: #0F0F10; --color-surface-raised: #1A1A1B; --color-surface-sunken: #070707; --color-surface-overlay: rgba(0, 0, 0, 0.64); /* Ink */ --color-ink: #EDEDEA; --color-ink-muted: #A3A39F; --color-ink-subtle: #6B6B68; --color-ink-on-brand: #0F0F10; --color-ink-on-status: #0F0F10; /* Border */ --color-border: #2A2A2C; --color-border-strong: #3F3F42; --color-border-subtle: #1F1F21; /* Brand — lifted for contrast against dark surface */ --color-brand: #8E9DE5; --color-brand-hover: #A0AEEC; --color-brand-active: #B3BFF1; --color-brand-soft: #1F2540; /* Foreground for text/icons placed on top of --color-brand. The dark-mode brand swatch is lighter, so dark ink is readable on it. */ --color-on-brand: #1F1F1E; /* Focus ring */ --color-focus-ring: rgba(142, 157, 229, 0.50); /* Status — running */ --color-running-fg: #93C5FD; --color-running-bg-soft: #1E3A8A; --color-running-border: #3B82F6; /* Status — success */ --color-success-fg: #86EFAC; --color-success-bg-soft: #14532D; --color-success-border: #22C55E; /* Status — pending */ --color-pending-fg: #FCD34D; --color-pending-bg-soft: #78350F; --color-pending-border: #F59E0B; /* Status — error */ --color-error-fg: #FCA5A5; --color-error-bg-soft: #7F1D1D; --color-error-border: #EF4444; /* Status — agent */ --color-agent-fg: #C4B5FD; --color-agent-bg-soft: #4C1D95; --color-agent-border: #A78BFA; } /* ────────────────────────────────────────────────────────────────── * Bootstrap variable bridge * * Bootstrap 5 reads its colors from --bs-* CSS variables. Pointing * those at our semantic tokens means existing Bootstrap-styled * components (.btn-primary, .form-control, .card, etc.) rebrand * automatically and respect the dark theme. * * Only the variables that materially affect the brand or the * light/dark theme are bridged. Bootstrap's own greys remain * Bootstrap's defaults for utility classes that aren't worth * rewriting in this phase. * ────────────────────────────────────────────────────────────────── */ :root { --bs-primary: var(--color-brand); --bs-primary-rgb: 91, 107, 196; --bs-link-color: var(--color-brand); --bs-link-hover-color: var(--color-brand-hover); --bs-body-bg: var(--color-surface); --bs-body-color: var(--color-ink); --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-font-sans-serif: var(--font-family-ui); --bs-font-monospace: var(--font-family-mono); --bs-body-font-size: var(--font-size-base); --bs-body-line-height: var(--line-height-base); } [data-theme="dark"] { --bs-primary-rgb: 142, 157, 229; } /* * Bootstrap component-scoped overrides. * * Bootstrap 5.3 declares per-component CSS variables (e.g. * `--bs-btn-font-size: 1rem`) directly on the component class itself, * which beats anything we set at `:root` because the component's local * declaration wins on the cascade. Setting these to our type tokens * here makes `.btn`, `.form-control`, etc. inherit the global type * scale so the design language stays consistent everywhere — no need * to scatter `style="font-size: ..."` overrides on individual * controls. */ .btn { --bs-btn-font-size: var(--font-size-base); } .btn-sm { --bs-btn-font-size: var(--font-size-sm); } .btn-lg { --bs-btn-font-size: var(--font-size-lg); } .form-control, .form-select { font-size: var(--font-size-base); } .form-control-sm, .form-select-sm { font-size: var(--font-size-sm); } .form-control-lg, .form-select-lg { font-size: var(--font-size-lg); } .form-label, .form-check-label, .form-text { font-size: var(--font-size-sm); } .input-group-text { font-size: var(--font-size-base); } .nav-link { font-size: var(--font-size-base); } .breadcrumb { font-size: var(--font-size-sm); } .page-link { font-size: var(--font-size-base); } .badge { font-size: var(--font-size-xs); } .alert { font-size: var(--font-size-base); } .dropdown-menu { font-size: var(--font-size-base); } .modal-title { font-size: var(--font-size-lg); } .table { font-size: var(--font-size-base); } /* ────────────────────────────────────────────────────────────────── * Base — applied at the document root * ────────────────────────────────────────────────────────────────── */ /* * Base typography is set on `body` only — not on `html` — so that `rem` * units resolve against the unmodified browser-default 16px root. If we * shrink the html font-size too, every rem-valued token (including * --font-size-base itself) compounds against that smaller root and * everything ends up smaller than declared. */ /* Pin html/body to the viewport so panel-level overflow:auto (rail, * .ps-app__main, companion drawer body) is the only thing that scrolls. * Without this lid, stray portaled content (tooltips, toasts, the * impersonation banner) can push body height past 100vh and the whole * page starts scrolling — defeating the per-panel scroll architecture. */ html, body { height: 100%; overflow: hidden; } html { font-family: var(--font-family-ui); color: var(--color-ink); background-color: var(--color-surface); } body { font-family: var(--font-family-ui); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-ink); background-color: var(--color-surface); } code, pre, kbd, samp { font-family: var(--font-family-mono); } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }