@buoy-gg/highlight-updates 7.0.26 → 7.0.27

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

@@ -93,7 +93,7 @@ function RenderHistoryViewer({
       style: styles.emptyContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
         size: 32,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
         children: "No Render History"
@@ -112,7 +112,7 @@ function RenderHistoryViewer({
         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: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
@@ -130,14 +130,14 @@ function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
               size: 16,
-              color: activeView === "current" ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+              color: activeView === "current" ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.viewToggleLabel, activeView === "current" && styles.viewToggleLabelActive],
               children: "CURRENT STATE"
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: [styles.viewToggleDescription, activeView === "current" && {
-              color: _sharedUi.buoyColors.text
+              color: _sharedUi.night.color.text
             }],
             children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
           })]
@@ -147,7 +147,7 @@ function RenderHistoryViewer({
             style: styles.viewToggleContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
               size: 16,
-              color: _sharedUi.buoyColors.textMuted
+              color: _sharedUi.night.color.textTertiary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.viewToggleLabel, styles.viewToggleLabelDisabled],
               children: "DIFF VIEW"
@@ -160,7 +160,7 @@ function RenderHistoryViewer({
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.viewToggleDescription, {
-              color: _sharedUi.buoyColors.textMuted
+              color: _sharedUi.night.color.textTertiary
             }],
             children: "Compare renders side by side (coming soon)"
           })]
