@buoy-gg/highlight-updates 7.0.26 → 7.0.27

package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js

@@ -259,20 +259,20 @@ const styles = _reactNative.StyleSheet.create({
     position: "absolute",
     borderWidth: 2,
     borderStyle: "dashed",
-    borderColor: _sharedUi.buoyColors.primary,
+    borderColor: _sharedUi.night.color.accent,
     backgroundColor: "transparent"
   },
   spotlightLabel: {
     position: "absolute",
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary,
+    borderColor: _sharedUi.night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4
   },
   spotlightLabelText: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontSize: 11,
     fontWeight: "600",
     fontFamily: "monospace"

package/lib/commonjs/highlight-updates/components/HighlightFilterView.js

@@ -60,7 +60,7 @@ function TypePicker({
       style: styles.typePickerCancel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
         size: 16,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       })
     })]
   });
@@ -92,7 +92,7 @@ function PatternInput({
       onChangeText: setValue,
       onSubmitEditing: handleSubmit,
       placeholder: "Enter pattern...",
-      placeholderTextColor: _sharedUi.buoyColors.textMuted,
+      placeholderTextColor: _sharedUi.night.color.placeholder,
       style: styles.patternInput,
       autoFocus: true,
       returnKeyType: "done",
@@ -114,7 +114,7 @@ function PatternInput({
       style: styles.cancelButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
         size: 16,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       })
     })]
   });
@@ -148,7 +148,7 @@ function PatternChip({
       children: pattern.value
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
       size: 12,
-      color: _sharedUi.buoyColors.textMuted,
+      color: _sharedUi.night.color.textTertiary,
       style: styles.patternChipX
     })]
   });
@@ -160,7 +160,7 @@ function PatternChip({
 const ALL_CATEGORY_CONFIG = {
   label: "All",
   shortLabel: "All",
-  color: _sharedUi.buoyColors.textSecondary,
+  color: _sharedUi.night.color.textSecondary,
   icon: _sharedUi.Box
 };
 
@@ -389,13 +389,13 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Eye,
-              color: _sharedUi.buoyColors.success,
+              color: _sharedUi.night.color.accent,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "INCLUDE ONLY"
             }), filters.includePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
               count: filters.includePatterns.length,
-              color: _sharedUi.buoyColors.success
+              color: _sharedUi.night.color.accent
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sectionDescription,
@@ -420,15 +420,15 @@ function HighlightFilterView({
               onCancel: () => setIncludeInputType(null)
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
               style: [styles.addButton, {
-                borderColor: _sharedUi.buoyColors.success + "40"
+                borderColor: _sharedUi.night.color.accentBorderStrong
               }],
               onPress: () => setShowIncludeTypePicker(true),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Plus, {
                 size: 14,
-                color: _sharedUi.buoyColors.success
+                color: _sharedUi.night.color.accent
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.addButtonText, {
-                  color: _sharedUi.buoyColors.success
+                  color: _sharedUi.night.color.accent
                 }],
                 children: "Add include pattern"
               })]
@@ -439,13 +439,13 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Filter,
-              color: _sharedUi.buoyColors.primary,
+              color: _sharedUi.night.color.accent,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "EXCLUDE"
             }), filters.excludePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
               count: filters.excludePatterns.length,
-              color: _sharedUi.buoyColors.primary
+              color: _sharedUi.night.color.accent
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sectionDescription,
@@ -470,15 +470,15 @@ function HighlightFilterView({
               onCancel: () => setExcludeInputType(null)
             }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
               style: [styles.addButton, {
-                borderColor: _sharedUi.buoyColors.primary + "40"
+                borderColor: _sharedUi.night.color.accentBorderStrong
               }],
               onPress: () => setShowExcludeTypePicker(true),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Plus, {
                 size: 14,
-                color: _sharedUi.buoyColors.primary
+                color: _sharedUi.night.color.accent
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.addButtonText, {
-                  color: _sharedUi.buoyColors.primary
+                  color: _sharedUi.night.color.accent
                 }],
                 children: "Add exclude pattern"
               })]
@@ -489,13 +489,13 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Hash,
-              color: _sharedUi.buoyColors.warning,
+              color: _sharedUi.night.color.warning,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "RENDER COUNT RANGE"
             }), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
               count: 1,
