@buoy-gg/highlight-updates 7.0.26 → 7.0.28

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

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors } from "@buoy-gg/shared-ui";
+import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors, night } from "@buoy-gg/shared-ui";
 
 // All possible identifier types
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ export const IDENTIFIER_CONFIG = {
   viewType: {
     label: "ViewType",
     shortLabel: "View",
-    color: buoyColors.primary,
+    color: night.color.accent,
     icon: Box
   },
   testID: {
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
   },
   value: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },

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

@@ -15,7 +15,7 @@ import React, { useState, useEffect, useRef, useCallback, memo, useMemo } from "
 import { View, Text, FlatList, StyleSheet } from "react-native";
 import { RenderTracker } from "../utils/RenderTracker";
 import { RenderListItem } from "./RenderListItem";
-import { Activity, Lock, buoyColors, useLimit } from "@buoy-gg/shared-ui";
+import { Activity, Lock, night, useLimit } from "@buoy-gg/shared-ui";
 
 // Free tier limit for tracked components
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,7 +90,7 @@ function IsolatedRenderListInner({
       style: styles.lockedBanner,
       children: [/*#__PURE__*/_jsx(Lock, {
         size: 14,
-        color: buoyColors.warning
+        color: night.color.warning
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.lockedBannerText,
         children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
@@ -107,7 +107,7 @@ function IsolatedRenderListInner({
       style: styles.emptyState,
       children: [/*#__PURE__*/_jsx(Activity, {
         size: 32,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
         children: "No renders tracked"
@@ -143,14 +143,14 @@ const styles = StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 12,
     textAlign: "center"
   },
@@ -164,12 +164,12 @@ const styles = StyleSheet.create({
     gap: 8
   },
   lockedBannerText: {
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontSize: 13,
     fontWeight: "500"
   },
   lockedBannerSubtext: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 12
   }
 });

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

@@ -11,7 +11,7 @@
 
 import React, { memo } from "react";
 import { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
-import { Trash2, Search, Filter, X, Pause, Copy, ModalHeader, TabSelector, buoyColors, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { Trash2, Search, Filter, X, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { StatsDisplay } from "./StatsDisplay";
 
 // ============================================================================
@@ -30,11 +30,11 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
     style: styles.headerSearchContainer,
     children: [/*#__PURE__*/_jsx(Search, {
       size: 14,
-      color: buoyColors.textSecondary
+      color: night.color.textSecondary
     }), /*#__PURE__*/_jsx(TextInput, {
       style: styles.headerSearchInput,
       placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: buoyColors.textMuted,
+      placeholderTextColor: night.color.placeholder,
       value: searchText,
       onChangeText: onSearchChange,
       onSubmitEditing: onSearchClose,
@@ -52,7 +52,7 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
       style: styles.headerSearchClear,
       children: /*#__PURE__*/_jsx(X, {
         size: 14,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     }) : null]
   });
@@ -81,14 +81,14 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
       style: styles.headerActionButton,
       children: /*#__PURE__*/_jsx(Search, {
         size: 14,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onFilterToggle,
       style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
       children: /*#__PURE__*/_jsx(Filter, {
         size: 14,
-        color: activeFilterCount > 0 ? buoyColors.primary : buoyColors.textMuted
+        color: activeFilterCount > 0 ? night.color.accent : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onOpenCopySettings,
@@ -97,7 +97,7 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
       accessibilityLabel: "Open copy settings",
       children: /*#__PURE__*/_jsx(Copy, {
         size: 14,
-        color: hasRenders ? buoyColors.textSecondary : buoyColors.textMuted
+        color: hasRenders ? night.color.textSecondary : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onToggleFreeze,
@@ -105,7 +105,7 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
       disabled: !isTracking,
       children: /*#__PURE__*/_jsx(Pause, {
         size: 14,
-        color: !isTracking ? buoyColors.textMuted : isFrozen ? buoyColors.primary : buoyColors.textMuted
+        color: !isTracking ? night.color.textTertiary : isFrozen ? night.color.accent : night.color.textTertiary
       })
     }), /*#__PURE__*/_jsx(PowerToggleButton, {
       isEnabled: isTracking,
@@ -117,7 +117,7 @@ const HeaderActionsInner = /*#__PURE__*/memo(function HeaderActions({
       disabled: !hasRenders,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 14,
-        color: hasRenders ? buoyColors.textMuted : buoyColors.textMuted
+        color: hasRenders ? night.color.textTertiary : night.color.textTertiary
       })
     })]
   });
@@ -262,16 +262,16 @@ const styles = StyleSheet.create({
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -284,9 +284,9 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -294,11 +294,11 @@ const styles = StyleSheet.create({
     opacity: 0.55
   },
   activeFilterButton: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   freezeButton: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   }
 });

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

@@ -13,7 +13,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { buoyColors, night } from "@buoy-gg/shared-ui";
 
 // Badge configuration for each cause type
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -291,19 +291,19 @@ export function EnhancedCauseDisplay({
       style: styles.enhancedSection,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.enhancedSectionTitle, {
-          color: buoyColors.textMuted
+          color: night.color.textTertiary
         }],
         children: "Reference Changes (optimization opportunity):"
       }), refOnlyChanges.map((key, index) => /*#__PURE__*/_jsxs(View, {
         style: styles.enhancedChangeRow,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.enhancedChangeIcon, {
-            color: buoyColors.textMuted
+            color: night.color.textTertiary
           }],
           children: "\u25CB"
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.enhancedChangeText, {
-            color: buoyColors.textMuted
+            color: night.color.textTertiary
           }],
           children: key
         })]
@@ -338,7 +338,7 @@ const styles = StyleSheet.create({
   componentBadge: {
     borderStyle: "dashed",
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   badgeText: {
     fontSize: 10,
@@ -353,14 +353,14 @@ const styles = StyleSheet.create({
   },
   arrowText: {
     fontSize: 10,
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   arrowTextCompact: {
     fontSize: 9
   },
   keysText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -380,22 +380,22 @@ const styles = StyleSheet.create({
   twoLevelLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     minWidth: 70
   },
   twoLevelName: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   twoLevelText: {
     fontSize: 11,
-    color: buoyColors.textSecondary
+    color: night.color.textSecondary
   },
   twoLevelKeys: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace"
   },
   // Enhanced cause display styles (Phase 5)
@@ -411,11 +411,12 @@ const styles = StyleSheet.create({
   enhancedComponentName: {
     fontSize: 14,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   enhancedNativeTag: {
-    backgroundColor: buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: night.color.bg,
     paddingVertical: 2,
     paddingHorizontal: 6,
     borderRadius: 4
@@ -423,7 +424,7 @@ const styles = StyleSheet.create({
   enhancedNativeTagText: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   enhancedFlowContainer: {
@@ -432,13 +433,14 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingVertical: 8,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.input,
+    // Inset display box — the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 6
   },
   enhancedFlowLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary
+    color: night.color.textSecondary
   },
   enhancedFlowBadge: {
     paddingVertical: 3,
@@ -451,7 +453,7 @@ const styles = StyleSheet.create({
   },
   enhancedFlowArrow: {
     fontSize: 14,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "300"
   },
   enhancedSection: {
@@ -460,7 +462,7 @@ const styles = StyleSheet.create({
   enhancedSectionTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     letterSpacing: 0.3
   },
   enhancedChangeRow: {
@@ -471,19 +473,19 @@ const styles = StyleSheet.create({
   },
   enhancedChangeIcon: {
     fontSize: 12,
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontFamily: "monospace",
     width: 16
   },
   enhancedChangeText: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
   enhancedNoChanges: {
     fontSize: 12,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     paddingLeft: 4
   }