@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/module/ui/components/EventStepperFooter.js

@@ -12,6 +12,7 @@ import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronLeft, ChevronRight } from "../../icons/lucide-icons.js";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
+import { night } from "../night/nightTheme.js";
 import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -26,51 +27,56 @@ export const EventStepperFooter = /*#__PURE__*/memo(function EventStepperFooter(
   itemLabel = "Event",
   subtitle,
   absolute = false,
-  applySafeAreaInset = true
+  applySafeAreaInset = true,
+  variant = "night"
 }) {
   const insets = useSafeAreaInsets();
 
   // Don't render if there's only one or no items
   if (totalItems <= 1) return null;
+  const isNight = variant === "night";
   const isFirstItem = currentIndex === 0;
   const isLastItem = currentIndex === totalItems - 1;
   const bottomPadding = applySafeAreaInset ? 12 + insets.bottom : 12;
+  // Night buttons are the plate-with-accent-label style — chevrons match.
+  const enabledInk = isNight ? night.color.accent : macOSColors.text.primary;
+  const disabledInk = isNight ? night.color.textTertiary : macOSColors.text.muted;
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.footer, absolute && styles.footerAbsolute, {
+    style: [styles.footer, isNight && styles.nightFooter, absolute && styles.footerAbsolute, {
       paddingBottom: bottomPadding
     }],
     children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
       onPress: onPrevious,
       disabled: isFirstItem,
-      style: [styles.navButton, isFirstItem && styles.navButtonDisabled],
+      style: [styles.navButton, isNight && styles.nightNavButton, isFirstItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
-        color: isFirstItem ? macOSColors.text.muted : macOSColors.text.primary
+        color: isFirstItem ? disabledInk : enabledInk
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, isFirstItem && styles.navButtonTextDisabled],
+        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isFirstItem && styles.navButtonTextDisabled, isFirstItem && isNight && styles.nightNavButtonTextDisabled],
         children: "Previous"
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.counterContainer,
       children: [/*#__PURE__*/_jsxs(Text, {
-        style: styles.counterText,
+        style: [styles.counterText, isNight && styles.nightCounterText],
         children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
       }), subtitle && /*#__PURE__*/_jsx(Text, {
-        style: styles.subtitleText,
+        style: [styles.subtitleText, isNight && styles.nightSubtitleText],
         children: subtitle
       })]
     }), /*#__PURE__*/_jsxs(TouchableOpacity, {
       onPress: onNext,
       disabled: isLastItem,
-      style: [styles.navButton, isLastItem && styles.navButtonDisabled],
+      style: [styles.navButton, isNight && styles.nightNavButton, isLastItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.navButtonText, isLastItem && styles.navButtonTextDisabled],
+        style: [styles.navButtonText, isNight && styles.nightNavButtonText, isLastItem && styles.navButtonTextDisabled, isLastItem && isNight && styles.nightNavButtonTextDisabled],
         children: "Next"
       }), /*#__PURE__*/_jsx(ChevronRight, {
         size: 20,
-        color: isLastItem ? macOSColors.text.muted : macOSColors.text.primary
+        color: isLastItem ? disabledInk : enabledInk
       })]
     })]
   });
@@ -139,5 +145,27 @@ const styles = StyleSheet.create({
     color: macOSColors.text.secondary,
     fontFamily: "monospace",
     marginTop: 2
+  },
+  // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with
+  // hairline top border, plate buttons, night text hierarchy.
+  nightFooter: {
+    backgroundColor: "rgba(5, 5, 5, 0.92)",
+    borderTopColor: night.color.border
+  },
+  nightNavButton: {
+    backgroundColor: night.color.button,
+    borderRadius: 15
+  },
+  nightNavButtonText: {
+    color: night.color.accent
+  },
+  nightNavButtonTextDisabled: {
+    color: night.color.textTertiary
+  },
+  nightCounterText: {
+    color: night.color.text
+  },
+  nightSubtitleText: {
+    color: night.color.textSecondary
   }
 });

package/lib/module/ui/components/FilterComponents.js

