@buoy-gg/js-top 7.0.25 → 7.0.27

package/src/js-top/components/JsTopHudOverlay.tsx

@@ -7,7 +7,7 @@
 
 import { useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import type { JsTopSnapshot } from "../types";
 import { JsTopController } from "../engine/JsTopController";
 
@@ -57,9 +57,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    backgroundColor: "rgba(10,10,12,0.85)",
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     borderRadius: 6,
     paddingHorizontal: 8,
     paddingVertical: 4,
@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
     fontVariant: ["tabular-nums"],
   },
   label: {
-    color: macOSColors.text.secondary ?? macOSColors.text.primary,
+    color: night.color.textSecondary,
     fontSize: 10,
     flexShrink: 1,
   },

package/src/js-top/components/JsTopModal.tsx

@@ -22,6 +22,7 @@ import {
   Activity,
   JsModal,
   macOSColors,
+  night,
   ModalHeader,
   Pause,
   Play,
@@ -222,9 +223,9 @@ export function JsTopModal({
           accessibilityLabel={paused ? "Resume sampling" : "Pause sampling"}
         >
           {paused ? (
-            <Play size={14} color={macOSColors.semantic.info} />
+            <Play size={14} color={night.color.accent} />
           ) : (
-            <Pause size={14} color={macOSColors.text.secondary} />
+            <Pause size={14} color={night.color.textSecondary} />
           )}
         </TouchableOpacity>
         <TouchableOpacity
@@ -235,7 +236,9 @@ export function JsTopModal({
         >
           <Trash2
             size={14}
-            color={hasData ? macOSColors.text.muted : macOSColors.text.muted}
+            color={
+              hasData ? night.color.textTertiary : night.color.textTertiary
+            }
           />
         </TouchableOpacity>
       </ModalHeader.Actions>
@@ -324,7 +327,7 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   title: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "500",
   },
@@ -343,15 +346,15 @@ const styles = StyleSheet.create({
     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",
   },
   actionBtnActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "40",
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
   },
   actionBtnDisabled: {
     opacity: 0.55,
@@ -359,7 +362,9 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: macOSColors.background.base,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints
+    // opaque base beneath it). The embedded path keeps `embeddedRoot`'s base fill.
+    backgroundColor: "transparent",
   },
   diagnosis: {
     flexDirection: "row",
@@ -369,7 +374,7 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingHorizontal: 10,
     paddingVertical: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderLeftWidth: 3,
   },
@@ -379,7 +384,7 @@ const styles = StyleSheet.create({
   },
   diagnosisText: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 12,
     lineHeight: 16,
   },
@@ -389,19 +394,19 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   sparklineCaption: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 8,
     fontWeight: "700",
     letterSpacing: 0.5,
   },
   tierBanner: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     paddingHorizontal: 10,
     paddingBottom: 6,
   },
   waiting: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     paddingVertical: 32,

package/src/js-top/components/TaskDetailView.tsx

@@ -11,7 +11,7 @@
 
 import { memo } from "react";
 import { ScrollView, StyleSheet, Text, View } from "react-native";
-import { macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { macOSColors, night, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import type { JsTopOriginDetail, TaskApi } from "../types";
 import { badgeFor, displayName } from "./TaskTable";
 
@@ -211,7 +211,8 @@ export const TaskDetailView = memo(function TaskDetailView({
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: macOSColors.background.base,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent",
     paddingHorizontal: 12,
   },
   identityRow: {
@@ -233,19 +234,19 @@ const styles = StyleSheet.create({
   },
   name: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 15,
     fontWeight: "600",
   },
   explainer: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 11,
     lineHeight: 15,
     marginTop: 6,
     marginBottom: 4,
   },
   sectionTitle: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5,
@@ -257,10 +258,10 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
     height: 48,
     gap: 2,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 6,
     paddingTop: 2,
   },
@@ -281,7 +282,7 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   chartLegendText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontVariant: ["tabular-nums"],
   },
@@ -294,56 +295,56 @@ const styles = StyleSheet.create({
     width: "23%",
     minWidth: 76,
     flexGrow: 1,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     borderRadius: 6,
     paddingHorizontal: 8,
     paddingVertical: 6,
   },
   statLabel: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 8,
     fontWeight: "700",
     letterSpacing: 0.4,
     marginBottom: 3,
   },
   statValue: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600",
     fontVariant: ["tabular-nums"],
   },
   siteCard: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     borderRadius: 6,
     padding: 10,
     gap: 3,
   },
   siteCaller: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600",
   },
   siteFile: {
-    color: macOSColors.semantic.info,
+    color: night.color.info,
     fontSize: 11,
   },
   siteFrame: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontVariant: ["tabular-nums"],
   },
   siteNote: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     opacity: 0.8,
     marginTop: 4,
   },
   sitePending: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 11,
   },
 });

package/src/js-top/components/TaskTable.tsx

@@ -22,7 +22,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import type { JsTopRow, TaskApi } from "../types";
 
 export type SortKey = "windowMs" | "calls" | "avgMs" | "maxMs" | "totalMs";
@@ -234,11 +234,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 6,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default,
-    backgroundColor: macOSColors.background.card,
+    borderBottomColor: night.color.border,
+    backgroundColor: night.color.surface,
   },
   sortLabel: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontWeight: "700",
     letterSpacing: 0.5,
@@ -246,25 +246,25 @@ const styles = StyleSheet.create({
   },
   sortChip: {
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     borderRadius: 4,
     paddingHorizontal: 7,
     paddingVertical: 3,
   },
   sortChipOn: {
-    borderColor: macOSColors.semantic.info,
-    backgroundColor: `${macOSColors.semantic.info}1A`,
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft,
   },
   sortChipText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontWeight: "600",
     fontVariant: ["tabular-nums"],
   },
-  sortChipTextOn: { color: macOSColors.semantic.info },
+  sortChipTextOn: { color: night.color.accent },
   body: { flex: 1 },
   empty: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     paddingVertical: 24,
@@ -276,7 +276,7 @@ const rowStyles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: macOSColors.border.default,
+    borderBottomColor: night.color.border,
     gap: 5,
   },
   topLine: {
@@ -286,7 +286,7 @@ const rowStyles = StyleSheet.create({
   },
   rank: {
     width: 16,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontVariant: ["tabular-nums"],
   },
@@ -303,7 +303,7 @@ const rowStyles = StyleSheet.create({
   },
   name: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "500",
   },
@@ -317,26 +317,26 @@ const rowStyles = StyleSheet.create({
     color: macOSColors.semantic.error,
   },
   windowMs: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "700",
     fontVariant: ["tabular-nums"],
   },
   unit: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontWeight: "400",
   },
   pct: {
     width: 38,
     textAlign: "right",
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 12,
     fontWeight: "600",
     fontVariant: ["tabular-nums"],
   },
   pctMuted: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
   },
   subLine: {
     flexDirection: "row",
@@ -348,7 +348,7 @@ const rowStyles = StyleSheet.create({
     width: 72,
     height: 4,
     borderRadius: 2,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.fillSecondary,
     overflow: "hidden",
   },
   barFill: {
@@ -358,7 +358,7 @@ const rowStyles = StyleSheet.create({
   },
   stats: {
     flex: 1,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     fontVariant: ["tabular-nums"],
   },