@the-portland-company/shell 0.75.0 → 0.75.2

package/dist/chrome.css

@@ -47,6 +47,16 @@
 
   /* Typography */
   --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  /* The shared mono font token (Reference/UI-Platform → Typography:
+     "Monospace metadata surfaces ... use the shared mono font token, not a
+     hand-picked monospace stack"). The Brand API has no mono family of its
+     own, so this is the ONE name every mono-context surface in the shell
+     consumes (counts, the Debug info modal, the short org ID, build-meta
+     rows) — previously scattered across three different, never-defined var
+     names (--font-sans, --font-mono, --font-plex-mono), none of which this
+     stylesheet emitted, so every one of those surfaces silently fell back to
+     a hardcoded stack instead of a token the shell actually controls. */
+  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   --type-h1-size: 2.25rem;
   --type-h1-weight: 700;
   --type-h1-line-height: 1.25;
@@ -177,7 +187,10 @@
   --topbar-title-size: 18px;
   --topbar-title-weight: 700;
   --topbar-title-color: #2F3136;
-  --topbar-breadcrumb-color: #718096;
+  /* #718096 was 3.63:1 on --panel-elevated (#F0F4F7) — below WCAG 2.2 AA
+     4.5:1 (e.g. the account-menu "Roles & Organizations" caption). Darkened
+     to clear 4.5:1 on both white and --panel-elevated while keeping the hue. */
+  --topbar-breadcrumb-color: #5C6B80;
   --topbar-icon-button-size: 34px;
   --topbar-icon-button-radius: 5px;
   --topbar-icon-gap: 6px;
@@ -283,9 +296,19 @@
   --color-bg: var(--surface-2, var(--color-layer-1));
   --color-surface: var(--surface-1, var(--color-layer-3));
   --color-surface-2: var(--color-layer-2);
-  --color-panel: var(--color-surface);
+  /* --color-panel is the CARD surface apps render content on — distinct from
+     --color-surface (the page background, aliased to --surface-1 /
+     #F0F4F7). It used to alias --color-surface, so every card rendered in
+     the muted page-surface tint instead of the Brand "Card" white (Brand
+     guideline "Card"). */
+  --color-panel: var(--color-layer-3);
   --color-panel-2: var(--color-surface-2);
-  --color-border: var(--line);
+  /* --color-border is the border apps draw around CONTENT (cards, panels,
+     dividers) — it used to alias --line / --sidebar-border, a token scoped
+     to the always-dark left rail. On a light card that read as a dark
+     border leaking out of the rail's palette. Content borders are the
+     neutral Brand G3 ramp step instead. */
+  --color-border: var(--color-g3);
   --color-text: var(--foreground);
   --color-text-muted: var(--muted);
   --color-muted: var(--muted);
@@ -392,8 +415,12 @@
 [data-politogy-mode] {
   --sidebar-bg: #1B1C20;
   --sidebar-text: #F5F5F5;
-  --sidebar-text-muted: #B5B7BB;
-  --sidebar-meta-text: #9A9CA0;
+  /* #B5B7BB/#9A9CA0 were tuned against the ink rail only (8.48:1 / 6.19:1)
+     and fall to 4.36:1 / 3.19:1 on the Campaign red rail (#8F1F2A) — below
+     WCAG 2.2 AA 4.5:1. Lightened so both solid tokens clear 4.5:1 on ink,
+     on Campaign's rail red, and on its raised card (#A12430). */
+  --sidebar-text-muted: #CDCFD2;
+  --sidebar-meta-text: #CDCFD2;
   --sidebar-hover-bg: #2A2B30;
   /* Selected mode button: the Mode accent, graphite for Relationship. */
   --sidebar-mode-selected-bg: var(--mode-accent, #2F3136);
@@ -409,8 +436,13 @@
 :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);
+  /* rgba(255,255,255,.38) / .5 were 3.55:1 / 5.17:1 on the ink rail but drop
+     to 2.45:1 / 3.25:1 on the Campaign rail red (#8F1F2A) and 2.92:1 on its
+     raised card (#A12430) — below WCAG 2.2 AA 4.5:1 (nav section eyebrows,
+     the user-email/mode caption, the org-id hash). Raised to .72 alpha,
+     which clears 4.5:1 against ink, the Campaign rail and its card. */
+  --sidebar-eyebrow: rgba(255, 255, 255, 0.72);
+  --sidebar-caption: rgba(255, 255, 255, 0.72);
   --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);