-              color: _sharedUi.buoyColors.warning
+              color: _sharedUi.night.color.warning
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sectionDescription,
@@ -525,7 +525,7 @@ function HighlightFilterView({
                     }
                   },
                   placeholder: "0",
-                  placeholderTextColor: _sharedUi.buoyColors.textMuted,
+                  placeholderTextColor: _sharedUi.night.color.placeholder,
                   style: styles.renderCountInput,
                   keyboardType: "number-pad",
                   returnKeyType: "done"
@@ -553,7 +553,7 @@ function HighlightFilterView({
                     }
                   },
                   placeholder: "\u221E",
-                  placeholderTextColor: _sharedUi.buoyColors.textMuted,
+                  placeholderTextColor: _sharedUi.night.color.placeholder,
                   style: styles.renderCountInput,
                   keyboardType: "number-pad",
                   returnKeyType: "done"
@@ -567,7 +567,7 @@ function HighlightFilterView({
               }),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
                 size: 12,
-                color: _sharedUi.buoyColors.warning
+                color: _sharedUi.night.color.warning
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.clearRangeButtonText,
                 children: "Clear Range"
@@ -579,7 +579,7 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Box,
-              color: _sharedUi.buoyColors.textSecondary,
+              color: _sharedUi.night.color.textSecondary,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "DETECTED ITEMS"
@@ -681,10 +681,10 @@ function HighlightFilterView({
                     onPress: handlePopupInclude,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
                       size: 16,
-                      color: _sharedUi.buoyColors.success
+                      color: _sharedUi.night.color.accent
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                       style: [styles.actionPopupButtonText, {
-                        color: _sharedUi.buoyColors.success
+                        color: _sharedUi.night.color.accent
                       }],
                       children: "Include Only"
                     })]
@@ -693,10 +693,10 @@ function HighlightFilterView({
                     onPress: handlePopupExclude,
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
                       size: 16,
-                      color: _sharedUi.buoyColors.primary
+                      color: _sharedUi.night.color.accent
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                       style: [styles.actionPopupButtonText, {
-                        color: _sharedUi.buoyColors.primary
+                        color: _sharedUi.night.color.accent
                       }],
                       children: "Exclude"
                     })]
