@buoy-gg/images 7.0.26 → 7.0.27

package/src/components/ImagesListFooter.tsx

@@ -7,7 +7,7 @@
 
 import { useState, useSyncExternalStore } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { night, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { hardReloadAllMounted, subscribeActions } from "../capture/actions";
 import {
   clearAllOverrides,
@@ -127,19 +127,20 @@ const styles = StyleSheet.create({
   footer: {
     paddingHorizontal: 12,
     paddingTop: 8,
-    backgroundColor: macOSColors.background.base,
+    // Dark glass over the star field — matches EventStepperFooter's night bar.
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
     borderTopWidth: 1,
-    borderTopColor: macOSColors.border.default,
+    borderTopColor: night.color.border,
     gap: 8,
   },
   caption: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.8,
   },
   message: {
-    color: macOSColors.semantic.info,
+    color: night.color.info,
     fontSize: 10,
     fontFamily: "monospace",
   },
@@ -152,22 +153,22 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 8,
     borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.button,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
   },
   buttonText: {
     fontSize: 10,
     fontWeight: "600",
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     textTransform: "uppercase",
   },
   buttonTextAccent: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
   },
   netLabel: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.8,
@@ -179,15 +180,15 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 6,
     borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.button,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
   },
   netButtonActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info,
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
   },
   netTextActive: {
-    color: macOSColors.semantic.info,
+    color: night.color.accent,
   },
 });

package/src/components/ImagesModal.tsx

@@ -7,7 +7,7 @@
 
 import { useEffect, useState } from "react";
 import { FlatList, StyleSheet, Text, View } from "react-native";
-import { JsModal, macOSColors } from "@buoy-gg/shared-ui";
+import { JsModal, macOSColors, night } from "@buoy-gg/shared-ui";
 import type { ModalState } from "@buoy-gg/shared-ui";
 import { getCaptureStatus, installImageCapture } from "../capture/install";
 import { getGlobalModes } from "../capture/overrides";
@@ -218,7 +218,9 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: macOSColors.background.base,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent",
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -237,11 +239,11 @@ const styles = StyleSheet.create({
     margin: 10,
     padding: 10,
     borderRadius: 8,
-    backgroundColor: macOSColors.semantic.warningBackground,
+    backgroundColor: night.color.warningSoft,
     gap: 4,
   },
   noticeText: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontSize: 11,
   },
   empty: {
@@ -250,12 +252,12 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   emptyTitle: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600",
   },
   emptyText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11,
     textAlign: "center",
     lineHeight: 16,

package/src/components/InsightsBar.tsx

@@ -8,7 +8,7 @@
  */
 
 import { StyleSheet, Text, View } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { insightChips } from "../store/insights";
 import type { ImageInsights } from "../types";
 
@@ -34,16 +34,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: macOSColors.border.default,
+    borderBottomColor: night.color.border,
   },
   chip: {
-    backgroundColor: macOSColors.semantic.warningBackground,
+    backgroundColor: night.color.warningSoft,
     borderRadius: 999,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
   chipText: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontSize: 10,
     fontWeight: "600",
     lineHeight: 13,

package/src/format.ts

@@ -2,7 +2,7 @@
  * Formatting + verdict helpers shared by list rows and the detail view.
  */
 
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import { oversizeFactor } from "./store/imageEventStore";
 import type { ImageRecord } from "./types";
 
@@ -43,7 +43,7 @@ export interface SizeVerdict {
  */
 export function sizeVerdict(record: ImageRecord): SizeVerdict {
   const factor = oversizeFactor(record);
-  if (factor == null) return { label: "", color: macOSColors.text.muted, factor };
+  if (factor == null) return { label: "", color: night.color.textTertiary, factor };
   if (factor < 0.9) {
     return { label: `${factor.toFixed(1)}× upscaled`, color: macOSColors.semantic.info, factor };
   }
@@ -65,7 +65,7 @@ export function statusColor(record: ImageRecord): string {
     case "loading":
       return macOSColors.semantic.warning;
     default:
-      return macOSColors.text.muted;
+      return night.color.textTertiary;
   }
 }
 
@@ -81,5 +81,5 @@ export function cacheBadge(record: ImageRecord): { label: string; color: string
   if (verdict === "none" || record.progressSeen) {
     return { label: "NETWORK", color: macOSColors.semantic.error };
   }
-  return { label: "?", color: macOSColors.text.muted };
+  return { label: "?", color: night.color.textTertiary };
 }