package/dist/{chunk-QUXD4PZ7.js → chunk-2DXTSTII.js}

@@ -2649,7 +2649,7 @@ function NavSidebar({
               "div",
               {
                 "data-shell-meta": true,
-                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.4))] ${rc("max-md:hidden")}`,
+                className: `mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] text-[color:var(--sidebar-meta-text,rgba(255,255,255,0.72))] ${rc("max-md:hidden")}`,
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: [
                     footer.envLabel ? shortEnvLabel(footer.envLabel) : null,
@@ -2799,7 +2799,7 @@ function NavActiveRail() {
 function NavRowBadge({ value }) {
   const rc = useRailCollapse();
   if (value === void 0 || value === null || value === "") return null;
-  return /* @__PURE__ */ jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
+  return /* @__PURE__ */ jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
 }
 function NavSectionRow({
   label,
@@ -2913,7 +2913,7 @@ function OrgIdCopyButton({ id }) {
         setTimeout(() => setCopied(false), 1500);
       },
       title: "Copy organization id",
-      className: "-ml-1 rounded px-1 text-left font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
+      className: "-ml-1 rounded px-1 text-left font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
       children: copied ? "Copied" : `\u2026${id.slice(-8)}`
     }
   );
@@ -2973,7 +2973,7 @@ function NavTopBar({
           "kbd",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute right-[10px] hidden md:block rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
+            className: "pointer-events-none absolute right-[10px] hidden md:block rounded-[3px] border border-[color:var(--line)] px-[5px] py-px font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[12px] leading-[1.2] text-[color:var(--muted)]",
             children: "/"
           }
         )
@@ -3375,15 +3375,17 @@ function NavTabButton({
   Link,
   size
 }) {
-  const { label, count, href, onSelect, selected, disabled, disabledTitle } = tab;
+  const { label, icon: Icon, count, href, onSelect, selected, disabled, disabledTitle } = tab;
   const base = "-mb-px inline-flex shrink-0 items-center gap-2 border-b-2 font-semibold leading-none transition-colors";
   const sizeClass = size === "sm" ? "py-2 text-[12px]" : "py-3 text-[13px]";
   const stateClass = disabled ? "cursor-not-allowed border-transparent text-[color:var(--color-g4,#929599)] opacity-50" : selected ? "text-[color:var(--tab-selected-color,#2F3136)]" : "border-transparent text-[color:var(--color-g4,#929599)] hover:text-[color:var(--tab-hover-color,#2F3136)]";
   const className = `${base} ${sizeClass} ${stateClass}`;
   const style = selected && !disabled ? { borderBottomColor: TAB_UNDERLINE_COLOR } : void 0;
+  const iconSize = size === "sm" ? 13 : 15;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSize, className: "shrink-0 text-current", strokeWidth: 1.75 }) : null,
     /* @__PURE__ */ jsx("span", { children: label }),
-    count !== void 0 && count !== null && count !== "" ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[color:var(--color-g2,#ECEEEF)] px-1.5 py-0.5 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none", children: count }) : null
+    count !== void 0 && count !== null && count !== "" ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[color:var(--color-g2,#ECEEEF)] px-1.5 py-0.5 font-[family-name:var(--font-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none", children: count }) : null
   ] });
   if (disabled) {
     return /* @__PURE__ */ jsx(
@@ -3647,5 +3649,5 @@ function NavAppShell({
 }
 
 export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, modeIdFromLabel, resolveOrgLogoUrl, shortEnvLabel, shortUserName, standardNavIcons, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-QUXD4PZ7.js.map
-//# sourceMappingURL=chunk-QUXD4PZ7.js.map
+//# sourceMappingURL=chunk-2DXTSTII.js.map
+//# sourceMappingURL=chunk-2DXTSTII.js.map