@buoy-gg/network 7.0.26 → 7.0.27

package/lib/module/network/components/NetworkEventDetailView.js

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo, memo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -15,7 +15,7 @@ import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
  * secure-vs-insecure is a genuine signal, as does the status pill.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const NEUTRAL_ICON = macOSColors.semantic.success;
+const NEUTRAL_ICON = night.color.accent;
 
 /** Hoisted so the defaults don't mint a new Set/function per render. */
 const EMPTY_PATTERNS = new Set();
@@ -124,10 +124,10 @@ const CollapsibleSection = ({
         }) : null]
       }), isOpen ? /*#__PURE__*/_jsx(ChevronUp, {
         size: 16,
-        color: macOSColors.text.secondary
+        color: night.color.textSecondary
       }) : /*#__PURE__*/_jsx(ChevronDown, {
         size: 16,
-        color: macOSColors.text.secondary
+        color: night.color.textSecondary
       })]
     }), isOpen ? /*#__PURE__*/_jsx(View, {
       style: styles.collapsibleContent,
@@ -232,7 +232,7 @@ const UrlBreakdown = ({
         activeOpacity: 0.7,
         children: /*#__PURE__*/_jsx(Copy, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         })
       })]
     }), /*#__PURE__*/_jsx(View, {
@@ -259,10 +259,10 @@ const UrlBreakdown = ({
           children: Object.keys(urlParts.params).length
         }), showParams ? /*#__PURE__*/_jsx(ChevronUp, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         }) : /*#__PURE__*/_jsx(ChevronDown, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         })]
       }), showParams ? /*#__PURE__*/_jsx(DataViewer, {
         title: "",
@@ -437,7 +437,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.pendingBadge,
             children: [/*#__PURE__*/_jsx(Clock, {
               size: 10,
-              color: macOSColors.semantic.warning
+              color: night.color.warning
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.pendingBadgeText,
               children: "Pending"
@@ -446,7 +446,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.httpDuration,
             children: [/*#__PURE__*/_jsx(Clock, {
               size: 10,
-              color: macOSColors.text.muted
+              color: night.color.textTertiary
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.httpDurationText,
               children: formatDuration(event.duration)
@@ -455,7 +455,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.overrideBadge,
             children: [/*#__PURE__*/_jsx(FlaskConical, {
               size: 10,
-              color: macOSColors.semantic.warning
+              color: night.color.warning
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.overrideBadgeText,
               children: event.override.ruleName || "Overridden"
@@ -476,7 +476,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             activeOpacity: 0.7,
             children: /*#__PURE__*/_jsx(Copy, {
               size: 14,
-              color: macOSColors.text.secondary
+              color: night.color.textSecondary
             })
           })]
         }), /*#__PURE__*/_jsx(UrlBreakdown, {
@@ -491,7 +491,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.errorBox,
           children: [/*#__PURE__*/_jsx(AlertCircle, {
             size: 12,
-            color: macOSColors.semantic.error
+            color: night.color.danger
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.errorText,
             children: event.error
@@ -503,7 +503,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.timingRow,
           children: [/*#__PURE__*/_jsx(Clock, {
             size: 12,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.timingLabel,
             children: "Started:"
@@ -519,7 +519,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.sizeItem,
               children: [/*#__PURE__*/_jsx(Upload, {
                 size: 10,
-                color: macOSColors.semantic.info
+                color: night.color.info
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.sizeLabel,
                 children: "Sent:"
@@ -553,7 +553,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Headers",
         icon: /*#__PURE__*/_jsx(Upload, {
           size: 14,
-          color: macOSColors.semantic.info
+          color: night.color.info
         }),
         defaultOpen: false,
         count: Object.keys(requestHeaders).length,
@@ -597,7 +597,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
-          color: macOSColors.semantic.info
+          color: night.color.accent
         }),
         defaultOpen: false,
         children: /*#__PURE__*/_jsx(View, {
@@ -615,7 +615,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
-          color: macOSColors.semantic.info
+          color: night.color.accent
         }),
         defaultOpen: true,
         children: /*#__PURE__*/_jsx(Text, {
@@ -658,7 +658,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Filter Options",
         icon: /*#__PURE__*/_jsx(Filter, {
           size: 14,
-          color: macOSColors.semantic.warning
+          color: night.color.warning
         }),
         defaultOpen: false,
         children: /*#__PURE__*/_jsx(View, {
@@ -683,7 +683,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
                   style: styles.filterOptionLeft,
                   children: [/*#__PURE__*/_jsx(Globe, {
                     size: 16,
-                    color: isDomainIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
+                    color: isDomainIgnored ? night.color.warning : night.color.textTertiary
                   }), /*#__PURE__*/_jsxs(View, {
                     style: styles.filterOptionContent,
                     children: [/*#__PURE__*/_jsx(Text, {
@@ -708,7 +708,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
                   style: styles.filterOptionLeft,
                   children: [/*#__PURE__*/_jsx(Link, {
                     size: 16,
-                    color: isUrlIgnored ? macOSColors.semantic.warning : macOSColors.text.muted
+                    color: isUrlIgnored ? night.color.warning : night.color.textTertiary
                   }), /*#__PURE__*/_jsxs(View, {
                     style: styles.filterOptionContent,
                     children: [/*#__PURE__*/_jsx(Text, {
@@ -750,16 +750,17 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   // Request details section - always visible
   requestDetailsSection: {
     marginHorizontal: 12,
     marginTop: 12,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 12
   },
   httpHeader: {
@@ -770,13 +771,13 @@ const styles = StyleSheet.create({
     flexWrap: "nowrap"
   },
   httpMethodBadge: {
-    backgroundColor: macOSColors.semantic.infoBackground,
+    backgroundColor: night.color.infoSoft,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4
   },
   httpMethod: {
-    color: macOSColors.semantic.info,
+    color: night.color.info,
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.5
@@ -794,13 +795,13 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: macOSColors.semantic.warningBackground,
+    backgroundColor: night.color.warningSoft,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4
   },
   pendingBadgeText: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontSize: 11,
     fontWeight: "600"
   },
@@ -810,7 +811,7 @@ const styles = StyleSheet.create({
     gap: 4
   },
   httpDurationText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11
   },
   overrideBadge: {
@@ -820,10 +821,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: macOSColors.semantic.warningBackground
+    backgroundColor: night.color.warningSoft
   },
   overrideBadgeText: {
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontSize: 10,
     fontWeight: "700"
   },
@@ -834,7 +835,8 @@ const styles = StyleSheet.create({
   },
   // URL breakdown styles
   urlBreakdown: {
-    backgroundColor: macOSColors.background.input,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 4,
     padding: 8
   },
@@ -845,13 +847,13 @@ const styles = StyleSheet.create({
     marginBottom: 4
   },
   urlDomain: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 12,
     fontWeight: "600",
     flex: 1
   },
   urlProtocol: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10
   },
   copyButton: {
@@ -861,12 +863,12 @@ const styles = StyleSheet.create({
     paddingLeft: 18
   },
   urlPath: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11,
     fontFamily: "monospace"
   },
   urlQueryString: {
-    color: macOSColors.semantic.info,
+    color: night.color.info,
     fontSize: 11,
     fontFamily: "monospace"
   },
@@ -880,15 +882,15 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 10,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     marginBottom: 8
   },
   queryParamsToggleText: {
     flexGrow: 0,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.3
@@ -897,10 +899,10 @@ const styles = StyleSheet.create({
   timingSection: {
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 12
   },
   timingRow: {
@@ -912,16 +914,16 @@ const styles = StyleSheet.create({
     flexWrap: "wrap"
   },
   timingLabel: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11
   },
   timingValue: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 11,
     fontWeight: "600"
   },
   timingExact: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     marginLeft: 4
   },
@@ -939,11 +941,11 @@ const styles = StyleSheet.create({
     gap: 4
   },
   sizeLabel: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10
   },
   sizeValue: {
-    color: macOSColors.semantic.info,
+    color: night.color.info,
     fontSize: 10,
     fontFamily: "monospace",
     fontWeight: "600"
@@ -951,7 +953,7 @@ const styles = StyleSheet.create({
   /* ---- Timing phases ---- */
   phaseDivider: {
     height: 1,
-    backgroundColor: macOSColors.border.default,
+    backgroundColor: night.color.border,
     marginTop: 12,
     marginBottom: 12
   },
@@ -968,17 +970,17 @@ const styles = StyleSheet.create({
   },
   phaseLabel: {
     fontSize: 12,
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   phaseHint: {
     fontSize: 10,
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   },
   phaseTrack: {
     flex: 1,
     height: 7,
     borderRadius: 4,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     justifyContent: "center",
     overflow: "hidden"
   },
@@ -991,16 +993,16 @@ const styles = StyleSheet.create({
     textAlign: "right",
     fontSize: 12,
     fontFamily: "monospace",
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   // Collapsible section styles
   collapsibleSection: {
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   collapsibleHeader: {
@@ -1010,7 +1012,7 @@ const styles = StyleSheet.create({
     padding: 12,
     // `background.hover` is the SELECTION grey — heavy enough here that every
     // section header read as a toolbar. The design uses a near-white strip.
-    backgroundColor: macOSColors.background.hover
+    backgroundColor: night.color.surfaceElevated
   },
   collapsibleTitle: {
     flexDirection: "row",
@@ -1018,13 +1020,13 @@ const styles = StyleSheet.create({
     gap: 8
   },
   collapsibleTitleText: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600"
   },
   /** The "how much is in here" number beside a section title. */
   collapsibleCount: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 11.5,
     fontFamily: "monospace"
   },
@@ -1046,19 +1048,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    backgroundColor: macOSColors.semantic.errorBackground,
+    backgroundColor: night.color.dangerSoft,
     padding: 8,
     borderRadius: 4,
     marginTop: 8
   },
   errorText: {
-    color: macOSColors.semantic.error,
+    color: night.color.danger,
     fontSize: 11,
     flex: 1
   },
   // Empty state
   emptyText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 12,
     fontStyle: "italic",
     textAlign: "center"
@@ -1071,15 +1073,15 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     padding: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   filterOptionActive: {
-    backgroundColor: macOSColors.semantic.warningBackground,
-    borderColor: macOSColors.semantic.warning + "33"
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "33"
   },
   filterOptionLeft: {
     flexDirection: "row",
@@ -1091,14 +1093,14 @@ const styles = StyleSheet.create({
     flex: 1
   },
   filterOptionLabel: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11,
     marginBottom: 2,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   filterOptionValue: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontFamily: "monospace"
   },
@@ -1106,32 +1108,32 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 6,
     borderRadius: 4,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.bg,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   filterToggleActive: {
-    backgroundColor: macOSColors.semantic.warning + "26",
-    borderColor: macOSColors.semantic.warning + "4D"
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "4D"
   },
   filterToggleText: {
     fontSize: 10,
     fontWeight: "600",
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     letterSpacing: 0.5
   },
   filterToggleTextActive: {
-    color: macOSColors.semantic.warning
+    color: night.color.warning
   },
   filterInfoBox: {
-    backgroundColor: macOSColors.semantic.infoBackground,
+    backgroundColor: night.color.infoSoft,
     borderRadius: 6,
     padding: 10,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "33"
+    borderColor: night.color.info + "33"
   },
   filterInfoText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 11,
     lineHeight: 16
   }

package/lib/module/network/components/NetworkEventItemCompact.js

@@ -2,13 +2,15 @@
 
 import { memo } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, night, macOSColors } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
 import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Get color based on status
+// Get color based on status. Deliberately kept on the macOS semantic palette
+// (not the night tones) — the classic status colors read well on the night
+// rows and stay consistent with the status colors used elsewhere.
 function getStatusColor(status, error) {
   if (error) return macOSColors.semantic.error;
   if (!status) return macOSColors.semantic.warning;
@@ -78,7 +80,7 @@ function StatusIndicator({
       style: styles.pendingBadge,
       children: [/*#__PURE__*/_jsx(Clock, {
         size: 10,
-        color: macOSColors.semantic.warning
+        color: night.color.warning
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.pendingText,
         children: "..."
@@ -90,7 +92,7 @@ function StatusIndicator({
       style: styles.errorBadge,
       children: [/*#__PURE__*/_jsx(AlertCircle, {
         size: 10,
-        color: macOSColors.semantic.error
+        color: night.color.danger
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.errorText,
         children: "ERR"
@@ -120,7 +122,7 @@ function SizeIndicators({
       style: styles.sizeItem,
       children: [/*#__PURE__*/_jsx(Upload, {
         size: 8,
-        color: macOSColors.semantic.info
+        color: night.color.info
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.sizeText,
         children: formatBytes(requestSize)
@@ -129,7 +131,7 @@ function SizeIndicators({
       style: styles.sizeItem,
       children: [/*#__PURE__*/_jsx(Download, {
         size: 8,
-        color: macOSColors.semantic.success
+        color: night.color.accent
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.sizeText,
         children: formatBytes(responseSize)
@@ -205,13 +207,14 @@ function NetworkEventItemCompact({
       style: styles.topRightContainer,
       children: [pinned ? /*#__PURE__*/_jsx(Pin, {
         size: 10,
-        color: macOSColors.semantic.info
+        active: true,
+        color: night.color.info
       }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
         size: 10,
-        color: macOSColors.semantic.debug
+        color: night.color.accent
       }) : null, overridden || event.override ? /*#__PURE__*/_jsx(FlaskConical, {
         size: 10,
-        color: macOSColors.semantic.warning
+        color: night.color.warning
       }) : null, /*#__PURE__*/_jsx(StatusIndicator, {
         event: event,
         isPending: isPending,
@@ -250,7 +253,7 @@ function NetworkEventItemCompact({
         size: "small"
       }) : null, /*#__PURE__*/_jsx(ChevronRight, {
         size: 14,
-        color: macOSColors.text.muted
+        color: night.color.textTertiary
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: styles.bottomRightContainer,
@@ -276,9 +279,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     // Translucent instead of DevToolsCard's opaque fill, so the tool background
     // (see ToolBackground) reads THROUGH the list rather than only around it.
-    // Over the plain-black "off" preset this is visually identical to the
-    // opaque card it replaces.
-    backgroundColor: "rgba(26,26,26,0.62)",
+    // Same luminance contract as the old rgba(10,13,20,0.9) scrim (backing
+    // stays ≤ ~45 under the catalogue's brightest scenes), re-based on the
+    // night surface `#0C0C0C` so rows match the night cards.
+    backgroundColor: "rgba(12, 12, 12, 0.9)",
     borderLeftWidth: 3,
     borderLeftColor: "transparent",
     // One hairline per row — the same value DevToolsCard's border uses.
@@ -308,7 +312,7 @@ const styles = StyleSheet.create({
   },
   urlText: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     lineHeight: 16,
     fontFamily: "monospace"
   },
@@ -324,7 +328,7 @@ const styles = StyleSheet.create({
   },
   bottomRightText: {
     fontSize: 9,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   statusBadge: {
@@ -342,12 +346,12 @@ const styles = StyleSheet.create({
     gap: 2,
     paddingHorizontal: 4,
     paddingVertical: 1,
-    backgroundColor: macOSColors.semantic.warning + "26",
+    backgroundColor: night.color.warningSoft,
     borderRadius: 3
   },
   pendingText: {
     fontSize: 10,
-    color: macOSColors.semantic.warning,
+    color: night.color.warning,
     fontWeight: "600"
   },
   errorBadge: {
@@ -356,17 +360,17 @@ const styles = StyleSheet.create({
     gap: 2,
     paddingHorizontal: 4,
     paddingVertical: 1,
-    backgroundColor: macOSColors.semantic.error + "26",
+    backgroundColor: night.color.dangerSoft,
     borderRadius: 3
   },
   errorText: {
     fontSize: 10,
-    color: macOSColors.semantic.error,
+    color: night.color.danger,
     fontWeight: "600"
   },
   durationText: {
     fontSize: 9,
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   sizeRow: {
     flexDirection: "row",
@@ -380,7 +384,7 @@ const styles = StyleSheet.create({
   },
   sizeText: {
     fontSize: 8,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace"
   },
   clientText: {