@buoy-gg/react-query 7.0.26 → 7.0.27

package/lib/commonjs/react-query/components/query-browser/ActionButton.js

@@ -10,34 +10,34 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
   refetch: {
-    dotColor: _sharedUi.buoyColors.success,
-    textColor: _sharedUi.buoyColors.text,
-    borderColor: _sharedUi.buoyColors.border
+    dotColor: _sharedUi.night.color.accent,
+    textColor: _sharedUi.night.color.text,
+    borderColor: _sharedUi.night.color.border
   },
   invalidate: {
-    dotColor: _sharedUi.buoyColors.warning,
-    textColor: _sharedUi.buoyColors.text,
-    borderColor: _sharedUi.buoyColors.border
+    dotColor: _sharedUi.night.color.warning,
+    textColor: _sharedUi.night.color.text,
+    borderColor: _sharedUi.night.color.border
   },
   reset: {
-    dotColor: _sharedUi.buoyColors.textSecondary,
-    textColor: _sharedUi.buoyColors.text,
-    borderColor: _sharedUi.buoyColors.border
+    dotColor: _sharedUi.night.color.textSecondary,
+    textColor: _sharedUi.night.color.text,
+    borderColor: _sharedUi.night.color.border
   },
   remove: {
-    dotColor: _sharedUi.buoyColors.error,
-    textColor: _sharedUi.buoyColors.error,
-    borderColor: _sharedUi.buoyColors.error + "40"
+    dotColor: _sharedUi.night.color.danger,
+    textColor: _sharedUi.night.color.danger,
+    borderColor: _sharedUi.night.color.danger + "40"
   },
   triggerLoading: {
-    dotColor: _sharedUi.buoyColors.info,
-    textColor: _sharedUi.buoyColors.info,
-    borderColor: _sharedUi.buoyColors.info + "40"
+    dotColor: _sharedUi.night.color.info,
+    textColor: _sharedUi.night.color.info,
+    borderColor: _sharedUi.night.color.info + "40"
   },
   triggerError: {
-    dotColor: _sharedUi.buoyColors.error,
-    textColor: _sharedUi.buoyColors.error,
-    borderColor: _sharedUi.buoyColors.error + "40"
+    dotColor: _sharedUi.night.color.danger,
+    textColor: _sharedUi.night.color.danger,
+    borderColor: _sharedUi.night.color.danger + "40"
   }
 };
 /** Clean, minimal action button matching React Query DevTools style. */
@@ -53,7 +53,7 @@ function ActionButton({
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      borderColor: disabled ? _sharedUi.buoyColors.border : config.borderColor,
+      borderColor: disabled ? _sharedUi.night.color.border : config.borderColor,
       opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
@@ -64,11 +64,11 @@ function ActionButton({
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.dotColor
+        backgroundColor: disabled ? _sharedUi.night.color.textTertiary : config.dotColor
       }]
     }), /*#__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
     })]

package/lib/commonjs/react-query/components/query-browser/ClearCacheButton.js

@@ -29,7 +29,7 @@ const ClearCacheButton = ({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
       size: 16,
       strokeWidth: 2,
-      color: disabled ? _sharedUi.buoyColors.textSecondary : _sharedUi.buoyColors.warning
+      color: disabled ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.warning
     })
   });
 };
@@ -38,16 +38,16 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     justifyContent: "center",
     alignItems: "center",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "33"
+    borderColor: _sharedUi.night.color.warning + "33"
   },
   disabledButton: {
     opacity: 0.5,
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "1A",
-    borderColor: _sharedUi.buoyColors.textSecondary + "33"
+    backgroundColor: _sharedUi.night.color.fill,
+    borderColor: _sharedUi.night.color.border
   }
 });
 var _default = exports.default = ClearCacheButton;

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

@@ -42,11 +42,11 @@ const Expander = /*#__PURE__*/(0, _react.memo)(({
     style: [styles.expanderIcon, isMain && styles.expanderIconMain, expanded ? styles.expanded : styles.collapsed],
     children: expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
       size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? _sharedUi.buoyColors.primary : isMain ? _sharedUi.buoyColors.text : _sharedUi.buoyColors.textSecondary,
+      color: isFocused ? _sharedUi.night.color.accent : isMain ? _sharedUi.night.color.text : _sharedUi.night.color.textSecondary,
       strokeWidth: 2.5
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
       size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? _sharedUi.buoyColors.primary : isMain ? _sharedUi.buoyColors.text : _sharedUi.buoyColors.textSecondary,
+      color: isFocused ? _sharedUi.night.color.accent : isMain ? _sharedUi.night.color.text : _sharedUi.night.color.textSecondary,
       strokeWidth: 2.5
     })
   });
