@the-portland-company/shell 0.14.1 → 0.14.3

package/dist/chrome.css

@@ -251,6 +251,10 @@
   --muted: var(--topbar-breadcrumb-color);
   --panel: var(--topbar-bg);
   --panel-elevated: var(--surface-1);
+  /* The left bar's own surface. Separate from --panel-elevated (which also
+     backs hover states and dropdowns) so dark can put the bars and the raised
+     surfaces on different steps of the neutral ramp. */
+  --nav-surface: var(--surface-1);
   --line: var(--sidebar-border);
   --shadow-soft: var(--shadow-lg);
 }
@@ -274,11 +278,21 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
-  --background: hsl(222.2 84% 4.9%);
-  --foreground: hsl(210 40% 98%);
-  --muted: hsl(215 20.2% 65.1%);
-  --panel: hsl(222.2 84% 4.9%);
-  --panel-elevated: hsl(217.2 32.6% 17.5%);
-  --line: hsl(217.2 32.6% 17.5%);
+  /* Native chrome semantic layer — dark values.
+     Global Rules: dark chrome is NEUTRAL BLACK, never blue/navy/slate. These
+     were ShadCN slate (hsl(222.2 84% 4.9%) = #020817, hsl(217.2 32.6% 17.5%)
+     = #1E293B) — the exact palette the rule names as forbidden — which made
+     the top bar and left bar read as navy. The ramp below is the hue-free one
+     from Reference/Global-Rules: page #0A0A0A → bars #161616 → raised #1F1F1F
+     → hover #2B2B2B → borders #333333, with #A3A3A3 muted / #E8E8E8 body text.
+     The ShadCN HSL channel tokens above stay as-is — they are the separate
+     darkMode group and are Brand-API-controlled. */
+  --background: #0A0A0A;
+  --foreground: #E8E8E8;
+  --muted: #A3A3A3;
+  --panel: #161616;
+  --nav-surface: #161616;
+  --panel-elevated: #1F1F1F;
+  --line: #333333;
   --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.5);
 }

package/dist/index.cjs

@@ -2396,18 +2396,18 @@ function CommitCopyButton({
                 )
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" })
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "var(--sidebar-text-muted, #CBD5E0)", flexShrink: 0, children: "|" })
           ] }) : null,
-          shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "gray.400", flexShrink: 0, children: shortCommit }) : null,
+          shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "var(--sidebar-text-muted, #718096)", flexShrink: 0, children: shortCommit }) : null,
           version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "2xs", color: "gray.400", flexShrink: 0, children: [
+            shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "var(--sidebar-text-muted, #CBD5E0)", flexShrink: 0, children: "|" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "2xs", color: "var(--sidebar-text-muted, #718096)", flexShrink: 0, children: [
               "v",
               version
             ] })
           ] }) : null,
           onDiagnosticsClick ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "var(--sidebar-text-muted, #CBD5E0)", flexShrink: 0, children: "|" }),
             /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip, { label: "Diagnostics", hasArrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
               react.Button,
               {
@@ -2428,11 +2428,7 @@ function CommitCopyButton({
             ) })
           ] }) : null
         ] }),
-        metaLine ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "2xs", color: "gray.500", textAlign: "center", whiteSpace: "nowrap", children: [
-          "| ",
-          metaLine,
-          " |"
-        ] }) : null,
+        metaLine ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "var(--sidebar-text-muted, #718096)", textAlign: "center", whiteSpace: "nowrap", children: metaLine }) : null,
         hasCopied && /* @__PURE__ */ jsxRuntime.jsx(
           react.Box,
           {
@@ -2561,21 +2557,21 @@ function Sidebar({ onClose, id }) {
             px: "1",
             py: "1",
             borderTop: "1px",
-            borderColor: "gray.200",
+            borderColor: "var(--sidebar-border, #E2E8F0)",
             flexShrink: 0,
             bg: sidebarBg,
             zIndex: 1,
             children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", spacing: 2, px: "3", py: "2", textAlign: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing: 1, fontSize: "xs", color: "gray.600", wrap: "wrap", justify: "center", w: "full", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { display: "inline-flex", alignItems: "center", children: [
-                idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "gray.400", mx: 1, children: "|" }) : null,
+                idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "var(--sidebar-text-muted, #929599)", mx: 1, children: "|" }) : null,
                 l.external ? /* @__PURE__ */ jsxRuntime.jsx(
                   react.Link,
                   {
                     href: l.href,
                     isExternal: true,
-                    color: "var(--color-race-red-500, #E63946)",
+                    color: "var(--sidebar-text-muted, #4A5568)",
                     _hover: {
-                      color: "var(--color-race-red-600, #C42E3A)",
+                      color: "var(--sidebar-hover-text, #FFFFFF)",
                       textDecoration: "underline"
                     },
                     children: l.label
@@ -2585,9 +2581,9 @@ function Sidebar({ onClose, id }) {
                   {
                     as: reactRouterDom.NavLink,
                     to: l.href,
-                    color: "var(--color-race-red-500, #E63946)",
+                    color: "var(--sidebar-text-muted, #4A5568)",
                     _hover: {
-                      color: "var(--color-race-red-600, #C42E3A)",
+                      color: "var(--sidebar-hover-text, #FFFFFF)",
                       textDecoration: "underline"
                     },
                     children: l.label