@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/commonjs/ui/components/Badge.js

@@ -10,6 +10,7 @@ exports.StatusBadge = StatusBadge;
 exports.TypeBadge = TypeBadge;
 var _reactNative = require("react-native");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Badge variants
 
@@ -19,9 +20,9 @@ const STATUS_COLORS = {
   error: _gameUIColors.buoyColors.error,
   warning: _gameUIColors.buoyColors.warning,
   info: _gameUIColors.buoyColors.primary,
-  pending: _gameUIColors.buoyColors.textSecondary,
+  pending: _nightTheme.night.color.textSecondary,
   active: _gameUIColors.buoyColors.success,
-  inactive: _gameUIColors.buoyColors.textMuted,
+  inactive: _nightTheme.night.color.textTertiary,
   stale: _gameUIColors.buoyColors.warning,
   fetching: _gameUIColors.buoyColors.primary
 };
@@ -31,9 +32,9 @@ const METHOD_COLORS = {
   GET: _gameUIColors.buoyColors.success,
   POST: _gameUIColors.buoyColors.primary,
   PUT: _gameUIColors.buoyColors.warning,
-  PATCH: _gameUIColors.buoyColors.textSecondary,
+  PATCH: _nightTheme.night.color.textSecondary,
   DELETE: _gameUIColors.buoyColors.error,
-  HEAD: _gameUIColors.buoyColors.textMuted,
+  HEAD: _nightTheme.night.color.textTertiary,
   OPTIONS: _gameUIColors.buoyColors.primary
 };
 
@@ -191,13 +192,13 @@ function getTypeColor(type) {
     string: _gameUIColors.buoyColors.primary,
     number: _gameUIColors.buoyColors.primary,
     boolean: _gameUIColors.buoyColors.primary,
-    object: _gameUIColors.buoyColors.textSecondary,
-    array: _gameUIColors.buoyColors.textSecondary,
-    null: _gameUIColors.buoyColors.textMuted,
-    undefined: _gameUIColors.buoyColors.textMuted,
-    function: _gameUIColors.buoyColors.textSecondary
+    object: _nightTheme.night.color.textSecondary,
+    array: _nightTheme.night.color.textSecondary,
+    null: _nightTheme.night.color.textTertiary,
+    undefined: _nightTheme.night.color.textTertiary,
+    function: _nightTheme.night.color.textSecondary
   };
-  return typeColors[type.toLowerCase()] || _gameUIColors.buoyColors.textMuted;
+  return typeColors[type.toLowerCase()] || _nightTheme.night.color.textTertiary;
 }
 const styles = _reactNative.StyleSheet.create({
   statusDot: {

package/lib/commonjs/ui/components/CompactRow.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CompactRow = CompactRow;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function CompactRow({
   statusDotColor,
@@ -25,19 +25,27 @@ function CompactRow({
   isSelected,
   onPress,
   disabled,
-  expandedGlowColor
+  expandedGlowColor,
+  testID,
+  accessibilityLabel
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.rowWrapper,
+    style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
-        borderColor: expandedGlowColor || _gameUIColors.buoyColors.primary,
-        shadowColor: expandedGlowColor || _gameUIColors.buoyColors.primary
+        borderColor: expandedGlowColor || _nightTheme.night.color.accent,
+        // The resting hairline sets borderBottomColor specifically, and a
+        // specific side always beats the generic borderColor — restate it
+        // or the expanded card's bottom edge keeps the faint separator.
+        borderBottomColor: expandedGlowColor || _nightTheme.night.color.accent,
+        shadowColor: expandedGlowColor || _nightTheme.night.color.accent
       }]],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onPress,
         activeOpacity: 0.8,
         disabled: disabled || !onPress,
+        testID: testID,
+        accessibilityLabel: accessibilityLabel,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.rowContent,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -92,10 +100,10 @@ function CompactRow({
               style: styles.chevronContainer,
               children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
                 size: 14,
-                color: _gameUIColors.buoyColors.textMuted
+                color: _nightTheme.night.color.textTertiary
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
                 size: 14,
-                color: _gameUIColors.buoyColors.textMuted
+                color: _nightTheme.night.color.textTertiary
               })
             })]
           })]