@@ -717,7 +717,7 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Filter,
-              color: _sharedUi.buoyColors.textMuted,
+              color: _sharedUi.night.color.textTertiary,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "HOW FILTERS WORK"
@@ -748,7 +748,7 @@ function HighlightFilterView({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
               icon: _sharedUi.Settings,
-              color: _sharedUi.buoyColors.textMuted,
+              color: _sharedUi.night.color.textTertiary,
               size: 12
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
               children: "SETTINGS"
@@ -776,10 +776,10 @@ function HighlightFilterView({
                     }
                   },
                   trackColor: {
-                    false: _sharedUi.buoyColors.input,
-                    true: _sharedUi.buoyColors.success + "80"
+                    false: _sharedUi.night.color.surfaceElevated,
+                    true: _sharedUi.night.color.accent + "80"
                   },
-                  thumbColor: settings.showRenderCount ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+                  thumbColor: settings.showRenderCount ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.settingDescription,
@@ -798,10 +798,10 @@ function HighlightFilterView({
                     trackRenderCauses: value
                   }),
                   trackColor: {
-                    false: _sharedUi.buoyColors.input,
-                    true: _sharedUi.buoyColors.warning + "80"
+                    false: _sharedUi.night.color.surfaceElevated,
+                    true: _sharedUi.night.color.warning + "80"
                   },
-                  thumbColor: settings.trackRenderCauses ? _sharedUi.buoyColors.warning : _sharedUi.buoyColors.textMuted,
+                  thumbColor: settings.trackRenderCauses ? _sharedUi.night.color.warning : _sharedUi.night.color.knob,
                   disabled: !settings.showRenderCount
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
@@ -824,10 +824,10 @@ function HighlightFilterView({
                     enableRenderHistory: value
                   }),
                   trackColor: {
-                    false: _sharedUi.buoyColors.input,
-                    true: _sharedUi.buoyColors.primary + "80"
+                    false: _sharedUi.night.color.surfaceElevated,
+                    true: _sharedUi.night.color.accent + "80"
                   },
-                  thumbColor: settings.enableRenderHistory ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textMuted,
+                  thumbColor: settings.enableRenderHistory ? _sharedUi.night.color.accent : _sharedUi.night.color.knob,
                   disabled: !settings.trackRenderCauses
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
@@ -848,7 +848,7 @@ function HighlightFilterView({
                   style: styles.settingValue,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: [styles.settingValueText, settings.debugLogLevel !== "off" && {
-                      color: _sharedUi.buoyColors.warning
+                      color: _sharedUi.night.color.warning
                     }],
                     children: DEBUG_LOG_LEVEL_PRESETS.find(p => p.value === settings.debugLogLevel)?.label || "Off"
                   })
@@ -860,15 +860,15 @@ function HighlightFilterView({
                 style: styles.batchSizePresets,
                 children: DEBUG_LOG_LEVEL_PRESETS.map(preset => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                   style: [styles.batchSizePreset, settings.debugLogLevel === preset.value && styles.batchSizePresetActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
-                    backgroundColor: _sharedUi.buoyColors.warning + "30",
-                    borderColor: _sharedUi.buoyColors.warning
+                    backgroundColor: _sharedUi.night.color.warningSoft,
+                    borderColor: _sharedUi.night.color.warning
                   }],
                   onPress: () => onSettingsChange({
                     debugLogLevel: preset.value
                   }),
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: [styles.batchSizePresetText, settings.debugLogLevel === preset.value && styles.batchSizePresetTextActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
-                      color: _sharedUi.buoyColors.warning
+                      color: _sharedUi.night.color.warning
                     }],
                     children: preset.label
                   })
@@ -920,10 +920,10 @@ function HighlightFilterView({
                     excludeDevTools: !value
                   }),
                   trackColor: {
-                    false: _sharedUi.buoyColors.input,
-                    true: _sharedUi.buoyColors.primary + "80"
+                    false: _sharedUi.night.color.surfaceElevated,
+                    true: _sharedUi.night.color.accent + "80"
                   },
-                  thumbColor: !settings.excludeDevTools ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textMuted
+                  thumbColor: !settings.excludeDevTools ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
                 style: styles.settingDescription,
@@ -942,7 +942,8 @@ function HighlightFilterView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   scrollView: {
     flex: 1
@@ -953,16 +954,16 @@ const styles = _reactNative.StyleSheet.create({
     paddingBottom: 32
   },
   section: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border + "50",
+    borderColor: _sharedUi.night.color.border,
     marginBottom: 12,
     overflow: "hidden"
   },
   sectionDescription: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 16
@@ -977,7 +978,7 @@ const styles = _reactNative.StyleSheet.create({
   patternChip: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
     paddingVertical: 4,
@@ -997,7 +998,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   patternChipValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flexShrink: 1
   },
@@ -1042,7 +1043,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 6,
     borderWidth: 1,
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     gap: 6
   },
   typeOptionText: {
@@ -1055,10 +1056,10 @@ const styles = _reactNative.StyleSheet.create({
   patternInputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     paddingLeft: 4,
     paddingRight: 8,
     paddingVertical: 4,
@@ -1067,7 +1068,7 @@ const styles = _reactNative.StyleSheet.create({
   patternInput: {
     flex: 1,
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     paddingVertical: 6,
     paddingHorizontal: 4
   },
@@ -1131,7 +1132,7 @@ const styles = _reactNative.StyleSheet.create({
   detectedItem: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
     paddingVertical: 6,
@@ -1140,12 +1141,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   detectedItemText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   emptyText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 16,
@@ -1157,13 +1158,13 @@ const styles = _reactNative.StyleSheet.create({
   },
   howItWorksText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     lineHeight: 18,
     fontFamily: "monospace"
   },
   howItWorksBold: {
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textSecondary
+    color: _sharedUi.night.color.textSecondary
   },
   // Action popup modal styles
   modalOverlay: {
@@ -1174,10 +1175,10 @@ const styles = _reactNative.StyleSheet.create({
     padding: 32
   },
   actionPopup: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     width: "100%",
     maxWidth: 300,
     overflow: "hidden"
@@ -1185,7 +1186,7 @@ const styles = _reactNative.StyleSheet.create({
   actionPopupHeader: {
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border + "50",
+    borderBottomColor: _sharedUi.night.color.separator,
     alignItems: "center"
   },
   actionPopupButtons: {
@@ -1204,10 +1205,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   actionPopupInclude: {
-    backgroundColor: _sharedUi.buoyColors.success + "15"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   actionPopupExclude: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   actionPopupButtonText: {
     fontSize: 13,
@@ -1216,12 +1217,12 @@ const styles = _reactNative.StyleSheet.create({
   actionPopupCancel: {
     padding: 12,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border + "50",
+    borderTopColor: _sharedUi.night.color.separator,
     alignItems: "center"
   },
   actionPopupCancelText: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500"
   },
   // Settings styles
@@ -1237,7 +1238,7 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 16,
     paddingTop: 16,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border + "30"
+    borderTopColor: _sharedUi.night.color.separator
   },
   settingHeader: {
     flexDirection: "row",
@@ -1247,10 +1248,10 @@ const styles = _reactNative.StyleSheet.create({
   settingLabel: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   settingValue: {
-    backgroundColor: _sharedUi.buoyColors.textMuted + "20",
+    backgroundColor: _sharedUi.night.color.fillSecondary,
     paddingHorizontal: 10,
     paddingVertical: 4,
     borderRadius: 6
@@ -1258,26 +1259,26 @@ const styles = _reactNative.StyleSheet.create({
   settingValueText: {
     fontSize: 12,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   settingDescription: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     lineHeight: 16
   },
   settingDescriptionMuted: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     lineHeight: 14,
     marginTop: 4,
     fontStyle: "italic"
   },
   settingLabelDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   settingWarning: {
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontWeight: "500"
   },
   batchSizePresets: {
@@ -1290,22 +1291,22 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 6,
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border + "50"
+    borderColor: _sharedUi.night.color.border
   },
   batchSizePresetActive: {
-    backgroundColor: _sharedUi.buoyColors.textMuted + "20",
-    borderColor: _sharedUi.buoyColors.textMuted
+    backgroundColor: _sharedUi.night.color.fillSecondary,
+    borderColor: _sharedUi.night.color.fillTertiary
   },
   batchSizePresetText: {
     fontSize: 12,
     fontWeight: "500",
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   batchSizePresetTextActive: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "700"
   },
   // Render count range styles
@@ -1327,26 +1328,26 @@ const styles = _reactNative.StyleSheet.create({
   renderCountLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   renderCountInput: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 12,
     fontSize: 14,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     textAlign: "center"
   },
   renderCountSeparator: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 18
   },
   clearRangeButton: {
@@ -1356,16 +1357,16 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "40",
+    borderColor: _sharedUi.night.color.warning + "40",
     gap: 6,
     alignSelf: "center"
   },
   clearRangeButtonText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.warning
+    color: _sharedUi.night.color.warning
   }
 });
 var _default = exports.default = HighlightFilterView;

package/lib/commonjs/highlight-updates/components/HighlightUpdatesModal.js

@@ -42,7 +42,7 @@ const DisabledBanner = /*#__PURE__*/_react.default.memo(function DisabledBanner(
     style: styles.disabledBanner,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
       size: 14,
-      color: _sharedUi.buoyColors.warning
+      color: _sharedUi.night.color.warning
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.disabledText,
       children: "Render tracking is disabled"
@@ -598,18 +598,22 @@ const styles = _reactNative.StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border,
-    backgroundColor: _sharedUi.buoyColors.card
+    borderBottomColor: _sharedUi.night.color.border,
+    backgroundColor: _sharedUi.night.color.surface
   },
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the HOST's field shows through — JsModal's hoisted
+    // ToolBackground in the modal, the desktop workbench's hoisted sky inline.
+    backgroundColor: "transparent"
   },
   disabledBanner: {
     flexDirection: "row",
@@ -618,13 +622,13 @@ const styles = _reactNative.StyleSheet.create({
     padding: 10,
     marginHorizontal: 12,
     marginTop: 8,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    backgroundColor: _sharedUi.night.color.warningSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.warning + "20"
+    borderColor: _sharedUi.night.color.warning + "20"
   },
   disabledText: {
-    color: _sharedUi.buoyColors.warning,
+    color: _sharedUi.night.color.warning,
     fontSize: 11,
     flex: 1
   }