@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -10,7 +10,7 @@ exports.FilterList = FilterList;
 exports.FilterSection = FilterSection;
 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");
 // Container for filter section
 
@@ -173,7 +173,7 @@ function FilterList({
 const styles = _reactNative.StyleSheet.create({
   filterSection: {
     padding: 16,
-    backgroundColor: _gameUIColors.buoyColors.base
+    backgroundColor: "transparent"
   },
   badge: {
     flexDirection: "row",
@@ -196,10 +196,10 @@ const styles = _reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _gameUIColors.buoyColors.input,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
+    borderColor: _nightTheme.night.color.border,
     paddingHorizontal: 14,
     paddingVertical: 10,
     marginBottom: 8
@@ -208,7 +208,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 13,
     paddingVertical: 0,
-    color: _gameUIColors.buoyColors.text
+    color: _nightTheme.night.color.text
   },
   inputButtons: {
     flexDirection: "row",
@@ -218,7 +218,7 @@ const styles = _reactNative.StyleSheet.create({
   cancelButton: {
     padding: 4,
     borderRadius: 6,
-    backgroundColor: _gameUIColors.buoyColors.hover
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   inlineAddButton: {
     paddingHorizontal: 12,
@@ -239,8 +239,8 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 10,
     borderWidth: 1,
     borderStyle: "dashed",
-    borderColor: _gameUIColors.buoyColors.border,
-    backgroundColor: _gameUIColors.buoyColors.input
+    borderColor: _nightTheme.night.color.border,
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   addButtonText: {
     fontSize: 13,
@@ -256,17 +256,17 @@ 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
   },
   filterItemText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
     marginRight: 8,
-    color: _gameUIColors.buoyColors.text
+    color: _nightTheme.night.color.text
   },
   filterItemMeta: {
     marginRight: 8

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

@@ -11,7 +11,7 @@ exports.Navigation = Navigation;
 var _reactNative = require("react-native");
 var _react = require("react");
 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");
 // Base ModalHeader container component
 // Note: onClose and onMinimize are now handled by WindowControls in JsModal
@@ -45,7 +45,7 @@ function Navigation({
         style: styles.navigationButton,
         children: closeIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: 20,
-          color: _gameUIColors.buoyColors.textMuted
+          color: _nightTheme.night.color.textSecondary
         })
       })]
     });
@@ -58,7 +58,7 @@ function Navigation({
       style: styles.navigationButton,
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     });
   }
@@ -71,7 +71,7 @@ function Navigation({
       style: styles.navigationButton,
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     });
   }
@@ -139,12 +139,12 @@ function HeaderSearch({
     style: styles.searchContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
       size: 12,
-      color: _gameUIColors.buoyColors.textSecondary
+      color: _nightTheme.night.color.textSecondary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
       ref: inputRef,
       style: styles.searchInput,
       placeholder: placeholder,
-      placeholderTextColor: _gameUIColors.buoyColors.textMuted,
+      placeholderTextColor: _nightTheme.night.color.placeholder,
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
@@ -154,7 +154,7 @@ function HeaderSearch({
       style: styles.searchCancelButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
         size: 12,
-        color: _gameUIColors.buoyColors.textSecondary
+        color: _nightTheme.night.color.textSecondary
       })
     })]
   });
@@ -189,7 +189,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   headerTitle: {
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
@@ -198,7 +198,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerSubtitle: {
     fontSize: 12,
-    color: _gameUIColors.buoyColors.textSecondary,
+    color: _nightTheme.night.color.textSecondary,
     marginTop: 2
   },
   headerSubtitleCentered: {
@@ -217,21 +217,21 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: _gameUIColors.buoyColors.input,
-    borderRadius: 6,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 4,
     marginHorizontal: 12,
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border
+    borderColor: _nightTheme.night.color.border
   },
   searchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: _gameUIColors.buoyColors.text,
+    color: _nightTheme.night.color.text,
     padding: 0,
     height: "100%"
   },

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

@@ -94,7 +94,9 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: _gameUIColors.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/commonjs/ui/components/StorageTypeBadge.js