@@ -256,7 +256,7 @@ function CurrentStateView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Database,
-          color: _sharedUi.buoyColors.primary,
+          color: _sharedUi.night.color.accent,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "CAPTURED PROPS"
@@ -497,7 +497,8 @@ function RenderHistoryFooter({
 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"
   },
   emptyContainer: {
     flex: 1,
@@ -509,11 +510,11 @@ const styles = _reactNative.StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   emptyText: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -524,22 +525,22 @@ const styles = _reactNative.StyleSheet.create({
   },
   viewToggleCard: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 10,
     gap: 4
   },
   viewToggleCardActive: {
-    borderColor: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "10"
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   viewToggleCardDisabled: {
     opacity: 0.5
   },
   todoBadge: {
-    backgroundColor: _sharedUi.buoyColors.textMuted + "30",
+    backgroundColor: _sharedUi.night.color.fillSecondary,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,
@@ -548,7 +549,7 @@ const styles = _reactNative.StyleSheet.create({
   todoBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 0.3
   },
   viewToggleContent: {
@@ -559,18 +560,18 @@ const styles = _reactNative.StyleSheet.create({
   viewToggleLabel: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.5
   },
   viewToggleLabelActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   viewToggleLabelDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   viewToggleDescription: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 2
   },
   contentScroll: {
@@ -586,7 +587,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   noEventText: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   currentStateContainer: {
     gap: 12
@@ -595,10 +596,10 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   eventHeaderLeft: {
@@ -607,11 +608,11 @@ const styles = _reactNative.StyleSheet.create({
   eventTitle: {
     fontSize: 15,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   eventTime: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   eventBadge: {
@@ -633,10 +634,10 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   section: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   sectionContent: {
@@ -653,12 +654,12 @@ const styles = _reactNative.StyleSheet.create({
   changedListTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 6
   },
   changedItem: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     marginBottom: 3,
     paddingLeft: 8
@@ -669,8 +670,9 @@ const styles = _reactNative.StyleSheet.create({
   propsJson: {
     fontSize: 11,
     fontFamily: "monospace",
-    color: _sharedUi.buoyColors.text,
-    backgroundColor: _sharedUi.buoyColors.input,
+    color: _sharedUi.night.color.text,
+    // Inset code box — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     padding: 10,
     borderRadius: 6
   },
@@ -679,10 +681,10 @@ const styles = _reactNative.StyleSheet.create({
   },
   compareBar: {
     flexDirection: "row",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 10
   },
   compareSide: {
@@ -716,11 +718,11 @@ const styles = _reactNative.StyleSheet.create({
   compareIndex: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   compareTime: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   compareDivider: {
@@ -730,19 +732,19 @@ const styles = _reactNative.StyleSheet.create({
   },
   compareArrow: {
     fontSize: 16,
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   diffSummary: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   diffSummaryTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 8
   },
   diffChanges: {
@@ -756,22 +758,22 @@ const styles = _reactNative.StyleSheet.create({
   diffChangeIcon: {
     fontSize: 12,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontFamily: "monospace"
   },
   diffChangeKey: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   diffNoChanges: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic"
   },
   diffPlaceholder: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     padding: 16
@@ -779,10 +781,10 @@ const styles = _reactNative.StyleSheet.create({
   // Diff mode tabs
   diffModeTabs: {
     flexDirection: "row",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 4,
     gap: 4
   },
@@ -794,7 +796,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   diffModeTabActive: {
-    backgroundColor: _sharedUi.buoyColors.primary + "20"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   diffModeTabDisabled: {
     opacity: 0.4
@@ -802,14 +804,14 @@ const styles = _reactNative.StyleSheet.create({
   diffModeTabText: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.5
   },
   diffModeTabTextActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   diffModeTabTextDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   // Cause diff styles
   causeDiffContainer: {
@@ -824,27 +826,27 @@ const styles = _reactNative.StyleSheet.create({
   causeDiffLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     minWidth: 80
   },
   causeDiffValue: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     fontWeight: "500"
   },
   diffChangesTitle: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     marginBottom: 6
   },
   // Tree diff container
   treeDiffContainer: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden",
     minHeight: 150
   },
@@ -856,11 +858,11 @@ const styles = _reactNative.StyleSheet.create({
   noDiffDataTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   noDiffDataText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textAlign: "center",
     lineHeight: 18
   },
@@ -872,19 +874,19 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "30",
+    borderColor: _sharedUi.night.color.warning + "30",
     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/RenderListItem.js

@@ -123,7 +123,7 @@ function RenderListItemInner({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
       size: 16,
-      color: _sharedUi.buoyColors.textMuted
+      color: _sharedUi.night.color.textTertiary
     })]
   });
 }
@@ -145,10 +145,10 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     marginHorizontal: 12,
     marginBottom: 6,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   colorIndicator: {
     width: 4,
@@ -175,17 +175,17 @@ const styles = _reactNative.StyleSheet.create({
   viewType: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   nativeType: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 1
   },
   accessibilityLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontStyle: "italic",
     marginTop: 1
   },
@@ -212,7 +212,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   timing: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500",
     flexShrink: 0
   }

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

@@ -196,7 +196,7 @@ function RendersCopySettingsView({
       totalRenders
     } = (0, _rendersExportFormatter.getExportSummary)(previewRenders);
     if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.macOSColors.semantic.error : sizeWarningLevel === "warning" ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.secondary;
+      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.night.color.danger : sizeWarningLevel === "warning" ? _sharedUi.night.color.warning : _sharedUi.night.color.textSecondary;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.collapsedPreview,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -206,7 +206,7 @@ function RendersCopySettingsView({
             style: styles.expandButtonContent,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
               size: 16,
-              color: _sharedUi.macOSColors.semantic.info
+              color: _sharedUi.night.color.info
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.expandButtonTextContainer,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -218,7 +218,7 @@ function RendersCopySettingsView({
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
               size: 16,
-              color: _sharedUi.macOSColors.text.muted
+              color: _sharedUi.night.color.textTertiary
             })]
           })
         }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -245,7 +245,7 @@ function RendersCopySettingsView({
           children: "Hide Preview"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         style: styles.previewScroll,
@@ -313,7 +313,7 @@ function RendersCopySettingsView({
         id: "preset::custom",
         label: "Custom",
         icon: _sharedUi.Settings,
-        color: _sharedUi.macOSColors.text.secondary,
+        color: _sharedUi.night.color.textSecondary,
         value: "custom",
         isActive: activePreset === null,
         description: "User-configured"
@@ -483,10 +483,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   expandButton: {
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   expandButtonContent: {
@@ -500,11 +500,11 @@ const styles = _reactNative.StyleSheet.create({
   expandButtonTitle: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   expandButtonSubtitle: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     marginTop: 2
   },
   collapseButton: {
@@ -514,15 +514,15 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6,
     paddingVertical: 8,
     marginBottom: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   collapseButtonText: {
     fontSize: 12,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   sizeWarning: {
     flexDirection: "row",
@@ -530,14 +530,14 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6,
     paddingHorizontal: 10,
     paddingVertical: 6,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "30"
+    borderColor: _sharedUi.night.color.warning + "30"
   },
   sizeWarningDanger: {
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
-    borderColor: _sharedUi.macOSColors.semantic.error + "30"
+    backgroundColor: _sharedUi.night.color.dangerSoft,
+    borderColor: _sharedUi.night.color.danger + "30"
   },
   sizeWarningText: {
     fontSize: 11,
@@ -550,13 +550,13 @@ const styles = _reactNative.StyleSheet.create({
   previewText: {
     fontFamily: "monospace",
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     lineHeight: 18
   },
   statusLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     marginRight: 8
   }
 });

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

@@ -39,10 +39,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
     style: styles.headerChip,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
       size: 12,
-      color: _sharedUi.buoyColors.primary
+      color: _sharedUi.night.color.accent
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.headerChipValue, {
-        color: _sharedUi.buoyColors.primary
+        color: _sharedUi.night.color.accent
       }],
       children: stats.totalComponents
     })]
@@ -54,12 +54,12 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     paddingHorizontal: 8,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   headerChipValue: {
     fontSize: 12,

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import HighlightUpdatesController from "./utils/HighlightUpdatesController";
 import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
 import { RenderTracker } from "./utils/RenderTracker";
@@ -252,20 +252,20 @@ const styles = StyleSheet.create({
     position: "absolute",
     borderWidth: 2,
     borderStyle: "dashed",
-    borderColor: buoyColors.primary,
+    borderColor: night.color.accent,
     backgroundColor: "transparent"
   },
   spotlightLabel: {
     position: "absolute",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: buoyColors.primary,
+    borderColor: night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4
   },
   spotlightLabelText: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontSize: 11,
     fontWeight: "600",
     fontFamily: "monospace"