@the-portland-company/shell 0.41.0 → 0.41.1

package/dist/index.js

@@ -581,6 +581,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",
@@ -589,10 +606,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: {