@the-portland-company/shell 0.75.0 → 0.75.1

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;
@@ -283,9 +293,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);

package/dist/{chunk-QUXD4PZ7.js → chunk-AQMSMAK2.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.4))] ${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-AQMSMAK2.js.map
+//# sourceMappingURL=chunk-AQMSMAK2.js.map