@the-portland-company/shell 0.67.0 → 0.68.0

package/dist/chrome.css

@@ -150,11 +150,12 @@
   --tab-radius: 12px;
 
   /* Sidebar (nav chrome) */
-  --sidebar-width: 240px;
+  --sidebar-width: 236px;
   --sidebar-bg: #FFFFFF;
   --sidebar-border: #E2E8F0;
-  --sidebar-brand-logo-height: 40px;
-  --sidebar-org-logo-max-height: 70px;
+  --sidebar-brand-logo-height: 24px;
+  --sidebar-org-logo-max-height: 34px;
+  --sidebar-org-band-height: 48px;
   --sidebar-item-radius: 8px;
   --sidebar-item-padding-x: 16px;
   --sidebar-item-padding-y: 10px;
@@ -169,16 +170,20 @@
   --sidebar-scrollbar-thumb: #CBD5E0;
 
   /* Topbar */
-  --topbar-height: 80px;
+  --topbar-height: 60px;
   --topbar-bg: #FFFFFF;
   --topbar-border: #E2E8F0;
-  --topbar-padding-x: 16px;
+  --topbar-padding-x: 20px;
   --topbar-title-size: 18px;
   --topbar-title-weight: 700;
   --topbar-title-color: #2F3136;
   --topbar-breadcrumb-color: #718096;
-  --topbar-icon-button-size: 32px;
-  --topbar-icon-size: 20px;
+  --topbar-icon-button-size: 34px;
+  --topbar-icon-button-radius: 5px;
+  --topbar-icon-gap: 6px;
+  --topbar-icon-size: 17px;
+  /* Sunken field surface (universal search) — design `--surface-sunken`. */
+  --surface-sunken: #F0F4F7;
 
   /* Shell chrome: brand color ramps (= Specs race-red) */
   --app-color-brand-50: #FDECEE;
@@ -390,6 +395,30 @@
   --sidebar-text-muted: #B5B7BB;
   --sidebar-meta-text: #9A9CA0;
   --sidebar-hover-bg: #2A2B30;
