@buoy-gg/zustand 7.0.26 → 7.0.27

package/lib/commonjs/zustand/components/ZustandActionButton.js

@@ -16,28 +16,28 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const buttonConfigs = {
   copy: {
-    color: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40",
-    textColor: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent,
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorder,
+    textColor: _sharedUi.night.color.accent
   },
   reset: {
-    color: _sharedUi.buoyColors.warning,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
-    borderColor: _sharedUi.buoyColors.warning + "40",
-    textColor: _sharedUi.buoyColors.warning
+    color: _sharedUi.night.color.warning,
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderColor: _sharedUi.night.color.warning + "40",
+    textColor: _sharedUi.night.color.warning
   },
   clear: {
-    color: _sharedUi.buoyColors.error,
-    backgroundColor: _sharedUi.buoyColors.error + "15",
-    borderColor: _sharedUi.buoyColors.error + "40",
-    textColor: _sharedUi.buoyColors.error
+    color: _sharedUi.night.color.danger,
+    backgroundColor: _sharedUi.night.color.dangerSoft,
+    borderColor: _sharedUi.night.color.danger + "40",
+    textColor: _sharedUi.night.color.danger
   },
   jump: {
-    color: _sharedUi.buoyColors.warning,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
-    borderColor: _sharedUi.buoyColors.warning + "40",
-    textColor: _sharedUi.buoyColors.warning
+    color: _sharedUi.night.color.warning,
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderColor: _sharedUi.night.color.warning + "40",
+    textColor: _sharedUi.night.color.warning
   }
 };
 function ZustandActionButton({
@@ -51,8 +51,8 @@ function ZustandActionButton({
     disabled: disabled,
     onPress: onPress,
     style: [styles.button, {
-      backgroundColor: disabled ? _sharedUi.buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? _sharedUi.buoyColors.textMuted + "33" : config.borderColor,
+      backgroundColor: disabled ? _sharedUi.night.color.textTertiary + "1A" : config.backgroundColor,
+      borderColor: disabled ? _sharedUi.night.color.textTertiary + "33" : config.borderColor,
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
@@ -63,11 +63,11 @@ function ZustandActionButton({
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.color
+        backgroundColor: disabled ? _sharedUi.night.color.textTertiary : config.color
       }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.text, {
-        color: disabled ? _sharedUi.buoyColors.textMuted : config.textColor
+        color: disabled ? _sharedUi.night.color.textTertiary : config.textColor
       }],
       children: text
     })]
@@ -97,7 +97,7 @@ const styles = _reactNative.StyleSheet.create({
     height: 5,
     borderRadius: 3,
     marginRight: 6,
-    shadowColor: _sharedUi.buoyColors.text,
+    shadowColor: _sharedUi.night.color.text,
     shadowOffset: {
       width: 0,
       height: 0

package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js

@@ -21,19 +21,19 @@ const VIEW_CONFIGS = [{
   label: "CHANGE",
   description: "View change details",
   icon: _sharedUi.FileText,
-  activeColor: _sharedUi.macOSColors.semantic.warning
+  activeColor: _sharedUi.night.color.accent
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
   icon: _sharedUi.Database,
-  activeColor: _sharedUi.macOSColors.semantic.info
+  activeColor: _sharedUi.night.color.accent
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
   icon: _sharedUi.GitBranch,
-  activeColor: _sharedUi.macOSColors.semantic.success
+  activeColor: _sharedUi.night.color.accent
 }];
 const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ZustandDetailViewToggle({
   activeView,
@@ -57,7 +57,7 @@ const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(
           style: styles.cardContent,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
             size: 14,
-            color: isActive ? config.activeColor : isDisabled ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
+            color: isActive ? config.activeColor : isDisabled ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
               color: config.activeColor
@@ -77,21 +77,22 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     gap: 8,
     padding: 14,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   card: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 10,
     gap: 4
   },
   cardActive: {
     borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)",
-    shadowColor: _sharedUi.macOSColors.semantic.info,
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 2
@@ -112,23 +113,23 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   cardLabelActive: {
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   cardLabelDisabled: {
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   cardDescription: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     lineHeight: 12
   },
   cardDescriptionActive: {
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   cardDescriptionDisabled: {
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   }
 });

package/lib/commonjs/zustand/components/ZustandEventFilterView.js

@@ -46,7 +46,7 @@ function ZustandEventFilterView({
           children: "REGISTERED STORES"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
           count: stores.length,
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.storeList,
@@ -62,7 +62,7 @@ function ZustandEventFilterView({
             disabled: filtered,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.storeDot, {
-                backgroundColor: filtered ? _sharedUi.macOSColors.text.disabled : storeColor
+                backgroundColor: filtered ? _sharedUi.night.color.textTertiary : storeColor
               }]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.storeRowText, filtered && styles.storeRowTextFiltered, !filtered && {
@@ -87,19 +87,19 @@ function ZustandEventFilterView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Filter,
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "STORE NAME FILTERS"
         }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
           count: ignoredPatterns.size,
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.addInputWrapper,
         children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterButton, {
           onPress: () => setShowAddInput(true),
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           label: "Add store name pattern"
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AddFilterInput, {
           value: inputValue,
@@ -110,7 +110,7 @@ function ZustandEventFilterView({
             setInputValue("");
           },
           placeholder: "Enter store name pattern to hide...",
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         })
       }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.patternList,
@@ -132,7 +132,7 @@ function ZustandEventFilterView({
               children: pattern
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 12,
-              color: _sharedUi.buoyColors.primary + "80"
+              color: _sharedUi.night.color.accent + "80"
             })]
           }, pattern);
         })
@@ -142,7 +142,7 @@ function ZustandEventFilterView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Filter,
-          color: _sharedUi.buoyColors.textSecondary,
+          color: _sharedUi.night.color.textSecondary,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "HOW EVENT FILTERS WORK"
@@ -166,7 +166,8 @@ function ZustandEventFilterView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingTop: 16,
@@ -175,10 +176,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 16
   },
   section: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   storeList: {
@@ -196,10 +197,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 10,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   storeRowFiltered: {
     opacity: 0.45
@@ -216,13 +217,13 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   storeRowTextFiltered: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textDecorationLine: "line-through"
   },
   filteredLabel: {
     fontSize: 10,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.disabled,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   addLabel: {
@@ -246,21 +247,21 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     gap: 8
   },
   patternText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   howItWorksText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
@@ -271,20 +272,20 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     marginTop: 12
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   }

package/lib/commonjs/zustand/components/ZustandModal.js

@@ -30,7 +30,7 @@ function EventsEmptyState({
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: "No state changes"
@@ -300,12 +300,12 @@ function ZustandModal({
           style: styles.headerSearchContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
             ref: searchInputRef,
             style: styles.headerSearchInput,
             placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -321,7 +321,7 @@ function ZustandModal({
             style: styles.headerSearchClear,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 14,
-              color: _sharedUi.macOSColors.text.secondary
+              color: _sharedUi.night.color.textSecondary
             })
           })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
@@ -341,14 +341,14 @@ function ZustandModal({
           style: styles.headerActionButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           onPress: () => setShowFilters(true),
           style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
             size: 14,
-            color: hasActiveFilters ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
+            color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
           })
         }), activeTab === "stores" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
           value: getStoresSnapshot,
@@ -415,7 +415,7 @@ function ZustandModal({
         style: styles.emptyState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
           size: 32,
-          color: _sharedUi.macOSColors.text.muted
+          color: _sharedUi.night.color.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptyTitle,
           children: "No history yet"
@@ -443,7 +443,7 @@ function ZustandModal({
         style: styles.disabledBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.disabledText,
           children: "State capture is disabled"
@@ -454,7 +454,7 @@ function ZustandModal({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedText,
           children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
@@ -561,7 +561,9 @@ const styles = _reactNative.StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -572,21 +574,22 @@ const styles = _reactNative.StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderRadius: _sharedUi.night.radius.row,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -599,9 +602,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -609,7 +612,8 @@ const styles = _reactNative.StyleSheet.create({
     opacity: 0.55
   },
   headerActionButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   disabledBanner: {
     flexDirection: "row",
@@ -618,13 +622,13 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
+    borderColor: _sharedUi.night.color.warning + "20"
   },
   disabledText: {
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 11,
     flex: 1
   },
@@ -637,14 +641,14 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18
@@ -656,25 +660,26 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "33"
+    borderColor: _sharedUi.night.color.accentBorder
   },
   lockedText: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontSize: 11,
     fontWeight: "500",
     flex: 1
   },
   upgradeBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4
   },
   upgradeBadgeText: {
-    color: "#fff",
+    // Ink on a filled accent surface — the night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5

package/lib/commonjs/zustand/components/ZustandStateChangeItem.js

@@ -41,7 +41,7 @@ function getCategoryColor(category, storeName) {
     case "persist":
       return _sharedUi.buoyColors.info;
     case "initial":
-      return _sharedUi.buoyColors.textMuted;
+      return _sharedUi.night.color.textTertiary;
     default:
       return _zustandStateStore.zustandStateStore.getStoreColor(storeName);
   }

package/lib/commonjs/zustand/components/ZustandStateDetailContent.js

@@ -257,7 +257,8 @@ function ZustandStateDetailFooter({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   contentArea: {
     flex: 1,
@@ -268,11 +269,11 @@ const styles = _reactNative.StyleSheet.create({
     padding: 14
   },
   contentCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 14,
     padding: 14,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   valueHeader: {
     flexDirection: "row",
@@ -282,7 +283,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   valueLabel: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     fontWeight: "600"
@@ -307,24 +308,25 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   typeText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   valueBox: {
-    backgroundColor: _sharedUi.macOSColors.background.base,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.input,
+    borderColor: _sharedUi.night.color.border,
     padding: 8
   },
   valueText: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     lineHeight: 18
   },