@buoy-gg/storage 7.0.26 → 7.0.28

package/lib/commonjs/storage/components/StorageFilterCards.js

@@ -42,15 +42,15 @@ function StorageFilterCards({
       style: styles.filtersRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: [styles.filterChip, activeFilter === "all" && [styles.filterChipActive, {
-          backgroundColor: _sharedUi.macOSColors.background.hover,
-          borderColor: _sharedUi.macOSColors.border.hover,
-          shadowColor: _sharedUi.macOSColors.text.primary
+          backgroundColor: _sharedUi.night.color.accentSoft,
+          borderColor: _sharedUi.night.color.accentBorderStrong,
+          shadowColor: _sharedUi.night.color.accent
         }]],
         onPress: () => onFilterChange?.("all"),
         activeOpacity: 0.8,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
-            color: _sharedUi.macOSColors.text.primary
+            color: _sharedUi.night.color.text
           }],
           children: displayStats.validCount
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -67,7 +67,7 @@ function StorageFilterCards({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
-            color: displayStats.missingCount > 0 ? _sharedUi.macOSColors.semantic.error : _sharedUi.macOSColors.text.muted
+            color: displayStats.missingCount > 0 ? _sharedUi.macOSColors.semantic.error : _sharedUi.night.color.textTertiary
           }],
           children: displayStats.missingCount
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -84,7 +84,7 @@ function StorageFilterCards({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.filterValue, {
-            color: displayStats.issuesCount > 0 ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.muted
+            color: displayStats.issuesCount > 0 ? _sharedUi.macOSColors.semantic.warning : _sharedUi.night.color.textTertiary
           }],
           children: displayStats.issuesCount
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -106,11 +106,11 @@ function StorageFilterCards({
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     padding: 16,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default + "50",
+    borderColor: _sharedUi.night.color.border,
     gap: 14,
     shadowColor: "#000000",
     shadowOpacity: 0.03,
@@ -139,18 +139,18 @@ const styles = _reactNative.StyleSheet.create({
   titleText: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     letterSpacing: 0.5,
     textTransform: "uppercase"
   },
   titleDivider: {
     width: 4,
     height: 1,
-    backgroundColor: _sharedUi.macOSColors.border.default + "60",
+    backgroundColor: _sharedUi.night.color.border,
     marginHorizontal: 4
   },
   subtitleText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11
   },
   healthBadge: {
@@ -168,7 +168,7 @@ const styles = _reactNative.StyleSheet.create({
   healthProgressBar: {
     height: 3,
     borderRadius: 1.5,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.bg,
     overflow: "hidden"
   },
   healthProgressFill: {
@@ -182,10 +182,10 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterChip: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.input + "80",
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default + "30",
+    borderColor: _sharedUi.night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 12,
     alignItems: "center",
@@ -207,7 +207,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterLabel: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     fontWeight: "500",

package/lib/commonjs/storage/components/StorageKeyCard.js

@@ -213,7 +213,7 @@ function StorageKeyCard({
           hitSlop: HIT_SLOP,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
             size: 12,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           })
         })
       })]
@@ -319,7 +319,7 @@ function StorageKeyCard({
 }
 const styles = _reactNative.StyleSheet.create({
   storageKeyCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
     overflow: "hidden"
@@ -347,14 +347,14 @@ const styles = _reactNative.StyleSheet.create({
     gap: 4
   },
   storageKeyText: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontWeight: "500",
     fontSize: 12,
     flexWrap: "wrap",
     flex: 1
   },
   descriptionText: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     marginTop: 2,
     flexWrap: "wrap"
@@ -405,12 +405,12 @@ const styles = _reactNative.StyleSheet.create({
   valueBadge: {
     paddingHorizontal: 4,
     paddingVertical: 2,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 3
   },
   valueText: {
     fontSize: 8,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "500"
   },
   cardHeaderRight: {
@@ -419,11 +419,11 @@ const styles = _reactNative.StyleSheet.create({
   actionButton: {
     padding: 4,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   cardBody: {
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.macOSColors.border.default,
+    borderTopColor: _sharedUi.night.color.separator,
     padding: 12,
     gap: 12
   },
@@ -434,18 +434,18 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   simpleValueLabel: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     fontWeight: "500",
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   simpleValueBox: {
-    backgroundColor: _sharedUi.gameUIColors.background + "4D",
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 4,
     padding: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.gameUIColors.primary + "0D"
+    borderColor: _sharedUi.night.color.border
   },
   simpleValueContent: {
     color: _sharedUi.gameUIColors.success,
@@ -454,7 +454,7 @@ const styles = _reactNative.StyleSheet.create({
     lineHeight: 16
   },
   valueTypeText: {
-    color: _sharedUi.gameUIColors.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 9,
     fontStyle: "italic"
   },
@@ -462,34 +462,34 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6
   },
   valueLabel: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 10,
     fontWeight: "500",
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   valueBox: {
-    backgroundColor: _sharedUi.gameUIColors.background + "4D",
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 4,
     padding: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.gameUIColors.primary + "0D"
+    borderColor: _sharedUi.night.color.border
   },
   valueContent: {
-    color: _sharedUi.gameUIColors.primaryLight,
+    color: _sharedUi.night.color.text,
     fontSize: 10,
     fontFamily: "monospace",
     lineHeight: 14
   },
   expectedValueBox: {
-    backgroundColor: _sharedUi.gameUIColors.background + "4D",
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 4,
     padding: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.gameUIColors.primary + "0D"
+    borderColor: _sharedUi.night.color.border
   },
   expectedValueContent: {
-    color: _sharedUi.gameUIColors.primaryLight,
+    color: _sharedUi.night.color.text,
     fontSize: 10,
     fontFamily: "monospace",
     lineHeight: 14
@@ -510,7 +510,7 @@ const styles = _reactNative.StyleSheet.create({
     fontStyle: "italic"
   },
   typeHelperText: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 9,
     marginTop: 4,
     textAlign: "center"
@@ -519,7 +519,7 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8
   },
   metaLabel: {
-    color: _sharedUi.gameUIColors.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 9,
     fontStyle: "italic"
   }

package/lib/commonjs/storage/components/StorageKeyEditorScreen.js

@@ -210,7 +210,7 @@ function EditorHeader({
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
         size: 16,
-        color: _sharedUi.macOSColors.text.secondary
+        color: _sharedUi.night.color.textSecondary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.headerTitle,
@@ -234,7 +234,7 @@ function EditorHeader({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
         size: 16,
-        color: _sharedUi.macOSColors.semantic.info
+        color: _sharedUi.night.color.accent
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.headerRawText,
         children: "Raw"
@@ -269,7 +269,8 @@ function storageTypeColor(storageType) {
 const styles = _reactNative.StyleSheet.create({
   screen: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   header: {
     flexDirection: "row",
@@ -278,7 +279,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default
+    borderBottomColor: _sharedUi.night.color.border
   },
   headerButton: {
     flexDirection: "row",
@@ -288,7 +289,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 4
   },
   headerRawText: {
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.accent,
     fontSize: 12,
     fontWeight: "700"
   },
@@ -298,17 +299,17 @@ const styles = _reactNative.StyleSheet.create({
     gap: 2
   },
   headerKey: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontWeight: "600",
     fontFamily: "monospace"
   },
   headerState: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10
   },
   headerDirty: {
-    color: _sharedUi.macOSColors.semantic.warning
+    color: _sharedUi.night.color.warning
   },
   metaRow: {
     flexDirection: "row",
@@ -318,7 +319,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8
   },
   metaText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11,
     fontFamily: "monospace"
   },
@@ -330,27 +331,27 @@ const styles = _reactNative.StyleSheet.create({
     paddingBottom: 16
   },
   treeCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 6
   },
   treeHint: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10,
     paddingTop: 8,
     paddingHorizontal: 4
   },
   error: {
-    color: _sharedUi.macOSColors.semantic.error,
+    color: _sharedUi.night.color.danger,
     fontSize: 11,
     fontFamily: "monospace",
     paddingHorizontal: 12,
     paddingBottom: 6
   },
   footer: {
-    backgroundColor: _sharedUi.macOSColors.background.card
+    backgroundColor: _sharedUi.night.color.surface
   },
   commitRow: {
     flexDirection: "row",
@@ -366,10 +367,10 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   discardText: {
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     fontWeight: "600"
   },
@@ -379,13 +380,13 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 12,
-    backgroundColor: _sharedUi.macOSColors.semantic.success
+    backgroundColor: _sharedUi.night.color.accent
   },
   saveDisabled: {
     opacity: 0.5
   },
   saveText: {
-    color: _sharedUi.macOSColors.background.base,
+    color: _sharedUi.night.color.onAccent,
     fontSize: 15,
     fontWeight: "700"
   }

package/lib/commonjs/storage/components/StorageKeyRow.js

@@ -230,7 +230,7 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Edit3, {
           size: 13,
-          color: _sharedUi.macOSColors.background.base
+          color: _sharedUi.night.color.onAccent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.editButtonText,
           children: isBoolean && onToggleKey ? "Toggle" : "Edit"
@@ -246,10 +246,11 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
           size: 12,
-          color: _sharedUi.macOSColors.semantic.info
+          active: isPinned,
+          color: _sharedUi.night.color.accent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.actionChipText, {
-            color: _sharedUi.macOSColors.semantic.info
+            color: _sharedUi.night.color.accent
           }],
           children: isPinned ? "Unpin" : "Pin to top"
         })]
@@ -264,10 +265,10 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EyeOff, {
           size: 12,
-          color: _sharedUi.macOSColors.semantic.warning
+          color: _sharedUi.night.color.warning
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.actionChipText, {
-            color: _sharedUi.macOSColors.semantic.warning
+            color: _sharedUi.night.color.warning
           }],
           children: "Hide from list"
         })]
@@ -292,10 +293,10 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
     },
     children: isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckSquare, {
       size: 18,
-      color: _sharedUi.macOSColors.semantic.info
+      color: _sharedUi.night.color.accent
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Square, {
       size: 18,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     })
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -320,14 +321,17 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
           style: styles.badgeRow,
           children: [isPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
             size: 12,
-            color: _sharedUi.macOSColors.semantic.info
+            active: true,
+            color: _sharedUi.night.color.accent
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
             color: getStorageTypeColor(storageKey.storageType),
             children: storageTypeLabel
           })]
         }),
         showChevron: !isSelectMode,
-        onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined
+        onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined,
+        testID: `buoy-storage-row-${storageKey.storageType}-${storageKey.key}`,
+        accessibilityLabel: `${storageKey.storageType} ${storageKey.key}`
       }), eventCount != null && eventCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.absCountBadge, {
           backgroundColor: _sharedUi.macOSColors.semantic.warning + "22",
@@ -372,14 +376,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   expandedLabel: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "600",
     minWidth: 70,
     fontFamily: "monospace"
   },
   expandedValue: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -391,16 +395,16 @@ const styles = _reactNative.StyleSheet.create({
   },
   expandedDescription: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     flex: 1
   },
   dataViewerContainer: {
     marginTop: 6,
     marginBottom: 6,
-    backgroundColor: _sharedUi.macOSColors.background.base,
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     padding: 6
   },
   rowContainer: {
@@ -408,7 +412,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "flex-start"
   },
   rowContainerSelected: {
-    backgroundColor: _sharedUi.macOSColors.semantic.info + "08",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderRadius: 8
   },
   checkboxContainer: {
@@ -449,13 +453,13 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 10,
     borderRadius: 6,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   actionChipActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.info + "15",
-    borderColor: _sharedUi.macOSColors.semantic.info + "44"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   /** Filled, and first — the one action in this row that changes anything. */
   editButton: {
@@ -465,10 +469,10 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.semantic.success
+    backgroundColor: _sharedUi.night.color.accent
   },
   editButtonText: {
-    color: _sharedUi.macOSColors.background.base,
+    color: _sharedUi.night.color.onAccent,
     fontSize: 12,
     fontWeight: "700"
   },
@@ -484,6 +488,6 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.semantic.info
+    color: _sharedUi.night.color.accent
   }
 });

package/lib/commonjs/storage/components/StorageKeySection.js

@@ -106,15 +106,15 @@ const styles = _reactNative.StyleSheet.create({
     // No gap needed, StorageKeyRow has its own margins
   },
   emptySection: {
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)",
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center"
   },
   emptySectionText: {
-    color: _sharedUi.macOSColors.text.icon,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11,
     textAlign: "center"
   }

package/lib/commonjs/storage/components/StorageKeyStats.js

@@ -259,15 +259,15 @@ function StorageKeyStatsSection({
 const styles = _reactNative.StyleSheet.create({
   statsContainer: {
     marginBottom: 24,
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)"
+    borderColor: _sharedUi.night.color.border
   },
   // Section titles
   sectionTitle: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 12,
     fontWeight: "500",
     marginBottom: 16,
@@ -283,11 +283,11 @@ const styles = _reactNative.StyleSheet.create({
     gap: 12
   },
   breakdownItem: {
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)"
+    borderColor: _sharedUi.night.color.border
   },
   breakdownItemRow: {
     flexDirection: "row",
@@ -310,12 +310,12 @@ const styles = _reactNative.StyleSheet.create({
     minWidth: 0
   },
   breakdownItemLabel: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
   breakdownItemDesc: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 12
   },
   breakdownItemRight: {
@@ -326,18 +326,18 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600"
   },
   breakdownPercentage: {
-    color: _sharedUi.macOSColors.text.icon,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 10
   },
   // Empty state
   emptyState: {
     padding: 16,
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     alignItems: "center"
   },
   emptyStateText: {
-    color: _sharedUi.macOSColors.text.icon,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11,
     textAlign: "center"
   }