@buoy-gg/jotai 7.0.26 → 7.0.28

package/lib/commonjs/jotai/components/JotaiAtomBrowser.js

@@ -115,7 +115,7 @@ function EmptyBrowserState() {
     style: styles.emptyState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
       size: 32,
-      color: _sharedUi.macOSColors.text.muted
+      color: _sharedUi.night.color.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: styles.emptyTitle,
       children: "No atoms registered"
@@ -247,10 +247,10 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   },
   sectionCountBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary + "26",
+    backgroundColor: _sharedUi.night.color.accentFill,
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4
@@ -258,7 +258,7 @@ const styles = _reactNative.StyleSheet.create({
   sectionCountText: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   emptyState: {
@@ -266,14 +266,14 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 40
   },
   emptyTitle: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontWeight: "600",
     marginTop: 12,
     marginBottom: 6
   },
   emptyText: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 18
@@ -292,15 +292,16 @@ const expandedStyles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   dataContainer: {
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Inset display panel — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden",
     minHeight: 60
   },
   primitiveText: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 12,
     fontFamily: "monospace",
     padding: 14

package/lib/commonjs/jotai/components/JotaiAtomChangeItem.js

@@ -20,7 +20,7 @@ function getStatusLabel(category, atomLabel) {
   return atomLabel.charAt(0).toUpperCase() + atomLabel.slice(1);
 }
 function getCategoryColor(category, atomLabel) {
-  if (category === "initial") return _sharedUi.buoyColors.textMuted;
+  if (category === "initial") return _sharedUi.night.color.textTertiary;
   return _jotaiStateStore.jotaiStateStore.getAtomColor(atomLabel);
 }
 function formatCompact(value, maxLen = 20) {

package/lib/commonjs/jotai/components/JotaiAtomDetailContent.js

@@ -29,17 +29,17 @@ const VIEW_CONFIGS = [{
   key: "change",
   label: "CHANGE",
   icon: _sharedUi.FileText,
-  activeColor: _sharedUi.macOSColors.semantic.warning
+  activeColor: _sharedUi.night.color.accent
 }, {
   key: "value",
   label: "VALUE",
   icon: _sharedUi.Database,
-  activeColor: _sharedUi.macOSColors.semantic.info
+  activeColor: _sharedUi.night.color.accent
 }, {
   key: "diff",
   label: "DIFF",
   icon: _sharedUi.GitBranch,
-  activeColor: _sharedUi.macOSColors.semantic.success
+  activeColor: _sharedUi.night.color.accent
 }];
 function DetailViewToggle({
   activeView,
@@ -62,12 +62,12 @@ function DetailViewToggle({
           style: toggleStyles.cardContent,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
             size: 14,
-            color: isActive ? config.activeColor : isDisabled ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
+            color: isActive ? config.activeColor : isDisabled ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [toggleStyles.cardLabel, isActive && {
               color: config.activeColor
             }, isDisabled && {
-              color: _sharedUi.macOSColors.text.muted
+              color: _sharedUi.night.color.textTertiary
             }],
             children: config.label
           })]
@@ -84,8 +84,8 @@ function getCategoryInfo(category) {
     case "initial":
       return {
         label: "INITIAL",
-        color: _sharedUi.buoyColors.textMuted,
-        bgColor: _sharedUi.buoyColors.textMuted + "26"
+        color: _sharedUi.night.color.textTertiary,
+        bgColor: _sharedUi.night.color.textTertiary + "26"
       };
     default:
       return {
@@ -156,7 +156,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
           style: infoStyles.sectionHeaderLeft,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
             size: 14,
-            color: _sharedUi.buoyColors.primary
+            color: _sharedUi.night.color.accent
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: infoStyles.sectionTitle,
             children: "CHANGE INFO"
@@ -224,7 +224,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
           style: infoStyles.sectionHeaderLeft,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
             size: 14,
-            color: _sharedUi.buoyColors.primary
+            color: _sharedUi.night.color.accent
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: infoStyles.sectionTitle,
             children: "CHANGED KEYS"
@@ -256,7 +256,7 @@ const JotaiAtomInfoView = /*#__PURE__*/(0, _react.memo)(function JotaiAtomInfoVi
         onTouchEnd: handleCopyValue,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [infoStyles.actionButtonText, {
-            color: _sharedUi.buoyColors.primary
+            color: _sharedUi.night.color.accent
           }],
           children: "COPY VALUE"
         })
@@ -460,7 +460,8 @@ function JotaiAtomDetailFooter({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   contentArea: {
     flex: 1,
@@ -471,11 +472,11 @@ const styles = _reactNative.StyleSheet.create({
     padding: 14
   },
   contentCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 14,
     padding: 14,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   valueHeader: {
     flexDirection: "row",
@@ -485,7 +486,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   valueLabel: {
     fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     fontWeight: "600"
@@ -510,24 +511,25 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   typeText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   valueBox: {
-    backgroundColor: _sharedUi.macOSColors.background.base,
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.input,
+    borderColor: _sharedUi.night.color.border,
     padding: 8
   },
   valueText: {
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     lineHeight: 18
   },
@@ -554,21 +556,22 @@ const toggleStyles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     gap: 8,
     padding: 14,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   card: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 10,
     justifyContent: "center"
   },
   cardActive: {
     borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)"
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   cardDisabled: {
     opacity: 0.5
@@ -582,7 +585,7 @@ const toggleStyles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.5,
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   }
 });
 const infoStyles = _reactNative.StyleSheet.create({
@@ -595,12 +598,12 @@ const infoStyles = _reactNative.StyleSheet.create({
     gap: 16
   },
   card: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "4D",
+    borderColor: _sharedUi.night.color.accentBorderStrong,
     overflow: "hidden",
-    shadowColor: _sharedUi.buoyColors.primary,
+    shadowColor: _sharedUi.night.color.accent,
     shadowOffset: {
       width: 0,
       height: 0
@@ -615,8 +618,8 @@ const infoStyles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.primary + "33",
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    borderBottomColor: _sharedUi.night.color.accentBorder,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -627,7 +630,7 @@ const infoStyles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   cardContent: {
@@ -641,12 +644,12 @@ const infoStyles = _reactNative.StyleSheet.create({
   },
   infoLabel: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "500"
   },
   infoValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontWeight: "500",
     flex: 1,
     textAlign: "right",
@@ -689,12 +692,12 @@ const infoStyles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   noChangesText: {
     fontSize: 9,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   keysContainer: {
     flexDirection: "row",
@@ -705,26 +708,26 @@ const infoStyles = _reactNative.StyleSheet.create({
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary + "20",
+    backgroundColor: _sharedUi.night.color.accentSoft,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    borderColor: _sharedUi.night.color.accentBorder
   },
   keyText: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   countBadge: {
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.primary + "26"
+    backgroundColor: _sharedUi.night.color.accentFill
   },
   countText: {
     fontSize: 9,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   actionsRow: {
@@ -738,8 +741,8 @@ const infoStyles = _reactNative.StyleSheet.create({
     borderWidth: 1
   },
   actionButtonCopy: {
-    borderColor: _sharedUi.buoyColors.primary + "40",
-    backgroundColor: _sharedUi.buoyColors.primary + "15"
+    borderColor: _sharedUi.night.color.accentBorder,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   actionButtonText: {
     fontSize: 10,

package/lib/commonjs/jotai/components/JotaiEventFilterView.js

@@ -44,7 +44,7 @@ function JotaiEventFilterView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Filter,
-          color: _sharedUi.buoyColors.textSecondary,
+          color: _sharedUi.night.color.textSecondary,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "REGISTERED ATOMS"
@@ -91,7 +91,7 @@ function JotaiEventFilterView({
           onChangeText: setNewPattern,
           onSubmitEditing: handleAddPattern,
           placeholder: "Type a pattern and press Enter...",
-          placeholderTextColor: _sharedUi.macOSColors.text.muted,
+          placeholderTextColor: _sharedUi.night.color.placeholder,
           returnKeyType: "done",
           autoCapitalize: "none",
           autoCorrect: false,
@@ -103,7 +103,7 @@ function JotaiEventFilterView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Filter,
-          color: _sharedUi.buoyColors.textSecondary,
+          color: _sharedUi.night.color.textSecondary,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "ACTIVE FILTERS"
@@ -128,7 +128,7 @@ function JotaiEventFilterView({
               children: pattern
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 12,
-              color: _sharedUi.buoyColors.primary + "80"
+              color: _sharedUi.night.color.accent + "80"
             })]
           }, pattern);
         })
@@ -138,7 +138,7 @@ function JotaiEventFilterView({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
           icon: _sharedUi.Filter,
-          color: _sharedUi.buoyColors.textSecondary,
+          color: _sharedUi.night.color.textSecondary,
           size: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
           children: "HOW ATOM FILTERS WORK"
@@ -162,7 +162,8 @@ function JotaiEventFilterView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scrollContent: {
     paddingTop: 16,
@@ -171,10 +172,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 16
   },
   section: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   atomList: {
@@ -192,10 +193,10 @@ const styles = _reactNative.StyleSheet.create({
     gap: 10,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   atomRowFiltered: {
     opacity: 0.45
@@ -212,13 +213,13 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   atomRowTextFiltered: {
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     textDecorationLine: "line-through"
   },
   filteredLabel: {
     fontSize: 10,
     fontWeight: "500",
-    color: _sharedUi.macOSColors.text.disabled,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace"
   },
   addLabel: {
@@ -242,21 +243,21 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     gap: 8
   },
   patternText: {
     flex: 1,
     fontSize: 12,
     fontFamily: "monospace",
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   howItWorksText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
@@ -267,39 +268,39 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
+    borderTopColor: _sharedUi.night.color.border,
     marginTop: 12
   },
   examplesTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     lineHeight: 16
   },
   emptyText: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     paddingHorizontal: 16,
     paddingVertical: 12,
     fontFamily: "monospace"
   },
   patternInput: {
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40",
+    borderColor: _sharedUi.night.color.accentBorder,
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 8,
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   }
 });