@buoy-gg/react-query 7.0.26 → 7.0.27

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

@@ -81,7 +81,8 @@ function MutationInformation({
 const styles = _reactNative.StyleSheet.create({
   flex1: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingBottom: 16,
@@ -92,26 +93,26 @@ const styles = _reactNative.StyleSheet.create({
   },
   textHeader: {
     textAlign: "left",
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accent + "15",
     padding: 12,
     fontSize: 12,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.primary + "33",
+    borderBottomColor: _sharedUi.night.color.accent + "33",
     fontFamily: "monospace",
     letterSpacing: 1,
     textTransform: "uppercase"
   },
   padding: {
     padding: 12,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     borderTopWidth: 0
   }
 });

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

@@ -159,52 +159,56 @@ function MutationsList({
 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"
   },
   listWrapper: {
     flex: 1
   },
   listContent: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent",
     paddingHorizontal: 8,
     paddingTop: 8
   },
   mutationInfo: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
-    backgroundColor: _sharedUi.buoyColors.base
+    borderTopColor: _sharedUi.night.color.border,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   dragHandle: {
     height: 20,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border
+    borderBottomColor: _sharedUi.night.color.border
   },
   dragIndicator: {
     width: 40,
     height: 4,
-    backgroundColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.night.color.placeholder,
     borderRadius: 2
   },
   mutationInfoContent: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   emptyContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
     padding: 32,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     margin: 16,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
     fontFamily: "monospace",

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

@@ -112,7 +112,7 @@ const styles = _reactNative.StyleSheet.create({
   sectionLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },

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

@@ -158,21 +158,22 @@ const styles = _reactNative.StyleSheet.create({
   },
   listContent: {
     paddingBottom: 16,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   emptyContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
     padding: 32,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     margin: 16,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
     fontFamily: "monospace",

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

@@ -67,12 +67,12 @@ function QueryDetails({
 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
@@ -81,14 +81,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"
@@ -100,7 +100,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.textMuted + "66"
+    borderBottomColor: _sharedUi.night.color.separator
   },
   flexOne: {
     flex: 1,
@@ -108,20 +108,20 @@ const styles = _reactNative.StyleSheet.create({
   },
   queryKeyText: {
     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",
@@ -129,7 +129,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"

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

@@ -68,7 +68,8 @@ function QueryInformation({
 const styles = _reactNative.StyleSheet.create({
   flexOne: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingBottom: 16,
@@ -80,15 +81,15 @@ const styles = _reactNative.StyleSheet.create({
   headerText: {
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     marginBottom: 8,
     textAlign: "left"
   },
   contentView: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 16
   }
 });

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

@@ -43,10 +43,10 @@ const QueryStatus = ({
         text: _sharedUi.buoyColors.primary
       },
       purple: {
-        bg: _sharedUi.buoyColors.textMuted + "26",
-        border: _sharedUi.buoyColors.textMuted + "59",
-        dot: _sharedUi.buoyColors.textMuted,
-        text: _sharedUi.buoyColors.textMuted
+        bg: _sharedUi.night.color.fillSecondary,
+        border: _sharedUi.night.color.fillTertiary,
+        dot: _sharedUi.night.color.textTertiary,
+        text: _sharedUi.night.color.textTertiary
       },
       red: {
         bg: _sharedUi.buoyColors.error + "15",
@@ -55,10 +55,10 @@ const QueryStatus = ({
         text: _sharedUi.buoyColors.error
       },
       gray: {
-        bg: _sharedUi.buoyColors.textMuted + "26",
-        border: _sharedUi.buoyColors.textMuted + "59",
-        dot: _sharedUi.buoyColors.textMuted,
-        text: _sharedUi.buoyColors.textMuted
+        bg: _sharedUi.night.color.fillSecondary,
+        border: _sharedUi.night.color.fillTertiary,
+        dot: _sharedUi.night.color.textTertiary,
+        text: _sharedUi.night.color.textTertiary
       }
     };
     return colorMap[colorName] || colorMap.gray;
@@ -66,9 +66,12 @@ const QueryStatus = ({
   const statusColors = getStatusColors(color);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools query status",
-    style: [styles.queryStatusTag, isLarge && styles.queryStatusTagLarge, isActive && {
-      backgroundColor: statusColors.dot + "15",
-      borderColor: statusColors.dot + "40"
+    style: [styles.queryStatusTag, isLarge && styles.queryStatusTagLarge,
+    // The night chip contract (see NightChip): resting fill never changes;
+    // selection is signaled by the tinted border and label.
+    isActive && {
+      backgroundColor: statusColors.bg,
+      borderColor: statusColors.border
     }],
     disabled: !onPress,
     onPress: onPress,
@@ -79,7 +82,9 @@ const QueryStatus = ({
         backgroundColor: statusColors.dot
       }]
     }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, isLarge && styles.labelLarge],
+      style: [styles.label, isLarge && styles.labelLarge, isActive && {
+        color: statusColors.text
+      }],
       numberOfLines: 1,
       ellipsizeMode: "tail",
       children: label
@@ -96,14 +101,15 @@ const styles = _reactNative.StyleSheet.create({
   queryStatusTag: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "transparent",
-    borderRadius: 12,
+    // Night chip: dark-glass fill, fully-rounded pill, hairline border.
+    backgroundColor: _sharedUi.night.color.buttonSurface,
+    borderRadius: 13,
     paddingHorizontal: 10,
     paddingVertical: 5,
     height: 26,
     gap: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.textMuted + "20"
+    borderColor: _sharedUi.night.color.border
   },
   queryStatusTagLarge: {
     borderRadius: 16,
@@ -125,7 +131,7 @@ const styles = _reactNative.StyleSheet.create({
   label: {
     fontSize: 11,
     fontWeight: "500",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "system"
   },
   labelLarge: {

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

@@ -2,7 +2,7 @@
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { useQueryClient } from "@tanstack/react-query";
-import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
 import Explorer from "./query-browser/Explorer";
 import QueryDetails from "./query-browser/QueryDetails";
 import ActionButton from "./query-browser/ActionButton";
@@ -207,14 +207,14 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
   emptyDescription: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20,
@@ -223,10 +223,11 @@ const styles = StyleSheet.create({
   // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
+    borderTopColor: night.color.border,
     paddingTop: 8,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
@@ -238,12 +239,12 @@ const styles = StyleSheet.create({
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {
     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
@@ -252,14 +253,14 @@ const styles = StyleSheet.create({
     shadowRadius: 6
   },
   queryExplorerHeader: {
-    backgroundColor: buoyColors.primary + "1A",
+    backgroundColor: night.color.accent + "1A",
     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"
@@ -270,12 +271,12 @@ const styles = StyleSheet.create({
   // Data section with teal accent - editable/success theme
   dataContainer: {
     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
@@ -285,14 +286,14 @@ const styles = StyleSheet.create({
     marginTop: 8
   },
   dataHeader: {
-    backgroundColor: buoyColors.primary + "1A",
+    backgroundColor: night.color.accent + "1A",
     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"

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Compact badge showing filter status (e.g., "Showing 5 of 12")
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 9,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

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

@@ -2,7 +2,6 @@
 
 import { View, StyleSheet } from "react-native";
 import MutationsList from "./query-browser/MutationsList";
-import { buoyColors } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Layout wrapper that renders the mutation list alongside selection handling glue logic used by
@@ -37,10 +36,12 @@ export function MutationBrowserMode({
 const styles = StyleSheet.create({
   mutationListContainer: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   mutationListContent: {
     padding: 8,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   }
 });

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
 import Explorer from "./query-browser/Explorer";
 import MutationDetails from "./query-browser/MutationDetails";
 import ActionButton from "./query-browser/ActionButton";
@@ -14,12 +14,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 export function MutationEditorMode({
   selectedMutation,
-  isFloatingMode
+  isFloatingMode,
+  disableInternalFooter = false
 }) {
-  const insets = useSafeAreaInsets({
-    minBottom: 16
-  });
-  const actionButtons = useMutationActionButtons(selectedMutation);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(ScrollView, {
       accessibilityLabel: "Mutation editor mode",
@@ -61,22 +58,40 @@ export function MutationEditorMode({
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.actionFooter, {
-        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
-      }],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.actionsGrid,
-        children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          onClick: action.onPress,
-          text: action.label,
-          variant: action.variant,
-          disabled: action.disabled
-        }, index))
-      })
+    }), !disableInternalFooter && /*#__PURE__*/_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).
+ */
+export function MutationEditorActionsFooter({
+  selectedMutation,
+  isFloatingMode
+}) {
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const actionButtons = useMutationActionButtons(selectedMutation);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.actionFooter, {
+      paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
+    }],
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.actionsGrid,
+      children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
+        onClick: action.onPress,
+        text: action.label,
+        variant: action.variant,
+        disabled: action.disabled
+      }, index))
+    })
+  });
+}
 function DataExplorer({
   visible,
   selectedMutation
@@ -155,14 +170,14 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 8,
     textAlign: "center"
   },
   emptyDescription: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20,
@@ -170,10 +185,11 @@ const styles = StyleSheet.create({
   },
   actionFooter: {
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
+    borderTopColor: night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
@@ -186,12 +202,12 @@ const styles = StyleSheet.create({
   // Mutation Explorer styled container matching QueryDetails
   mutationExplorerContainer: {
     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
@@ -200,14 +216,14 @@ const styles = StyleSheet.create({
     shadowRadius: 6
   },
   mutationExplorerHeader: {
-    backgroundColor: buoyColors.primary + "1A",
+    backgroundColor: night.color.accent + "1A",
     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"
@@ -218,12 +234,12 @@ const styles = StyleSheet.create({
   // Data section matching query editor theme for consistency
   dataContainer: {
     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
@@ -232,14 +248,14 @@ const styles = StyleSheet.create({
     shadowRadius: 6
   },
   dataHeader: {
-    backgroundColor: buoyColors.primary + "1A",
+    backgroundColor: night.color.accent + "1A",
     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"