@@ -113,15 +121,23 @@ const styles = _reactNative.StyleSheet.create({
     marginHorizontal: 8,
     marginVertical: 3
   },
+  /** The expanded card scales to 1.02 and grows a 2px glow border, which eats
+   * the 3px resting margin — without extra room its bottom edge sits on the
+   * next card. */
+  rowWrapperExpanded: {
+    marginVertical: 12
+  },
   row: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    // Translucent night scrim so the shared ToolBackground reads through —
+    // kept in step with DevToolsCard (same fill, same luminance contract).
+    backgroundColor: "rgba(12, 12, 12, 0.9)",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border + "40",
+    borderColor: _nightTheme.night.color.border,
     // …separated by a single hairline instead of four borders per row.
     // Declared after borderWidth so the specific side wins on the chat path.
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border + "40",
+    borderBottomColor: _nightTheme.night.color.separator,
     padding: 12,
     paddingHorizontal: 12,
     transform: [{
@@ -131,12 +147,12 @@ const styles = _reactNative.StyleSheet.create({
   selectedRow: {
     // Neutral fill, no outline, no lift — the same selection language as the
     // sidebar. The classic path keeps its tinted, scaled, glowing card.
-    backgroundColor: _gameUIColors.buoyColors.primary + "15",
-    borderColor: _gameUIColors.buoyColors.primary + "50",
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderColor: _nightTheme.night.color.accentBorderStrong,
     transform: [{
       scale: 1.01
     }],
-    shadowColor: _gameUIColors.buoyColors.primary,
+    shadowColor: _nightTheme.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -150,6 +166,7 @@ const styles = _reactNative.StyleSheet.create({
       scale: 1.02
     }],
     borderWidth: 2,
+    paddingBottom: 16,
     shadowOffset: {
       width: 0,
       height: 0
@@ -187,7 +204,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   observerText: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     marginTop: 1
   },
   querySection: {
@@ -197,7 +214,7 @@ const styles = _reactNative.StyleSheet.create({
   queryHash: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     lineHeight: 16
   },
   secondaryRow: {
@@ -208,7 +225,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   secondaryText: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     marginTop: 1
   },
   rightSection: {
@@ -233,12 +250,12 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8,
     paddingTop: 8,
     borderTopWidth: 1,
-    borderTopColor: _gameUIColors.buoyColors.border + "20",
+    borderTopColor: _nightTheme.night.color.separator,
     marginLeft: 24 // Align with content after status dot
   },
   bottomRightText: {
     fontSize: 9,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

package/lib/commonjs/ui/components/CopyButton.js

@@ -188,10 +188,10 @@ const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function C
       onPress: copyState === "idle" || !isPro ? handlePress : undefined,
       activeOpacity: 0.7,
       hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 8,
-        right: 8
+        top: 4,
+        bottom: 4,
+        left: 4,
+        right: 4
       },
       accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
       accessibilityRole: "button",
@@ -216,6 +216,8 @@ const styles = _reactNative.StyleSheet.create({
     padding: 4,
     justifyContent: "center",
     alignItems: "center",
+    alignSelf: "flex-start",
+    overflow: "hidden",
     // Only relevant when a `label` is present; a bare icon button has one
     // child, so the row direction and gap cost it nothing.
     flexDirection: "row",

package/lib/commonjs/ui/components/DevToolsCard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DEVTOOLS_CARD_CONSTANTS = void 0;
 exports.DevToolsCard = DevToolsCard;
 var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * DevToolsCard
@@ -48,7 +48,8 @@ function DevToolsCard({
   activeOpacity = 0.8,
   style,
   contentStyle,
-  testID
+  testID,
+  accessibilityLabel
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -57,6 +58,7 @@ function DevToolsCard({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],
         children: children
@@ -74,6 +76,7 @@ function DevToolsCard({
       activeOpacity: activeOpacity,
       disabled: disabled,
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });
@@ -89,23 +92,27 @@ const styles = _reactNative.StyleSheet.create({
     marginVertical: DEVTOOLS_CARD_CONSTANTS.marginVertical
   },
   card: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    // Translucent night scrim — same luminance contract as the old
+    // buoyColors.cardScrim (backing stays readable under the brightest
+    // scenes), re-based on the night surface so the ToolBackground reads
+    // through every tool's card lists, not only around them.
+    backgroundColor: "rgba(12, 12, 12, 0.9)",
     borderRadius: DEVTOOLS_CARD_CONSTANTS.borderRadius,
     borderWidth: DEVTOOLS_CARD_CONSTANTS.borderWidth,
-    borderColor: _gameUIColors.buoyColors.border + "40",
+    borderColor: _nightTheme.night.color.border,
     // The separator. On classic this just re-states the full outline; on chat
     // it is the ONLY edge the row has.
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border + "40",
+    borderBottomColor: _nightTheme.night.color.separator,
     padding: DEVTOOLS_CARD_CONSTANTS.padding,
     paddingHorizontal: DEVTOOLS_CARD_CONSTANTS.padding,
     minHeight: DEVTOOLS_CARD_CONSTANTS.minHeight
   },
   selectedCard: {
-    // Neutral grey fill, no tinted outline and no lift — see CompactRow.
-    backgroundColor: _gameUIColors.buoyColors.primary + "15",
-    borderColor: _gameUIColors.buoyColors.primary + "50",
-    shadowColor: _gameUIColors.buoyColors.primary,
+    // The night selection language: soft accent fill + accent border.
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderColor: _nightTheme.night.color.accentBorderStrong,
+    shadowColor: _nightTheme.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0

package/lib/commonjs/ui/components/DynamicFilterView.js

@@ -11,6 +11,7 @@ var _SectionHeader = require("./SectionHeader.js");
 var _FilterComponents = require("./FilterComponents.js");
 var _useFilterManager = require("../../hooks/useFilterManager.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DynamicFilterView({
   sections = [],
@@ -64,7 +65,7 @@ function DynamicFilterView({
         style: [styles.tabButton, currentActiveTab === tab.id ? styles.tabButtonActive : styles.tabButtonInactive],
         children: [tab.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(tab.icon, {
           size: 14,
-          color: currentActiveTab === tab.id ? _gameUIColors.buoyColors.primary : _gameUIColors.buoyColors.textMuted
+          color: currentActiveTab === tab.id ? _gameUIColors.buoyColors.primary : _nightTheme.night.color.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.tabButtonText, currentActiveTab === tab.id ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
           children: tab.label
@@ -304,7 +305,7 @@ function DynamicFilterView({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
             icon: howItWorksSection.icon || _index.Filter,
-            color: _gameUIColors.buoyColors.textSecondary,
+            color: _nightTheme.night.color.textSecondary,
             size: 12
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Title, {
             children: howItWorksSection.title || "HOW FILTERS WORK"
@@ -355,7 +356,8 @@ function DynamicFilterView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _gameUIColors.buoyColors.base
+    // Transparent so the host modal's night star field shows through.
+    backgroundColor: "transparent"
   },
   content: {
     flex: 1
@@ -370,9 +372,9 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     gap: 8,
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: _gameUIColors.buoyColors.border
+    borderBottomColor: _nightTheme.night.color.border
   },
   tabButton: {
     flex: 1,
@@ -392,14 +394,14 @@ const styles = _reactNative.StyleSheet.create({
    */
   tabButtonActive: {
     // White THUMB, not a grey one — the INACTIVE tab is already
-    // `buoyColors.hover` here, so a grey active state would be invisible.
+    // `night.color.surfaceElevated` here, so a grey active state would be invisible.
     backgroundColor: _gameUIColors.buoyColors.primary + "20",
     borderColor: _gameUIColors.buoyColors.primary,
     borderWidth: 2
   },
   tabButtonInactive: {
-    backgroundColor: _gameUIColors.buoyColors.hover,
-    borderColor: _gameUIColors.buoyColors.border
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderColor: _nightTheme.night.color.border
   },
   tabButtonText: {
     fontSize: 11,
@@ -410,7 +412,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _gameUIColors.buoyColors.primary
   },
   tabButtonTextInactive: {
-    color: _gameUIColors.buoyColors.textMuted
+    color: _nightTheme.night.color.textTertiary
   },
   tabBadge: {
     backgroundColor: _gameUIColors.buoyColors.primary + "40",
@@ -438,7 +440,7 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 8
   },
   filterCard: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 12,
     // rounded-xl
     paddingHorizontal: 8,
@@ -447,7 +449,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     width: 72,
     minHeight: 68
   },
@@ -471,7 +473,7 @@ const styles = _reactNative.StyleSheet.create({
   filterCountActive: {
     fontSize: 14,
     fontWeight: "700",
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1,
@@ -485,14 +487,14 @@ const styles = _reactNative.StyleSheet.create({
   filterCountZero: {
     fontSize: 11,
     fontWeight: "500",
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1
   },
   filterLabelCompact: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontWeight: "600",
     textAlign: "center",
     textTransform: "capitalize",
@@ -505,14 +507,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterDescriptionBottom: {
     fontSize: 8,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     textAlign: "center",
     marginTop: 2,
     lineHeight: 11
   },
   sectionDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     marginTop: 4,
     marginBottom: 4,
     lineHeight: 14
@@ -533,11 +535,11 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   activeFiltersSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -548,17 +550,17 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 200
   },
   includeOnlySection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   includeOnlyDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -574,17 +576,17 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 150
   },
   excludeFiltersSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   excludeFiltersDescription: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -620,7 +622,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   filterSummaryText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     lineHeight: 16
   },
   filterSummaryInclude: {
@@ -633,17 +635,17 @@ const styles = _reactNative.StyleSheet.create({
   },
   emptyStateText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 12
   },
   availableKeysSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -659,31 +661,31 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _gameUIColors.buoyColors.hover,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginBottom: 8
   },
   availableKeyText: {
     flex: 1,
     fontSize: 11,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontFamily: "monospace",
     marginRight: 8
   },
   howItWorksSection: {
-    backgroundColor: _gameUIColors.buoyColors.card,
+    backgroundColor: _nightTheme.night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   howItWorksText: {
     fontSize: 11,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     lineHeight: 16,
     marginBottom: 12,
     marginTop: 8,
@@ -695,29 +697,29 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: _gameUIColors.buoyColors.border
+    borderTopColor: _nightTheme.night.color.border
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: _gameUIColors.buoyColors.textMuted,
+    color: _nightTheme.night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   },
   previewSection: {
-    backgroundColor: _gameUIColors.buoyColors.hover,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     // Slightly lighter to distinguish from other sections
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.borderStrong,
+    borderColor: _nightTheme.night.color.fillTertiary,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -725,12 +727,12 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 16,
-    backgroundColor: _gameUIColors.buoyColors.base,
+    backgroundColor: _nightTheme.night.color.bg,
     // Darker content area for contrast
     marginHorizontal: 12,
     marginBottom: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border
+    borderColor: _nightTheme.night.color.border
   }
 });