@buoy-gg/image-overlay 7.0.25 → 7.0.27

package/lib/commonjs/imageOverlay/components/ImageOverlayModal.js

@@ -200,7 +200,7 @@ function ImageOverlayModal({
           activeOpacity: 0.7,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           })
         })]
       })]
@@ -221,11 +221,11 @@ function ImageOverlayModal({
           activeOpacity: 0.7,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.modeIconCircle, {
-              backgroundColor: _sharedUi.macOSColors.semantic.success + "18"
+              backgroundColor: _sharedUi.night.color.accentSoft
             }],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SquareDashed, {
               size: 24,
-              color: _sharedUi.macOSColors.semantic.success
+              color: _sharedUi.night.color.accent
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: styles.modePanelTitle,
@@ -240,11 +240,11 @@ function ImageOverlayModal({
           activeOpacity: 0.7,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: [styles.modeIconCircle, {
-              backgroundColor: _sharedUi.buoyColors.primary + "18"
+              backgroundColor: _sharedUi.night.color.accentSoft
             }],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Image, {
               size: 24,
-              color: _sharedUi.buoyColors.primary
+              color: _sharedUi.night.color.accent
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: styles.modePanelTitle,
@@ -319,7 +319,7 @@ function ImageOverlayModal({
             value: imageUrl,
             onChangeText: setImageUrl,
             placeholder: "or enter URL...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.placeholder,
             autoCapitalize: "none",
             autoCorrect: false
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -344,8 +344,8 @@ function ImageOverlayModal({
             value: state.showOutline,
             onValueChange: v => _ImageOverlayController.ImageOverlayController.setShowOutline(v),
             trackColor: {
-              false: _sharedUi.macOSColors.background.hover,
-              true: _sharedUi.buoyColors.primary
+              false: _sharedUi.night.color.surfaceElevated,
+              true: _sharedUi.night.color.accent
             }
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -357,8 +357,8 @@ function ImageOverlayModal({
             value: autoTrack,
             onValueChange: setAutoTrack,
             trackColor: {
-              false: _sharedUi.macOSColors.background.hover,
-              true: _sharedUi.macOSColors.semantic.success
+              false: _sharedUi.night.color.surfaceElevated,
+              true: _sharedUi.night.color.accent
             }
           })]
         }), state.imageUri && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -456,7 +456,7 @@ function ImageOverlayModal({
             value: imageUrl,
             onChangeText: setImageUrl,
             placeholder: "or enter URL...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.placeholder,
             autoCapitalize: "none",
             autoCorrect: false
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -524,8 +524,8 @@ function ImageOverlayModal({
               value: state.locked,
               onValueChange: v => _ImageOverlayController.ImageOverlayController.setLocked(v),
               trackColor: {
-                false: _sharedUi.macOSColors.background.hover,
-                true: "#f59e0b"
+                false: _sharedUi.night.color.surfaceElevated,
+                true: _sharedUi.night.color.warning
               }
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -641,30 +641,32 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _sharedUi.macOSColors.background.card
   },
   container: {
-    flex: 1
+    flex: 1,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   headerTextButton: {
     height: 32,
     paddingHorizontal: 12,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   headerTextButtonLabel: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   headerActionButton: {
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -679,7 +681,7 @@ const styles = _reactNative.StyleSheet.create({
   homeSubtitle: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     textAlign: "center"
@@ -693,10 +695,10 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     paddingVertical: 20,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     gap: 8
   },
   modeIconCircle: {
@@ -710,13 +712,13 @@ const styles = _reactNative.StyleSheet.create({
   modePanelTitle: {
     fontSize: 13,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     textAlign: "center",
     lineHeight: 17
   },
   modePanelDesc: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textAlign: "center",
     lineHeight: 15
   },
@@ -729,10 +731,10 @@ const styles = _reactNative.StyleSheet.create({
   },
   infoCard: {
     marginHorizontal: 12,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 10,
     gap: 4
   },
@@ -744,19 +746,19 @@ const styles = _reactNative.StyleSheet.create({
   infoLabel: {
     fontSize: 11,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.3
   },
   infoValue: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   infoValueMono: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   inputSection: {
@@ -766,22 +768,22 @@ const styles = _reactNative.StyleSheet.create({
   sectionLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   pasteButton: {
     paddingVertical: 10,
     borderRadius: 8,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40",
+    borderColor: _sharedUi.night.color.accentBorderStrong,
     alignItems: "center"
   },
   pasteButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   urlRow: {
     flexDirection: "row",
@@ -791,18 +793,18 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     height: 36,
     borderRadius: 10,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     fontSize: 13,
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   loadButton: {
     height: 36,
     paddingHorizontal: 14,
     borderRadius: 8,
-    backgroundColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.night.color.accent,
     justifyContent: "center",
     alignItems: "center"
   },
@@ -812,7 +814,7 @@ const styles = _reactNative.StyleSheet.create({
   loadButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#fff"
+    color: _sharedUi.night.color.onAccent
   },
   toggleSection: {
     paddingHorizontal: 12,
@@ -822,26 +824,26 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 8
   },
   toggleLabel: {
     fontSize: 13,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   blendRow: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 6
   },
@@ -856,15 +858,15 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: "transparent"
   },
   blendButtonActive: {
-    backgroundColor: _sharedUi.buoyColors.primary + "20"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   blendButtonText: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   blendButtonTextActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   actions: {
     flexDirection: "row",
@@ -881,13 +883,13 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   actionButtonText: {
     fontSize: 12,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   }
 });

package/lib/commonjs/imageOverlay/components/OverlayControls.js

@@ -184,7 +184,7 @@ const styles = _reactNative.StyleSheet.create({
   label: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -197,16 +197,16 @@ const styles = _reactNative.StyleSheet.create({
     width: 28,
     height: 28,
     borderRadius: 6,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     justifyContent: "center",
     alignItems: "center"
   },
   stepperButtonText: {
     fontSize: 16,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     lineHeight: 18
   },
   sliderHitArea: {
@@ -220,9 +220,9 @@ const styles = _reactNative.StyleSheet.create({
     height: 28,
     justifyContent: "center",
     borderRadius: 6,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.bg,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   sliderFill: {
@@ -230,7 +230,7 @@ const styles = _reactNative.StyleSheet.create({
     left: 0,
     top: 0,
     bottom: 0,
-    backgroundColor: _sharedUi.buoyColors.primary + "30",
+    backgroundColor: _sharedUi.night.color.accentFill,
     borderRadius: 5
   },
   sliderThumb: {
@@ -240,12 +240,12 @@ const styles = _reactNative.StyleSheet.create({
     bottom: 4,
     marginLeft: -2,
     borderRadius: 2,
-    backgroundColor: _sharedUi.buoyColors.primary
+    backgroundColor: _sharedUi.night.color.accent
   },
   valueText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     width: 45,
     textAlign: "right",
     fontFamily: "monospace"

package/lib/commonjs/imageOverlay/components/TargetList.js

@@ -39,7 +39,7 @@ function TargetRow({
             style: styles.testIdBadge,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Hash, {
               size: 8,
-              color: _sharedUi.buoyColors.success
+              color: _sharedUi.night.color.accent
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.testIdBadgeText,
               children: "testID"
@@ -57,7 +57,7 @@ function TargetRow({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
       size: 16,
-      color: _sharedUi.buoyColors.textMuted
+      color: _sharedUi.night.color.textTertiary
     })]
   });
 }
@@ -101,17 +101,17 @@ 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,
     height: 36,
     borderRadius: 2,
     marginRight: 10,
-    backgroundColor: _sharedUi.buoyColors.primary
+    backgroundColor: _sharedUi.night.color.accent
   },
   content: {
     flex: 1,
@@ -125,7 +125,7 @@ const styles = _reactNative.StyleSheet.create({
   label: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     flex: 1
   },
   bottomRow: {
@@ -142,17 +142,17 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 2,
     paddingHorizontal: 5,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.success + "20",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     gap: 3
   },
   testIdBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.success
+    color: _sharedUi.night.color.accent
   },
   testIdValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -168,13 +168,13 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 32
   },
   emptyTitle: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 6
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18,

package/lib/module/imageOverlay/components/ImageOverlayModal.js

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { View, Text, TextInput, TouchableOpacity, StyleSheet, Switch, Alert } from "react-native";
-import { JsModal, ModalHeader, macOSColors, buoyColors, Trash2, SquareDashed, Image, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, macOSColors, night, Trash2, SquareDashed, Image, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { ImageOverlayController } from "../utils/ImageOverlayController";
 import { scanForImageTargets } from "../utils/fiberScanner";
 import { TargetList } from "./TargetList";
@@ -195,7 +195,7 @@ export function ImageOverlayModal({
           activeOpacity: 0.7,
           children: /*#__PURE__*/_jsx(Trash2, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           })
         })]
       })]
@@ -216,11 +216,11 @@ export function ImageOverlayModal({
           activeOpacity: 0.7,
           children: [/*#__PURE__*/_jsx(View, {
             style: [styles.modeIconCircle, {
-              backgroundColor: macOSColors.semantic.success + "18"
+              backgroundColor: night.color.accentSoft
             }],
             children: /*#__PURE__*/_jsx(SquareDashed, {
               size: 24,
-              color: macOSColors.semantic.success
+              color: night.color.accent
             })
           }), /*#__PURE__*/_jsxs(Text, {
             style: styles.modePanelTitle,
@@ -235,11 +235,11 @@ export function ImageOverlayModal({
           activeOpacity: 0.7,
           children: [/*#__PURE__*/_jsx(View, {
             style: [styles.modeIconCircle, {
-              backgroundColor: buoyColors.primary + "18"
+              backgroundColor: night.color.accentSoft
             }],
             children: /*#__PURE__*/_jsx(Image, {
               size: 24,
-              color: buoyColors.primary
+              color: night.color.accent
             })
           }), /*#__PURE__*/_jsxs(Text, {
             style: styles.modePanelTitle,
@@ -314,7 +314,7 @@ export function ImageOverlayModal({
             value: imageUrl,
             onChangeText: setImageUrl,
             placeholder: "or enter URL...",
-            placeholderTextColor: macOSColors.text.muted,
+            placeholderTextColor: night.color.placeholder,
             autoCapitalize: "none",
             autoCorrect: false
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
@@ -339,8 +339,8 @@ export function ImageOverlayModal({
             value: state.showOutline,
             onValueChange: v => ImageOverlayController.setShowOutline(v),
             trackColor: {
-              false: macOSColors.background.hover,
-              true: buoyColors.primary
+              false: night.color.surfaceElevated,
+              true: night.color.accent
             }
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -352,8 +352,8 @@ export function ImageOverlayModal({
             value: autoTrack,
             onValueChange: setAutoTrack,
             trackColor: {
-              false: macOSColors.background.hover,
-              true: macOSColors.semantic.success
+              false: night.color.surfaceElevated,
+              true: night.color.accent
             }
           })]
         }), state.imageUri && /*#__PURE__*/_jsxs(_Fragment, {
@@ -451,7 +451,7 @@ export function ImageOverlayModal({
             value: imageUrl,
             onChangeText: setImageUrl,
             placeholder: "or enter URL...",
-            placeholderTextColor: macOSColors.text.muted,
+            placeholderTextColor: night.color.placeholder,
             autoCapitalize: "none",
             autoCorrect: false
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
@@ -519,8 +519,8 @@ export function ImageOverlayModal({
               value: state.locked,
               onValueChange: v => ImageOverlayController.setLocked(v),
               trackColor: {
-                false: macOSColors.background.hover,
-                true: "#f59e0b"
+                false: night.color.surfaceElevated,
+                true: night.color.warning
               }
             })]
           }), /*#__PURE__*/_jsxs(View, {
@@ -636,30 +636,32 @@ const styles = StyleSheet.create({
     backgroundColor: macOSColors.background.card
   },
   container: {
-    flex: 1
+    flex: 1,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   headerTextButton: {
     height: 32,
     paddingHorizontal: 12,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   headerTextButtonLabel: {
     fontSize: 12,
     fontWeight: "600",
-    color: buoyColors.primary
+    color: night.color.accent
   },
   headerActionButton: {
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -674,7 +676,7 @@ const styles = StyleSheet.create({
   homeSubtitle: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     textAlign: "center"
@@ -688,10 +690,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 20,
     paddingHorizontal: 12,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     gap: 8
   },
   modeIconCircle: {
@@ -705,13 +707,13 @@ const styles = StyleSheet.create({
   modePanelTitle: {
     fontSize: 13,
     fontWeight: "700",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     textAlign: "center",
     lineHeight: 17
   },
   modePanelDesc: {
     fontSize: 11,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textAlign: "center",
     lineHeight: 15
   },
@@ -724,10 +726,10 @@ const styles = StyleSheet.create({
   },
   infoCard: {
     marginHorizontal: 12,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 10,
     gap: 4
   },
@@ -739,19 +741,19 @@ const styles = StyleSheet.create({
   infoLabel: {
     fontSize: 11,
     fontWeight: "500",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.3
   },
   infoValue: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   infoValueMono: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   inputSection: {
@@ -761,22 +763,22 @@ const styles = StyleSheet.create({
   sectionLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   pasteButton: {
     paddingVertical: 10,
     borderRadius: 8,
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accentSoft,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "40",
+    borderColor: night.color.accentBorderStrong,
     alignItems: "center"
   },
   pasteButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.primary
+    color: night.color.accent
   },
   urlRow: {
     flexDirection: "row",
@@ -786,18 +788,18 @@ const styles = StyleSheet.create({
     flex: 1,
     height: 36,
     borderRadius: 10,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     fontSize: 13,
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   loadButton: {
     height: 36,
     paddingHorizontal: 14,
     borderRadius: 8,
-    backgroundColor: buoyColors.primary,
+    backgroundColor: night.color.accent,
     justifyContent: "center",
     alignItems: "center"
   },
@@ -807,7 +809,7 @@ const styles = StyleSheet.create({
   loadButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#fff"
+    color: night.color.onAccent
   },
   toggleSection: {
     paddingHorizontal: 12,
@@ -817,26 +819,26 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 8
   },
   toggleLabel: {
     fontSize: 13,
     fontWeight: "500",
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   blendRow: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 6
   },
@@ -851,15 +853,15 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent"
   },
   blendButtonActive: {
-    backgroundColor: buoyColors.primary + "20"
+    backgroundColor: night.color.accentSoft
   },
   blendButtonText: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   blendButtonTextActive: {
-    color: buoyColors.primary
+    color: night.color.accent
   },
   actions: {
     flexDirection: "row",
@@ -876,13 +878,13 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   actionButtonText: {
     fontSize: 12,
     fontWeight: "500",
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   }
 });

package/lib/module/imageOverlay/components/OverlayControls.js

@@ -7,7 +7,7 @@
 
 import { useRef, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, PanResponder } from "react-native";
-import { macOSColors, buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SliderStepper({
   label,
@@ -180,7 +180,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -193,16 +193,16 @@ const styles = StyleSheet.create({
     width: 28,
     height: 28,
     borderRadius: 6,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     justifyContent: "center",
     alignItems: "center"
   },
   stepperButtonText: {
     fontSize: 16,
     fontWeight: "700",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     lineHeight: 18
   },
   sliderHitArea: {
@@ -216,9 +216,9 @@ const styles = StyleSheet.create({
     height: 28,
     justifyContent: "center",
     borderRadius: 6,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.bg,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   sliderFill: {
@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     bottom: 0,
-    backgroundColor: buoyColors.primary + "30",
+    backgroundColor: night.color.accentFill,
     borderRadius: 5
   },
   sliderThumb: {
@@ -236,12 +236,12 @@ const styles = StyleSheet.create({
     bottom: 4,
     marginLeft: -2,
     borderRadius: 2,
-    backgroundColor: buoyColors.primary
+    backgroundColor: night.color.accent
   },
   valueText: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     width: 45,
     textAlign: "right",
     fontFamily: "monospace"

package/lib/module/imageOverlay/components/TargetList.js

@@ -6,7 +6,7 @@
  */
 
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { ChevronRight, buoyColors, Hash } from "@buoy-gg/shared-ui";
+import { ChevronRight, night, Hash } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TargetRow({
   target,
@@ -35,7 +35,7 @@ function TargetRow({
             style: styles.testIdBadge,
             children: [/*#__PURE__*/_jsx(Hash, {
               size: 8,
-              color: buoyColors.success
+              color: night.color.accent
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.testIdBadgeText,
               children: "testID"
@@ -53,7 +53,7 @@ function TargetRow({
       })]
     }), /*#__PURE__*/_jsx(ChevronRight, {
       size: 16,
-      color: buoyColors.textMuted
+      color: night.color.textTertiary
     })]
   });
 }
@@ -97,17 +97,17 @@ 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,
     height: 36,
     borderRadius: 2,
     marginRight: 10,
-    backgroundColor: buoyColors.primary
+    backgroundColor: night.color.accent
   },
   content: {
     flex: 1,
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     flex: 1
   },
   bottomRow: {
@@ -138,17 +138,17 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
     paddingHorizontal: 5,
     borderRadius: 4,
-    backgroundColor: buoyColors.success + "20",
+    backgroundColor: night.color.accentSoft,
     gap: 3
   },
   testIdBadgeText: {
     fontSize: 9,
     fontWeight: "700",
-    color: buoyColors.success
+    color: night.color.accent
   },
   testIdValue: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -164,13 +164,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 32
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 6
   },
   emptyText: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/image-overlay",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "Pin your Figma mockup on top of the running app — pixel-perfect UI comparison without leaving the simulator. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.25"
+    "@buoy-gg/shared-ui": "^7.0.27"
   },
   "peerDependencies": {
     "react": "*",