@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -2,6 +2,7 @@
 
 import { View, Text, StyleSheet } from "react-native";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 // Badge variants
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -11,9 +12,9 @@ const STATUS_COLORS = {
   error: buoyColors.error,
   warning: buoyColors.warning,
   info: buoyColors.primary,
-  pending: buoyColors.textSecondary,
+  pending: night.color.textSecondary,
   active: buoyColors.success,
-  inactive: buoyColors.textMuted,
+  inactive: night.color.textTertiary,
   stale: buoyColors.warning,
   fetching: buoyColors.primary
 };
@@ -23,9 +24,9 @@ const METHOD_COLORS = {
   GET: buoyColors.success,
   POST: buoyColors.primary,
   PUT: buoyColors.warning,
-  PATCH: buoyColors.textSecondary,
+  PATCH: night.color.textSecondary,
   DELETE: buoyColors.error,
-  HEAD: buoyColors.textMuted,
+  HEAD: night.color.textTertiary,
   OPTIONS: buoyColors.primary
 };
 
@@ -183,13 +184,13 @@ function getTypeColor(type) {
     string: buoyColors.primary,
     number: buoyColors.primary,
     boolean: buoyColors.primary,
-    object: buoyColors.textSecondary,
-    array: buoyColors.textSecondary,
-    null: buoyColors.textMuted,
-    undefined: buoyColors.textMuted,
-    function: buoyColors.textSecondary
+    object: night.color.textSecondary,
+    array: night.color.textSecondary,
+    null: night.color.textTertiary,
+    undefined: night.color.textTertiary,
+    function: night.color.textSecondary
   };
-  return typeColors[type.toLowerCase()] || buoyColors.textMuted;
+  return typeColors[type.toLowerCase()] || night.color.textTertiary;
 }
 const styles = StyleSheet.create({
   statusDot: {

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

@@ -2,7 +2,7 @@
 
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronDown, ChevronRight } 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 CompactRow({
   statusDotColor,
@@ -24,11 +24,15 @@ export function CompactRow({
   expandedGlowColor
 }) {
   return /*#__PURE__*/_jsx(View, {
-    style: styles.rowWrapper,
+    style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
     children: /*#__PURE__*/_jsxs(View, {
       style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
-        borderColor: expandedGlowColor || buoyColors.primary,
-        shadowColor: expandedGlowColor || buoyColors.primary
+        borderColor: expandedGlowColor || 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 || night.color.accent,
+        shadowColor: expandedGlowColor || night.color.accent
       }]],
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onPress,
@@ -88,10 +92,10 @@ export function CompactRow({
               style: styles.chevronContainer,
               children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
                 size: 14,
-                color: buoyColors.textMuted
+                color: night.color.textTertiary
               }) : /*#__PURE__*/_jsx(ChevronRight, {
                 size: 14,
-                color: buoyColors.textMuted
+                color: night.color.textTertiary
               })
             })]
           })]
