@buoy-gg/redux 7.0.26 → 7.0.28

package/lib/commonjs/redux/components/ReduxModal.js

@@ -36,7 +36,7 @@ function EmptyState({
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
       size: 32,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: "No Redux actions"
@@ -197,12 +197,12 @@ function ReduxModal({
           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: "Search action types...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.textTertiary,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -218,7 +218,7 @@ function ReduxModal({
             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.jsxs)(_reactNative.View, {
@@ -234,7 +234,7 @@ function ReduxModal({
               children: "ALL"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.headerChipValue, {
-                color: _sharedUi.macOSColors.text.primary
+                color: _sharedUi.night.color.text
               }],
               children: stats.totalActions
             })]
@@ -272,7 +272,7 @@ function ReduxModal({
           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: handleCopyAll,
@@ -280,7 +280,7 @@ function ReduxModal({
           disabled: filteredActions.length === 0,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
             size: 14,
-            color: filteredActions.length > 0 ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
+            color: filteredActions.length > 0 ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
           isEnabled: isEnabled,
@@ -292,7 +292,7 @@ function ReduxModal({
           disabled: filteredActions.length === 0,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
             size: 14,
-            color: filteredActions.length > 0 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.disabled
+            color: filteredActions.length > 0 ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
           })
         })]
       })]
@@ -327,7 +327,7 @@ function ReduxModal({
         style: styles.errorBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.error
+          color: _sharedUi.night.color.danger
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.errorText,
           children: isReactReduxAvailable ? "Not inside a Redux Provider. Wrap your app with <Provider store={store}>." : "react-redux not installed. Run: npm install react-redux"
@@ -336,7 +336,7 @@ function ReduxModal({
         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: "Action capture is disabled"
@@ -345,7 +345,7 @@ function ReduxModal({
         style: styles.disabledBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.disabledText,
           children: "Top-level capture only \u2014 thunk/RTK Query internals aren't visible. Put import '@buoy-gg/redux' first in your app entry (or add buoyReduxMiddleware) for full capture."
@@ -356,7 +356,7 @@ function ReduxModal({
         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: [lockedActionCount, " older ", lockedActionCount === 1 ? "action" : "actions", " locked"]
@@ -444,7 +444,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,
@@ -455,21 +457,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,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 10,
     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
@@ -487,21 +490,22 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     paddingHorizontal: 10,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   headerChipActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "50"
+    // Active chip chrome takes the night accent, not info-cyan.
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   headerChipLabel: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   headerChipValue: {
     fontSize: 12,
@@ -512,9 +516,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -536,13 +540,13 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    backgroundColor: _sharedUi.night.color.dangerSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.error + "20"
+    borderColor: _sharedUi.night.color.danger + "20"
   },
   errorText: {
-    color: _sharedUi.macOSColors.semantic.error,
+    color: _sharedUi.night.color.danger,
     fontSize: 11,
     flex: 1
   },
@@ -553,13 +557,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
   },
@@ -572,14 +576,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"
   },
@@ -591,25 +595,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",
+    // The night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5

package/lib/module/redux/components/ReduxActionButton.js

@@ -8,46 +8,46 @@
  */
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 
 // Button color configurations matching React Query pattern
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonConfigs = {
   replay: {
-    color: buoyColors.success,
-    backgroundColor: buoyColors.success + "15",
-    borderColor: buoyColors.success + "40",
-    textColor: buoyColors.success
+    color: night.color.accent,
+    backgroundColor: night.color.accent + "15",
+    borderColor: night.color.accent + "40",
+    textColor: night.color.accent
   },
   copy: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
+    color: night.color.accent,
+    backgroundColor: night.color.accent + "15",
+    borderColor: night.color.accent + "40",
+    textColor: night.color.accent
   },
   jump: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+    color: night.color.warning,
+    backgroundColor: night.color.warning + "15",
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
   },
   skip: {
-    color: buoyColors.textSecondary,
-    backgroundColor: buoyColors.textSecondary + "26",
-    borderColor: buoyColors.textSecondary + "59",
-    textColor: buoyColors.textSecondary
+    color: night.color.textSecondary,
+    backgroundColor: night.color.textSecondary + "26",
+    borderColor: night.color.textSecondary + "59",
+    textColor: night.color.textSecondary
   },
   clear: {
-    color: buoyColors.error,
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40",
-    textColor: buoyColors.error
+    color: night.color.danger,
+    backgroundColor: night.color.danger + "15",
+    borderColor: night.color.danger + "40",
+    textColor: night.color.danger
   },
   diff: {
-    color: buoyColors.info,
-    backgroundColor: buoyColors.info + "15",
-    borderColor: buoyColors.info + "40",
-    textColor: buoyColors.info
+    color: night.color.info,
+    backgroundColor: night.color.info + "15",
+    borderColor: night.color.info + "40",
+    textColor: night.color.info
   }
 };
 export function ReduxActionButton({
@@ -61,8 +61,8 @@ export function ReduxActionButton({
     disabled: disabled,
     onPress: onPress,
     style: [styles.button, {
-      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
+      backgroundColor: disabled ? night.color.textTertiary + "1A" : config.backgroundColor,
+      borderColor: disabled ? night.color.textTertiary + "33" : config.borderColor,
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
@@ -73,11 +73,11 @@ export function ReduxActionButton({
     },
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.color
+        backgroundColor: disabled ? night.color.textTertiary : config.color
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
-        color: disabled ? buoyColors.textMuted : config.textColor
+        color: disabled ? night.color.textTertiary : config.textColor
       }],
       children: text
     })]
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     height: 5,
     borderRadius: 3,
     marginRight: 6,
-    shadowColor: buoyColors.text,
+    shadowColor: night.color.text,
     shadowOffset: {
       width: 0,
       height: 0

package/lib/module/redux/components/ReduxActionDetailContent.js

@@ -11,7 +11,7 @@
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { useState, useCallback, useMemo } from "react";
-import { macOSColors, EventStepperFooter, formatRelativeTime, parseValue } from "@buoy-gg/shared-ui";
+import { macOSColors, night, EventStepperFooter, formatRelativeTime, parseValue } from "@buoy-gg/shared-ui";
 import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
 import { ReduxDetailViewToggle } from "./ReduxDetailViewToggle";
 import { ReduxActionInfoView } from "./ReduxActionInfoView";
@@ -278,7 +278,8 @@ export function ReduxActionDetailFooter({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   contentArea: {
     flex: 1,
@@ -290,11 +291,11 @@ const styles = StyleSheet.create({
     padding: 14
   },
   contentCard: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 14,
     padding: 14,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   valueHeader: {
     flexDirection: "row",
@@ -304,7 +305,7 @@ const styles = StyleSheet.create({
   },
   valueLabel: {
     fontSize: 10,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     fontWeight: "600"
@@ -329,24 +330,25 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4,
-    backgroundColor: macOSColors.background.input
+    backgroundColor: night.color.surfaceElevated
   },
   typeText: {
     fontSize: 9,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   valueBox: {
-    backgroundColor: macOSColors.background.base,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.input,
+    borderColor: night.color.border,
     padding: 8
   },
   valueText: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace",
     lineHeight: 18
   },

package/lib/module/redux/components/ReduxActionDetailView.js

@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { macOSColors, TabSelector, DataInspector, CollapsibleSection, CopyButton } from "@buoy-gg/shared-ui";
+import { macOSColors, night, TabSelector, DataInspector, CollapsibleSection, CopyButton } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReduxActionDetailView({
   action
@@ -286,9 +286,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 12,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default
+    borderBottomColor: night.color.border
   },
   headerContent: {
     flex: 1,
@@ -297,7 +297,7 @@ const styles = StyleSheet.create({
   actionType: {
     fontSize: 14,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace",
     marginBottom: 6
   },
@@ -308,11 +308,11 @@ const styles = StyleSheet.create({
   },
   metaText: {
     fontSize: 11,
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   durationText: {
     fontSize: 11,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   changeBadge: {
@@ -339,7 +339,7 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     fontSize: 12,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     padding: 8
   },
@@ -349,14 +349,14 @@ const styles = StyleSheet.create({
   },
   noChangeText: {
     fontSize: 13,
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   diffItem: {
     marginBottom: 12,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   diffHeader: {
@@ -365,7 +365,7 @@ const styles = StyleSheet.create({
     gap: 8,
     padding: 8,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default
+    borderBottomColor: night.color.border
   },
   diffTypeBadge: {
     paddingHorizontal: 6,
@@ -378,7 +378,7 @@ const styles = StyleSheet.create({
   },
   diffPath: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   diffValues: {
@@ -390,7 +390,7 @@ const styles = StyleSheet.create({
   },
   diffLabel: {
     fontSize: 11,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     marginBottom: 4,
     fontWeight: "600"
   }