@buoy-gg/network 7.0.25 → 7.0.27

package/lib/commonjs/network/components/NetworkDetailStepper.js

@@ -102,6 +102,7 @@ const NetworkDetailStepper = exports.NetworkDetailStepper = /*#__PURE__*/(0, _re
     itemLabel: "Request",
     applySafeAreaInset: applySafeAreaInset,
     onPrevious: stepPrevious,
-    onNext: stepNext
+    onNext: stepNext,
+    variant: "night"
   });
 });

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

@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Colour for the icons that merely LABEL a section (Sent/Received, the JSON
  * body glyphs). The Lock/Unlock pair keeps its colour because
  * secure-vs-insecure is a genuine signal, as does the status pill.
- */const NEUTRAL_ICON = _sharedUi.macOSColors.semantic.success;
+ */const NEUTRAL_ICON = _sharedUi.night.color.accent;
 
 /** Hoisted so the defaults don't mint a new Set/function per render. */
 const EMPTY_PATTERNS = new Set();
@@ -125,10 +125,10 @@ const CollapsibleSection = ({
         }) : null]
       }), isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
         size: 16,
-        color: _sharedUi.macOSColors.text.secondary
+        color: _sharedUi.night.color.textSecondary
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
         size: 16,
-        color: _sharedUi.macOSColors.text.secondary
+        color: _sharedUi.night.color.textSecondary
       })]
     }), isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.collapsibleContent,
@@ -233,7 +233,7 @@ const UrlBreakdown = ({
         activeOpacity: 0.7,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -260,10 +260,10 @@ const UrlBreakdown = ({
           children: Object.keys(urlParts.params).length
         }), showParams ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         })]
       }), showParams ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
         title: "",
@@ -438,7 +438,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.pendingBadge,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
               size: 10,
-              color: _sharedUi.macOSColors.semantic.warning
+              color: _sharedUi.night.color.warning
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.pendingBadgeText,
               children: "Pending"
@@ -447,7 +447,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.httpDuration,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
               size: 10,
-              color: _sharedUi.macOSColors.text.muted
+              color: _sharedUi.night.color.textTertiary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.httpDurationText,
               children: (0, _formatting.formatDuration)(event.duration)
@@ -456,7 +456,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             style: styles.overrideBadge,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
               size: 10,
-              color: _sharedUi.macOSColors.semantic.warning
+              color: _sharedUi.night.color.warning
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.overrideBadgeText,
               children: event.override.ruleName || "Overridden"
@@ -477,7 +477,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
             activeOpacity: 0.7,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
               size: 14,
-              color: _sharedUi.macOSColors.text.secondary
+              color: _sharedUi.night.color.textSecondary
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UrlBreakdown, {
@@ -492,7 +492,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.errorBox,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
             size: 12,
-            color: _sharedUi.macOSColors.semantic.error
+            color: _sharedUi.night.color.danger
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.errorText,
             children: event.error
@@ -504,7 +504,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           style: styles.timingRow,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
             size: 12,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.timingLabel,
             children: "Started:"
@@ -520,7 +520,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
               style: styles.sizeItem,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
                 size: 10,
-                color: _sharedUi.macOSColors.semantic.info
+                color: _sharedUi.night.color.info
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.sizeLabel,
                 children: "Sent:"
@@ -554,7 +554,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Headers",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.info
+          color: _sharedUi.night.color.info
         }),
         defaultOpen: false,
         count: Object.keys(requestHeaders).length,
@@ -598,7 +598,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.info
+          color: _sharedUi.night.color.accent
         }),
         defaultOpen: false,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -616,7 +616,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Request Body",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.info
+          color: _sharedUi.night.color.accent
         }),
         defaultOpen: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -659,7 +659,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Filter Options",
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
           size: 14,
