@buoy-gg/highlight-updates 7.0.25 → 7.0.27

package/lib/commonjs/highlight-updates/components/IdentifierBadge.js

@@ -26,7 +26,7 @@ const IDENTIFIER_CONFIG = exports.IDENTIFIER_CONFIG = {
   viewType: {
     label: "ViewType",
     shortLabel: "View",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     icon: _sharedUi.Box
   },
   testID: {
@@ -199,7 +199,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   value: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },

package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js

@@ -95,7 +95,7 @@ function IsolatedRenderListInner({
       style: styles.lockedBanner,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
         size: 14,
-        color: _sharedUi.buoyColors.warning
+        color: _sharedUi.night.color.warning
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: styles.lockedBannerText,
         children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
@@ -112,7 +112,7 @@ function IsolatedRenderListInner({
       style: styles.emptyState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
         size: 32,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
         children: "No renders tracked"
@@ -148,14 +148,14 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     textAlign: "center"
   },
@@ -169,12 +169,12 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   lockedBannerText: {
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 13,
     fontWeight: "500"
   },
   lockedBannerSubtext: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12
   }
 });

package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js

@@ -35,11 +35,11 @@ const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection(
     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, {
       style: styles.headerSearchInput,
       placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: _sharedUi.buoyColors.textMuted,
+      placeholderTextColor: _sharedUi.night.color.placeholder,
       value: searchText,
       onChangeText: onSearchChange,
       onSubmitEditing: onSearchClose,
@@ -57,7 +57,7 @@ const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection(
       style: styles.headerSearchClear,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
         size: 14,
-        color: _sharedUi.buoyColors.textSecondary
+        color: _sharedUi.night.color.textSecondary
       })
     }) : null]
   });
@@ -86,14 +86,14 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
       style: styles.headerActionButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
         size: 14,
-        color: _sharedUi.buoyColors.textSecondary
+        color: _sharedUi.night.color.textSecondary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onFilterToggle,
       style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
         size: 14,
-        color: activeFilterCount > 0 ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textMuted
+        color: activeFilterCount > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onOpenCopySettings,
@@ -102,7 +102,7 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
       accessibilityLabel: "Open copy settings",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
         size: 14,
-        color: hasRenders ? _sharedUi.buoyColors.textSecondary : _sharedUi.buoyColors.textMuted
+        color: hasRenders ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onToggleFreeze,
@@ -110,7 +110,7 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
       disabled: !isTracking,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
         size: 14,
-        color: !isTracking ? _sharedUi.buoyColors.textMuted : isFrozen ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textMuted
+        color: !isTracking ? _sharedUi.night.color.textTertiary : isFrozen ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
       isEnabled: isTracking,
@@ -122,7 +122,7 @@ const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions(
       disabled: !hasRenders,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
         size: 14,
-        color: hasRenders ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.textMuted
+        color: hasRenders ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
       })
     })]
   });
@@ -267,16 +267,16 @@ const styles = _reactNative.StyleSheet.create({
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -289,9 +289,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -299,11 +299,11 @@ const styles = _reactNative.StyleSheet.create({
     opacity: 0.55
   },
   activeFilterButton: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   freezeButton: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   }
 });

package/lib/commonjs/highlight-updates/components/RenderCauseBadge.js

@@ -300,19 +300,19 @@ function EnhancedCauseDisplay({
       style: styles.enhancedSection,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.enhancedSectionTitle, {
-          color: _sharedUi.buoyColors.textMuted
+          color: _sharedUi.night.color.textTertiary
         }],
         children: "Reference Changes (optimization opportunity):"
       }), refOnlyChanges.map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.enhancedChangeRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.enhancedChangeIcon, {
-            color: _sharedUi.buoyColors.textMuted
+            color: _sharedUi.night.color.textTertiary
           }],
           children: "\u25CB"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.enhancedChangeText, {
-            color: _sharedUi.buoyColors.textMuted
+            color: _sharedUi.night.color.textTertiary
           }],
           children: key
         })]
