@buoy-gg/highlight-updates 7.0.26 → 7.0.28

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

@@ -10,7 +10,7 @@
 
 import React, { useState, useCallback, useMemo } from "react";
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { Clock, GitBranch, Database, Lock, formatRelativeTime, SectionHeader, EventStepperFooter, buoyColors, useLimit } from "@buoy-gg/shared-ui";
+import { Clock, GitBranch, Database, Lock, formatRelativeTime, SectionHeader, EventStepperFooter, buoyColors, night, useLimit } from "@buoy-gg/shared-ui";
 import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { EnhancedCauseDisplay, CAUSE_CONFIG } from "./RenderCauseBadge";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -86,7 +86,7 @@ export function RenderHistoryViewer({
       style: styles.emptyContainer,
       children: [/*#__PURE__*/_jsx(Clock, {
         size: 32,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
         children: "No Render History"
@@ -105,7 +105,7 @@ export function RenderHistoryViewer({
         style: styles.lockedBanner,
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
-          color: buoyColors.warning
+          color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.lockedBannerText,
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
@@ -123,14 +123,14 @@ export function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/_jsx(Database, {
               size: 16,
-              color: activeView === "current" ? buoyColors.primary : buoyColors.textSecondary
+              color: activeView === "current" ? night.color.accent : night.color.textSecondary
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.viewToggleLabel, activeView === "current" && styles.viewToggleLabelActive],
               children: "CURRENT STATE"
             })]
           }), /*#__PURE__*/_jsxs(Text, {
             style: [styles.viewToggleDescription, activeView === "current" && {
-              color: buoyColors.text
+              color: night.color.text
             }],
             children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
           })]
@@ -140,7 +140,7 @@ export function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/_jsx(GitBranch, {
               size: 16,
-              color: buoyColors.textMuted
+              color: night.color.textTertiary
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.viewToggleLabel, styles.viewToggleLabelDisabled],
               children: "DIFF VIEW"
@@ -153,7 +153,7 @@ export function RenderHistoryViewer({
             })]
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.viewToggleDescription, {
-              color: buoyColors.textMuted
+              color: night.color.textTertiary
             }],
             children: "Compare renders side by side (coming soon)"
           })]