+  /* Selected mode button: the Mode accent, graphite for Relationship. */
+  --sidebar-mode-selected-bg: var(--mode-accent, #2F3136);
+}
+/* Specs/Contacts design rail (ink-900 rail): hairlines and type washes are
+   white at fixed alphas; cards sit on ink-800. These are NOT mode-scoped —
+   the rail is dark in every app and every theme (the first cut put them under
+   `[data-politogy-mode]`, which an unscoped app such as Contacts never
+   stamps, so its light theme drew the org card in the light panel colour with
+   white text and the active row in solid brand red). None of these names is
+   defined by the runtime Brand sheet, so `:root` here is authoritative; the
+   `.dark` block below does not touch them either. */
+:root {
+  --sidebar-line: rgba(255, 255, 255, 0.16);
+  --border-inverse: rgba(255, 255, 255, 0.16);
+  --sidebar-eyebrow: rgba(255, 255, 255, 0.38);
+  --sidebar-caption: rgba(255, 255, 255, 0.5);
+  --sidebar-row-text: rgba(255, 255, 255, 0.66);
+  --sidebar-row-hover-bg: rgba(255, 255, 255, 0.05);
+  --sidebar-active-bg: rgba(255, 255, 255, 0.09);
+  --sidebar-active-text: #FFFFFF;
+  --sidebar-card-bg: #232428;
+  --sidebar-avatar-bg: #3B3E44;
+  --mode-track-bg: #232428;
+  --sidebar-mode-selected-bg: #2F3136;
 }
 
 [data-politogy-mode="campaign"] {
@@ -410,16 +439,16 @@
 --------------------------------------------------------------------------- */
 .topbar-widget-slot button {
   position: relative !important;
-  height: var(--topbar-icon-button-size, 32px) !important;
-  min-height: var(--topbar-icon-button-size, 32px) !important;
-  width: var(--topbar-icon-button-size, 32px) !important;
-  min-width: var(--topbar-icon-button-size, 32px) !important;
+  height: var(--topbar-icon-button-size, 34px) !important;
+  min-height: var(--topbar-icon-button-size, 34px) !important;
+  width: var(--topbar-icon-button-size, 34px) !important;
+  min-width: var(--topbar-icon-button-size, 34px) !important;
   padding: 0 !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   border: 1px solid var(--line) !important;
-  border-radius: 9999px !important;
+  border-radius: var(--topbar-icon-button-radius, 5px) !important;
   background: transparent !important;
   color: var(--topbar-icon-color, var(--muted)) !important;
 }
@@ -447,8 +476,8 @@
    otherwise win. Keep these in lockstep with TopBarCountBadge. */
 .topbar-widget-slot button > span > span {
   position: absolute !important;
-  top: -4px !important;
-  right: -4px !important;
+  top: -5px !important;
+  right: -5px !important;
   left: auto !important;
   bottom: auto !important;
   display: inline-flex !important;
@@ -463,7 +492,58 @@
   background: var(--chrome-danger, #e63946) !important;
   color: #fff !important;
   font-size: 10px !important;
-  font-weight: 400 !important;
-  line-height: 1 !important;
+  font-weight: 700 !important;
+  line-height: 1rem !important;
   box-shadow: none !important;
 }
+
+/* ---------------------------------------------------------------------------
+   Dark theme — `.dark` / `[data-theme="dark"]` on <html> (applied by
+   `theme-preference` from the politogy_theme cookie). Neutral-black surfaces
+   per Reference/Global-Rules → Dark Mode (neutral black, never tinted); the
+   rail is already ink in every Mode so only the page/top-bar/popover tokens
+   move. Specs/Contacts Visual Regression gates light AND dark.
+--------------------------------------------------------------------------- */
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  --surface-1: #1B1C20;
+  --surface-2: #232428;
+  --surface-sunken: #141518;
+  --sidebar-bg: #1B1C20;
+  --sidebar-border: rgba(255, 255, 255, 0.16);
+  --sidebar-text: #F5F5F5;
+  --sidebar-text-muted: #B5B7BB;
+  --sidebar-meta-text: #9A9CA0;
+  --topbar-bg: #1B1C20;
+  --topbar-border: rgba(255, 255, 255, 0.16);
+  --topbar-title-color: #F5F5F5;
+  --topbar-breadcrumb-color: #B5B7BB;
+  --panel: var(--topbar-bg);
+  --panel-elevated: var(--surface-2);
+  --nav-surface: var(--sidebar-bg);
+  --line: var(--topbar-border);
+  --chrome-page-bg: var(--surface-sunken);
+  --color-bg: var(--surface-sunken);
+  --color-surface: var(--surface-1);
+  --color-border: var(--topbar-border);
+  --color-text: var(--topbar-title-color);
+  --nav-submenu-bg: var(--surface-2);
+  --beta-banner-bg: #3A2F14;
+  --beta-banner-text: #FDE8C8;
+}
+
+/* The runtime Brand sheet (specs /api/tokens?format=css, appended AFTER this
+   file by every consumer) ends its own `.dark {}` with shadcn-style HSL
+   triples — `--foreground: 210 40% 98%`, `--muted: 217.2 32.6% 17.5%`,
+   `--background: 222.2 84% 4.9%`. The native chrome reads those names as full
+   colors (`text-[color:var(--foreground)]`), so in dark they were invalid at
+   computed-value time and every label fell to the inherited black. `html.dark`
+   outranks a bare `.dark` whatever the source order, and the aliases point at
+   the Brand sheet's own dark values so Brand stays the source of truth. */
+html.dark,
+html[data-theme="dark"] {
+  --background: var(--surface-1);
+  --foreground: var(--topbar-title-color);
+  --muted: var(--topbar-breadcrumb-color);
+}

package/dist/{chunk-JHIFJZ73.js → chunk-NHBNM5P3.js}

@@ -56,6 +56,15 @@ function clearPendingThemeChoice() {
   writeSharedCookie(THEME_PENDING_COOKIE, "", 0);
 }
 function resolveTheme(pref) {
+  if (pref === "dark") return "dark";
+  if (pref === "system") {
+    try {
+      if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+    } catch {
+    }
+  }
   return "light";
 }
 function readStoredThemePreference() {
@@ -73,10 +82,11 @@ function readResolvedTheme() {
 }
 function applyThemePreference(pref) {
   if (typeof document === "undefined") return;
-  const resolved = resolveTheme();
+  const resolved = resolveTheme(pref);
   const d = document.documentElement;
-  d.classList.remove("dark");
+  d.classList.toggle("dark", resolved === "dark");
   try {
+    d.setAttribute("data-theme", resolved);
     d.style.colorScheme = resolved;
   } catch {
   }
@@ -90,13 +100,12 @@ var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
 var pref=cookie||ls||"system";
 if(VALID.indexOf(pref)===-1)pref="system";
 if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
-// Dark Mode retired platform-wide 2026-09-21 \u2014 always light, and strip any
-// stale dark class a pre-retirement cookie/localStorage value left behind.
+var dark=pref==="dark"||(pref==="system"&&!!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches));
 var d=document.documentElement;
-d.classList.remove("dark");
-try{d.style.colorScheme="light";}catch(e){}
+if(dark)d.classList.add("dark");else d.classList.remove("dark");
+try{d.setAttribute("data-theme",dark?"dark":"light");d.style.colorScheme=dark?"dark":"light";}catch(e){}
 }catch(e){}})();`;
 
 export { THEME_COOKIE, THEME_PENDING_COOKIE, THEME_PREPAINT_SCRIPT, THEME_STORAGE_KEY, applyThemePreference, clearPendingThemeChoice, isThemePreference, markThemeChoicePending, readPendingThemeChoice, readResolvedTheme, readStoredThemePreference, readThemeCookie, resolveTheme, writeThemeCookie };
-//# sourceMappingURL=chunk-JHIFJZ73.js.map
-//# sourceMappingURL=chunk-JHIFJZ73.js.map
+//# sourceMappingURL=chunk-NHBNM5P3.js.map
+//# sourceMappingURL=chunk-NHBNM5P3.js.map

package/dist/chunk-NHBNM5P3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme-preference.ts"],"names":[],"mappings":"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","file":"chunk-NHBNM5P3.js","sourcesContent":["// Universal theme preference — the ONE cross-app contract.\n//\n// One theme choice (Light / Dark / System) follows the authenticated user\n// across every Politogy app + subdomain. Three layers cooperate:\n//   1. VRM Core `profiles.theme_preference` — source of truth, persisted via\n//      the chrome API (`PATCH me/preferences { themePreference }`) and read\n//      back from `GET me` (`themePreference`).\n//   2. `.politogyvrm.com` cookie `politogy_theme` — zero-flash pre-paint\n//      vehicle that crosses subdomains (auth session cookies are host-only).\n//   3. localStorage `politogy_theme` — offline fallback store.\n//\n// Ported verbatim from contacts/apps/web/src/lib/theme.ts (the origin of the\n// contract) so every app runs the identical behavior from npm. This module is\n// server-safe (no 'use client'): layouts import THEME_PREPAINT_SCRIPT for the\n// pre-paint inline script. The client-side hook lives in ./native\n// (useThemePreference).\n\nexport type ThemePreference = 'light' | 'dark' | 'system'\n\n// Single converged key for BOTH the localStorage store and the\n// cross-subdomain cookie, so a choice in one app is the same key in the next.\nexport const THEME_STORAGE_KEY = 'politogy_theme'\nexport const THEME_COOKIE = 'politogy_theme'\n\n// A local choice that has NOT yet reached VRM Core `profiles.theme_preference`.\n//\n// Politogy ID (auth.politogyvrm.com) has no chrome-API session to PATCH, so a\n// theme picked on the login screen only ever lands in the cookie. Without this\n// marker the next app booted the stale profile value through the reconcile step\n// below and overwrote the user's fresh choice — the \"I set System and it keeps\n// going back to Light\" bug (HITL 2026-07-23). The flag rides the same\n// cross-subdomain cookie so the first app that CAN talk to the chrome API\n// pushes the choice up instead of pulling the stale one down.\nexport const THEME_PENDING_COOKIE = 'politogy_theme_pending'\n\nconst VALID: readonly ThemePreference[] = ['light', 'dark', 'system']\n\nexport function isThemePreference(v: unknown): v is ThemePreference {\n  return typeof v === 'string' && (VALID as readonly string[]).includes(v)\n}\n\n/** Read the shared cookie (browser only; null on the server or when unset). */\nexport function readThemeCookie(): ThemePreference | null {\n  if (typeof document === 'undefined') return null\n  try {\n    const m = document.cookie.match(\n      new RegExp(`(?:^|;\\\\s*)${THEME_COOKIE}=([^;]+)`),\n    )\n    const v = m ? decodeURIComponent(m[1]) : null\n    return isThemePreference(v) ? v : null\n  } catch {\n    return null\n  }\n}\n\n// Set the cross-subdomain cookie. On a *.politogyvrm.com host we scope it to\n// the parent domain so every app subdomain reads it; on any other host\n// (localhost, *.pages.dev preview) we fall back to a host-only cookie so\n// local/preview theming still works without a mismatched Domain attribute\n// (which browsers silently drop). 1-year, SameSite=Lax, Secure on https.\nexport function writeThemeCookie(pref: ThemePreference): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') return\n  const host = window.location.hostname\n  const onParentDomain = /(^|\\.)politogyvrm\\.com$/i.test(host)\n  const domainAttr = onParentDomain ? '; Domain=.politogyvrm.com' : ''\n  const secure = window.location.protocol === 'https:' ? '; Secure' : ''\n  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(\n    pref,\n  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`\n}\n\n// Write an arbitrary cross-subdomain cookie with the same scoping rules as the\n// theme cookie itself (parent domain on *.politogyvrm.com, host-only elsewhere).\nfunction writeSharedCookie(name: string, value: string, maxAgeSeconds: number): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') return\n  const host = window.location.hostname\n  const domainAttr = /(^|\\.)politogyvrm\\.com$/i.test(host) ? '; Domain=.politogyvrm.com' : ''\n  const secure = window.location.protocol === 'https:' ? '; Secure' : ''\n  document.cookie = `${name}=${encodeURIComponent(\n    value,\n  )}; Path=/; Max-Age=${maxAgeSeconds}; SameSite=Lax${domainAttr}${secure}`\n}\n\n/**\n * Mark the current cookie value as a local choice that still has to reach the\n * user's profile. Call this from any surface that changes the theme WITHOUT a\n * chrome-API session (Politogy ID's login screen is the only one today).\n */\nexport function markThemeChoicePending(pref: ThemePreference): void {\n  writeSharedCookie(THEME_PENDING_COOKIE, pref, 31536000)\n}\n\n/** The pending (not-yet-persisted) local choice, if any. */\nexport function readPendingThemeChoice(): ThemePreference | null {\n  if (typeof document === 'undefined') return null\n  try {\n    const m = document.cookie.match(\n      new RegExp(`(?:^|;\\\\s*)${THEME_PENDING_COOKIE}=([^;]+)`),\n    )\n    const v = m ? decodeURIComponent(m[1]) : null\n    return isThemePreference(v) ? v : null\n  } catch {\n    return null\n  }\n}\n\n/** Clear the pending marker once the choice has been written to the profile. */\nexport function clearPendingThemeChoice(): void {\n  writeSharedCookie(THEME_PENDING_COOKIE, '', 0)\n}\n\n/** Resolve a preference to the concrete light/dark it renders as right now. */\nexport function resolveTheme(pref: ThemePreference): 'light' | 'dark' {\n  // Dark is honoured again from 0.68.0 (Specs/Contacts Visual Regression\n  // gate runs light AND dark; the chrome ships a `.dark` token block). An\n  // explicit 'dark' resolves dark; 'system' follows the OS; anything else —\n  // and any environment without matchMedia — is light.\n  if (pref === 'dark') return 'dark'\n  if (pref === 'system') {\n    try {\n      if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n      }\n    } catch {\n      /* fall through */\n    }\n  }\n  return 'light'\n}\n\n/**\n * Read the stored preference the way the pre-paint script does — cookie →\n * localStorage → `'system'`. Kept in lockstep with THEME_PREPAINT_SCRIPT so a\n * runtime reader can never disagree with what was applied before paint.\n */\nexport function readStoredThemePreference(): ThemePreference {\n  const cookie = readThemeCookie()\n  if (cookie) return cookie\n  try {\n    const stored = window.localStorage.getItem(THEME_STORAGE_KEY)\n    if (isThemePreference(stored)) return stored\n  } catch {\n    /* localStorage may be unavailable (private mode) */\n  }\n  return 'system'\n}\n\n/**\n * The concrete light/dark the document is rendering as right now.\n *\n * This is the value anything theme-derived must follow — notably Chakra's\n * `colorMode`. Chakra used to be pinned to light while this resolved to dark,\n * which rendered dark chrome tokens over light Chakra content (the \"dark\n * labels on a light page\" desync).\n */\nexport function readResolvedTheme(): 'light' | 'dark' {\n  return resolveTheme(readStoredThemePreference())\n}\n\n/** Apply a preference to the document: toggles `.dark` + `data-theme` on\n * `<html>` (both selectors the chrome's dark token block matches) and sets\n * `color-scheme` so native controls follow. */\nexport function applyThemePreference(pref: ThemePreference): void {\n  if (typeof document === 'undefined') return\n  const resolved = resolveTheme(pref)\n  const d = document.documentElement\n  d.classList.toggle('dark', resolved === 'dark')\n  try {\n    d.setAttribute('data-theme', resolved)\n    d.style.colorScheme = resolved\n  } catch {\n    /* non-fatal */\n  }\n}\n\n// Inline pre-paint script — render it in <head> (or as the first child of\n// <body>) so the theme applies before first paint. Resolves the preference\n// from cookie → localStorage → OS, applies the `.dark` class + `color-scheme`,\n// and seeds localStorage from the cookie so the app hydrates to the synced\n// value (the cross-subdomain flash fix). Self-contained, dependency-free, and\n// wrapped so any failure is silent (never blocks paint).\nexport const THEME_PREPAINT_SCRIPT = `(function(){try{\nvar KEY=${JSON.stringify(THEME_STORAGE_KEY)};\nvar VALID=[\"light\",\"dark\",\"system\"];\nfunction fromCookie(){try{var m=document.cookie.match(/(?:^|;\\\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}\nvar cookie=fromCookie();\nvar ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}\nvar pref=cookie||ls||\"system\";\nif(VALID.indexOf(pref)===-1)pref=\"system\";\nif(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}\nvar dark=pref===\"dark\"||(pref===\"system\"&&!!(window.matchMedia&&window.matchMedia(\"(prefers-color-scheme: dark)\").matches));\nvar d=document.documentElement;\nif(dark)d.classList.add(\"dark\");else d.classList.remove(\"dark\");\ntry{d.setAttribute(\"data-theme\",dark?\"dark\":\"light\");d.style.colorScheme=dark?\"dark\":\"light\";}catch(e){}\n}catch(e){}})();`\n"]}