@@ -94,7 +94,7 @@ const DeleteItemButton = /*#__PURE__*/(0, _react.memo)(({
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
       size: 14,
       strokeWidth: 2,
-      color: isFocused ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.error + "CC"
+      color: isFocused ? _sharedUi.night.color.danger : _sharedUi.night.color.danger + "CC"
     })
   });
 });
@@ -122,7 +122,7 @@ const ClearArrayButton = /*#__PURE__*/(0, _react.memo)(({
     activeOpacity: 0.7,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.clearButtonText, {
-        color: isFocused ? _sharedUi.buoyColors.warning : _sharedUi.buoyColors.warning + "CC"
+        color: isFocused ? _sharedUi.night.color.warning : _sharedUi.night.color.warning + "CC"
       }],
       children: "[]"
     })
@@ -180,7 +180,7 @@ function ToggleValueButton({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
         size: 14,
         strokeWidth: 2,
-        color: _sharedUi.buoyColors.error + "CC"
+        color: _sharedUi.night.color.danger + "CC"
       })
     })]
   });
@@ -454,9 +454,9 @@ function Explorer({
 }
 const styles = _reactNative.StyleSheet.create({
   buttonStyle: {
-    backgroundColor: _sharedUi.buoyColors.card + "E6",
+    backgroundColor: _sharedUi.night.color.surface + "E6",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textSecondary + "33",
+    borderColor: _sharedUi.night.color.textSecondary + "33",
     borderRadius: 6,
     flexDirection: "row",
     alignItems: "center",
@@ -473,15 +473,15 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 2
   },
   buttonStyleFocused: {
-    borderColor: _sharedUi.buoyColors.primary + "CC",
-    backgroundColor: _sharedUi.buoyColors.primary + "26",
-    shadowColor: _sharedUi.buoyColors.primary,
+    borderColor: _sharedUi.night.color.accent + "CC",
+    backgroundColor: _sharedUi.night.color.accent + "26",
+    shadowColor: _sharedUi.night.color.accent,
     shadowOpacity: 0.3,
     shadowRadius: 4
   },
   deleteButton: {
-    backgroundColor: _sharedUi.buoyColors.error + "1A",
-    borderColor: _sharedUi.buoyColors.error + "4D",
+    backgroundColor: _sharedUi.night.color.danger + "1A",
+    borderColor: _sharedUi.night.color.danger + "4D",
     borderWidth: 1,
     borderRadius: 6,
     padding: 0,
@@ -490,7 +490,7 @@ const styles = _reactNative.StyleSheet.create({
     width: 28,
     height: 28,
     position: "relative",
-    shadowColor: _sharedUi.buoyColors.error,
+    shadowColor: _sharedUi.night.color.danger,
     shadowOffset: {
       width: 0,
       height: 0
@@ -499,14 +499,14 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 3
   },
   deleteButtonFocused: {
-    borderColor: _sharedUi.buoyColors.error + "CC",
-    backgroundColor: _sharedUi.buoyColors.error + "33",
+    borderColor: _sharedUi.night.color.danger + "CC",
+    backgroundColor: _sharedUi.night.color.danger + "33",
     shadowOpacity: 0.3,
     shadowRadius: 5
   },
   deleteButtonInToggle: {
-    backgroundColor: _sharedUi.buoyColors.error + "1A",
-    borderColor: _sharedUi.buoyColors.error + "4D",
+    backgroundColor: _sharedUi.night.color.danger + "1A",
+    borderColor: _sharedUi.night.color.danger + "4D",
     borderWidth: 1,
     borderRadius: 6,
     padding: 0,
@@ -514,7 +514,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     width: 28,
     height: 28,
-    shadowColor: _sharedUi.buoyColors.error,
+    shadowColor: _sharedUi.night.color.danger,
     shadowOffset: {
       width: 0,
       height: 0
@@ -523,9 +523,9 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 3
   },
   clearButton: {
-    backgroundColor: _sharedUi.buoyColors.warning + "1A",
+    backgroundColor: _sharedUi.night.color.warning + "1A",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "4D",
+    borderColor: _sharedUi.night.color.warning + "4D",
     borderRadius: 6,
     flexDirection: "row",
     padding: 0,
@@ -535,7 +535,7 @@ const styles = _reactNative.StyleSheet.create({
     height: 28,
     position: "relative",
     zIndex: 10,
-    shadowColor: _sharedUi.buoyColors.warning,
+    shadowColor: _sharedUi.night.color.warning,
     shadowOffset: {
       width: 0,
       height: 0
@@ -544,8 +544,8 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 3
   },
   clearButtonFocused: {
-    borderColor: _sharedUi.buoyColors.warning + "CC",
-    backgroundColor: _sharedUi.buoyColors.warning + "33",
+    borderColor: _sharedUi.night.color.warning + "CC",
+    backgroundColor: _sharedUi.night.color.warning + "33",
     shadowOpacity: 0.3,
     shadowRadius: 5
   },
@@ -560,16 +560,16 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginRight: 1,
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "14",
+    backgroundColor: _sharedUi.night.color.textSecondary + "14",
     borderRadius: 3
   },
   expanderIconMain: {
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "1A",
+    backgroundColor: _sharedUi.night.color.textSecondary + "1A",
     width: 20,
     height: 20,
     borderRadius: 4,
     borderWidth: 0.5,
-    borderColor: _sharedUi.buoyColors.textSecondary + "33"
+    borderColor: _sharedUi.night.color.textSecondary + "33"
   },
   expanded: {
     transform: [{
@@ -602,15 +602,15 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 6,
     marginVertical: 1,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.card + "66",
+    backgroundColor: _sharedUi.night.color.surface + "66",
     borderWidth: 0.5,
-    borderColor: _sharedUi.buoyColors.textSecondary + "1A"
+    borderColor: _sharedUi.night.color.textSecondary + "1A"
   },
   flexRowItemsCenterGapMain: {
-    backgroundColor: _sharedUi.buoyColors.card + "E6",
+    backgroundColor: _sharedUi.night.color.surface + "E6",
     borderLeftWidth: 2.5,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "80",
-    borderColor: _sharedUi.buoyColors.textSecondary + "26",
+    borderLeftColor: _sharedUi.night.color.textSecondary + "80",
+    borderColor: _sharedUi.night.color.textSecondary + "26",
     paddingVertical: 5,
     paddingHorizontal: 8,
     marginBottom: 3,
@@ -635,7 +635,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   labelText: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
@@ -643,23 +643,23 @@ const styles = _reactNative.StyleSheet.create({
     letterSpacing: 0.4
   },
   labelTextFocused: {
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   labelTextMain: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.6
   },
   textGray500: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10,
     fontWeight: "400",
     fontFamily: "monospace",
     opacity: 0.7
   },
   pageRangeText: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace"
@@ -675,10 +675,10 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 2,
     paddingLeft: 8,
     borderLeftWidth: 1.5,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "40"
+    borderLeftColor: _sharedUi.night.color.textSecondary + "40"
   },
   singleEntryContainerMain: {
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "4D",
+    borderLeftColor: _sharedUi.night.color.textSecondary + "4D",
     marginLeft: 4,
     paddingLeft: 10
   },
@@ -687,10 +687,10 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 2,
     paddingLeft: 8,
     borderLeftWidth: 1.5,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "40"
+    borderLeftColor: _sharedUi.night.color.textSecondary + "40"
   },
   multiEntryContainerMain: {
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "4D",
+    borderLeftColor: _sharedUi.night.color.textSecondary + "4D",
     marginLeft: 4,
     paddingLeft: 10
   },
@@ -700,13 +700,13 @@ const styles = _reactNative.StyleSheet.create({
   pageExpanderButton: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.card + "66",
+    backgroundColor: _sharedUi.night.color.surface + "66",
     paddingVertical: 3,
     paddingHorizontal: 6,
     gap: 6,
     borderRadius: 4,
     borderWidth: 0.5,
-    borderColor: _sharedUi.buoyColors.textSecondary + "1A",
+    borderColor: _sharedUi.night.color.textSecondary + "1A",
     marginBottom: 2,
     minHeight: 24
   },
@@ -715,15 +715,15 @@ const styles = _reactNative.StyleSheet.create({
     paddingLeft: 8,
     marginTop: 2,
     borderLeftWidth: 1.5,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary + "40"
+    borderLeftColor: _sharedUi.night.color.textSecondary + "40"
   },
   textNumber: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "600",
     fontFamily: "monospace"
   },
   textString: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   flexRowGapFullWidth: {
@@ -737,7 +737,7 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 3
   },
   text344054: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
@@ -760,9 +760,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: _sharedUi.buoyColors.card + "E6",
+    backgroundColor: _sharedUi.night.color.surface + "E6",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textSecondary + "33",
+    borderColor: _sharedUi.night.color.textSecondary + "33",
     alignItems: "center",
     justifyContent: "center",
     marginLeft: 2,
@@ -775,9 +775,9 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 2
   },
   touchableButtonFocused: {
-    borderColor: _sharedUi.buoyColors.primary + "CC",
-    backgroundColor: _sharedUi.buoyColors.primary + "26",
-    shadowColor: _sharedUi.buoyColors.primary,
+    borderColor: _sharedUi.night.color.accent + "CC",
+    backgroundColor: _sharedUi.night.color.accent + "26",
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -793,7 +793,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   displayValueText: {
     flex: 1,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "400",
     fontFamily: "monospace",
     fontSize: 12,
@@ -801,7 +801,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textMuted + "66",
+    borderColor: _sharedUi.night.color.textTertiary + "66",
     minHeight: 34
   },
   // New redesigned styles (kept for future use)
@@ -814,7 +814,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 12
   },
   dataLabel: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 13,
     fontWeight: "500",
     minWidth: 80,
@@ -846,17 +846,17 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "0F"
+    borderColor: _sharedUi.night.color.accent + "0F"
   },
   readOnlyValue: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontFamily: "monospace",
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textMuted + "33",
+    borderColor: _sharedUi.night.color.textTertiary + "33",
     flex: 1
   },
   actionButtons: {
@@ -870,12 +870,12 @@ const styles = _reactNative.StyleSheet.create({
     padding: 8,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textMuted + "4D",
+    borderColor: _sharedUi.night.color.textTertiary + "4D",
     flex: 1
   },
   booleanText: {
     marginLeft: 8,
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontWeight: "500",
     fontFamily: "monospace"
   },
@@ -885,7 +885,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textMuted + "99",
+    borderColor: _sharedUi.night.color.textTertiary + "99",
     paddingHorizontal: 8,
     paddingVertical: 6,
     marginVertical: 2,
@@ -939,27 +939,27 @@ const styles = _reactNative.StyleSheet.create({
   },
   // Pre-computed toggle icon styles to avoid inline objects [[memory:4875251]]
   toggleIconTrue: {
-    backgroundColor: _sharedUi.buoyColors.primary
+    backgroundColor: _sharedUi.night.color.accent
   },
   toggleIconFalse: {
-    backgroundColor: _sharedUi.buoyColors.textMuted
+    backgroundColor: _sharedUi.night.color.textTertiary
   },
   // Pre-computed toggle badge styles [[memory:4875251]]
   toggleBadgeTrue: {
-    backgroundColor: _sharedUi.buoyColors.primary + "1A",
-    borderColor: _sharedUi.buoyColors.primary + "4D"
+    backgroundColor: _sharedUi.night.color.accent + "1A",
+    borderColor: _sharedUi.night.color.accent + "4D"
   },
   toggleBadgeFalse: {
-    backgroundColor: _sharedUi.buoyColors.textMuted + "1A",
-    borderColor: _sharedUi.buoyColors.textMuted + "4D"
+    backgroundColor: _sharedUi.night.color.textTertiary + "1A",
+    borderColor: _sharedUi.night.color.textTertiary + "4D"
   },
   // Pre-computed toggle text styles [[memory:4875251]]
   toggleTextTrue: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontWeight: "600"
   },
   toggleTextFalse: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "500"
   },
   // Boolean row container styles
@@ -971,7 +971,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 2
   },
   booleanLabel: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace",

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

@@ -115,17 +115,17 @@ function MutationButton({
 }
 const styles = _reactNative.StyleSheet.create({
   button: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     marginHorizontal: 8,
     marginVertical: 3,
     padding: 12
   },
   selected: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "50"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   rowContent: {
     flexDirection: "row",
@@ -153,7 +153,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   submittedText: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 1
   },
   mutationSection: {
@@ -163,7 +163,7 @@ const styles = _reactNative.StyleSheet.create({
   mutationKey: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     lineHeight: 16
   },
   bottomRightContainer: {
@@ -173,7 +173,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   bottomRightText: {
     fontSize: 9,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

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

@@ -52,12 +52,12 @@ function MutationDetails({
 const styles = _reactNative.StyleSheet.create({
   minWidth: {
     minWidth: 200,
-    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
@@ -66,14 +66,14 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 6
   },
   headerText: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accent + "15",
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontWeight: "600",
     fontSize: 12,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.primary + "33",
+    borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
     fontFamily: "monospace"
@@ -85,7 +85,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.textMuted + "66"
+    borderBottomColor: _sharedUi.night.color.separator
   },
   flex1: {
     flex: 1,
@@ -93,20 +93,20 @@ const styles = _reactNative.StyleSheet.create({
   },
   flexWrap: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     lineHeight: 18,
     flexShrink: 1,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accent + "15",
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "4D"
+    borderColor: _sharedUi.night.color.accent + "4D"
   },
   labelText: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
@@ -114,7 +114,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   valueText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
     fontFamily: "monospace"