@@ -347,7 +347,7 @@ const styles = _reactNative.StyleSheet.create({
   componentBadge: {
     borderStyle: "dashed",
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   badgeText: {
     fontSize: 10,
@@ -362,14 +362,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   arrowText: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   arrowTextCompact: {
     fontSize: 9
   },
   keysText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -389,22 +389,22 @@ const styles = _reactNative.StyleSheet.create({
   twoLevelLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     minWidth: 70
   },
   twoLevelName: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   twoLevelText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary
+    color: _sharedUi.night.color.textSecondary
   },
   twoLevelKeys: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   // Enhanced cause display styles (Phase 5)
@@ -420,11 +420,12 @@ const styles = _reactNative.StyleSheet.create({
   enhancedComponentName: {
     fontSize: 14,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   enhancedNativeTag: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     paddingVertical: 2,
     paddingHorizontal: 6,
     borderRadius: 4
@@ -432,7 +433,7 @@ const styles = _reactNative.StyleSheet.create({
   enhancedNativeTagText: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   enhancedFlowContainer: {
@@ -441,13 +442,14 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8,
     paddingVertical: 8,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.input,
+    // Inset display box — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6
   },
   enhancedFlowLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary
+    color: _sharedUi.night.color.textSecondary
   },
   enhancedFlowBadge: {
     paddingVertical: 3,
@@ -460,7 +462,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   enhancedFlowArrow: {
     fontSize: 14,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "300"
   },
   enhancedSection: {
@@ -469,7 +471,7 @@ const styles = _reactNative.StyleSheet.create({
   enhancedSectionTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.3
   },
   enhancedChangeRow: {
@@ -480,19 +482,19 @@ const styles = _reactNative.StyleSheet.create({
   },
   enhancedChangeIcon: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontFamily: "monospace",
     width: 16
   },
   enhancedChangeText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
   enhancedNoChanges: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic",
     paddingLeft: 4
   }

package/lib/commonjs/highlight-updates/components/RenderDetailView.js

@@ -125,7 +125,7 @@ function RenderDetailView({
         style: styles.lockedBanner,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
           size: 14,
-          color: _sharedUi.buoyColors.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: styles.lockedBannerText,
           children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
@@ -442,10 +442,10 @@ function QuickActionsSection({
         activeOpacity: 0.7,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PlusIcon, {
           size: 14,
-          color: selectedOption ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+          color: selectedOption ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterActionButtonText, {
-            color: selectedOption ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+            color: selectedOption ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
           }],
           children: "Only Show This"
         })]
@@ -456,10 +456,10 @@ function QuickActionsSection({
         activeOpacity: 0.7,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MinusIcon, {
           size: 14,
-          color: selectedOption ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textMuted
+          color: selectedOption ? _sharedUi.night.color.danger : _sharedUi.night.color.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterActionButtonText, {
-            color: selectedOption ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textMuted
+            color: selectedOption ? _sharedUi.night.color.danger : _sharedUi.night.color.textTertiary
           }],
           children: "Hide This"
         })]
@@ -494,7 +494,8 @@ function FilterOptionCard({
 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"
   },
   // Header
   header: {
@@ -525,11 +526,12 @@ const styles = _reactNative.StyleSheet.create({
   componentName: {
     fontSize: 18,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     flexShrink: 1
   },
   nativeTypeBadge: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     paddingVertical: 3,
     paddingHorizontal: 8,
     borderRadius: 4
@@ -537,15 +539,15 @@ const styles = _reactNative.StyleSheet.create({
   nativeTypeText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   // Answer Card
   answerCard: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12,
     gap: 6
   },
@@ -566,14 +568,15 @@ const styles = _reactNative.StyleSheet.create({
   },
   causeLabel: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "500"
   },
   hookChangesContainer: {
     gap: 6
   },
   hookDiffContainer: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    // Inset code box — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     overflow: "hidden"
   },
@@ -583,14 +586,15 @@ const styles = _reactNative.StyleSheet.create({
     gap: 4
   },
   propChangeChip: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     paddingVertical: 2,
     paddingHorizontal: 6,
     borderRadius: 4
   },
   propChangeText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   // Details Section
@@ -598,17 +602,17 @@ const styles = _reactNative.StyleSheet.create({
     gap: 10
   },
   detailsCard: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12,
     gap: 6
   },
   detailsCardTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 0.5,
     textTransform: "uppercase",
     marginBottom: 4
@@ -621,12 +625,12 @@ const styles = _reactNative.StyleSheet.create({
   detailLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     minWidth: 55
   },
   detailValue: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -635,10 +639,10 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 16
   },
@@ -649,18 +653,18 @@ const styles = _reactNative.StyleSheet.create({
   statValue: {
     fontSize: 16,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   statLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 2
   },
   statDivider: {
     width: 1,
     height: 24,
-    backgroundColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.night.color.border,
     marginHorizontal: 12
   },
   // Measurements Row
@@ -668,10 +672,10 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-around",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 12
   },
@@ -683,28 +687,28 @@ const styles = _reactNative.StyleSheet.create({
   measurementLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase"
   },
   measurementValue: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   // Quick Actions Section
   quickActionsSection: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12,
     gap: 10
   },
   quickActionsTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 0.5,
     textTransform: "uppercase",
     marginBottom: 2
@@ -715,7 +719,7 @@ const styles = _reactNative.StyleSheet.create({
   filterOptionCard: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     paddingVertical: 10,
     paddingHorizontal: 12,
@@ -724,26 +728,26 @@ const styles = _reactNative.StyleSheet.create({
     gap: 10
   },
   filterOptionCardSelected: {
-    borderColor: _sharedUi.buoyColors.success,
-    backgroundColor: _sharedUi.buoyColors.success + "15"
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   filterOptionLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     minWidth: 70
   },
   filterOptionLabelSelected: {
-    color: _sharedUi.buoyColors.success
+    color: _sharedUi.night.color.accent
   },
   filterOptionValue: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
   filterOptionValueSelected: {
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   filterActionButtons: {
     flexDirection: "row",
@@ -761,16 +765,16 @@ const styles = _reactNative.StyleSheet.create({
     borderWidth: 1
   },
   filterActionButtonInclude: {
-    backgroundColor: _sharedUi.buoyColors.success + "15",
-    borderColor: _sharedUi.buoyColors.success + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   filterActionButtonExclude: {
-    backgroundColor: _sharedUi.buoyColors.error + "15",
-    borderColor: _sharedUi.buoyColors.error + "40"
+    backgroundColor: _sharedUi.night.color.dangerSoft,
+    borderColor: _sharedUi.night.color.danger + "40"
   },
   filterActionButtonDisabled: {
-    backgroundColor: _sharedUi.buoyColors.input,
-    borderColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderColor: _sharedUi.night.color.border,
     opacity: 0.5
   },
   filterActionButtonText: {
@@ -782,21 +786,21 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "40",
+    borderColor: _sharedUi.night.color.warning + "40",
     paddingVertical: 12,
     paddingHorizontal: 16,
     gap: 8
   },
   lockedBannerText: {
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 13,
     fontWeight: "600"
   },
   lockedBannerSubtext: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12
   }
 });