@buoy-gg/redux 7.0.26 → 7.0.28

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

@@ -17,40 +17,40 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Button color configurations matching React Query pattern
 const buttonConfigs = {
   replay: {
-    color: _sharedUi.buoyColors.success,
-    backgroundColor: _sharedUi.buoyColors.success + "15",
-    borderColor: _sharedUi.buoyColors.success + "40",
-    textColor: _sharedUi.buoyColors.success
+    color: _sharedUi.night.color.accent,
+    backgroundColor: _sharedUi.night.color.accent + "15",
+    borderColor: _sharedUi.night.color.accent + "40",
+    textColor: _sharedUi.night.color.accent
   },
   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.accent + "15",
+    borderColor: _sharedUi.night.color.accent + "40",
+    textColor: _sharedUi.night.color.accent
   },
   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.warning + "15",
+    borderColor: _sharedUi.night.color.warning + "40",
+    textColor: _sharedUi.night.color.warning
   },
   skip: {
-    color: _sharedUi.buoyColors.textSecondary,
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "26",
-    borderColor: _sharedUi.buoyColors.textSecondary + "59",
-    textColor: _sharedUi.buoyColors.textSecondary
+    color: _sharedUi.night.color.textSecondary,
+    backgroundColor: _sharedUi.night.color.textSecondary + "26",
+    borderColor: _sharedUi.night.color.textSecondary + "59",
+    textColor: _sharedUi.night.color.textSecondary
   },
   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.danger + "15",