@@ -2,7 +2,7 @@
 
 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
 import { X, Plus } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Container for filter section
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -165,7 +165,7 @@ export function FilterList({
 const styles = StyleSheet.create({
   filterSection: {
     padding: 16,
-    backgroundColor: buoyColors.base
+    backgroundColor: "transparent"
   },
   badge: {
     flexDirection: "row",
@@ -188,10 +188,10 @@ const styles = StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingHorizontal: 14,
     paddingVertical: 10,
     marginBottom: 8
@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 13,
     paddingVertical: 0,
-    color: buoyColors.text
+    color: night.color.text
   },
   inputButtons: {
     flexDirection: "row",
@@ -210,7 +210,7 @@ const styles = StyleSheet.create({
   cancelButton: {
     padding: 4,
     borderRadius: 6,
-    backgroundColor: buoyColors.hover
+    backgroundColor: night.color.surfaceElevated
   },
   inlineAddButton: {
     paddingHorizontal: 12,
@@ -231,8 +231,8 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     borderWidth: 1,
     borderStyle: "dashed",
-    borderColor: buoyColors.border,
-    backgroundColor: buoyColors.input
+    borderColor: night.color.border,
+    backgroundColor: night.color.surfaceElevated
   },
   addButtonText: {
     fontSize: 13,
@@ -248,17 +248,17 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   filterItemText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
     marginRight: 8,
-    color: buoyColors.text
+    color: night.color.text
   },
   filterItemMeta: {
     marginRight: 8

package/lib/module/ui/components/ModalHeader.js

@@ -3,7 +3,7 @@
 import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { useEffect, useRef } from "react";
 import { ChevronLeft, Search as SearchIcon, X } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Base ModalHeader container component
 // Note: onClose and onMinimize are now handled by WindowControls in JsModal
@@ -35,9 +35,12 @@ export function Navigation({
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onClose,
         style: styles.navigationButton,
+        testID: "tool-close",
+        accessibilityLabel: "Close",
+        accessibilityRole: "button",
         children: closeIcon || /*#__PURE__*/_jsx(X, {
           size: 20,
-          color: buoyColors.textMuted
+          color: night.color.textSecondary
         })
       })]
     });
@@ -48,9 +51,12 @@ export function Navigation({
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     });
   }
@@ -61,9 +67,12 @@ export function Navigation({
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     });
   }
@@ -131,12 +140,12 @@ export function HeaderSearch({
     style: styles.searchContainer,
     children: [/*#__PURE__*/_jsx(SearchIcon, {
       size: 12,
-      color: buoyColors.textSecondary
+      color: night.color.textSecondary
     }), /*#__PURE__*/_jsx(TextInput, {
       ref: inputRef,
       style: styles.searchInput,
       placeholder: placeholder,
-      placeholderTextColor: buoyColors.textMuted,
+      placeholderTextColor: night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
@@ -146,7 +155,7 @@ export function HeaderSearch({
       style: styles.searchCancelButton,
       children: /*#__PURE__*/_jsx(X, {
         size: 12,
-        color: buoyColors.textSecondary
+        color: night.color.textSecondary
       })
     })]
   });
@@ -164,7 +173,10 @@ const styles = StyleSheet.create({
     flex: 1,
     gap: 8,
     minHeight: 32,
-    paddingLeft: 4
+    paddingLeft: 4,
+    // Traffic-light window controls sit absolutely in this corner. Reserve
+    // space so Copy / search / extra actions never paint under them.
+    paddingRight: 56
   },
   navigationButton: {
     padding: 4
@@ -181,7 +193,7 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   headerTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
@@ -190,7 +202,7 @@ const styles = StyleSheet.create({
   },
   headerSubtitle: {
     fontSize: 12,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginTop: 2
   },
   headerSubtitleCentered: {
@@ -200,7 +212,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 6,
     marginLeft: "auto",
-    marginRight: 4
+    marginRight: 4,
+    flexShrink: 0
   },
   headerContentNoMargin: {
     marginHorizontal: 0
@@ -209,21 +222,21 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: buoyColors.input,
-    borderRadius: 6,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 4,
     marginHorizontal: 12,
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   searchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: buoyColors.text,
+    color: night.color.text,
     padding: 0,
     height: "100%"
   },

package/lib/module/ui/components/SectionHeader.js

@@ -90,7 +90,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: buoyColors.base,
+    // Transparent (was the opaque buoy base): section headers sit on night
+    // surfaces now, and an opaque strip breaks the star field behind them.
+    backgroundColor: "transparent",
     minHeight: 40
   },
   iconWrapper: {

package/lib/module/ui/components/StorageTypeBadge.js

@@ -3,6 +3,7 @@
 import { View, Text, StyleSheet } from "react-native";
 import { Database, Lock, HardDrive } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StorageTypeBadge({
   type,
@@ -13,13 +14,13 @@ export function StorageTypeBadge({
   const getStorageColor = () => {
     switch (type) {
       case "async":
-        return buoyColors.textSecondary;
+        return night.color.textSecondary;
       case "mmkv":
         return buoyColors.success;
       case "secure":
         return buoyColors.warning;
       default:
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
     }
   };
   const getStorageText = () => {

package/lib/module/ui/components/TabSelector.js

@@ -1,8 +1,17 @@
 "use strict";
 
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { night } from "../night/nightTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header tab strip — the night segmented control (see ui/night): `#050505`
+ * track, `#161618` thumb, accent underline glow under the active label.
+ *
+ * Same props API it has always had, so every tool header that mounts it got
+ * the night look in one shared edit. Visually identical to `NightSegmented`
+ * at its compact size — new night-native code should prefer that primitive;
+ * this component exists so existing consumers convert without a code change.
+ */
 export function TabSelector({
   tabs,
   activeTab,
@@ -10,60 +19,69 @@ export function TabSelector({
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: styles.container,
-    children: tabs.map(tab => /*#__PURE__*/_jsx(TouchableOpacity, {
-      "sentry-label": "ignore user interaction",
-      accessibilityLabel: tab.label,
-      accessibilityHint: `View ${tab.label.toLowerCase()}`,
-      onPress: () => onTabChange(tab.key),
-      style: [styles.tabButton, activeTab === tab.key ? styles.tabButtonActive : styles.tabButtonInactive],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.tabButtonText, activeTab === tab.key ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
-        children: tab.label
-      })
-    }, tab.key))
+    children: tabs.map(tab => {
+      const active = activeTab === tab.key;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        "sentry-label": "ignore user interaction",
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: tab.label,
+        accessibilityHint: `View ${tab.label.toLowerCase()}`,
+        onPress: () => onTabChange(tab.key),
+        style: [styles.tabButton, active && styles.tabButtonActive],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          children: tab.label
+        }), active ? /*#__PURE__*/_jsx(View, {
+          style: styles.underline
+        }) : null]
+      }, tab.key);
+    })
   });
 }
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    backgroundColor: buoyColors.hover,
-    borderRadius: 6,
-    padding: 2,
+    backgroundColor: night.color.bg,
+    borderRadius: night.radius.row,
     borderWidth: 1,
-    borderColor: buoyColors.border,
-    justifyContent: "space-evenly",
-    height: 28
+    borderColor: night.color.border,
+    padding: 3
   },
   tabButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
+    flex: 1,
+    paddingVertical: 5,
     alignItems: "center",
     justifyContent: "center",
-    flex: 1,
-    marginHorizontal: 1
+    borderRadius: night.radius.segment
   },
-  /**
-   * The selected tab is marked with an accent ring.
-   */
   tabButtonActive: {
-    backgroundColor: buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: buoyColors.primary
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
+    backgroundColor: night.color.surfaceElevated
   },
   tabButtonText: {
     fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
+    fontWeight: "500",
+    color: night.color.textSecondary
   },
   tabButtonTextActive: {
-    color: buoyColors.primary
+    fontWeight: "600",
+    color: night.color.text
   },
-  tabButtonTextInactive: {
-    color: buoyColors.textMuted
+  underline: {
+    position: "absolute",
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: night.color.accent,
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
   }
 });

package/lib/module/ui/components/ValueTypeBadge.js

@@ -3,6 +3,7 @@
 import { View, Text, StyleSheet } from "react-native";
 import { CheckCircle, XCircle } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ValueTypeBadge({
   type,
@@ -71,12 +72,12 @@ export function ValueTypeBadge({
         return buoyColors.primary;
       case "null":
       case "undefined":
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
       case "object":
       case "array":
-        return buoyColors.textSecondary;
+        return night.color.textSecondary;
       default:
-        return buoyColors.textMuted;
+        return night.color.textTertiary;
     }
   };
   return /*#__PURE__*/_jsx(View, {
@@ -131,12 +132,12 @@ const styles = StyleSheet.create({
     backgroundColor: buoyColors.primary + "1A"
   },
   secondaryBadge: {
-    backgroundColor: buoyColors.textSecondary + "1A"
+    backgroundColor: night.color.textSecondary + "1A"
   },
   mutedBadge: {
-    backgroundColor: buoyColors.textMuted + "1A"
+    backgroundColor: night.color.textTertiary + "1A"
   },
   defaultBadge: {
-    backgroundColor: buoyColors.textMuted + "1A"
+    backgroundColor: night.color.textTertiary + "1A"
   }
 });

package/lib/module/ui/components/WindowControls.js

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { View, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, Animated, Modal, Platform } from "react-native";
 import { X, Minus, DockBottom, FloatWindow } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // ============================================================================
 // Global expandable setting — controlled via setExpandableWindowControls()
@@ -68,7 +69,8 @@ export function WindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
@@ -121,15 +123,18 @@ export function WindowControls({
     onClose: onClose,
     onMinimize: onMinimize,
     onToggleMode: onToggleMode,
-    mode: mode
+    mode: mode,
+    variant: variant
   });
 }
 function ExpandableWindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
+  const isNight = variant === "night";
   const [expanded, setExpanded] = useState(false);
   const [triggerLayout, setTriggerLayout] = useState(null);
   const expandAnim = useRef(new Animated.Value(0)).current;
@@ -263,38 +268,38 @@ function ExpandableWindowControls({
             }],
             children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
               children: /*#__PURE__*/_jsxs(View, {
-                style: styles.expandedContainer,
+                style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
                 children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
                   onPress: () => handleAction(onMinimize),
-                  style: [styles.expandedButton, styles.minimizeButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: "Minimize modal",
                   accessibilityRole: "button",
                   children: /*#__PURE__*/_jsx(Minus, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#7A5A00",
+                    color: isNight ? night.color.warning : "#7A5A00",
                     strokeWidth: 2
                   })
                 }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
                   onPress: () => handleAction(onToggleMode),
-                  style: [styles.expandedButton, styles.expandButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: toggleModeLabel,
                   accessibilityRole: "button",
                   children: /*#__PURE__*/_jsx(ToggleModeIcon, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#004A1A",
+                    color: isNight ? night.color.accent : "#004A1A",
                     strokeWidth: 2
                   })
                 }), /*#__PURE__*/_jsx(TouchableOpacity, {
                   onPress: () => handleAction(onClose),
-                  style: [styles.expandedButton, styles.closeButtonExpanded],
+                  style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
                   activeOpacity: 0.7,
                   accessibilityLabel: "Close modal",
                   accessibilityRole: "button",
                   children: /*#__PURE__*/_jsx(X, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#4A0000",
+                    color: isNight ? night.color.danger : "#4A0000",
                     strokeWidth: 2
                   })
                 })]
@@ -377,5 +382,27 @@ const styles = StyleSheet.create({
   },
   expandButtonExpanded: {
     backgroundColor: COLORS.toggleMode
+  },
+  // ── Night variant (Everlights language — see ui/night/nightTheme.ts):
+  // near-black plate, hairline border, soft-tinted circles with toned icons
+  // instead of the solid macOS traffic lights.
+  nightExpandedContainer: {
+    backgroundColor: night.color.surface,
+    borderColor: night.color.border
+  },
+  nightMinimizeButton: {
+    backgroundColor: night.color.warningSoft,
+    borderWidth: 1,
+    borderColor: night.color.warning + "59"
+  },
+  nightToggleButton: {
+    backgroundColor: night.color.accentSoft,
+    borderWidth: 1,
+    borderColor: night.color.accentBorderStrong
+  },
+  nightCloseButton: {
+    backgroundColor: night.color.dangerSoft,
+    borderWidth: 1,
+    borderColor: night.color.danger + "59"
   }
 });

package/lib/module/ui/gameUI/constants/gameUIColors.js

@@ -174,6 +174,14 @@ export const buoyColors = {
   // Backgrounds (dark to light)
   base: "#121212",
   card: "#1A1A1A",
+  /**
+   * Card fill for surfaces that sit over a ToolBackground: translucent so the
+   * field reads through, but calibrated against the BRIGHTEST scene in the
+   * catalogue (Live Sky's noon clouds/sun bloom, ~215 luminance) so a card's
+   * backing stays ≤ ~45 luminance and text never washes out. Over the "off"
+   * preset it is visually indistinguishable from `card`.
+   */
+  cardScrim: "rgba(10,13,20,0.9)",
   hover: "#242424",
   input: "#2A2A2A",
   // Borders