/* ============================================================================ SHELL-THEMES.CSS — the three shell directions: Aurora, Porcelain, Graphite. ---------------------------------------------------------------------------- Copied token for token from live Pulse's own styles/shell-themes.css. AURORA IS THE DEFAULT and is defined on the bare :root selector, so a reader who has never chosen sees exactly what production wears today. THE ONE RULE THIS FILE OBEYS: it defines --sh-* and nothing else, and its component rules only ever touch CHROME classes (.app-header-menu*, .top-nav*, .mt3-dock*, .mobile-nav*, .cd-search-trigger, .app-co, .app-rolechip, .app-iconbtn). It never redefines --ink, --surface, --page, --accent or any other token the SCREENS read. Graphite darkens the bar; it must not darken a purchase order. Prefixed with :root deliberately. app.css is loaded BEFORE this file and sets the same properties at plain class specificity; an unprefixed rule here would win on source order today and lose the day someone reorders the links. `:root .x` is (0,2,0) against (0,1,0) and wins either way. Applied as data-shell-theme on , persisted in localStorage under 'uv-shell-theme' (procurement's own key is 'pr-shell-theme'; the file was copied, the key is this module's), and overridable per URL with ?shell=graphite. shell.js applies it at PARSE TIME, not in renderShell. ========================================================================== */ :root, :root[data-shell-theme='aurora'] { /* A — AURORA: the brand gradient, which is what the app wears today. */ --sh-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --sh-header-border: transparent; --sh-fg: #ffffff; --sh-fg-dim: rgba(255, 255, 255, 0.82); --sh-hover: rgba(255, 255, 255, 0.12); --sh-active: rgba(255, 255, 255, 0.18); --sh-search-bg: rgba(255, 255, 255, 0.14); --sh-search-border: rgba(255, 255, 255, 0.28); --sh-search-fg: #ffffff; --sh-search-ph: rgba(255, 255, 255, 0.65); --sh-accent: #667eea; --sh-focus: rgba(255, 255, 255, 0.6); --sh-dock-bg: #ffffff; --sh-dock-line: #e2e8f0; --sh-dock-fg: #64748b; --sh-dock-active: #667eea; --sh-chip-bg: rgba(255, 255, 255, 0.12); --sh-avatar-bg: rgba(255, 255, 255, 0.22); --sh-avatar-fg: #ffffff; } /* B — PORCELAIN: light and quiet; the gradient is spent on the avatar and the primary CTAs only, so the chrome stops competing with page content. */ :root[data-shell-theme='porcelain'] { --sh-header-bg: #ffffff; --sh-header-border: #e2e8f0; --sh-fg: #1e293b; --sh-fg-dim: #64748b; --sh-hover: #f1f5f9; --sh-active: rgba(102, 126, 234, 0.1); --sh-search-bg: #f1f5f9; --sh-search-border: #e2e8f0; --sh-search-fg: #1e293b; --sh-search-ph: #94a3b8; --sh-accent: #5563d4; --sh-focus: rgba(102, 126, 234, 0.55); --sh-dock-bg: #ffffff; --sh-dock-line: #e2e8f0; --sh-dock-fg: #64748b; --sh-dock-active: #5563d4; --sh-chip-bg: #f1f5f9; --sh-avatar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --sh-avatar-fg: #ffffff; } /* C — GRAPHITE: dark slate chrome, light page. */ :root[data-shell-theme='graphite'] { --sh-header-bg: #0f172a; --sh-header-border: #1e293b; --sh-fg: #e2e8f0; --sh-fg-dim: #94a3b8; --sh-hover: rgba(148, 163, 184, 0.14); --sh-active: rgba(129, 140, 248, 0.22); --sh-search-bg: rgba(148, 163, 184, 0.12); --sh-search-border: rgba(148, 163, 184, 0.25); --sh-search-fg: #e2e8f0; --sh-search-ph: #94a3b8; --sh-accent: #818cf8; --sh-focus: rgba(129, 140, 248, 0.6); --sh-dock-bg: #111827; --sh-dock-line: #1f2937; --sh-dock-fg: #94a3b8; --sh-dock-active: #818cf8; --sh-chip-bg: rgba(148, 163, 184, 0.14); --sh-avatar-bg: rgba(129, 140, 248, 0.3); --sh-avatar-fg: #e2e8f0; } /* --------------------------------------------------------------------------- Component rules. Everything below reads a token, so one block serves all three directions and a fourth would be a token block and nothing else. --------------------------------------------------------------------------- */ :root .app-header-menu { background: var(--sh-header-bg); border-bottom: 1px solid var(--sh-header-border); color: var(--sh-fg); } :root .app-header-menu__title { color: var(--sh-fg); } :root .app-header-menu__subtitle { color: var(--sh-fg-dim); } /* Nav triggers */ :root .top-nav__link { color: var(--sh-fg-dim); } :root .top-nav__link:hover { background: var(--sh-hover); color: var(--sh-fg); } :root .top-nav__link--active, :root .top-nav__link--open { background: var(--sh-active); color: var(--sh-fg); } /* User button, avatar, chevron and the hamburger all assumed white-on-gradient. */ :root .app-header-menu__user-btn, :root .app-header-menu__hamburger { background: var(--sh-chip-bg); color: var(--sh-fg); } :root .app-header-menu__user-btn:hover, :root .app-header-menu__hamburger:hover { background: var(--sh-hover); } :root .app-header-menu__user-name { color: var(--sh-fg); } :root .app-header-menu__user-avatar { background: var(--sh-avatar-bg); color: var(--sh-avatar-fg); } :root .app-header-menu__chevron { color: var(--sh-fg-dim); } :root .app-header-menu__hamburger-line { background: var(--sh-fg); } /* Header search trigger */ :root .cd-search-trigger { background: var(--sh-search-bg); border-color: var(--sh-search-border); color: var(--sh-fg); } :root .cd-search-trigger:hover, :root .cd-search-trigger.active { background: var(--sh-hover); } /* Pinned chips */ :root .app-header-menu__fav { background: var(--sh-chip-bg); color: var(--sh-fg); } :root .app-header-menu__fav:hover { background: var(--sh-hover); } :root .app-header-menu__fav-remove { background: var(--sh-fg); color: var(--sh-accent); } /* The three procurement controls that live ON the bar: company scope, role and the DEMO pill's neighbours. They were white cards on a white header before and would be invisible on Graphite. */ :root .app-co { background: var(--sh-search-bg); border-color: var(--sh-search-border); color: var(--sh-fg); } :root .app-co:hover { background: var(--sh-hover); } :root .app-rolechip { background: var(--sh-chip-bg); color: var(--sh-fg); } :root .app-rolechip:hover { background: var(--sh-hover); } :root .app-iconbtn { color: var(--sh-fg-dim); } :root .app-iconbtn:hover { background: var(--sh-hover); color: var(--sh-fg); } /* The brand mark is the Home button, so it has to read as one on every ground. On the two light grounds it sits on white and loses its edge; a hairline ring and a faint tint give it the presence it has on the gradient. */ :root .app-header-menu__logo-link:hover { background: var(--sh-hover); } :root .app-header-menu__logo-link:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 1px; } :root[data-shell-theme='porcelain'] .app-header-menu__logo-link { background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; } :root[data-shell-theme='porcelain'] .app-header-menu__logo-link:hover { background: #eef2ff; } /* The wordmark is one inline SVG, so its two halves take their colour from the shell rather than from three near-duplicate SVGs. */ :root .app-header-menu__logo .wm-word { fill: var(--sh-fg); } :root .app-header-menu__logo .wm-mod { fill: var(--sh-fg-dim); } /* Dock */ :root .mt3-dock { background: var(--sh-dock-bg); border-top-color: var(--sh-dock-line); } :root .mt3-dock__tab { color: var(--sh-dock-fg); } :root .mt3-dock__tab--active { color: var(--sh-dock-active); } :root .app-header-menu :focus-visible { outline-color: var(--sh-focus); }