+    borderColor: _sharedUi.night.color.danger + "40",
+    textColor: _sharedUi.night.color.danger
   },
   diff: {
-    color: _sharedUi.buoyColors.info,
-    backgroundColor: _sharedUi.buoyColors.info + "15",
-    borderColor: _sharedUi.buoyColors.info + "40",
-    textColor: _sharedUi.buoyColors.info
+    color: _sharedUi.night.color.info,
+    backgroundColor: _sharedUi.night.color.info + "15",
+    borderColor: _sharedUi.night.color.info + "40",
+    textColor: _sharedUi.night.color.info
   }
 };
 function ReduxActionButton({
@@ -64,8 +64,8 @@ function ReduxActionButton({
     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,
@@ -76,11 +76,11 @@ function ReduxActionButton({
     },
     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
     })]
@@ -110,7 +110,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/redux/components/ReduxActionDetailContent.js

@@ -282,7 +282,8 @@ function ReduxActionDetailFooter({
 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,
@@ -294,11 +295,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",
@@ -308,7 +309,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"
@@ -333,24 +334,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
   },

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

@@ -290,9 +290,9 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 12,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default
+    borderBottomColor: _sharedUi.night.color.border
   },
   headerContent: {
     flex: 1,
@@ -301,7 +301,7 @@ const styles = _reactNative.StyleSheet.create({
   actionType: {
     fontSize: 14,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     marginBottom: 6
   },
@@ -312,11 +312,11 @@ const styles = _reactNative.StyleSheet.create({
   },
   metaText: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   durationText: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   changeBadge: {
@@ -343,7 +343,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   emptyText: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic",
     padding: 8
   },
@@ -353,14 +353,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   noChangeText: {
     fontSize: 13,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   diffItem: {
     marginBottom: 12,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   diffHeader: {
@@ -369,7 +369,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8,
     padding: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default
+    borderBottomColor: _sharedUi.night.color.border
   },
   diffTypeBadge: {
     paddingHorizontal: 6,
@@ -382,7 +382,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   diffPath: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   diffValues: {
@@ -394,7 +394,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   diffLabel: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     marginBottom: 4,
     fontWeight: "600"
   }

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

@@ -97,7 +97,7 @@ function SectionHeader({
       style: styles.sectionHeaderLeft,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
         size: 14,
-        color: _sharedUi.buoyColors.primary
+        color: _sharedUi.night.color.accent
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.sectionTitle,
         children: title
@@ -234,7 +234,7 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
             style: [styles.durationBadge, action.isSlowAction && styles.durationBadgeSlow],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
               size: 10,
-              color: action.isSlowAction ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textSecondary
+              color: action.isSlowAction ? _sharedUi.buoyColors.error : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.durationText, action.isSlowAction && styles.durationTextSlow],
               children: formatDuration(action.duration)
@@ -409,7 +409,7 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
         }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
           label: "Condition",
           value: "true",
-          valueColor: _sharedUi.buoyColors.textMuted
+          valueColor: _sharedUi.night.color.textTertiary
         })]
       })]
     }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -516,12 +516,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   // Card styling - matches React Query DevTools
   card: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "4D",
+    borderColor: _sharedUi.night.color.accent + "4D",
     overflow: "hidden",
-    shadowColor: _sharedUi.buoyColors.primary,
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -541,8 +541,8 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.primary + "33",
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    borderBottomColor: _sharedUi.night.color.accent + "33",
+    backgroundColor: _sharedUi.night.color.accent + "15"
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -553,7 +553,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   cardContent: {
@@ -567,12 +567,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   infoLabel: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500"
   },
   infoValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "500",
     flex: 1,
     textAlign: "right",
@@ -604,7 +604,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   durationBadgeSlow: {
     backgroundColor: _sharedUi.buoyColors.error + "26"
@@ -612,7 +612,7 @@ const styles = _reactNative.StyleSheet.create({
   durationText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   durationTextSlow: {
@@ -636,27 +636,27 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   noChangesText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   typeBadge: {
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 3,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   typeText: {
     fontSize: 8,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   dataViewerContainer: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    backgroundColor: _sharedUi.night.color.bg,
     minHeight: 60
   },
   argSection: {
@@ -664,20 +664,20 @@ const styles = _reactNative.StyleSheet.create({
   },
   argLabel: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500",
     marginBottom: 6
   },
   argValueContainer: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   argValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     padding: 10
   },
@@ -704,18 +704,18 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary + "26"
+    backgroundColor: _sharedUi.night.color.accent + "26"
   },
   asyncBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     letterSpacing: 0.3
   },
   baseActionType: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     marginBottom: 8
   },
@@ -726,11 +726,11 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 12,
     paddingBottom: 12,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border
+    borderBottomColor: _sharedUi.night.color.border
   },
   totalDurationLabel: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500"
   },
   totalDurationValue: {
@@ -751,7 +751,7 @@ const styles = _reactNative.StyleSheet.create({
     position: "relative"
   },
   timelineItemCurrent: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   timelineConnector: {
     position: "absolute",
@@ -759,7 +759,7 @@ const styles = _reactNative.StyleSheet.create({
     top: 24,
     bottom: -8,
     width: 2,
-    backgroundColor: _sharedUi.buoyColors.border
+    backgroundColor: _sharedUi.night.color.border
   },
   timelineDot: {
     width: 12,
@@ -791,28 +791,29 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary
+    backgroundColor: _sharedUi.night.color.accent
   },
   currentBadgeText: {
     fontSize: 8,
     fontWeight: "700",
-    color: "#fff",
+    // The night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
     letterSpacing: 0.3
   },
   timelineTime: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   // Action footer - matches React Query DevTools
   actionFooter: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "4D",
+    borderColor: _sharedUi.night.color.accent + "4D",
     paddingVertical: 12,
     paddingHorizontal: 12,
-    shadowColor: _sharedUi.buoyColors.primary,
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -832,7 +833,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   actionDescription: {
     fontSize: 9,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textAlign: "center"
   }
 });

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

@@ -21,19 +21,21 @@ const VIEW_CONFIGS = [{
   label: "ACTION",
   description: "View action details",
   icon: _sharedUi.FileText,
-  activeColor: _sharedUi.macOSColors.semantic.warning
+  // Active-card chrome takes the single night accent (the per-view
+  // warning/info/success tints were selection chrome, not data).
+  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 ReduxDetailViewToggle = exports.ReduxDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ReduxDetailViewToggle({
   activeView,
@@ -57,7 +59,7 @@ const ReduxDetailViewToggle = exports.ReduxDetailViewToggle = /*#__PURE__*/(0, _
           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 +79,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 +115,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
   }
 });