@@ -109,15 +113,23 @@ const styles = 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: 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: buoyColors.border + "40",
+    borderColor: 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: buoyColors.border + "40",
+    borderBottomColor: night.color.separator,
     padding: 12,
     paddingHorizontal: 12,
     transform: [{
@@ -127,12 +139,12 @@ const styles = 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: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "50",
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
     transform: [{
       scale: 1.01
     }],
-    shadowColor: buoyColors.primary,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -146,6 +158,7 @@ const styles = StyleSheet.create({
       scale: 1.02
     }],
     borderWidth: 2,
+    paddingBottom: 16,
     shadowOffset: {
       width: 0,
       height: 0
@@ -183,7 +196,7 @@ const styles = StyleSheet.create({
   },
   observerText: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 1
   },
   querySection: {
@@ -193,7 +206,7 @@ const styles = StyleSheet.create({
   queryHash: {
     fontFamily: "monospace",
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     lineHeight: 16
   },
   secondaryRow: {
@@ -204,7 +217,7 @@ const styles = StyleSheet.create({
   },
   secondaryText: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 1
   },
   rightSection: {
@@ -229,12 +242,12 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingTop: 8,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border + "20",
+    borderTopColor: night.color.separator,
     marginLeft: 24 // Align with content after status dot
   },
   bottomRightText: {
     fontSize: 9,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   }
 });

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

@@ -15,7 +15,7 @@
  */
 
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 
 /**
  * Standard card dimensions - adjust these to change all DevTools cards globally
@@ -85,23 +85,27 @@ const styles = StyleSheet.create({
     marginVertical: DEVTOOLS_CARD_CONSTANTS.marginVertical
   },
   card: {
-    backgroundColor: 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: buoyColors.border + "40",
+    borderColor: 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: buoyColors.border + "40",
+    borderBottomColor: 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: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "50",
-    shadowColor: buoyColors.primary,
+    // The night selection language: soft accent fill + accent border.
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
+    shadowColor: night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0

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

@@ -7,6 +7,7 @@ import { SectionHeader } from "./SectionHeader.js";
 import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.js";
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DynamicFilterView({
   sections = [],
@@ -60,7 +61,7 @@ export function DynamicFilterView({
         style: [styles.tabButton, currentActiveTab === tab.id ? styles.tabButtonActive : styles.tabButtonInactive],
         children: [tab.icon && /*#__PURE__*/_jsx(tab.icon, {
           size: 14,
-          color: currentActiveTab === tab.id ? buoyColors.primary : buoyColors.textMuted
+          color: currentActiveTab === tab.id ? buoyColors.primary : night.color.textTertiary
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.tabButtonText, currentActiveTab === tab.id ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
           children: tab.label
@@ -300,7 +301,7 @@ export function DynamicFilterView({
         children: [/*#__PURE__*/_jsxs(SectionHeader, {
           children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
             icon: howItWorksSection.icon || Filter,
-            color: buoyColors.textSecondary,
+            color: night.color.textSecondary,
             size: 12
           }), /*#__PURE__*/_jsx(SectionHeader.Title, {
             children: howItWorksSection.title || "HOW FILTERS WORK"
@@ -351,7 +352,8 @@ export function DynamicFilterView({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the host modal's night star field shows through.
+    backgroundColor: "transparent"
   },
   content: {
     flex: 1
@@ -366,9 +368,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     gap: 8,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border
+    borderBottomColor: night.color.border
   },
   tabButton: {
     flex: 1,
@@ -388,14 +390,14 @@ const styles = 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: buoyColors.primary + "20",
     borderColor: buoyColors.primary,
     borderWidth: 2
   },
   tabButtonInactive: {
-    backgroundColor: buoyColors.hover,
-    borderColor: buoyColors.border
+    backgroundColor: night.color.surfaceElevated,
+    borderColor: night.color.border
   },
   tabButtonText: {
     fontSize: 11,
@@ -406,7 +408,7 @@ const styles = StyleSheet.create({
     color: buoyColors.primary
   },
   tabButtonTextInactive: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   tabBadge: {
     backgroundColor: buoyColors.primary + "40",
@@ -434,7 +436,7 @@ const styles = StyleSheet.create({
     marginTop: 8
   },
   filterCard: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     // rounded-xl
     paddingHorizontal: 8,
@@ -443,7 +445,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     width: 72,
     minHeight: 68
   },
@@ -467,7 +469,7 @@ const styles = StyleSheet.create({
   filterCountActive: {
     fontSize: 14,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1,
@@ -481,14 +483,14 @@ const styles = StyleSheet.create({
   filterCountZero: {
     fontSize: 11,
     fontWeight: "500",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     marginTop: 3,
     marginBottom: 1
   },
   filterLabelCompact: {
     fontSize: 10,
-    color: buoyColors.text,
+    color: night.color.text,
     fontWeight: "600",
     textAlign: "center",
     textTransform: "capitalize",
@@ -501,14 +503,14 @@ const styles = StyleSheet.create({
   },
   filterDescriptionBottom: {
     fontSize: 8,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     textAlign: "center",
     marginTop: 2,
     lineHeight: 11
   },
   sectionDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginTop: 4,
     marginBottom: 4,
     lineHeight: 14
@@ -529,11 +531,11 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   activeFiltersSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -544,17 +546,17 @@ const styles = StyleSheet.create({
     maxHeight: 200
   },
   includeOnlySection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   includeOnlyDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -570,17 +572,17 @@ const styles = StyleSheet.create({
     maxHeight: 150
   },
   excludeFiltersSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   excludeFiltersDescription: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     paddingHorizontal: 16,
     paddingTop: 8,
     lineHeight: 14
@@ -616,7 +618,7 @@ const styles = StyleSheet.create({
   },
   filterSummaryText: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     lineHeight: 16
   },
   filterSummaryInclude: {
@@ -629,17 +631,17 @@ const styles = StyleSheet.create({
   },
   emptyStateText: {
     fontSize: 11,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontStyle: "italic",
     textAlign: "center",
     paddingVertical: 12
   },
   availableKeysSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -655,31 +657,31 @@ 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,
     marginBottom: 8
   },
   availableKeyText: {
     flex: 1,
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     marginRight: 8
   },
   howItWorksSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     marginTop: 16,
     overflow: "hidden"
   },
   howItWorksText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     lineHeight: 16,
     marginBottom: 12,
     marginTop: 8,
@@ -691,29 +693,29 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border
+    borderTopColor: night.color.border
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   },
   previewSection: {
-    backgroundColor: buoyColors.hover,
+    backgroundColor: night.color.surfaceElevated,
     // Slightly lighter to distinguish from other sections
     borderRadius: 16,
     // rounded-2xl like web
     borderWidth: 1,
-    borderColor: buoyColors.borderStrong,
+    borderColor: night.color.fillTertiary,
     marginTop: 16,
     overflow: "hidden"
   },
@@ -721,12 +723,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 16,
-    backgroundColor: buoyColors.base,
+    backgroundColor: night.color.bg,
     // Darker content area for contrast
     marginHorizontal: 12,
     marginBottom: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   }
 });

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
   }
 });