-          color: _sharedUi.macOSColors.semantic.warning
+          color: _sharedUi.night.color.warning
         }),
         defaultOpen: false,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -684,7 +684,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
                   style: styles.filterOptionLeft,
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Globe, {
                     size: 16,
-                    color: isDomainIgnored ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.muted
+                    color: isDomainIgnored ? _sharedUi.night.color.warning : _sharedUi.night.color.textTertiary
                   }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                     style: styles.filterOptionContent,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -709,7 +709,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
                   style: styles.filterOptionLeft,
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Link, {
                     size: 16,
-                    color: isUrlIgnored ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.muted
+                    color: isUrlIgnored ? _sharedUi.night.color.warning : _sharedUi.night.color.textTertiary
                   }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                     style: styles.filterOptionContent,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -751,16 +751,17 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.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: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   httpHeader: {
@@ -771,13 +772,13 @@ const styles = _reactNative.StyleSheet.create({
     flexWrap: "nowrap"
   },
   httpMethodBadge: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    backgroundColor: _sharedUi.night.color.infoSoft,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4
   },
   httpMethod: {
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.info,
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.5
@@ -795,13 +796,13 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4
   },
   pendingBadgeText: {
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 11,
     fontWeight: "600"
   },
@@ -811,7 +812,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 4
   },
   httpDurationText: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 11
   },
   overrideBadge: {
@@ -821,10 +822,10 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 6,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground
+    backgroundColor: _sharedUi.night.color.warningSoft
   },
   overrideBadgeText: {
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 10,
     fontWeight: "700"
   },
@@ -835,7 +836,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   // URL breakdown styles
   urlBreakdown: {
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 4,
     padding: 8
   },