@@ -7,6 +7,7 @@ exports.StorageTypeBadge = StorageTypeBadge;
 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 StorageTypeBadge({
   type,
@@ -17,13 +18,13 @@ function StorageTypeBadge({
   const getStorageColor = () => {
     switch (type) {
       case "async":
-        return _gameUIColors.buoyColors.textSecondary;
+        return _nightTheme.night.color.textSecondary;
       case "mmkv":
         return _gameUIColors.buoyColors.success;
       case "secure":
         return _gameUIColors.buoyColors.warning;
       default:
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
     }
   };
   const getStorageText = () => {

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

@@ -5,8 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabSelector = TabSelector;
 var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("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.
+ */
 function TabSelector({
   tabs,
   activeTab,
@@ -14,60 +23,69 @@ function TabSelector({
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
-    children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          children: tab.label
+        }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.underline
+        }) : null]
+      }, tab.key);
+    })
   });
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
-    backgroundColor: _gameUIColors.buoyColors.hover,
-    borderRadius: 6,
-    padding: 2,
+    backgroundColor: _nightTheme.night.color.bg,
+    borderRadius: _nightTheme.night.radius.row,
     borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.border,
-    justifyContent: "space-evenly",
-    height: 28
+    borderColor: _nightTheme.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: _nightTheme.night.radius.segment
   },
-  /**
-   * The selected tab is marked with an accent ring.
-   */
   tabButtonActive: {
-    backgroundColor: _gameUIColors.buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: _gameUIColors.buoyColors.primary
-  },
-  tabButtonInactive: {
-    backgroundColor: "transparent"
+    backgroundColor: _nightTheme.night.color.surfaceElevated
   },
   tabButtonText: {
     fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
   },
   tabButtonTextActive: {
-    color: _gameUIColors.buoyColors.primary
+    fontWeight: "600",
+    color: _nightTheme.night.color.text
   },
-  tabButtonTextInactive: {
-    color: _gameUIColors.buoyColors.textMuted
+  underline: {
+    position: "absolute",
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: _nightTheme.night.color.accent,
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
   }
 });

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

@@ -7,6 +7,7 @@ exports.ValueTypeBadge = ValueTypeBadge;
 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 ValueTypeBadge({
   type,
@@ -75,12 +76,12 @@ function ValueTypeBadge({
         return _gameUIColors.buoyColors.primary;
       case "null":
       case "undefined":
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
       case "object":
       case "array":
-        return _gameUIColors.buoyColors.textSecondary;
+        return _nightTheme.night.color.textSecondary;
       default:
-        return _gameUIColors.buoyColors.textMuted;
+        return _nightTheme.night.color.textTertiary;
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -135,12 +136,12 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _gameUIColors.buoyColors.primary + "1A"
   },
   secondaryBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textSecondary + "1A"
+    backgroundColor: _nightTheme.night.color.textSecondary + "1A"
   },
   mutedBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+    backgroundColor: _nightTheme.night.color.textTertiary + "1A"
   },
   defaultBadge: {
-    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+    backgroundColor: _nightTheme.night.color.textTertiary + "1A"
   }
 });

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

@@ -9,6 +9,7 @@ var _react = require("react");
 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");
 // ============================================================================
 // Global expandable setting — controlled via setExpandableWindowControls()
@@ -72,7 +73,8 @@ function WindowControls({
   onClose,
   onMinimize,
   onToggleMode,
-  mode
+  mode,
+  variant = "night"
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
@@ -125,15 +127,18 @@ 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] = (0, _react.useState)(false);
   const [triggerLayout, setTriggerLayout] = (0, _react.useState)(null);
   const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
@@ -267,38 +272,38 @@ function ExpandableWindowControls({
             }],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.expandedContainer,
+                style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
                 children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.Minus, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#7A5A00",
+                    color: isNight ? _nightTheme.night.color.warning : "#7A5A00",
                     strokeWidth: 2
                   })
                 }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#004A1A",
+                    color: isNight ? _nightTheme.night.color.accent : "#004A1A",
                     strokeWidth: 2
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.X, {
                     size: EXPANDED_ICON_SIZE,
-                    color: "#4A0000",
+                    color: isNight ? _nightTheme.night.color.danger : "#4A0000",
                     strokeWidth: 2
                   })
                 })]
@@ -381,5 +386,27 @@ const styles = _reactNative.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: _nightTheme.night.color.surface,
+    borderColor: _nightTheme.night.color.border
+  },
+  nightMinimizeButton: {
+    backgroundColor: _nightTheme.night.color.warningSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.warning + "59"
+  },
+  nightToggleButton: {
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  nightCloseButton: {
+    backgroundColor: _nightTheme.night.color.dangerSoft,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.danger + "59"
   }
 });

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

@@ -178,6 +178,14 @@ const buoyColors = exports.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

