/* ============================================================ * Valley Studio — canonical theme token palette (Phase 0 foundation) * ============================================================ * Dark-mode FOUNDATION. This file defines the canonical CSS custom-property * palette (light + dark) that every surface will migrate onto in Phase 1+. * * IN PHASE 0 THIS IS INERT: no body element consumes these variables yet, so * linking this file changes NOTHING visible. The default `data-theme` is * light (set by the pre-paint script in each page ); `data-theme="dark"` * swaps the palette but, until a surface's hardcoded colors are replaced with * `var(--color-*)`, the page renders identically. This keeps the dark merge * safe — toggling dark in Phase 0 does NOT produce a half-dark page. * * Token names are the single source of truth for the migration. The values * map the VERIFIED Google Material palette anchors from the audit (top-25 * colors = ~72% of usage) plus the ad-hoc-gray collapse: * #fff bg / #5f6368 secondary text / #1a73e8 accent / #dadce0 border / * #9aa0a6 tertiary / #3c4043 + #202124 text / #f1f3f4 hover / #d93025 danger * * Dark values are a coherent dark surface (NOT filter:invert) — surfaces lift * from near-black, text drops to near-white, accent brightens slightly for * contrast on a dark background, brand hue preserved. * ============================================================ */ :root, :root[data-theme="light"] { /* PHASE 1: `color-scheme: light` is now declared on the LIGHT selector * unconditionally — light is the default and matches today's UA rendering, so * this is byte-identical. The DARK `color-scheme` is gated on the per-surface * flag attribute (see the dark selector below) so it only flips for OS-dark * users once `dark_mode_enabled` is ON — preserving the "byte-identical while * OFF" contract for the un-flagged OS-dark user. */ color-scheme: light; /* Surfaces */ --color-bg: #ffffff; /* page background (#fff, 411 uses) */ --color-surface: #ffffff; /* card / panel surface */ --color-surface-2: #f1f3f4; /* raised / hover surface (#f1f3f4, 157) */ --color-surface-3: #f8f9fa; /* subtle fill (toolbars, inputs) */ /* Text */ --color-text: #3c4043; /* primary body text (#3c4043, 174) */ --color-text-strong: #202124; /* headings / strong text (#202124, 103) */ --color-text-secondary: #5f6368; /* secondary text (#5f6368, 347) */ --color-text-tertiary: #9aa0a6; /* tertiary / placeholder (#9aa0a6, 201) */ /* Lines */ --color-border: #dadce0; /* default border (#dadce0, 269) */ --color-border-subtle: #f1f3f4; /* faint row divider */ /* Accent (brand blue) */ --color-accent: #1a73e8; /* primary accent (#1a73e8, 336) */ --color-accent-hover: #1765cc; /* accent hover/pressed */ --color-accent-text: #ffffff; /* text/icon ON the accent fill */ --color-accent-subtle: #e8f0fe; /* accent-tinted fill (selected rows) */ /* Status */ --color-danger: #d93025; /* danger / error (#d93025, 124) */ --color-danger-subtle: #fce8e6; /* danger-tinted fill */ --color-success: #1e8e3e; /* success */ --color-warning: #f29900; /* warning / pending */ /* Elevation */ --color-shadow: rgba(60, 64, 67, 0.3); /* Material gray-700 @ 30% */ --color-overlay: rgba(32, 33, 36, 0.42); /* modal scrim */ /* ---------------------------------------------------------------- * INBOX surface tokens (Phase 1). * The inbox chrome layers a lavender/purple brand identity on top of the * Material grays — these hexes are NOT in the Material token set above, so * they get their own tokens. EVERY light value below is byte-identical to * the hex it replaces in inbox.html, so the light theme is pixel-identical * to today. Dark values are chosen for a coherent dark chrome. * ---------------------------------------------------------------- */ /* App + sidebar shell */ --color-app-bg: #fcfbfe; /* .app-layout page bg (#fcfbfe) */ --color-sidebar-bg: #eceaf1; /* .left-sidebar (#eceaf1) */ --color-sidebar-border: #e8e5f0; /* sidebar dividers (#e8e5f0) */ --color-sidebar-label: #6e6893; /* sidebar section labels (#6e6893) */ --color-sidebar-hover: #f6f5f9; /* sidebar row hover (#f6f5f9) */ --color-sidebar-active: #ece7fb; /* sidebar selected row (#ece7fb) */ --color-sidebar-input-border: #d8d5e3;/* sidebar select border (#d8d5e3) */ /* Inbox brand (purple) — distinct from Material --color-accent (blue) */ --color-brand: #6c5ce7; /* compose btn / brand fill (#6c5ce7) */ --color-brand-hover: #5a4bd1; /* brand hover (#5a4bd1) */ --color-brand-text: #ffffff; /* text on brand fill */ /* Secondary text shades used by inbox rows/meta */ --color-text-meta: #656972; /* email to-line / meta (#656972) */ --color-text-muted: #6b7280; /* muted Tailwind-gray (#6b7280) */ /* Thread-view collapsed message-row text (was raw literals / shared meta tokens whose dark values sat too dark against the dark card surface; given dedicated tokens so their dark values clear AA on --color-surface). LIGHT values are byte-identical to what these rows rendered before. */ --color-msg-sender-text: #352c3a; /* collapsed row sender NAME (was raw rgb(53,44,58)) */ --color-msg-addr-text: #9aa0a6; /* collapsed row email ADDRESS (was --color-text-tertiary) */ --color-msg-meta-text: #656972; /* collapsed row snippet / date (was --color-text-meta) */ /* Thread message-list canvas: cards (--color-surface) sit on this. Light = a faint gray so white cards read as cards (Front-style); dark = the app's dark canvas so the lighter card surface pops. */ --color-thread-canvas: #f5f6f8; /* Neutral fills + borders (long tail of inbox grays) */ --color-fill-1: #f0f0f0; /* generic light fill (#f0f0f0) */ --color-fill-2: #f8f9fa; /* subtle fill (#f8f9fa) */ --color-fill-3: #fafafa; /* faint fill (#fafafa) */ --color-border-2: #e0e0e0; /* secondary border (#e0e0e0) */ --color-border-3: #e8eaed; /* hover/raised border (#e8eaed) */ --color-border-faint: #f0f0f0; /* faintest border line (#f0f0f0) */ --color-divider: #e8e8eb; /* faint divider (#e8e8eb) */ --color-text-quaternary: #80868b; /* 4th-level gray text (#80868b) */ /* Status tints (badges / pills) — light values match today exactly */ --color-success-strong: #1e8e3e; /* success text (#1e8e3e) */ --color-success-subtle: #e6f4ea; /* success fill (#e6f4ea) */ --color-warning-strong: #b06000; /* warning text (#b06000) */ --color-warning-subtle: #fff3e0; /* warning fill (#fff3e0) */ --color-accent-strong: #1765cc; /* accent pressed (#1765cc) */ /* ---------------------------------------------------------------- * #1089 — chrome/card/chip BACKGROUNDS + borders that had their text * tokenized in Phase 1 but whose surrounding fill was left raw hex. Each * light value below is BYTE-IDENTICAL to the hex it replaced in inbox.html * (TestInboxLightThemeByteIdentical enforces this); the dark value is chosen * so the surface is legible on the dark page (no light-on-dark). This is the * PRE-FLIP gate completing inbox dark. * ---------------------------------------------------------------- */ /* Neutral panel / card / chip fills */ --color-card-bg: #fafbfc; /* calendar-invite card / panel fill */ --color-card-bg-cool: #fafbff; /* code-exec card */ --color-surface-hover: #f8fafc; /* comment-attachment chip hover */ --color-surface-hover-cool: #f8fafd; /* thread-merge row hover */ --color-surface-warm: #f8f8f7; /* swipe-inner active */ --color-event-diff-bg: #fafaf7; /* thread-event-diff panel */ --color-conv-list-bg: #f0eeeb; /* conv-list bg */ --color-panel-lavender: #f8f7fc; /* password-gate / analytics / loading panel */ --color-comment-bg: #f0f1f4; /* internal-comment text bg */ --color-chip-neutral: #eef1f5; /* reply-recipient chip */ --color-btn-hover: #e8e8e8; /* icon-btn hover fills */ /* Rule / divider lines (border-only) */ --color-rule-line: #ececec; /* header/footer rule borders */ --color-rule-line-2: #eeeef0; /* email-message rule border */ --color-rule-line-faint: #f3f3f3; /* disp-feed-row divider */ --color-rule-line-faint-2: #f3f4f6; /* comment divider */ --color-divider-faint: #f8f8f8; /* faintest row divider */ /* Accent-tinted (blue) fills / chips / borders */ --color-accent-faint: #eef2ff; /* search-live-icon, claude attach chip */ --color-accent-faint-2: #eef2fb; /* claude attachment chip */ --color-accent-tint: #e6f0fe; /* today-calendar chip */ --color-accent-tint-cool: #f0f4ff; /* selected swipe-inner, drawer active */ --color-accent-tint-cool-2: #edf2ff; /* selected swipe-inner (alt) */ --color-accent-disabled: #c4d7f2; /* send-btn:disabled fill */ --color-accent-card-border: #c6d9f7; /* ai-summary card border */ --color-accent-border: #d2e3fc; /* cross-channel note border */ --color-accent-border-2: #c5cae9; /* comment-edit textarea border */ --color-accent-border-3: #c7d2fe; /* comment-attach hover border */ --color-border-cool: #e0e2e6; /* thread-jump-bar top border */ /* Lavender / purple inbox chrome (brand family, not Material) */ --color-lavender-hover: #edebf3; /* conv-card hover swipe-inner */ --color-lavender-hover-2: #ebe9f0; /* rail-btn / mobile-side-tab hover */ --color-lavender-hover-3: #efecf8; /* claude citation chip hover */ --color-lavender-mention: #e7e5ff; /* comment mention bg */ --color-lavender-mention-2: #e8eef7; /* conv comment-preview mention */ --color-lavender-border: #e8e6f0; /* claude citation chip border */ --color-lavender-tint: #f2edfc; /* claude thinking pill */ --color-lavender-faint: #faf9fc; /* claude thinking body */ --color-violet-tint: #f3e8fd; /* ft-audio attach chip */ /* Claude assistant accent (purple fills w/ white text — kept in dark) */ --color-claude-accent: #8b5cf6; /* claude buttons / rail / composer send */ --color-claude-accent-hover: #7c4cf0; /* claude send hover */ /* Warm / pending (amber) surfaces */ --color-pending-bg: #fff8e1; /* follow-up fired banner */ --color-pending-bg-2: #fef7e0; /* share badge / attach chip / jump bar */ --color-pending-border: #ffe082; /* follow-up fired banner border */ --color-pending-border-2: #ffe0b2; /* follow-up indicator border */ --color-pending-border-3: #fdd835; /* typing-indicator border */ --color-highlight: #fff16a; /* search-highlight (text=inherit) */ /* Danger-tinted (rose) surfaces */ --color-danger-faint: #fef7f6; /* compose-attach error / reauth banner */ --color-danger-border: #f5c6c2; /* reauth banner border */ --color-danger-border-2: #f3c2bd; /* comment delete-btn border */ --color-danger-border-3: #e6c4be; /* disp-danger button border */ --color-danger-tint-pink: #fce4ec; /* ft-video attach chip */ /* Info-tinted (blue) surfaces */ --color-info-faint: #eef4ff; /* stale-client reload banner fill */ --color-info-border: #c9dbff; /* stale-client reload banner border */ /* Neutral grays — borders, scrollbar, toggles, disabled */ --color-border-strong: #c0c0c0; /* search-scope hover border */ --color-scrollbar: #bdc1c6; /* scrollbar thumb */ --color-toggle-off: #c4c7c5; /* toggle off / reply-pill hover border */ --color-border-mid: #d0d3d6; /* attach chip hover border */ --color-border-gray: #d1d5db; /* rr-chip-overflow / comment textarea border */ --color-border-warm: #d8d7d2; /* event-diff border */ --color-border-light: #dddddd; /* avatar-circle border */ --color-border-tw: #e5e7eb; /* tailwind-gray comment borders */ /* ---------------------------------------------------------------- * #1092 — PAIRED TEXT colors. #1089 tokenized chrome/card/chip/comment * BACKGROUNDS to dark values, but the TEXT sitting on those surfaces was * still a raw DARK literal → dark-on-dark / unreadable once dark flips. * Each light value below is BYTE-IDENTICAL to the hex it replaced * (TestInboxLightThemeByteIdentical enforces it); the dark value is a * LIGHT/legible value so the text reads on the now-dark surface. Hue is * preserved for the saturated identity-ish colors (file-type chips, claude * purple, diff ins/del) and lifted to the near-white text scale for the * neutral grays. This is the contrast half of the inbox flip gate. * ---------------------------------------------------------------- */ /* Internal-comment body block (the reviewer's worst dark-on-dark) */ --color-comment-text: #2f3137; /* .comment-text body */ --color-comment-author: #3f3f46; /* .comment-author name */ --color-comment-avatar-text: #111827; /* .comment-avatar initials */ --color-comment-mention: #4f46e5; /* .comment-text .mention (on lavender) */ --color-comment-chip-text: #374151; /* comment-attachment-chip / actions-hover / rr-overflow */ /* Conversation-list rows (desktop) — sit on --color-conv-list-bg */ --color-conv-sender-text: #1f1d2a; /* .conv-sender (unread) */ --color-conv-subject-text: #201f2a; /* .conv-subject (unread) */ --color-conv-preview-text: #666976; /* .conv-preview */ --color-conv-time-text: #6f7280; /* .conv-time */ --color-conv-sender-read: #3d4048; /* .conv-card:not(.unread) .conv-sender */ --color-conv-subject-read: #40434d; /* .conv-card:not(.unread) .conv-subject */ --color-conv-comment-text: #5a5f68; /* .conv-comment-preview */ --color-conv-comment-mention: #1a4d8f; /* .conv-comment-preview .comment-mention */ --color-conv-draft-tag-text: #188038; /* .conv-draft-tag */ /* Conversation-list rows (mobile media query) — different hexes */ --color-conv-sender-text-m: #0d1b2a; /* mobile .conv-sender / .conv-subject (unread) */ --color-conv-sender-read-m: #3d4852; /* mobile :not(.unread) .conv-sender */ --color-conv-subject-read-m: #4b5563; /* mobile :not(.unread) .conv-subject */ --color-conv-time-m: #9ca3af; /* mobile .conv-time / .conv-preview */ /* Mobile drawer (sits on --color-surface) */ --color-drawer-name-text: #1a1a1a; /* drawer name / thread-subject-mobile */ --color-drawer-item-text: #333333; /* drawer nav item */ --color-drawer-meta-text: #666666; /* drawer email / count / icon / hamburger */ --color-drawer-section-text: #999999; /* drawer section label */ --color-hamburger-text: #444444; /* mobile hamburger / event-toggle hover */ /* Disposition agent (suggest chip/banner/feed) — purple-on-tint text */ --color-disp-text: #5b4a8a; /* disp-suggest-chip/banner text */ --color-disp-meta-text: #6b6a64; /* disp-feed-meta / empty / dismiss btn / state-dismissed */ --color-disp-danger-text: #b53520; /* disp-feed danger button */ /* Thread event-diff body (sits on --color-event-diff-bg) */ --color-diff-text: #0a0a09; /* .thread-event-diff body */ --color-diff-ins: #1a7f37; /* inserted token (green) */ --color-diff-del: #cf222e; /* removed token (red) */ /* File-type attach-chip icon colors (hue = identity, legible in dark) */ --color-ft-pdf: #c5221f; /* pdf red */ --color-ft-image: #1967d2; /* image blue */ --color-ft-doc: #137333; /* doc green */ --color-ft-sheet: #0d652d; /* sheet green */ --color-ft-video: #ad1457; /* video pink */ --color-ft-audio: #6a1b9a; /* audio purple */ /* Claude assistant accents on tinted pills */ --color-claude-text: #6c4ae6; /* rail/side-tab active + thinking-pill (on lavender) */ --color-claude-error-text: #a82015; /* tool.error message */ --color-search-deep-text: #a142f4; /* deep-search icon/label (purple) */ /* Misc text on tokenized surfaces */ --color-inline-draft-text: #1967d2; /* inline-draft-strip text (on accent-subtle) */ --color-outbound-opens-text: #1f2937; /* outbound-opens-row text */ /* Reaction-chip hover (was raw rgb(); light value preserved) */ --color-reaction-hover: rgb(230, 233, 254); /* reaction-chip:hover fill */ --color-reaction-hover-border: rgb(88, 77, 239);/* reaction-chip:hover border */ /* Amber banner text (on --color-pending-bg) */ --color-pending-text: #5f4300; /* follow-up-fired-banner text */ --color-pending-text-2: #5f4400; /* reply-cross-channel-note text */ --color-pending-text-3: #b06d00; /* share-badge text */ /* Daily-brief headline card gradient stops (was raw light lavender) */ --color-brief-grad-1: #f3e8ff; /* brief headline gradient start */ --color-brief-grad-2: #ede9fe; /* brief headline gradient end */ /* Comment/meta mid-grays + conv chevron + Seen pill (already-light source) */ --color-comment-meta-text: #9ca3af; /* comment size/date + mobile nav label */ --color-conv-chevron: #b0b5bd; /* conv comment-preview ▾ chevron */ --color-seen-pill-bg: rgb(230, 233, 254); /* outbound-opens "Seen" pill fill */ --color-seen-pill-text: rgb(88, 77, 239); /* outbound-opens "Seen" pill text */ /* ---------------------------------------------------------------- * INDEX surface tokens (Phase 2) — the SPA shell (calendar grid, install * cards/list, dashboard tiles/metrics, modals, topbar). index.html is a * coherent Google Material palette, so most of its hexes route onto the * Material/Phase-1 tokens above; these are the index-specific grays, status * tints, and accent variants that lack a clean general token. EVERY light * value below is BYTE-IDENTICAL to the hex it replaced in index.html * (TestIndexLightThemeByteIdentical enforces it); the dark value is chosen so * text reads / surfaces sit legibly on the dark page (the contrast scanner * TestIndexNoContrastViolations enforces zero dark-on-dark / light-on-light). * ---------------------------------------------------------------- */ /* Ad-hoc gray TEXT scale (calendar/dashboard meta, empty states) */ --color-text-gray-333: #333333; /* near-strong gray text (#333) */ --color-text-gray-strong: #444444; /* strong gray text (#444) */ --color-text-gray-mid: #666666; /* mid gray text (#666) */ --color-text-meta-gray: #70757a; /* Material meta gray (#70757a) */ --color-text-gray: #888888; /* gray text (#888) */ --color-text-gray-light: #999999; /* faint gray text (#999) */ /* Accent / brand text variants */ --color-accent-light: #8ab4f8; /* light-blue accent text (#8ab4f8) */ --color-violet-text: #7b61ff; /* violet link/label text (#7b61ff) */ /* Status TEXT variants */ --color-danger-text-short: #cc0000; /* short danger text (#c00) */ --color-danger-text-2: #c0392b; /* danger text variant (#c0392b) */ --color-success-text-2: #2e7d32; /* success text variant (#2e7d32) */ --color-warning-strong-2: #e37400; /* warning strong text/fill (#e37400) */ --color-warning-text-dark: #8a6400; /* dark amber text (#8a6400) */ --color-warning-amber: #f9ab00; /* amber text/fill (#f9ab00) */ /* Status FILLS / SUBTLE tints (badges, banners, confirmations) */ --color-success-fill: #34a853; /* success fill — bright green (#34a853) */ --color-success-subtle-2: #e8f5e9; /* success tint fill (#e8f5e9) */ --color-success-subtle-3: #ceead6; /* success tint fill (#ceead6) — also border */ --color-success-border: #ceead6; /* success border (#ceead6) */ --color-warning-subtle-2: #fff3cd; /* warning tint fill (#fff3cd) */ --color-warning-subtle-3: #f9e6a5; /* warning tint fill (#f9e6a5) — also border */ --color-warning-border: #f9e6a5; /* warning border (#f9e6a5) */ --color-danger-subtle-2: #fad2cf; /* danger tint fill (#fad2cf) — also border */ --color-danger-subtle-3: #f5c6cb; /* danger tint fill (#f5c6cb) — also border */ --color-danger-border-4: #f5c6cb; /* danger border (#f5c6cb) */ --color-danger-border-5: #fad2cf; /* danger border (#fad2cf) */ /* Neutral surfaces + borders specific to index */ --color-surface-warm-2: #faf9f7; /* warm off-white panel (#faf9f7) */ --color-border-gray-mid: #666666; /* mid-gray border (#666) */ --color-border-e5: #e5e5e5; /* faint border (#e5e5e5) */ --color-border-eee: #eeeeee; /* faintest border (#eee) */ /* Toggle/segmented "active" pill — dark fill + white text in light. In dark * the fill inverts to a LIGHT surface so the (now-dark) --color-accent-text * paired on it stays legible (dark-on-light). bg + border share this token. */ --color-toggle-active-bg: #333333; /* active toggle fill/border (#333) */ /* Index-exact variants of near-neighbor tokens (byte-identical to the index * hex, which differs slightly from the inbox token of similar name). */ --color-accent-hover-2: #1a66cf; /* accent pressed/hover (#1a66cf) */ --color-success-strong-2: #188038; /* success text/fill (#188038) */ --color-text-near-black: #181818; /* near-black label text (#181818) */ /* Text that sits on a permanently-LIGHT amber fill (offline banner). The * amber bg (--color-warning-amber) is light in BOTH themes, so this text must * stay DARK in both — it does NOT flip like --color-text-strong does. */ --color-on-warning: #202124; /* dark text on amber banner (#202124) */ /* ---------------------------------------------------------------- * PHASE 3 — Analytics + Knowledge surfaces. Each light value below is * BYTE-IDENTICAL to the hex/rgba it replaces in knowledge.html / * analytics.html (TestKnowledgeLightThemeByteIdentical / * TestAnalyticsLightThemeByteIdentical enforce it); the dark value is a * legible value on the dark surface (paired bg + its text tokenized in the * SAME pass to avoid dark-on-dark). Tokens are shared where the semantics * genuinely match the existing inbox tokens; only genuinely-new shades get a * new token here. * ---------------------------------------------------------------- */ /* Knowledge surfaces */ --color-kb-meta-text: #70757a; /* article meta / empty-state / loading gray */ --color-kb-empty-icon: #dadce0; /* empty-state placeholder icon (faint) */ --color-success-text: #137333; /* confidence-high + saved-btn green TEXT */ --color-warning-faint: #fef7e0; /* confidence-medium badge fill */ --color-accent-deep: #174ea6; /* pending-edit input text (deep blue) */ --color-danger-tint: #fad2cf; /* qa-stop:hover fill */ --color-save-accent: #7c3aed; /* save-standard-btn purple text */ --color-save-accent-faint: rgba(138,92,246,0.12); /* save-standard-btn fill */ --color-save-accent-faint-2: rgba(138,92,246,0.22);/* save-standard-btn hover fill */ --color-save-success-faint: rgba(19,115,51,0.12); /* save-standard-btn saved fill */ --color-accent-focus-ring: rgba(26,115,232,.15); /* input focus box-shadow ring */ /* Analytics shell (its local :root --ink/--bg/--card/... repoint to these) */ --color-analytics-bg: #f6f8fb; /* dashboard page bg (cool off-white) */ --color-analytics-hover: #f8f9fa; /* btn:hover fill */ --color-analytics-btn-border-hover: #c8ccd1; /* btn:hover border */ --color-analytics-tag-gold-bg: #faf3e0; /* subnav 'gold' tag fill */ --color-analytics-tag-gold-text: #a9842f; /* subnav 'gold' tag text */ --color-burden-text: #c26704; /* burden/orange status TEXT (on tint) */ --color-sev-high-bg: #fef0e0; /* severity-high badge fill */ --color-sev-medium-text: #9a6700; /* severity-medium badge text */ --color-proxy-text: #8a6d00; /* prod-approx 'proxy' label text */ --color-danger-faint-2: #fdecea; /* boundary-note danger fill */ --color-danger-strong: #b3261e; /* boundary-note danger text */ --color-chart-err-icon: #f3b3ad; /* chart-state error placeholder icon */ --color-honest-bg: #eef3fb; /* honest/insight-rec note fill (cool blue) */ --color-honest-text: #39507a; /* honest/insight-rec note text */ --color-honest-border: #d2e0f5; /* honest note border */ --color-callout-grad-1: #fff7ed; /* regime-shift callout gradient start */ --color-callout-grad-2: #fffdf9; /* regime-shift callout gradient end */ --color-callout-border: #f3d9b3; /* callout border */ --color-owner-badge-border: #ecdcb3; /* owner-badge border */ --color-shimmer-1: #f1f3f4; /* loading shimmer stop 1 */ --color-shimmer-2: #f8f9fa; /* loading shimmer stop 2 */ --color-chat-head-grad-1: #fbfcfe; /* assistant chat-head gradient start */ --color-chat-disabled: #bdc1c6; /* typing dots / send:disabled fill */ --color-an-chart-border: #e3e6e8; /* assistant in-bubble chart border */ --color-prod-card-bg: #fdf1e3; /* .dp-unk unknown-$ pill fill */ /* Analytics chart CHROME (axes / gridlines / labels / tooltip) — read by the * ECharts theme in analytics.js. Light values are byte-identical to the * literals in VALLEY_THEME; dark values keep the axes/gridlines/labels legible * on the dark plot. The chart DATA-SERIES palette (PALETTE/COL) is identity — * NOT tokenized — it stays constant across themes. */ --color-chart-axis-line: #dadce0; /* category axis line + zoom data line */ --color-chart-split-line: #f1f3f4; /* value-axis gridlines */ --color-chart-axis-label: #9aa0a6; /* axis tick labels (faint) */ --color-chart-text: #5f6368; /* legend / base text */ --color-chart-text-strong: #202124; /* chart title */ --color-chart-label-strong: #3c4043; /* in-bar / on-plot data labels */ --color-chart-zoom-fill: #f1f3f4; /* dataZoom slider track */ --color-chart-zoom-area: #e8eaed; /* dataZoom data-background area */ --color-chart-tooltip-bg: rgba(32,33,36,0.95); /* tooltip surface (dark already) */ --color-chart-tooltip-text: #ffffff; /* tooltip text */ } /* ============================================================ * DARK PALETTE — PER-SURFACE FLAG GATE (Phase 1) * ============================================================ * The dark token VALUES below activate ONLY when BOTH: * - data-theme="dark" (resolved by the pre-paint script: explicit dark, or * system + OS-dark), AND * - data-dark-mode-enabled (set on by a migrated surface's JS ONLY * when the `dark_mode_enabled` feature flag is ON for the user). * * WHY the second gate: the pre-paint script is un-gated by the flag, so an * OS-dark user under the default appearance=system gets data-theme="dark" on * EVERY page — including surfaces not yet migrated (index/analytics in Phase * 1). Requiring data-dark-mode-enabled means dark only renders on surfaces * after the flag is flipped, so an un-flagged OS-dark user stays byte-identical * to today (light palette + light UA chrome). A surface that has NOT been * migrated to the tokens simply never adds the attribute → stays light. * * The attribute is set by inbox.html after /api/auth/me resolves * feature_flags.dark_mode_enabled (and removed if the flag is OFF). Phase 2/3 * surfaces add the same attribute as they migrate. * ============================================================ */ :root[data-theme="dark"][data-dark-mode-enabled] { color-scheme: dark; /* Surfaces — lift from near-black */ --color-bg: #1b1b1d; --color-surface: #242427; --color-surface-2: #2e2e31; --color-surface-3: #35353a; /* Text — drop to near-white */ --color-text: #e3e3e6; --color-text-strong: #f5f5f7; --color-text-secondary: #b0b3b8; --color-text-tertiary: #80868b; /* Lines */ --color-border: #3c4043; --color-border-subtle: #2e2e31; /* Accent — brighten the brand blue for contrast on dark */ --color-accent: #4c8df6; --color-accent-hover: #6ba2f8; --color-accent-text: #06121f; --color-accent-subtle: #1f2b3d; /* Status — desaturate slightly for dark surfaces */ --color-danger: #f28b82; --color-danger-subtle: #3a1f1d; --color-success: #81c995; --color-warning: #fdd663; /* Elevation — deeper shadow on dark */ --color-shadow: rgba(0, 0, 0, 0.5); --color-overlay: rgba(0, 0, 0, 0.6); /* ---- INBOX dark surface tokens (Phase 1) ---- */ /* App + sidebar shell — sidebar lifts a touch above the page bg */ --color-app-bg: #161618; --color-sidebar-bg: #202024; --color-sidebar-border: #34343a; --color-sidebar-label: #9a93c0; --color-sidebar-hover: #2a2a30; --color-sidebar-active: #2f2a44; --color-sidebar-input-border: #45454d; /* Inbox brand (purple) — brighten for contrast on dark */ --color-brand: #8b7bf0; --color-brand-hover: #9d8ff5; --color-brand-text: #0d0a1f; /* Secondary text shades */ --color-text-meta: #9aa0a6; --color-text-muted: #9aa0a6; /* Thread-view collapsed message-row text — lifted onto the dark text scale so each clears AA (>=4.5:1) against the dark card surface --color-surface (#242427): sender name 14.2:1, address/meta 7.4:1. (was: raw rgb(53,44,58) 1.16:1 black-on-black; tertiary #80868b 4.2:1; meta #9aa0a6 5.9:1.) */ --color-msg-sender-text: #f5f5f7; /* primary emphasis (matches text-strong dark) */ --color-msg-addr-text: #b0b3b8; /* secondary (matches text-secondary dark) */ --color-msg-meta-text: #b0b3b8; /* secondary */ --color-thread-canvas: #161618; /* dark canvas; cards (#242427) sit lighter on it */ /* Neutral fills + borders */ --color-fill-1: #2a2a2e; --color-fill-2: #242427; --color-fill-3: #1f1f22; --color-border-2: #3c4043; --color-border-3: #45454d; --color-border-faint: #2e2e31; --color-divider: #34343a; --color-text-quaternary: #80868b; /* Status tints — legible text + low-chroma fills on dark */ --color-success-strong: #81c995; --color-success-subtle: #1d2b21; --color-warning-strong: #fdd663; --color-warning-subtle: #2e2417; --color-accent-strong: #6ba2f8; /* ---- #1089 chrome/card/chip dark surfaces (pre-flip gate) ---- */ /* Neutral panel / card / chip fills — settle near the dark surfaces */ --color-card-bg: #242427; --color-card-bg-cool: #242427; --color-surface-hover: #2a2a30; --color-surface-hover-cool: #2a2a30; --color-surface-warm: #2a2a30; --color-event-diff-bg: #1f1f22; --color-conv-list-bg: #1b1b1d; --color-panel-lavender: #202024; --color-comment-bg: #2a2a30; --color-chip-neutral: #2e2e31; --color-btn-hover: #35353a; /* Rule / divider lines */ --color-rule-line: #34343a; --color-rule-line-2: #2e2e31; --color-rule-line-faint: #2e2e31; --color-rule-line-faint-2: #2e2e31; --color-divider-faint: #2e2e31; /* Accent-tinted (blue) fills / chips / borders */ --color-accent-faint: #1f2b3d; --color-accent-faint-2: #1f2b3d; --color-accent-tint: #1f2b3d; --color-accent-tint-cool: #1f2b3d; --color-accent-tint-cool-2: #1f2b3d; --color-accent-disabled: #26334a; --color-accent-card-border: #2f4a5a; --color-accent-border: #2f4a5a; --color-accent-border-2: #2f4a5a; --color-accent-border-3: #2f4a5a; --color-border-cool: #3c4043; /* Lavender / purple inbox chrome */ --color-lavender-hover: #2a2a30; --color-lavender-hover-2: #2a2a30; --color-lavender-hover-3: #2f2a44; --color-lavender-mention: #2f2a44; --color-lavender-mention-2: #2f2a44; --color-lavender-border: #34343a; --color-lavender-tint: #2f2a44; --color-lavender-faint: #242427; --color-violet-tint: #2f2a44; /* Claude assistant accent — purple holds up on dark w/ light text */ --color-claude-accent: #8b5cf6; --color-claude-accent-hover: #7c4cf0; /* Warm / pending (amber) surfaces — low-chroma dark amber */ --color-pending-bg: #2e2417; --color-pending-bg-2: #2e2417; --color-pending-border: #3a2e1a; --color-pending-border-2: #3a2e1a; --color-pending-border-3: #3a2e1a; --color-highlight: #b8860b; /* Danger-tinted (rose) surfaces */ --color-danger-faint: #3a1f1d; --color-danger-border: #5a2a28; --color-danger-border-2: #5a2a28; --color-danger-border-3: #5a2a28; --color-danger-tint-pink: #3a1f1d; /* Info-tinted (blue) surfaces — dark equivalents */ --color-info-faint: #1c2740; --color-info-border: #2e4372; /* Neutral grays — borders, scrollbar, toggles, disabled */ --color-border-strong: #54545c; --color-scrollbar: #54545c; --color-toggle-off: #54545c; --color-border-mid: #45454d; --color-border-gray: #45454d; --color-border-warm: #3c4043; --color-border-light: #45454d; --color-border-tw: #3c4043; /* ---- #1092 paired TEXT — legible on the now-dark surfaces ---- * Neutral grays lift to the dark text scale (strong #f5f5f7 / body #e3e3e6 / * secondary #b0b3b8 / tertiary #80868b). Saturated identity hues (file-type * chips, claude purple, diff ins/del) lighten while keeping their hue so the * red/blue/green/purple identity survives + reads on the dark tint. */ /* Internal-comment body block (on --color-comment-bg #2a2a30) */ --color-comment-text: #e3e3e6; --color-comment-author: #b0b3b8; --color-comment-avatar-text: #f5f5f7; --color-comment-mention: #c4bdfb; /* light indigo on dark lavender */ --color-comment-chip-text: #c8ccd2; /* Conversation-list rows (desktop) — on --color-conv-list-bg #1b1b1d */ --color-conv-sender-text: #f0f0f3; --color-conv-subject-text: #e3e3e6; --color-conv-preview-text: #abafb6; --color-conv-time-text: #9aa0a6; --color-conv-sender-read: #c4c7cc; --color-conv-subject-read: #bdc0c6; --color-conv-comment-text: #abafb6; --color-conv-comment-mention: #8fb6e8; /* light blue on dark lavender tint */ --color-conv-draft-tag-text: #81c995; /* success green, light */ /* Conversation-list rows (mobile) */ --color-conv-sender-text-m: #f0f0f3; --color-conv-sender-read-m: #c4c7cc; --color-conv-subject-read-m: #bdc0c6; --color-conv-time-m: #9aa0a6; /* Mobile drawer (on --color-surface #242427) */ --color-drawer-name-text: #f5f5f7; --color-drawer-item-text: #d6d8dd; --color-drawer-meta-text: #9aa0a6; --color-drawer-section-text: #9aa0a6; --color-hamburger-text: #b0b3b8; /* Disposition agent text (on brand-purple tints) */ --color-disp-text: #c4bdf0; /* light purple on dark surface/tint */ --color-disp-meta-text: #9aa0a6; --color-disp-danger-text: #f28b82; /* danger, light */ /* Thread event-diff body (on --color-event-diff-bg #1f1f22) */ --color-diff-text: #e3e3e6; --color-diff-ins: #81c995; /* light green */ --color-diff-del: #f28b82; /* light red */ /* File-type attach-chip icon colors (lightened, hue preserved) */ --color-ft-pdf: #f2a39f; --color-ft-image: #8fb6e8; --color-ft-doc: #81c995; --color-ft-sheet: #7fc497; --color-ft-video: #f0a0c4; --color-ft-audio: #d0a3e8; /* Claude assistant accents on tinted pills */ --color-claude-text: #b8a6f5; /* light purple */ --color-claude-error-text: #f28b82; --color-search-deep-text: #d0a3f4; /* light purple */ /* Misc text on tokenized surfaces */ --color-inline-draft-text: #8fb6e8; /* light blue on accent-subtle dark */ --color-outbound-opens-text: #e3e3e6; /* Reaction-chip hover — dark fill + brighter brand border */ --color-reaction-hover: #2f2a44; --color-reaction-hover-border: #8b7bf0; /* Amber banner text — light amber on dark */ --color-pending-text: #fdd663; --color-pending-text-2: #fdd663; --color-pending-text-3: #f0c060; /* Daily-brief headline gradient — dark purple */ --color-brief-grad-1: #2f2a44; --color-brief-grad-2: #2a2740; /* Comment/meta mid-grays + conv chevron + Seen pill — legible on dark */ --color-comment-meta-text: #9aa0a6; --color-conv-chevron: #80868b; --color-seen-pill-bg: #2f2a44; --color-seen-pill-text: #b8a6f5; /* ---- INDEX dark surface tokens (Phase 2) ---- * Grays lift to the dark text scale (strong #d6d8dd / mid #abafb6 / faint * #9aa0a6). Saturated status hues (success/warning/danger) lighten while * keeping their hue so the green/amber/red identity survives + reads on the * dark surface. Status SUBTLE tints drop to low-chroma dark fills. The * contrast scanner (TestIndexNoContrastViolations) verifies every migrated * text/bg pair clears the WCAG floor in dark. */ /* Ad-hoc gray TEXT scale — lifted to near-white */ --color-text-gray-333: #d6d8dd; --color-text-gray-strong: #c4c7cc; --color-text-gray-mid: #abafb6; --color-text-meta-gray: #9aa0a6; --color-text-gray: #9aa0a6; --color-text-gray-light: #9aa0a6; /* Accent / brand text variants — already light, hold on dark */ --color-accent-light: #8ab4f8; --color-violet-text: #b8a6f5; /* Status TEXT variants — lightened, hue preserved */ --color-danger-text-short: #f28b82; --color-danger-text-2: #f28b82; --color-success-text-2: #81c995; --color-warning-strong-2: #fdd663; --color-warning-text-dark: #fdd663; --color-warning-amber: #fdd663; /* Status FILLS / SUBTLE tints — bright fills hold; subtle tints go dark */ --color-success-fill: #2e9e54; /* slightly deepened green so white text holds */ --color-success-subtle-2: #1d2b21; --color-success-subtle-3: #223a2a; --color-success-border: #2f5a3c; --color-warning-subtle-2: #2e2417; --color-warning-subtle-3: #3a2e1a; --color-warning-border: #4a3a1e; --color-danger-subtle-2: #3a1f1d; --color-danger-subtle-3: #3a1f1d; --color-danger-border-4: #5a2a28; --color-danger-border-5: #5a2a28; /* Neutral surfaces + borders specific to index */ --color-surface-warm-2: #242427; --color-border-gray-mid: #54545c; --color-border-e5: #34343a; --color-border-eee: #2e2e31; /* Toggle "active" pill — inverts to a light fill so the dark accent-text reads */ --color-toggle-active-bg: #e3e3e6; /* Index-exact variants */ --color-accent-hover-2: #6ba2f8; /* brightened accent on dark */ --color-success-strong-2: #81c995; /* light green on dark */ --color-text-near-black: #f0f0f3; /* near-white label text on dark */ /* On-amber text stays DARK — the amber banner fill is light in both themes */ --color-on-warning: #1b1b1d; /* ---- PHASE 3 Knowledge dark surfaces ---- * Grays lift to the dark text scale; saturated identity hues (success green, * danger rose, accent blue, save purple) lighten but keep their hue so they * read on the dark fill. The faint rgba fills settle to low-chroma dark * tints so the surface itself is visibly dark (not a light wash). */ --color-kb-meta-text: #9aa0a6; /* meta gray → tertiary on dark */ --color-kb-empty-icon: #74747a; /* faint placeholder icon on dark (legible) */ --color-success-text: #81c995; /* light green text on dark */ --color-warning-faint: #2e2417; /* dark amber badge fill */ --color-accent-deep: #8fb6e8; /* light blue text on dark */ --color-danger-tint: #5a2a28; /* dark rose hover fill */ --color-save-accent: #c4bdfb; /* light purple text on dark */ --color-save-accent-faint: rgba(184,166,245,0.16); /* save-btn fill on dark */ --color-save-accent-faint-2: rgba(184,166,245,0.26);/* save-btn hover fill on dark */ --color-save-success-faint: rgba(129,201,149,0.16); /* saved fill on dark */ --color-accent-focus-ring: rgba(108,162,248,.30); /* focus ring on dark */ /* ---- PHASE 3 Analytics dark surfaces ---- * Shell grays lift to the dark surface/text scale; the chart CHROME (axes, * gridlines, labels, legend, title) gets dark-legible values while the chart * DATA-SERIES palette stays identity (untouched). The tooltip was already a * dark surface in light, so it holds up on dark unchanged. */ --color-analytics-bg: #161618; /* dashboard page bg (near-black) */ --color-analytics-hover: #2a2a30; /* btn:hover fill */ --color-analytics-btn-border-hover: #54545c; /* btn:hover border */ --color-analytics-tag-gold-bg: #2e2417; /* gold tag fill */ --color-analytics-tag-gold-text: #e0c074; /* gold tag text (light) */ --color-burden-text: #f0a868; /* burden/orange text — light on dark */ --color-sev-high-bg: #2e2417; /* severity-high badge fill (dark amber) */ --color-sev-medium-text: #e0b860; /* severity-medium text — light amber */ --color-proxy-text: #d4b048; /* proxy label text — light amber on dark */ --color-danger-faint-2: #3a1f1d; /* boundary-note danger fill (dark rose) */ --color-danger-strong: #f28b82; /* boundary-note danger text — light red */ --color-chart-err-icon: #b86b66; /* error placeholder icon — legible on dark */ --color-honest-bg: #1f2b3d; /* honest note fill (dark cool blue) */ --color-honest-text: #9fc0ec; /* honest note text — light blue */ --color-honest-border: #2f4a5a; /* honest note border */ --color-callout-grad-1: #2e2417; /* callout gradient start (dark amber) */ --color-callout-grad-2: #242427; /* callout gradient end */ --color-callout-border: #3a2e1a; /* callout border */ --color-owner-badge-border: #3a2e1a; /* owner-badge border */ --color-shimmer-1: #2a2a30; /* loading shimmer stop 1 */ --color-shimmer-2: #35353a; /* loading shimmer stop 2 */ --color-chat-head-grad-1: #202024; /* chat-head gradient start */ --color-chat-disabled: #54545c; /* typing dots / send:disabled fill */ --color-an-chart-border: #3c4043; /* assistant in-bubble chart border */ --color-prod-card-bg: #2e2417; /* parity slot */ /* Chart chrome — legible on the dark plot */ --color-chart-axis-line: #3c4043; /* axis lines / zoom data line */ --color-chart-split-line: #2e2e31; /* gridlines (faint on dark) */ --color-chart-axis-label: #9aa0a6; /* axis tick labels */ --color-chart-text: #b0b3b8; /* legend / base text */ --color-chart-text-strong: #f5f5f7; /* chart title */ --color-chart-label-strong: #e3e3e6; /* on-plot data labels */ --color-chart-zoom-fill: #2e2e31; /* dataZoom slider track */ --color-chart-zoom-area: #35353a; /* dataZoom data-background area */ --color-chart-tooltip-bg: rgba(8,8,10,0.96); /* tooltip surface (deeper on dark) */ --color-chart-tooltip-text: #f5f5f7; /* tooltip text */ }