@@ -846,13 +848,13 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 4
   },
   urlDomain: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 12,
     fontWeight: "600",
     flex: 1
   },
   urlProtocol: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10
   },
   copyButton: {
@@ -862,12 +864,12 @@ const styles = _reactNative.StyleSheet.create({
     paddingLeft: 18
   },
   urlPath: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 11,
     fontFamily: "monospace"
   },
   urlQueryString: {
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.info,
     fontSize: 11,
     fontFamily: "monospace"
   },
@@ -881,15 +883,15 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 10,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     marginBottom: 8
   },
   queryParamsToggleText: {
     flexGrow: 0,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.3
@@ -898,10 +900,10 @@ const styles = _reactNative.StyleSheet.create({
   timingSection: {
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 12
   },
   timingRow: {
@@ -913,16 +915,16 @@ const styles = _reactNative.StyleSheet.create({
     flexWrap: "wrap"
   },
   timingLabel: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 11
   },
   timingValue: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 11,
     fontWeight: "600"
   },
   timingExact: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10,
     marginLeft: 4
   },
@@ -940,11 +942,11 @@ const styles = _reactNative.StyleSheet.create({
     gap: 4
   },
   sizeLabel: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10
   },
   sizeValue: {
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.info,
     fontSize: 10,
     fontFamily: "monospace",
     fontWeight: "600"
@@ -952,7 +954,7 @@ const styles = _reactNative.StyleSheet.create({
   /* ---- Timing phases ---- */
   phaseDivider: {
     height: 1,
-    backgroundColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.night.color.border,
     marginTop: 12,
     marginBottom: 12
   },
@@ -969,17 +971,17 @@ const styles = _reactNative.StyleSheet.create({
   },
   phaseLabel: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   phaseHint: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   phaseTrack: {
     flex: 1,
     height: 7,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     justifyContent: "center",
     overflow: "hidden"
   },
@@ -992,16 +994,16 @@ const styles = _reactNative.StyleSheet.create({
     textAlign: "right",
     fontSize: 12,
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   // Collapsible section styles
   collapsibleSection: {
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   collapsibleHeader: {
@@ -1011,7 +1013,7 @@ const styles = _reactNative.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: _sharedUi.macOSColors.background.hover
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   collapsibleTitle: {
     flexDirection: "row",
@@ -1019,13 +1021,13 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   collapsibleTitleText: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontWeight: "600"
   },
   /** The "how much is in here" number beside a section title. */
   collapsibleCount: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11.5,
     fontFamily: "monospace"
   },
@@ -1047,19 +1049,19 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    backgroundColor: _sharedUi.night.color.dangerSoft,
     padding: 8,
     borderRadius: 4,
     marginTop: 8
   },
   errorText: {
-    color: _sharedUi.macOSColors.semantic.error,
+    color: _sharedUi.night.color.danger,
     fontSize: 11,
     flex: 1
   },
   // Empty state
   emptyText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     fontStyle: "italic",
     textAlign: "center"
@@ -1072,15 +1074,15 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     padding: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   filterOptionActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "33"
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderColor: _sharedUi.night.color.warning + "33"
   },
   filterOptionLeft: {
     flexDirection: "row",
@@ -1092,14 +1094,14 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   filterOptionLabel: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 11,
     marginBottom: 2,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   filterOptionValue: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontFamily: "monospace"
   },
@@ -1107,32 +1109,32 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 6,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.bg,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   filterToggleActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.warning + "26",
-    borderColor: _sharedUi.macOSColors.semantic.warning + "4D"
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderColor: _sharedUi.night.color.warning + "4D"
   },
   filterToggleText: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 0.5
   },
   filterToggleTextActive: {
-    color: _sharedUi.macOSColors.semantic.warning
+    color: _sharedUi.night.color.warning
   },
   filterInfoBox: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    backgroundColor: _sharedUi.night.color.infoSoft,
     borderRadius: 6,
     padding: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.info + "33"
+    borderColor: _sharedUi.night.color.info + "33"
   },
   filterInfoText: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 11,
     lineHeight: 16
   }

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

@@ -11,7 +11,9 @@ var _formatting = require("../utils/formatting");
 var _useTickEveryMinute = require("../hooks/useTickEveryMinute");
 var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
 var _jsxRuntime = require("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 _sharedUi.macOSColors.semantic.error;
   if (!status) return _sharedUi.macOSColors.semantic.warning;
@@ -81,7 +83,7 @@ function StatusIndicator({
       style: styles.pendingBadge,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
         size: 10,
-        color: _sharedUi.macOSColors.semantic.warning
+        color: _sharedUi.night.color.warning
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.pendingText,
         children: "..."
@@ -93,7 +95,7 @@ function StatusIndicator({
       style: styles.errorBadge,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
         size: 10,
-        color: _sharedUi.macOSColors.semantic.error
+        color: _sharedUi.night.color.danger
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.errorText,
         children: "ERR"
@@ -123,7 +125,7 @@ function SizeIndicators({
       style: styles.sizeItem,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Upload, {
         size: 8,
-        color: _sharedUi.macOSColors.semantic.info
+        color: _sharedUi.night.color.info
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.sizeText,
         children: (0, _formatting.formatBytes)(requestSize)
@@ -132,7 +134,7 @@ function SizeIndicators({
       style: styles.sizeItem,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Download, {
         size: 8,
-        color: _sharedUi.macOSColors.semantic.success
+        color: _sharedUi.night.color.accent
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.sizeText,
         children: (0, _formatting.formatBytes)(responseSize)
@@ -208,13 +210,14 @@ function NetworkEventItemCompact({
       style: styles.topRightContainer,
       children: [pinned ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
         size: 10,
-        color: _sharedUi.macOSColors.semantic.info
+        active: true,
+        color: _sharedUi.night.color.info
       }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
         size: 10,
-        color: _sharedUi.macOSColors.semantic.debug
+        color: _sharedUi.night.color.accent
       }) : null, overridden || event.override ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FlaskConical, {
         size: 10,
-        color: _sharedUi.macOSColors.semantic.warning
+        color: _sharedUi.night.color.warning
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
         event: event,
         isPending: isPending,
@@ -253,7 +256,7 @@ function NetworkEventItemCompact({
         size: "small"
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
         size: 14,
-        color: _sharedUi.macOSColors.text.muted
+        color: _sharedUi.night.color.textTertiary
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.bottomRightContainer,
@@ -279,9 +282,10 @@ const styles = _reactNative.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.
@@ -311,7 +315,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   urlText: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     lineHeight: 16,
     fontFamily: "monospace"
   },
@@ -327,7 +331,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   bottomRightText: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   statusBadge: {
@@ -345,12 +349,12 @@ const styles = _reactNative.StyleSheet.create({
     gap: 2,
     paddingHorizontal: 4,
     paddingVertical: 1,
-    backgroundColor: _sharedUi.macOSColors.semantic.warning + "26",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 3
   },
   pendingText: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontWeight: "600"
   },
   errorBadge: {
@@ -359,17 +363,17 @@ const styles = _reactNative.StyleSheet.create({
     gap: 2,
     paddingHorizontal: 4,
     paddingVertical: 1,
-    backgroundColor: _sharedUi.macOSColors.semantic.error + "26",
+    backgroundColor: _sharedUi.night.color.dangerSoft,
     borderRadius: 3
   },
   errorText: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.semantic.error,
+    color: _sharedUi.night.color.danger,
     fontWeight: "600"
   },
   durationText: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   sizeRow: {
     flexDirection: "row",
@@ -383,7 +387,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   sizeText: {
     fontSize: 8,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   clientText: {