@@ -249,7 +249,7 @@ function CurrentStateView({
       children: [/*#__PURE__*/_jsxs(SectionHeader, {
         children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
           icon: Database,
-          color: buoyColors.primary,
+          color: night.color.accent,
           size: 12
         }), /*#__PURE__*/_jsx(SectionHeader.Title, {
           children: "CAPTURED PROPS"
@@ -490,7 +490,8 @@ export function RenderHistoryFooter({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   emptyContainer: {
     flex: 1,
@@ -502,11 +503,11 @@ const styles = StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: buoyColors.text
+    color: night.color.text
   },
   emptyText: {
     fontSize: 13,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -517,22 +518,22 @@ const styles = StyleSheet.create({
   },
   viewToggleCard: {
     flex: 1,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 10,
     gap: 4
   },
   viewToggleCardActive: {
-    borderColor: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "10"
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft
   },
   viewToggleCardDisabled: {
     opacity: 0.5
   },
   todoBadge: {
-    backgroundColor: buoyColors.textMuted + "30",
+    backgroundColor: night.color.fillSecondary,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,
@@ -541,7 +542,7 @@ const styles = StyleSheet.create({
   todoBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     letterSpacing: 0.3
   },
   viewToggleContent: {
@@ -552,18 +553,18 @@ const styles = StyleSheet.create({
   viewToggleLabel: {
     fontSize: 10,
     fontWeight: "700",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     letterSpacing: 0.5
   },
   viewToggleLabelActive: {
-    color: buoyColors.primary
+    color: night.color.accent
   },
   viewToggleLabelDisabled: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   viewToggleDescription: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 2
   },
   contentScroll: {
@@ -579,7 +580,7 @@ const styles = StyleSheet.create({
   },
   noEventText: {
     fontSize: 13,
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   currentStateContainer: {
     gap: 12
@@ -588,10 +589,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12
   },
   eventHeaderLeft: {
@@ -600,11 +601,11 @@ const styles = StyleSheet.create({
   eventTitle: {
     fontSize: 15,
     fontWeight: "700",
-    color: buoyColors.text
+    color: night.color.text
   },
   eventTime: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   eventBadge: {
@@ -626,10 +627,10 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   section: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   sectionContent: {
@@ -646,12 +647,12 @@ const styles = StyleSheet.create({
   changedListTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginBottom: 6
   },
   changedItem: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     marginBottom: 3,
     paddingLeft: 8
@@ -662,8 +663,9 @@ const styles = StyleSheet.create({
   propsJson: {
     fontSize: 11,
     fontFamily: "monospace",
-    color: buoyColors.text,
-    backgroundColor: buoyColors.input,
+    color: night.color.text,
+    // Inset code box — the night track color.
+    backgroundColor: night.color.bg,
     padding: 10,
     borderRadius: 6
   },
@@ -672,10 +674,10 @@ const styles = StyleSheet.create({
   },
   compareBar: {
     flexDirection: "row",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 10
   },
   compareSide: {
@@ -709,11 +711,11 @@ const styles = StyleSheet.create({
   compareIndex: {
     fontSize: 12,
     fontWeight: "600",
-    color: buoyColors.text
+    color: night.color.text
   },
   compareTime: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   compareDivider: {
@@ -723,19 +725,19 @@ const styles = StyleSheet.create({
   },
   compareArrow: {
     fontSize: 16,
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   diffSummary: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12
   },
   diffSummaryTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginBottom: 8
   },
   diffChanges: {
@@ -749,22 +751,22 @@ const styles = StyleSheet.create({
   diffChangeIcon: {
     fontSize: 12,
     fontWeight: "700",
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontFamily: "monospace"
   },
   diffChangeKey: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   diffNoChanges: {
     fontSize: 12,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic"
   },
   diffPlaceholder: {
     fontSize: 12,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     padding: 16
@@ -772,10 +774,10 @@ const styles = StyleSheet.create({
   // Diff mode tabs
   diffModeTabs: {
     flexDirection: "row",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 4,
     gap: 4
   },
@@ -787,7 +789,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   diffModeTabActive: {
-    backgroundColor: buoyColors.primary + "20"
+    backgroundColor: night.color.accentSoft
   },
   diffModeTabDisabled: {
     opacity: 0.4
@@ -795,14 +797,14 @@ const styles = StyleSheet.create({
   diffModeTabText: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     letterSpacing: 0.5
   },
   diffModeTabTextActive: {
-    color: buoyColors.primary
+    color: night.color.accent
   },
   diffModeTabTextDisabled: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   // Cause diff styles
   causeDiffContainer: {
@@ -817,27 +819,27 @@ const styles = StyleSheet.create({
   causeDiffLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     minWidth: 80
   },
   causeDiffValue: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     fontWeight: "500"
   },
   diffChangesTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginBottom: 6
   },
   // Tree diff container
   treeDiffContainer: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     overflow: "hidden",
     minHeight: 150
   },
@@ -849,11 +851,11 @@ const styles = StyleSheet.create({
   noDiffDataTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text
+    color: night.color.text
   },
   noDiffDataText: {
     fontSize: 12,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -865,19 +867,19 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: buoyColors.warning + "15",
+    backgroundColor: night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.warning + "30",
+    borderColor: night.color.warning + "30",
     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/RenderListItem.js

@@ -9,7 +9,7 @@
 
 import React, { useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronRight, buoyColors, useRelativeTime } from "@buoy-gg/shared-ui";
+import { ChevronRight, night, useRelativeTime } from "@buoy-gg/shared-ui";
 import { IdentifierBadge } from "./IdentifierBadge";
 import { RenderCauseBadge } from "./RenderCauseBadge";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -118,7 +118,7 @@ function RenderListItemInner({
       })]
     }), /*#__PURE__*/_jsx(ChevronRight, {
       size: 16,
-      color: buoyColors.textMuted
+      color: night.color.textTertiary
     })]
   });
 }
@@ -140,10 +140,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     marginHorizontal: 12,
     marginBottom: 6,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   colorIndicator: {
     width: 4,
@@ -170,17 +170,17 @@ const styles = StyleSheet.create({
   viewType: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text
+    color: night.color.text
   },
   nativeType: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 1
   },
   accessibilityLabel: {
     fontSize: 10,
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontStyle: "italic",
     marginTop: 1
   },
@@ -207,7 +207,7 @@ const styles = StyleSheet.create({
   },
   timing: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "500",
     flexShrink: 0
   }

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

@@ -9,7 +9,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
-import { DynamicFilterView, macOSColors, FileText, FileCode, Zap, Settings, Eye, ChevronDown, ChevronUp, AlertTriangle, Layers, ToolbarCopyButton } from "@buoy-gg/shared-ui";
+import { DynamicFilterView, macOSColors, night, FileText, FileCode, Zap, Settings, Eye, ChevronDown, ChevronUp, AlertTriangle, Layers, ToolbarCopyButton } from "@buoy-gg/shared-ui";
 import { DEFAULT_COPY_SETTINGS, COPY_PRESETS, PRESET_METADATA, detectActivePreset } from "../types/copySettings";
 import { generateExport, estimateExportSize, getExportSummary } from "../utils/rendersExportFormatter";
 import { loadCopySettings, saveCopySettings } from "../utils/copySettingsStorage";
@@ -192,7 +192,7 @@ export function RendersCopySettingsView({
       totalRenders
     } = getExportSummary(previewRenders);
     if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? macOSColors.semantic.error : sizeWarningLevel === "warning" ? macOSColors.semantic.warning : macOSColors.text.secondary;
+      const warningColor = sizeWarningLevel === "danger" ? night.color.danger : sizeWarningLevel === "warning" ? night.color.warning : night.color.textSecondary;
       return /*#__PURE__*/_jsxs(View, {
         style: styles.collapsedPreview,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
@@ -202,7 +202,7 @@ export function RendersCopySettingsView({
             style: styles.expandButtonContent,
             children: [/*#__PURE__*/_jsx(Eye, {
               size: 16,
-              color: macOSColors.semantic.info
+              color: night.color.info
             }), /*#__PURE__*/_jsxs(View, {
               style: styles.expandButtonTextContainer,
               children: [/*#__PURE__*/_jsx(Text, {
@@ -214,7 +214,7 @@ export function RendersCopySettingsView({
               })]
             }), /*#__PURE__*/_jsx(ChevronDown, {
               size: 16,
-              color: macOSColors.text.muted
+              color: night.color.textTertiary
             })]
           })
         }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs(View, {
@@ -241,7 +241,7 @@ export function RendersCopySettingsView({
           children: "Hide Preview"
         }), /*#__PURE__*/_jsx(ChevronUp, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         })]
       }), /*#__PURE__*/_jsx(ScrollView, {
         style: styles.previewScroll,
@@ -309,7 +309,7 @@ export function RendersCopySettingsView({
         id: "preset::custom",
         label: "Custom",
         icon: Settings,
-        color: macOSColors.text.secondary,
+        color: night.color.textSecondary,
         value: "custom",
         isActive: activePreset === null,
         description: "User-configured"
@@ -479,10 +479,10 @@ const styles = StyleSheet.create({
     gap: 8
   },
   expandButton: {
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 12
   },
   expandButtonContent: {
@@ -496,11 +496,11 @@ const styles = StyleSheet.create({
   expandButtonTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   expandButtonSubtitle: {
     fontSize: 11,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     marginTop: 2
   },
   collapseButton: {
@@ -510,15 +510,15 @@ const styles = StyleSheet.create({
     gap: 6,
     paddingVertical: 8,
     marginBottom: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   collapseButtonText: {
     fontSize: 12,
     fontWeight: "500",
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   sizeWarning: {
     flexDirection: "row",
@@ -526,14 +526,14 @@ const styles = StyleSheet.create({
     gap: 6,
     paddingHorizontal: 10,
     paddingVertical: 6,
-    backgroundColor: macOSColors.semantic.warningBackground,
+    backgroundColor: night.color.warningSoft,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.warning + "30"
+    borderColor: night.color.warning + "30"
   },
   sizeWarningDanger: {
-    backgroundColor: macOSColors.semantic.errorBackground,
-    borderColor: macOSColors.semantic.error + "30"
+    backgroundColor: night.color.dangerSoft,
+    borderColor: night.color.danger + "30"
   },
   sizeWarningText: {
     fontSize: 11,
@@ -546,13 +546,13 @@ const styles = StyleSheet.create({
   previewText: {
     fontFamily: "monospace",
     fontSize: 11,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     lineHeight: 18
   },
   statusLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     marginRight: 8
   }
 });

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

@@ -12,7 +12,7 @@
 
 import React, { useState, useEffect, memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Activity, buoyColors } from "@buoy-gg/shared-ui";
+import { Activity, night } from "@buoy-gg/shared-ui";
 import { RenderTracker } from "../utils/RenderTracker";
 
 /**
@@ -36,10 +36,10 @@ function StatsDisplayInner() {
     style: styles.headerChip,
     children: [/*#__PURE__*/_jsx(Activity, {
       size: 12,
-      color: buoyColors.primary
+      color: night.color.accent
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.headerChipValue, {
-        color: buoyColors.primary
+        color: night.color.accent
       }],
       children: stats.totalComponents
     })]
@@ -51,12 +51,12 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.buttonSurface,
     paddingHorizontal: 8,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   headerChipValue: {
     fontSize: 12,