@buoy-gg/react-query 7.0.26 → 7.0.27

package/lib/commonjs/react-query/components/DataEditorMode.js

@@ -213,14 +213,14 @@ const styles = _reactNative.StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
   emptyDescription: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20,
@@ -229,10 +229,11 @@ const styles = _reactNative.StyleSheet.create({
   // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     paddingTop: 8,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
@@ -244,12 +245,12 @@ const styles = _reactNative.StyleSheet.create({
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {
     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
@@ -258,14 +259,14 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 6
   },
   queryExplorerHeader: {
-    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
     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"
@@ -276,12 +277,12 @@ const styles = _reactNative.StyleSheet.create({
   // Data section with teal accent - editable/success theme
   dataContainer: {
     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
@@ -291,14 +292,14 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8
   },
   dataHeader: {
-    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
     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"

package/lib/commonjs/react-query/components/FilterStatusBadge.js

@@ -45,7 +45,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   text: {
     fontSize: 9,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

package/lib/commonjs/react-query/components/MutationBrowserMode.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MutationBrowserMode = MutationBrowserMode;
 var _reactNative = require("react-native");
 var _MutationsList = _interopRequireDefault(require("./query-browser/MutationsList"));
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -42,10 +41,12 @@ function MutationBrowserMode({
 const styles = _reactNative.StyleSheet.create({
   mutationListContainer: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   mutationListContent: {
     padding: 8,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   }
 });

package/lib/commonjs/react-query/components/MutationEditorMode.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MutationEditorActionsFooter = MutationEditorActionsFooter;
 exports.MutationEditorMode = MutationEditorMode;
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -19,12 +20,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function MutationEditorMode({
   selectedMutation,
-  isFloatingMode
+  isFloatingMode,
+  disableInternalFooter = false
 }) {
-  const insets = (0, _sharedUi.useSafeAreaInsets)({
-    minBottom: 16
-  });
-  const actionButtons = (0, _useMutationActionButtons.useMutationActionButtons)(selectedMutation);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       accessibilityLabel: "Mutation editor mode",
@@ -66,22 +64,40 @@ function MutationEditorMode({
           })]
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.actionFooter, {
-        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionsGrid,
-        children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          onClick: action.onPress,
-          text: action.label,
-          variant: action.variant,
-          disabled: action.disabled
-        }, index))
-      })
+    }), !disableInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(MutationEditorActionsFooter, {
+      selectedMutation: selectedMutation,
+      isFloatingMode: isFloatingMode
     })]
   });
 }
+
+/**
+ * Standalone action footer for the mutation editor, so modal wrappers can pin it through
+ * JsModal's footer prop (mirrors DataEditorActionsFooter).
+ */
+function MutationEditorActionsFooter({
+  selectedMutation,
+  isFloatingMode
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const actionButtons = (0, _useMutationActionButtons.useMutationActionButtons)(selectedMutation);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.actionFooter, {
+      paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.actionsGrid,
+      children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        onClick: action.onPress,
+        text: action.label,
+        variant: action.variant,
+        disabled: action.disabled
+      }, index))
+    })
+  });
+}
 function DataExplorer({
   visible,
   selectedMutation
@@ -160,14 +176,14 @@ const styles = _reactNative.StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
   emptyDescription: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20,
@@ -175,10 +191,11 @@ const styles = _reactNative.StyleSheet.create({
   },
   actionFooter: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
@@ -191,12 +208,12 @@ const styles = _reactNative.StyleSheet.create({
   // Mutation Explorer styled container matching QueryDetails
   mutationExplorerContainer: {
     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
@@ -205,14 +222,14 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 6
   },
   mutationExplorerHeader: {
-    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
     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"
@@ -223,12 +240,12 @@ const styles = _reactNative.StyleSheet.create({
   // Data section matching query editor theme for consistency
   dataContainer: {
     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
@@ -237,14 +254,14 @@ const styles = _reactNative.StyleSheet.create({
     shadowRadius: 6
   },
   dataHeader: {
-    backgroundColor: _sharedUi.buoyColors.primary + "1A",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
     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"

package/lib/commonjs/react-query/components/QueryBrowserMode.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _index = require("./query-browser/index");
 var _FilterStatusBadge = require("./FilterStatusBadge");
 var _useAllQueries = _interopRequireDefault(require("../hooks/useAllQueries"));
-var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** Wrapper around the query list experience used inside the modal view. */
@@ -72,11 +71,13 @@ function QueryBrowserMode({
 const styles = _reactNative.StyleSheet.create({
   queryListContainer: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   queryListContent: {
     padding: 8,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent",
     flexGrow: 1
   }
 });

package/lib/commonjs/react-query/components/modals/DataEditorModal.js

@@ -31,6 +31,15 @@ function DataEditorModal({
   const handleModeChange = (0, _react.useCallback)(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. DataEditorActionsFooter pads its bottom with
+  // `insets.bottom + 8` when docked, so the reserve must grow by the same
+  // amount or the editor bottom hides behind the footer.
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 72 : 80 + insets.bottom;
   const renderHeaderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryModalHeader.ReactQueryModalHeader, {
     selectedQuery: selectedQuery,
     activeTab: "queries",
@@ -59,7 +68,7 @@ function DataEditorModal({
     enableGlitchEffects: true,
     styles: {},
     footer: footerNode,
-    footerHeight: 72,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataEditorMode.DataEditorMode, {
       selectedQuery: selectedQuery,
       isFloatingMode: modalMode === "floating",

package/lib/commonjs/react-query/components/modals/MutationBrowserFooter.js

@@ -53,10 +53,12 @@ function MutationBrowserFooter({
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 0,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    // Night glass bar — matches the shared EventStepperFooter backing.
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },

package/lib/commonjs/react-query/components/modals/MutationBrowserModal.js

@@ -59,6 +59,15 @@ function MutationBrowserModal({
     setModalMode(mode);
   }, []);
 
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. MutationBrowserFooter grows by the safe-area inset
+  // when docked, so the reserve must track that or the list bottom hides
+  // behind the footer.
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 56 : 48 + insets.bottom;
+
   // Create PanResponder for swipe navigation
   const panResponder = (0, _react.useRef)(_reactNative.PanResponder.create({
     onStartShouldSetPanResponder: () => false,
@@ -129,7 +138,7 @@ function MutationBrowserModal({
     enableGlitchEffects: true,
     styles: {},
     footer: footerNode,
-    footerHeight: 56,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flex: 1

package/lib/commonjs/react-query/components/modals/MutationEditorModal.js

@@ -28,6 +28,15 @@ function MutationEditorModal({
   const handleModeChange = (0, _react.useCallback)(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. MutationEditorActionsFooter pads its bottom with
+  // `insets.bottom + 8` when docked, so the reserve must grow by the same
+  // amount or the editor bottom hides behind the action bar.
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 72 : 80 + insets.bottom;
   const renderHeaderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryModalHeader.ReactQueryModalHeader, {
     selectedMutation: selectedMutation,
     activeTab: "mutations",
@@ -36,6 +45,10 @@ function MutationEditorModal({
   });
   const storagePrefix = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.reactQuery.modal() : _sharedUi.devToolsStorageKeys.reactQuery.mutationModal();
   if (!visible || !selectedMutation) return null;
+  const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationEditorMode.MutationEditorActionsFooter, {
+    selectedMutation: selectedMutation,
+    isFloatingMode: modalMode === "floating"
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
     visible: visible,
     onClose: onClose,
@@ -50,9 +63,12 @@ function MutationEditorModal({
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
     styles: {},
+    footer: footerNode,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationEditorMode.MutationEditorMode, {
       selectedMutation: selectedMutation,
-      isFloatingMode: modalMode === "floating"
+      isFloatingMode: modalMode === "floating",
+      disableInternalFooter: true
     })
   });
 }

package/lib/commonjs/react-query/components/modals/QueryBrowserFooter.js

@@ -48,10 +48,12 @@ function QueryBrowserFooter({
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 0,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    // Night glass bar — matches the shared EventStepperFooter backing.
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -146,6 +146,15 @@ function QueryBrowserModal({
   const handleModeChange = (0, _react.useCallback)(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. QueryBrowserFooter grows by the safe-area inset when
+  // docked, so the reserve must track that or the list bottom hides behind the
+  // footer.
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 56 : 48 + insets.bottom;
   if (!visible) return null;
   const renderHeaderContent = () => {
     // Filter view header with back button
@@ -206,7 +215,7 @@ function QueryBrowserModal({
     disableScrollWrapper: !showFilterView,
     styles: {},
     footer: !showFilterView ? footerNode : undefined,
-    footerHeight: !showFilterView ? 56 : undefined,
+    footerHeight: !showFilterView ? footerHeight : undefined,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.container,
       children: showFilterView ?
@@ -238,6 +247,7 @@ function QueryBrowserModal({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   }
 });

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -87,12 +87,12 @@ function ReactQueryModalHeader({
         style: styles.headerSearchContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
           size: 14,
-          color: _sharedUi.buoyColors.textSecondary
+          color: _sharedUi.night.color.textSecondary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
           ref: searchInputRef,
           style: styles.headerSearchInput,
           placeholder: "Search query keys...",
-          placeholderTextColor: _sharedUi.buoyColors.textMuted,
+          placeholderTextColor: _sharedUi.night.color.textTertiary,
           value: searchText,
           onChangeText: handleSearch,
           onSubmitEditing: () => setIsSearchActive(false),
@@ -111,7 +111,7 @@ function ReactQueryModalHeader({
           style: styles.headerSearchClear,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
             size: 14,
-            color: _sharedUi.buoyColors.textSecondary
+            color: _sharedUi.night.color.textSecondary
           })
         }) : null]
       }) : showWifiToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -138,7 +138,7 @@ function ReactQueryModalHeader({
         style: styles.headerActionButton,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
           size: 14,
-          color: _sharedUi.buoyColors.textSecondary
+          color: _sharedUi.night.color.textSecondary
         })
       }), onFilterPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore open filter",
@@ -146,7 +146,7 @@ function ReactQueryModalHeader({
         style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
           size: 14,
-          color: hasActiveFilters ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+          color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
         })
       }), onClearCache && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore clear cache",
@@ -155,7 +155,7 @@ function ReactQueryModalHeader({
         accessibilityLabel: `Clear ${activeTab} cache`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
           size: 14,
-          color: _sharedUi.buoyColors.warning
+          color: _sharedUi.night.color.warning
         })
       })]
     })]
@@ -174,7 +174,7 @@ const styles = _reactNative.StyleSheet.create({
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     paddingHorizontal: 8,
     paddingVertical: 4,
@@ -184,7 +184,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerSearchInput: {
     flex: 1,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontFamily: "monospace",
     padding: 0,
@@ -199,9 +199,9 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 4
   },
   activeFilterButton: {
-    backgroundColor: _sharedUi.buoyColors.primary + "33"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   clearCacheButton: {
-    backgroundColor: _sharedUi.buoyColors.warning + "20"
+    backgroundColor: _sharedUi.night.color.warningSoft
   }
 });

package/lib/commonjs/react-query/components/modals/SwipeIndicator.js

@@ -132,7 +132,7 @@ function SwipeIndicator({
         width: leftIndicatorWidth,
         height: INDICATOR_HEIGHT,
         borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: _sharedUi.buoyColors.text + "E6",
+        backgroundColor: _sharedUi.night.color.text + "E6",
         justifyContent: "center",
         alignItems: "center",
         opacity: leftIndicatorOpacity,
@@ -151,7 +151,7 @@ function SwipeIndicator({
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
           size: INDICATOR_HEIGHT * 0.6,
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           strokeWidth: 3
         })
       })
@@ -160,7 +160,7 @@ function SwipeIndicator({
         width: rightIndicatorWidth,
         height: INDICATOR_HEIGHT,
         borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: _sharedUi.buoyColors.text + "E6",
+        backgroundColor: _sharedUi.night.color.text + "E6",
         justifyContent: "center",
         alignItems: "center",
         opacity: rightIndicatorOpacity,
@@ -179,7 +179,7 @@ function SwipeIndicator({
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
           size: INDICATOR_HEIGHT * 0.6,
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           strokeWidth: 3
         })
       })