@buoy-gg/image-overlay 7.0.26 → 7.0.28

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,
@@ -308,6 +308,8 @@ function ImageOverlayModal({
           style: styles.pasteButton,
           onPress: handlePasteImage,
           activeOpacity: 0.7,
+          accessibilityLabel: "Paste from clipboard",
+          accessibilityRole: "button",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.pasteButtonText,
             children: "Paste from Clipboard"
@@ -319,7 +321,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 +346,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 +359,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, {
@@ -445,6 +447,8 @@ function ImageOverlayModal({
           style: styles.pasteButton,
           onPress: handlePasteImage,
           activeOpacity: 0.7,
+          accessibilityLabel: "Paste from clipboard",
+          accessibilityRole: "button",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.pasteButtonText,
             children: "Paste from Clipboard"
@@ -456,7 +460,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 +528,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 +645,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 +685,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 +699,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 +716,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 +735,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 +750,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 +772,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 +797,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 +818,7 @@ const styles = _reactNative.StyleSheet.create({
   loadButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#fff"
+    color: _sharedUi.night.color.onAccent
   },
   toggleSection: {
     paddingHorizontal: 12,
@@ -822,26 +828,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 +862,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 +887,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,
@@ -303,6 +303,8 @@ export function ImageOverlayModal({
           style: styles.pasteButton,
           onPress: handlePasteImage,
           activeOpacity: 0.7,
+          accessibilityLabel: "Paste from clipboard",
+          accessibilityRole: "button",
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.pasteButtonText,
             children: "Paste from Clipboard"
@@ -314,7 +316,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 +341,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 +354,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, {
@@ -440,6 +442,8 @@ export function ImageOverlayModal({
           style: styles.pasteButton,
           onPress: handlePasteImage,
           activeOpacity: 0.7,
+          accessibilityLabel: "Paste from clipboard",
+          accessibilityRole: "button",
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.pasteButtonText,
             children: "Paste from Clipboard"
@@ -451,7 +455,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 +523,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 +640,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 +680,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 +694,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 +711,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 +730,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 +745,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 +767,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 +792,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 +813,7 @@ const styles = StyleSheet.create({
   loadButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#fff"
+    color: night.color.onAccent
   },
   toggleSection: {
     paddingHorizontal: 12,
@@ -817,26 +823,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 +857,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 +882,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/lib/typescript/imageOverlay/components/ImageOverlayModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlayModal.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/ImageOverlayModal.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,sBAAsB,EAAkC,MAAM,UAAU,CAAC;AAMvF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAKjE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,iBAAiB,EACjB,sBAAsB,EACtB,MAAc,EACd,WAAW,GACZ,EAAE,sBAAsB,+BA4iBxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,GAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAG3E"}
+{"version":3,"file":"ImageOverlayModal.d.ts","sourceRoot":"","sources":["../../../../src/imageOverlay/components/ImageOverlayModal.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,sBAAsB,EAAkC,MAAM,UAAU,CAAC;AAMvF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAKjE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,iBAAiB,EACjB,sBAAsB,EACtB,MAAc,EACd,WAAW,GACZ,EAAE,sBAAsB,+BAgjBxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,GAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAG3E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/image-overlay",
-  "version": "7.0.26",
+  "version": "7.0.28",
   "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.26"
+    "@buoy-gg/shared-ui": "^7.0.28"
   },
   "peerDependencies": {
     "react": "*",