@the-portland-company/shell 0.40.0 → 0.41.0

package/dist/index.js

@@ -571,6 +571,30 @@ var components = {
       }
     }
   },
+  // Reference/UI-Platform: every top-bar control and every panel it opens share
+  // ONE surface treatment — one definition of background, border, blur and
+  // radius, not a per-component re-style. Chakra's stock Tooltip INVERTS
+  // (dark text surface in light mode, LIGHT surface in dark mode), so in dark
+  // mode every `div#tooltip-*` rendered a near-white #E8E8E8 slab against the
+  // black chrome — measured on 15 of 29 pages, including inside the
+  // Communications Fuel panel. Pin it to the shared panel surface instead, so a
+  // Chakra tooltip and the native chrome's TopBarTooltip look identical.
+  Tooltip: {
+    baseStyle: {
+      bg: "var(--panel-elevated, #1F1F1F)",
+      color: "var(--foreground, #E8E8E8)",
+      border: "1px solid",
+      borderColor: "var(--line, #333333)",
+      borderRadius: "var(--radius-lg, 0.5rem)",
+      boxShadow: "var(--shadow-soft)",
+      fontSize: "12px",
+      paddingX: 3,
+      paddingY: 2,
+      // Chakra draws the arrow with its own bg var; keep it on the same surface
+      // so the pointer never reads as a different colour than the bubble.
+      "--popper-arrow-bg": "var(--panel-elevated, #1F1F1F)"
+    }
+  },
   Alert: {
     baseStyle: {
       container: {
@@ -579,7 +603,16 @@ var components = {
     },
     variants: {
       subtle: (props) => {
-        const { colorScheme: c } = props;
+        const { colorScheme: c, colorMode } = props;
+        if (colorMode === "dark") {
+          const accent = c === "blue" || c === "info" ? "#7CC0F5" : c === "green" || c === "success" ? "#68D391" : c === "orange" || c === "yellow" || c === "warning" ? "#F6AD55" : "var(--color-race-red-300, #EF6671)";
+          return {
+            container: { bg: "neutral.raised", borderLeftColor: accent },
+            icon: { color: accent },
+            title: { color: "neutral.text" },
+            description: { color: "neutral.textMuted" }
+          };
+        }
         if (c === "blue" || c === "info") {
           return {
             container: {
@@ -599,7 +632,16 @@ var components = {
         return {};
       },
       "left-accent": (props) => {
-        const { colorScheme: c } = props;
+        const { colorScheme: c, colorMode } = props;
+        if (colorMode === "dark") {
+          const accent = c === "blue" || c === "info" ? "#7CC0F5" : c === "green" || c === "success" ? "#68D391" : c === "orange" || c === "yellow" || c === "warning" ? "#F6AD55" : "var(--color-race-red-300, #EF6671)";
+          return {
+            container: { bg: "neutral.raised", borderLeftColor: accent },
+            icon: { color: accent },
+            title: { color: "neutral.text" },
+            description: { color: "neutral.textMuted" }
+          };
+        }
         if (c === "blue" || c === "info") {
           return {
             container: {