@buoy-gg/storage 7.0.25 → 7.0.27

package/lib/commonjs/storage/components/DiffViewer/DiffOptionsPanel.js

@@ -48,7 +48,7 @@ function DiffOptionsPanel({
       activeOpacity: 0.7,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Settings, {
         size: 12,
-        color: _sharedUi.macOSColors.semantic.info
+        color: _sharedUi.night.color.accent
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.toggleText,
         children: "Options"
@@ -77,7 +77,7 @@ function DiffOptionsPanel({
               style: styles.optionLeft,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Hash, {
                 size: 11,
-                color: _sharedUi.macOSColors.text.secondary
+                color: _sharedUi.night.color.textSecondary
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.optionLabel,
                 children: "Line Numbers"
@@ -86,10 +86,10 @@ function DiffOptionsPanel({
               value: !options.hideLineNumbers,
               onValueChange: value => updateOption("hideLineNumbers", !value),
               trackColor: {
-                false: _sharedUi.macOSColors.border.default,
-                true: _sharedUi.macOSColors.semantic.success + "60"
+                false: _sharedUi.night.color.surfaceElevated,
+                true: _sharedUi.night.color.accent
               },
-              thumbColor: !options.hideLineNumbers ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              thumbColor: _sharedUi.night.color.knob,
               style: styles.switch
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -104,7 +104,7 @@ function DiffOptionsPanel({
               style: styles.optionLeft,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileText, {
                 size: 11,
-                color: _sharedUi.macOSColors.text.secondary
+                color: _sharedUi.night.color.textSecondary
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.optionLabel,
                 children: "Word Diff"
@@ -113,10 +113,10 @@ function DiffOptionsPanel({
               value: !options.disableWordDiff,
               onValueChange: value => updateOption("disableWordDiff", !value),
               trackColor: {
-                false: _sharedUi.macOSColors.border.default,
-                true: _sharedUi.macOSColors.semantic.success + "60"
+                false: _sharedUi.night.color.surfaceElevated,
+                true: _sharedUi.night.color.accent
               },
-              thumbColor: !options.disableWordDiff ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              thumbColor: _sharedUi.night.color.knob,
               style: styles.switch
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -131,7 +131,7 @@ function DiffOptionsPanel({
               style: styles.optionLeft,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
                 size: 11,
-                color: _sharedUi.macOSColors.text.secondary
+                color: _sharedUi.night.color.textSecondary
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.optionLabel,
                 children: "Diff Only"
@@ -140,10 +140,10 @@ function DiffOptionsPanel({
               value: options.showDiffOnly,
               onValueChange: value => updateOption("showDiffOnly", value),
               trackColor: {
-                false: _sharedUi.macOSColors.border.default,
-                true: _sharedUi.macOSColors.semantic.success + "60"
+                false: _sharedUi.night.color.surfaceElevated,
+                true: _sharedUi.night.color.accent
               },
-              thumbColor: options.showDiffOnly ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.muted,
+              thumbColor: _sharedUi.night.color.knob,
               style: styles.switch
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -202,7 +202,7 @@ const styles = _reactNative.StyleSheet.create({
   toggleButton: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     paddingVertical: 6,
     paddingHorizontal: 10,
     borderRadius: 4,
@@ -211,18 +211,18 @@ const styles = _reactNative.StyleSheet.create({
   toggleText: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace",
     flex: 1
   },
   toggleIndicator: {
     fontSize: 8,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   optionsContent: {
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     padding: 12,
     gap: 16
@@ -233,7 +233,7 @@ const styles = _reactNative.StyleSheet.create({
   sectionTitle: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.semantic.info,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 4
@@ -254,12 +254,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   optionLabel: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   optionDescription: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 4,
     marginLeft: 19,
@@ -280,27 +280,27 @@ const styles = _reactNative.StyleSheet.create({
   methodButton: {
     paddingVertical: 6,
     paddingHorizontal: 10,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   methodButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   methodButtonText: {
     fontSize: 9,
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "600"
   },
   methodButtonTextActive: {
-    color: _sharedUi.macOSColors.semantic.info
+    color: _sharedUi.night.color.accent
   },
   methodDescription: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 8,
     lineHeight: 12
@@ -314,33 +314,33 @@ const styles = _reactNative.StyleSheet.create({
     height: 28,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 4,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   contextButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderColor: _sharedUi.macOSColors.semantic.warning + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   contextButtonText: {
     fontSize: 10,
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "600"
   },
   contextButtonTextActive: {
-    color: _sharedUi.macOSColors.semantic.warning
+    color: _sharedUi.night.color.accent
   },
   contextDescription: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 8,
     lineHeight: 12
   },
   activeIndicator: {
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    backgroundColor: _sharedUi.night.color.warningSoft,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 3,
@@ -350,7 +350,7 @@ const styles = _reactNative.StyleSheet.create({
   activeIndicatorText: {
     fontSize: 8,
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.semantic.warning,
+    color: _sharedUi.night.color.warning,
     fontWeight: "600"
   }
 });

package/lib/commonjs/storage/components/DiffViewer/TreeDiffViewer.js

@@ -26,11 +26,11 @@ function TreeDiffViewer({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.gameUIColors.background
+    backgroundColor: _sharedUi.night.color.bg
   },
   // Inline: size to the tree so the page scroll reveals it, rather than
   // stretching to the pane and clipping the rows.
   containerInline: {
-    backgroundColor: _sharedUi.gameUIColors.background
+    backgroundColor: _sharedUi.night.color.bg
   }
 });

package/lib/commonjs/storage/components/DiffViewer/themes/diffThemes.js

@@ -3,111 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gitClassicTheme = exports.diffThemes = exports.devToolsDefaultTheme = void 0;
-/**
- * Diff Viewer Theme System
- *
- * Only three official themes:
- * 1. Git Classic - Traditional Git colors
- * 2. VS Code Dark Modern - Exact VS Code Dark Modern theme
- * 3. Dev Tools Default - Custom dark theme for our dev tools
- */
-
-/**
- * Git Classic Theme
- * Traditional Git diff colors - simple and familiar
- */
-const gitClassicTheme = exports.gitClassicTheme = {
-  name: "Git Classic",
-  description: "Traditional Git diff colors - simple and familiar",
-  background: "#FFFFFF",
-  panelBackground: "#F8F8F8",
-  headerBackground: "#F0F0F0",
-  addedBackground: "#E6FFED",
-  removedBackground: "#FFEEF0",
-  modifiedBackground: "#FFF5DD",
-  unchangedBackground: "transparent",
-  contextBackground: "#FAFAFA",
-  addedText: "#22863A",
-  removedText: "#CB2431",
-  modifiedText: "#B08800",
-  unchangedText: "#24292E",
-  addedWordHighlight: "#ACF2BD",
-  removedWordHighlight: "#FDB8C0",
-  lineNumberBackground: "#F6F8FA",
-  lineNumberText: "#959DA5",
-  lineNumberBorder: "#E1E4E8",
-  markerAddedBackground: "#CDFFD8",
-  markerRemovedBackground: "#FFDCE0",
-  markerModifiedBackground: "#FFF5B1",
-  markerText: "#666666",
-  borderColor: "#E1E4E8",
-  dividerColor: "#E1E4E8",
-  summaryBackground: "#F6F8FA",
-  summaryAddedText: "#28A745",
-  summaryRemovedText: "#D73A49",
-  summaryModifiedText: "#0366D6",
-  emptyStateText: "#586069",
-  separatorBackground: "#F6F8FA",
-  separatorText: "#586069"
-};
-
-/**
- * Dev Tools Default Theme
- * Clean dark theme matching Buoy website brand colors
- */
-const devToolsDefaultTheme = exports.devToolsDefaultTheme = {
-  name: "Dev Tools Default",
-  description: "Clean dark theme with Buoy brand colors",
-  // Surface colors (matching website dark theme)
-  background: "#121212",
-  panelBackground: "#1A1A1A",
-  headerBackground: "#1A1A1A",
-  // Diff colors using website's semantic colors
-  // Added: Primary teal (#20C997)
-  // Removed: Error red (#EF4444)
-  // Modified: Secondary purple (#9B70E0)
-  addedBackground: "rgba(32, 201, 151, 0.12)",
-  removedBackground: "rgba(239, 68, 68, 0.12)",
-  modifiedBackground: "rgba(155, 112, 224, 0.12)",
-  unchangedBackground: "transparent",
-  contextBackground: "rgba(255, 255, 255, 0.02)",
-  // Text colors
-  addedText: "#20C997",
-  removedText: "#EF4444",
-  modifiedText: "#9B70E0",
-  unchangedText: "#E0E0E0",
-  // Word-level highlights
-  addedWordHighlight: "rgba(32, 201, 151, 0.3)",
-  removedWordHighlight: "rgba(239, 68, 68, 0.3)",
-  // UI elements
-  lineNumberBackground: "#121212",
-  lineNumberText: "#A0A0A0",
-  lineNumberBorder: "#333333",
-  // Markers
-  markerAddedBackground: "rgba(32, 201, 151, 0.2)",
-  markerRemovedBackground: "rgba(239, 68, 68, 0.2)",
-  markerModifiedBackground: "rgba(155, 112, 224, 0.2)",
-  markerText: "#A0A0A0",
-  // Borders and dividers
-  borderColor: "#333333",
-  dividerColor: "#333333",
-  // Summary bar
-  summaryBackground: "#1A1A1A",
-  summaryAddedText: "#20C997",
-  summaryRemovedText: "#EF4444",
-  summaryModifiedText: "#9B70E0",
-  // Empty state
-  emptyStateText: "#888888",
-  // Separator
-  separatorBackground: "#1A1A1A",
-  separatorText: "#A0A0A0"
-};
-
-/**
- * Theme collection
- */
-const diffThemes = exports.diffThemes = {
-  gitClassic: gitClassicTheme,
-  devToolsDefault: devToolsDefaultTheme
-};
+Object.defineProperty(exports, "devToolsDefaultTheme", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.devToolsDefaultTheme;
+  }
+});
+Object.defineProperty(exports, "diffThemes", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.diffThemes;
+  }
+});
+Object.defineProperty(exports, "gitClassicTheme", {
+  enumerable: true,
+  get: function () {
+    return _dataViewer.gitClassicTheme;
+  }
+});
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");

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

@@ -578,7 +578,7 @@ function GameUIStorageBrowser({
       style: styles.emptyState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
         size: 48,
-        color: _sharedUi.macOSColors.text.muted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
         children: "Loading storage keys..."
@@ -647,7 +647,7 @@ function GameUIStorageBrowser({
           style: [styles.instanceNavbarButton, selectedMMKVInstance === null && styles.instanceNavbarButtonActive],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
             size: 12,
-            color: selectedMMKVInstance === null ? _sharedUi.macOSColors.text.primary : _sharedUi.macOSColors.text.secondary
+            color: selectedMMKVInstance === null ? _sharedUi.night.color.text : _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.instanceNavbarButtonText, selectedMMKVInstance === null && styles.instanceNavbarButtonTextActive],
             children: "All"
@@ -669,13 +669,13 @@ function GameUIStorageBrowser({
               }
             },
             style: [styles.instanceNavbarButton, inst.id === selectedMMKVInstance && styles.instanceNavbarButtonActive, {
-              borderColor: isLocked ? _sharedUi.macOSColors.border.default : getInstanceColor(inst.id) + '40',
-              backgroundColor: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) + '20' : _sharedUi.macOSColors.background.card,
+              borderColor: isLocked ? _sharedUi.night.color.border : getInstanceColor(inst.id) + '40',
+              backgroundColor: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) + '20' : _sharedUi.night.color.surfaceElevated,
               opacity: isLocked ? 0.5 : 1
             }],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
               size: 12,
-              color: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) : _sharedUi.macOSColors.text.secondary
+              color: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) : _sharedUi.night.color.textSecondary
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.instanceNavbarButtonText, inst.id === selectedMMKVInstance && {
                 color: getInstanceColor(inst.id),
@@ -734,7 +734,7 @@ function GameUIStorageBrowser({
         style: styles.limitBannerLeft,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
           size: 16,
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.limitBannerText,
           children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
@@ -749,7 +749,7 @@ function GameUIStorageBrowser({
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
       size: 32,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
@@ -851,11 +851,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: _sharedUi.gameUIColors.background
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   container: {
     padding: 12,
-    paddingBottom: 32
+    // Generous so a key card expanded at the bottom of the list can scroll
+    // its full detail block above the modal edge.
+    paddingBottom: 120
   },
   backgroundGrid: {
     ..._sharedUi.absoluteFill,
@@ -864,7 +867,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   techFooter: {
     fontSize: 8,
-    color: _sharedUi.gameUIColors.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     textAlign: "center",
     marginTop: 20,
@@ -874,11 +877,11 @@ const styles = _reactNative.StyleSheet.create({
   // Keys section
   keysSection: {
     marginTop: 8,
-    backgroundColor: _sharedUi.macOSColors.background.base,
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 12,
     padding: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   sectionHeader: {
     flexDirection: "row",
@@ -887,7 +890,7 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 10,
     paddingBottom: 6,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default
+    borderBottomColor: _sharedUi.night.color.separator
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -897,22 +900,22 @@ const styles = _reactNative.StyleSheet.create({
   sectionTitle: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     letterSpacing: 0.4,
     textTransform: "uppercase"
   },
   countBadge: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   countText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   // Empty state
@@ -924,56 +927,56 @@ const styles = _reactNative.StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     marginTop: 12,
     marginBottom: 8
   },
   emptySubtitle: {
     fontSize: 13,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center"
   },
   // Empty MMKV state
   emptyMMKVState: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     padding: 20,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     marginTop: 8,
     alignItems: "center"
   },
   emptyMMKVTitle: {
     fontSize: 14,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     marginBottom: 6
   },
   emptyMMKVSubtitle: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center",
     marginBottom: 12
   },
   emptyMMKVCode: {
     fontSize: 10,
     fontFamily: "monospace",
-    color: _sharedUi.macOSColors.semantic.info,
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    color: _sharedUi.night.color.accent,
+    backgroundColor: _sharedUi.night.color.bg,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignSelf: "stretch"
   },
   // Instance Navbar styles
   instanceNavbar: {
     marginTop: 12,
     marginBottom: 8,
-    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: 10,
     shadowColor: '#000',
     shadowOpacity: 0.08,
@@ -993,7 +996,7 @@ const styles = _reactNative.StyleSheet.create({
   instanceNavbarLabel: {
     fontSize: 9,
     fontWeight: '700',
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 1
   },
@@ -1007,10 +1010,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 6,
     paddingHorizontal: 12,
     paddingVertical: 8,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     minWidth: 90
   },
   instanceNavbarButtonActive: {
@@ -1026,16 +1029,16 @@ const styles = _reactNative.StyleSheet.create({
   instanceNavbarButtonText: {
     fontSize: 11,
     fontWeight: '600',
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: 'monospace',
     flex: 1
   },
   instanceNavbarButtonTextActive: {
     fontWeight: '700',
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   instanceNavbarBadge: {
-    backgroundColor: _sharedUi.macOSColors.background.input,
+    backgroundColor: _sharedUi.night.color.bg,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 6,
@@ -1045,29 +1048,29 @@ const styles = _reactNative.StyleSheet.create({
   instanceNavbarBadgeText: {
     fontSize: 10,
     fontWeight: '700',
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: 'monospace'
   },
   clearSearchButton: {
     marginTop: 16,
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   clearSearchText: {
     fontSize: 13,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontWeight: "500"
   },
   // Free tier limit banner
   limitBanner: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40",
+    borderColor: _sharedUi.night.color.accentBorderStrong,
     padding: 12,
     marginTop: 12
   },
@@ -1083,12 +1086,12 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   limitBannerText: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     fontWeight: "600"
   },
   limitBannerSubtext: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 11
   }
 });