package/lib/commonjs/ui/night/nightTheme.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.night = exports.NIGHT_LABEL_TRACKING = void 0;
+/**
+ * "Night" design tokens — the Everlights surface language, ported.
+ *
+ * A near-black, smooth, borderless-feeling system built to sit ON TOP of the
+ * shared ToolBackground star field: one `#050505` sheet the field shows
+ * through, `#0C0C0C` cards with hairline `#1A1A1C` borders, `#161618` rows
+ * inside them, uppercase section labels OUTSIDE the cards, and a single green
+ * accent that takes dark ink.
+ *
+ * Values are lifted 1:1 from the Everlights app's `constants/theme.ts`
+ * (`Palette` + `DarkColors`) and its modal tokens — that app is the design
+ * reference, so when in doubt match it, don't invent.
+ *
+ * THE ACCENT IS ONE SEAM: everything green reads `night.color.accent*`. The
+ * family is Buoy's brand green (`buoyColors.primary`, #20C997 — kept as
+ * literals so this module stays import-free); swapping it is a seven-line
+ * change here and nowhere else. `onAccent` stays black — this green wants
+ * dark ink.
+ *
+ * SCOPE: piloted on the dial menu's settings modal (JsModal `variant="night"`
+ * + DevToolsSettingsModal). If it sticks, convert the other tools to it.
+ */
+
+const night = exports.night = {
+  color: {
+    /** The sheet itself — also the inset track of a segmented control. */
+    bg: "#050505",
+    /** A card. */
+    surface: "#0C0C0C",
+    /** A row or control inside a card. */
+    surfaceElevated: "#161618",
+    /** Hairline card border. */
+    border: "#1A1A1C",
+    /** Hairline between rows inside a card. */
+    separator: "rgba(255, 255, 255, 0.08)",
+    /** Neutral fills, lightest → strongest. */
+    fill: "rgba(255, 255, 255, 0.06)",
+    fillSecondary: "rgba(255, 255, 255, 0.08)",
+    fillTertiary: "rgba(255, 255, 255, 0.12)",
+    /** Chip resting fill — dark glass, readable over the star field. */
+    buttonSurface: "rgba(8, 10, 14, 0.85)",
+    /** Secondary/destructive button plate. */
+    button: "#1C1C1C",
+    buttonPressed: "#2C2C2E",
+    text: "#ECEDEE",
+    textSecondary: "#9BA1A6",
+    textTertiary: "#636366",
+    /** Drag handles, input placeholders. */
+    placeholder: "rgba(255, 255, 255, 0.30)",
+    /** The one accent (Buoy brand green). See the header note — one seam. */
+    accent: "#20C997",
+    accentPressed: "#1BAB80",
+    accentSoft: "rgba(32, 201, 151, 0.12)",
+    accentFill: "rgba(32, 201, 151, 0.18)",
+    accentBorder: "rgba(32, 201, 151, 0.20)",
+    accentBorderStrong: "rgba(32, 201, 151, 0.35)",
+    /** Ink on a filled accent surface — the accent takes DARK ink. */
+    onAccent: "#000000",
+    danger: "#FF3B30",
+    dangerSoft: "rgba(255, 59, 48, 0.10)",
+    warning: "#FF8329",
+    warningSoft: "rgba(255, 131, 41, 0.12)",
+    info: "#1E6DFF",
+    infoSoft: "rgba(30, 109, 255, 0.12)",
+    /** Switch thumb at rest (Everlights moon gray). */
+    knob: "#D4D8DC"
+  },
+  radius: {
+    /** Sheets and dialogs. */
+    sheet: 16,
+    /** Cards. */
+    card: 14,
+    /** Inputs and code blocks. */
+    input: 12,
+    /** Rows and inner controls; also the segmented-control track. */
+    row: 10,
+    /** Segment thumb inside a radius-10 track. */
+    segment: 8,
+    /** Small badges. */
+    badge: 6,
+    /** Zone-style chips. */
+    chip: 20,
+    /** Fully rounded pills (buttons use height/2 instead). */
+    pill: 999
+  },
+  /** Screen/sheet horizontal margin. */
+  gutter: 16,
+  /** Section labels sit 4pt in from the card edge. */
+  labelInset: 4,
+  /** Vertical rhythm between labeled card groups. */
+  groupGap: 24,
+  /** Card interior padding. */
+  cardPad: 14,
+  /** Row padding inside an edge-to-edge card. */
+  rowPadH: 16,
+  rowPadV: 14,
+  font: {
+    /** Sheet/modal titles. */
+    title: 17,
+    /** Row labels and values. */
+    row: 15,
+    /** Body copy, chip labels. */
+    body: 14,
+    /** Segmented-control labels, captions, footnotes. */
+    caption: 13,
+    /** Uppercase section labels. */
+    label: 12,
+    /** Uppercase micro labels (START/END style). */
+    micro: 11
+  }
+};
+
+/** Section labels track wide open, Everlights-style. */
+const NIGHT_LABEL_TRACKING = exports.NIGHT_LABEL_TRACKING = 0.8;