@the-portland-company/shell 0.41.0 → 0.41.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.41.1 — 2026-08-03
+
+### Fixed — the Chakra tooltip override in 0.41.0 did not actually take
+
+0.41.0 pinned `Tooltip.baseStyle.bg`, but Chakra's own baseStyle sets
+`bg: var(--tooltip-bg)` and then assigns that VARIABLE from its palette — and it
+ships a `_dark` block that reassigns `--tooltip-bg` to `colors.gray.300`,
+deliberately inverting in dark mode. Overriding `bg` alone therefore lost, and
+the bubble still measured `#E8E8E8` live after the 0.41.0 deploy. Both the base
+and the `_dark` block now pin `--tooltip-bg` / `--tooltip-fg` /
+`--popper-arrow-bg` to the shared panel surface, with a test asserting it.
+
 ## 0.41.0 — 2026-08-03
 
 ### Fixed — the expanded sub-menu was the same colour as the left bar

package/dist/index.cjs

@@ -588,6 +588,23 @@ var components = {
   // Chakra tooltip and the native chrome's TopBarTooltip look identical.
   Tooltip: {
     baseStyle: {
+      // Chakra's own baseStyle sets `bg: var(--tooltip-bg)` and then assigns
+      // `--tooltip-bg` from its palette, so overriding `bg` alone loses — the
+      // variable still resolves to Chakra's value and the bubble stayed light
+      // (measured #E8E8E8 live after a first attempt that set only `bg`). Pin
+      // the VARIABLE, which is what both the bubble and the arrow read.
+      "--tooltip-bg": "var(--panel-elevated, #1F1F1F)",
+      "--tooltip-fg": "var(--foreground, #E8E8E8)",
+      "--popper-arrow-bg": "var(--panel-elevated, #1F1F1F)",
+      // Chakra ALSO ships a `_dark` block that re-assigns those two variables
+      // to `colors.gray.300` / `colors.gray.900` — i.e. it deliberately INVERTS
+      // in dark mode. That block wins over the base keys, so it has to be
+      // overridden explicitly or the bubble goes light again.
+      _dark: {
+        "--tooltip-bg": "var(--panel-elevated, #1F1F1F)",
+        "--tooltip-fg": "var(--foreground, #E8E8E8)",
+        "--popper-arrow-bg": "var(--panel-elevated, #1F1F1F)"
+      },
       bg: "var(--panel-elevated, #1F1F1F)",
       color: "var(--foreground, #E8E8E8)",
       border: "1px solid",
@@ -596,10 +613,7 @@ var components = {
       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)"
+      paddingY: 2
     }
   },
   Alert: {