@buoy-gg/react-query 7.0.26 → 7.0.27

package/lib/module/react-query/components/query-browser/Explorer.js

@@ -3,7 +3,7 @@
 import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { updateNestedDataByPath } from "../../utils/updateNestedDataByPath";
-import { displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { displayValue, night } from "@buoy-gg/shared-ui";
 import deleteItem from "../../utils/actions/deleteItem";
 import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
 import { CopyButton as SharedCopyButton } from "@buoy-gg/shared-ui";
@@ -40,11 +40,11 @@ const Expander = /*#__PURE__*/memo(({
     style: [styles.expanderIcon, isMain && styles.expanderIconMain, expanded ? styles.expanded : styles.collapsed],
     children: expanded ? /*#__PURE__*/_jsx(ChevronDown, {
       size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary,
+      color: isFocused ? night.color.accent : isMain ? night.color.text : night.color.textSecondary,
       strokeWidth: 2.5
     }) : /*#__PURE__*/_jsx(ChevronRight, {
       size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary,
+      color: isFocused ? night.color.accent : isMain ? night.color.text : night.color.textSecondary,
       strokeWidth: 2.5
     })
   });
@@ -92,7 +92,7 @@ const DeleteItemButton = /*#__PURE__*/memo(({
     children: /*#__PURE__*/_jsx(Trash, {
       size: 14,
       strokeWidth: 2,
-      color: isFocused ? buoyColors.error : buoyColors.error + "CC"
+      color: isFocused ? night.color.danger : night.color.danger + "CC"
     })
   });
 });
@@ -120,7 +120,7 @@ const ClearArrayButton = /*#__PURE__*/memo(({
     activeOpacity: 0.7,
     children: /*#__PURE__*/_jsx(Text, {
       style: [styles.clearButtonText, {
-        color: isFocused ? buoyColors.warning : buoyColors.warning + "CC"
+        color: isFocused ? night.color.warning : night.color.warning + "CC"
       }],
       children: "[]"
     })
@@ -178,7 +178,7 @@ function ToggleValueButton({
       children: /*#__PURE__*/_jsx(Trash, {
         size: 14,
         strokeWidth: 2,
-        color: buoyColors.error + "CC"
+        color: night.color.danger + "CC"
       })
     })]
   });
@@ -452,9 +452,9 @@ export default function Explorer({
 }
 const styles = StyleSheet.create({
   buttonStyle: {
-    backgroundColor: buoyColors.card + "E6",
+    backgroundColor: night.color.surface + "E6",
     borderWidth: 1,
-    borderColor: buoyColors.textSecondary + "33",
+    borderColor: night.color.textSecondary + "33",
     borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
@@ -471,15 +471,15 @@ const styles = StyleSheet.create({
     shadowRadius: 2
   },
   buttonStyleFocused: {
-    borderColor: buoyColors.primary + "CC",
-    backgroundColor: buoyColors.primary + "26",
-    shadowColor: buoyColors.primary,
+    borderColor: night.color.accent + "CC",
+    backgroundColor: night.color.accent + "26",
+    shadowColor: night.color.accent,
     shadowOpacity: 0.3,
     shadowRadius: 4
   },
   deleteButton: {
-    backgroundColor: buoyColors.error + "1A",
-    borderColor: buoyColors.error + "4D",
+    backgroundColor: night.color.danger + "1A",
+    borderColor: night.color.danger + "4D",
     borderWidth: 1,
     borderRadius: 6,
     padding: 0,
@@ -488,7 +488,7 @@ const styles = StyleSheet.create({
     width: 28,
     height: 28,
     position: "relative",
-    shadowColor: buoyColors.error,
+    shadowColor: night.color.danger,
     shadowOffset: {
       width: 0,
       height: 0
@@ -497,14 +497,14 @@ const styles = StyleSheet.create({
     shadowRadius: 3
   },
   deleteButtonFocused: {
-    borderColor: buoyColors.error + "CC",
-    backgroundColor: buoyColors.error + "33",
+    borderColor: night.color.danger + "CC",
+    backgroundColor: night.color.danger + "33",
     shadowOpacity: 0.3,
     shadowRadius: 5
   },
   deleteButtonInToggle: {
-    backgroundColor: buoyColors.error + "1A",
-    borderColor: buoyColors.error + "4D",
+    backgroundColor: night.color.danger + "1A",
+    borderColor: night.color.danger + "4D",
     borderWidth: 1,
     borderRadius: 6,
     padding: 0,
@@ -512,7 +512,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     width: 28,
     height: 28,
-    shadowColor: buoyColors.error,
+    shadowColor: night.color.danger,
     shadowOffset: {
       width: 0,
       height: 0
@@ -521,9 +521,9 @@ const styles = StyleSheet.create({
     shadowRadius: 3
   },
   clearButton: {
-    backgroundColor: buoyColors.warning + "1A",
+    backgroundColor: night.color.warning + "1A",
     borderWidth: 1,
-    borderColor: buoyColors.warning + "4D",
+    borderColor: night.color.warning + "4D",
     borderRadius: 6,
     flexDirection: "row",
     padding: 0,
@@ -533,7 +533,7 @@ const styles = StyleSheet.create({
     height: 28,
     position: "relative",
     zIndex: 10,
-    shadowColor: buoyColors.warning,
+    shadowColor: night.color.warning,
     shadowOffset: {
       width: 0,
       height: 0
@@ -542,8 +542,8 @@ const styles = StyleSheet.create({
     shadowRadius: 3
   },
   clearButtonFocused: {
-    borderColor: buoyColors.warning + "CC",
-    backgroundColor: buoyColors.warning + "33",
+    borderColor: night.color.warning + "CC",
+    backgroundColor: night.color.warning + "33",
     shadowOpacity: 0.3,
     shadowRadius: 5
   },
@@ -558,16 +558,16 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginRight: 1,
-    backgroundColor: buoyColors.textSecondary + "14",
+    backgroundColor: night.color.textSecondary + "14",
     borderRadius: 3
   },
   expanderIconMain: {
-    backgroundColor: buoyColors.textSecondary + "1A",
+    backgroundColor: night.color.textSecondary + "1A",
     width: 20,
     height: 20,
     borderRadius: 4,
     borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "33"
+    borderColor: night.color.textSecondary + "33"
   },
   expanded: {
     transform: [{
@@ -600,15 +600,15 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     marginVertical: 1,
     borderRadius: 4,
-    backgroundColor: buoyColors.card + "66",
+    backgroundColor: night.color.surface + "66",
     borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "1A"
+    borderColor: night.color.textSecondary + "1A"
   },
   flexRowItemsCenterGapMain: {
-    backgroundColor: buoyColors.card + "E6",
+    backgroundColor: night.color.surface + "E6",
     borderLeftWidth: 2.5,
-    borderLeftColor: buoyColors.textSecondary + "80",
-    borderColor: buoyColors.textSecondary + "26",
+    borderLeftColor: night.color.textSecondary + "80",
+    borderColor: night.color.textSecondary + "26",
     paddingVertical: 5,
     paddingHorizontal: 8,
     marginBottom: 3,
@@ -633,7 +633,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   labelText: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
@@ -641,23 +641,23 @@ const styles = StyleSheet.create({
     letterSpacing: 0.4
   },
   labelTextFocused: {
-    color: buoyColors.text
+    color: night.color.text
   },
   labelTextMain: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.6
   },
   textGray500: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontWeight: "400",
     fontFamily: "monospace",
     opacity: 0.7
   },
   pageRangeText: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace"
@@ -673,10 +673,10 @@ const styles = StyleSheet.create({
     marginTop: 2,
     paddingLeft: 8,
     borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
+    borderLeftColor: night.color.textSecondary + "40"
   },
   singleEntryContainerMain: {
-    borderLeftColor: buoyColors.textSecondary + "4D",
+    borderLeftColor: night.color.textSecondary + "4D",
     marginLeft: 4,
     paddingLeft: 10
   },
@@ -685,10 +685,10 @@ const styles = StyleSheet.create({
     marginTop: 2,
     paddingLeft: 8,
     borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
+    borderLeftColor: night.color.textSecondary + "40"
   },
   multiEntryContainerMain: {
-    borderLeftColor: buoyColors.textSecondary + "4D",
+    borderLeftColor: night.color.textSecondary + "4D",
     marginLeft: 4,
     paddingLeft: 10
   },
@@ -698,13 +698,13 @@ const styles = StyleSheet.create({
   pageExpanderButton: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.card + "66",
+    backgroundColor: night.color.surface + "66",
     paddingVertical: 3,
     paddingHorizontal: 6,
     gap: 6,
     borderRadius: 4,
     borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "1A",
+    borderColor: night.color.textSecondary + "1A",
     marginBottom: 2,
     minHeight: 24
   },
@@ -713,15 +713,15 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     marginTop: 2,
     borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
+    borderLeftColor: night.color.textSecondary + "40"
   },
   textNumber: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "600",
     fontFamily: "monospace"
   },
   textString: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   flexRowGapFullWidth: {
@@ -735,7 +735,7 @@ const styles = StyleSheet.create({
     borderRadius: 3
   },
   text344054: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
@@ -758,9 +758,9 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: buoyColors.card + "E6",
+    backgroundColor: night.color.surface + "E6",
     borderWidth: 1,
-    borderColor: buoyColors.textSecondary + "33",
+    borderColor: night.color.textSecondary + "33",
     alignItems: "center",
     justifyContent: "center",
     marginLeft: 2,
@@ -773,9 +773,9 @@ const styles = StyleSheet.create({
     shadowRadius: 2
   },
   touchableButtonFocused: {
-    borderColor: buoyColors.primary + "CC",
-    backgroundColor: buoyColors.primary + "26",
-    shadowColor: buoyColors.primary,
+    borderColor: night.color.accent + "CC",
+    backgroundColor: night.color.accent + "26",
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -791,7 +791,7 @@ const styles = StyleSheet.create({
   },
   displayValueText: {
     flex: 1,
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "400",
     fontFamily: "monospace",
     fontSize: 12,
@@ -799,7 +799,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.textMuted + "66",
+    borderColor: night.color.textTertiary + "66",
     minHeight: 34
   },
   // New redesigned styles (kept for future use)
@@ -812,7 +812,7 @@ const styles = StyleSheet.create({
     gap: 12
   },
   dataLabel: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 13,
     fontWeight: "500",
     minWidth: 80,
@@ -844,17 +844,17 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: buoyColors.primary + "0F"
+    borderColor: night.color.accent + "0F"
   },
   readOnlyValue: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 13,
     fontFamily: "monospace",
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.textMuted + "33",
+    borderColor: night.color.textTertiary + "33",
     flex: 1
   },
   actionButtons: {
@@ -868,12 +868,12 @@ const styles = StyleSheet.create({
     padding: 8,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.textMuted + "4D",
+    borderColor: night.color.textTertiary + "4D",
     flex: 1
   },
   booleanText: {
     marginLeft: 8,
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontWeight: "500",
     fontFamily: "monospace"
   },
@@ -883,7 +883,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.textMuted + "99",
+    borderColor: night.color.textTertiary + "99",
     paddingHorizontal: 8,
     paddingVertical: 6,
     marginVertical: 2,
@@ -937,27 +937,27 @@ const styles = StyleSheet.create({
   },
   // Pre-computed toggle icon styles to avoid inline objects [[memory:4875251]]
   toggleIconTrue: {
-    backgroundColor: buoyColors.primary
+    backgroundColor: night.color.accent
   },
   toggleIconFalse: {
-    backgroundColor: buoyColors.textMuted
+    backgroundColor: night.color.textTertiary
   },
   // Pre-computed toggle badge styles [[memory:4875251]]
   toggleBadgeTrue: {
-    backgroundColor: buoyColors.primary + "1A",
-    borderColor: buoyColors.primary + "4D"
+    backgroundColor: night.color.accent + "1A",
+    borderColor: night.color.accent + "4D"
   },
   toggleBadgeFalse: {
-    backgroundColor: buoyColors.textMuted + "1A",
-    borderColor: buoyColors.textMuted + "4D"
+    backgroundColor: night.color.textTertiary + "1A",
+    borderColor: night.color.textTertiary + "4D"
   },
   // Pre-computed toggle text styles [[memory:4875251]]
   toggleTextTrue: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontWeight: "600"
   },
   toggleTextFalse: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontWeight: "500"
   },
   // Boolean row container styles
@@ -969,7 +969,7 @@ const styles = StyleSheet.create({
     paddingVertical: 2
   },
   booleanLabel: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace",

package/lib/module/react-query/components/query-browser/MutationButton.js

@@ -2,7 +2,7 @@
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";
-import { buoyColors, useRelativeTime } from "@buoy-gg/shared-ui";
+import { buoyColors, night, useRelativeTime } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getMutationText = mutation => {
   if (!mutation.options.mutationKey) return "Anonymous Mutation";
@@ -111,17 +111,17 @@ export default function MutationButton({
 }
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginHorizontal: 8,
     marginVertical: 3,
     padding: 12
   },
   selected: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "50"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   rowContent: {
     flexDirection: "row",
@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
   },
   submittedText: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 1
   },
   mutationSection: {
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
   mutationKey: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     lineHeight: 16
   },
   bottomRightContainer: {
@@ -169,7 +169,7 @@ const styles = StyleSheet.create({
   },
   bottomRightText: {
     fontSize: 9,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

package/lib/module/react-query/components/query-browser/MutationDetails.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, ScrollView, StyleSheet } from "react-native";
-import { displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { displayValue, night } from "@buoy-gg/shared-ui";
 import MutationDetailsChips from "./MutationDetailsChips";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -47,12 +47,12 @@ export default function MutationDetails({
 const styles = StyleSheet.create({
   minWidth: {
     minWidth: 200,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "4D",
+    borderColor: night.color.accent + "4D",
     overflow: "hidden",
-    shadowColor: buoyColors.primary,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -61,14 +61,14 @@ const styles = StyleSheet.create({
     shadowRadius: 6
   },
   headerText: {
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accent + "15",
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontWeight: "600",
     fontSize: 12,
-    color: buoyColors.primary,
+    color: night.color.accent,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.primary + "33",
+    borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
     fontFamily: "monospace"
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.textMuted + "66"
+    borderBottomColor: night.color.separator
   },
   flex1: {
     flex: 1,
@@ -88,20 +88,20 @@ const styles = StyleSheet.create({
   },
   flexWrap: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     lineHeight: 18,
     flexShrink: 1,
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accent + "15",
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "4D"
+    borderColor: night.color.accent + "4D"
   },
   labelText: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
@@ -109,7 +109,7 @@ const styles = StyleSheet.create({
   },
   valueText: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
     fontFamily: "monospace"

package/lib/module/react-query/components/query-browser/MutationInformation.js

@@ -3,7 +3,7 @@
 import DataExplorer from "./Explorer";
 import { ScrollView, Text, View, StyleSheet } from "react-native";
 import MutationDetails from "./MutationDetails";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Detailed information block for a selected mutation within the modal experience. */
 export default function MutationInformation({
@@ -76,7 +76,8 @@ export default function MutationInformation({
 const styles = StyleSheet.create({
   flex1: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingBottom: 16,
@@ -87,26 +88,26 @@ const styles = StyleSheet.create({
   },
   textHeader: {
     textAlign: "left",
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accent + "15",
     padding: 12,
     fontSize: 12,
     fontWeight: "700",
-    color: buoyColors.primary,
+    color: night.color.accent,
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.primary + "33",
+    borderBottomColor: night.color.accent + "33",
     fontFamily: "monospace",
     letterSpacing: 1,
     textTransform: "uppercase"
   },
   padding: {
     padding: 12,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     borderTopWidth: 0
   }
 });