@buoy-gg/env 7.0.25 → 7.0.27

package/lib/commonjs/env/components/EnvStatsOverview.js

@@ -86,39 +86,39 @@ const styles = _reactNative.StyleSheet.create({
   },
   statCard: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     padding: 12,
     alignItems: "center",
     justifyContent: "center",
     minHeight: 64
   },
   statCardActive: {
-    borderColor: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "10"
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   statValue: {
     fontSize: 22,
     fontWeight: "700",
     fontFamily: "monospace",
     lineHeight: 26,
-    color: _sharedUi.buoyColors.text
+    color: _sharedUi.night.color.text
   },
   statValueActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   statLabel: {
     fontSize: 9,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 4,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     fontWeight: "600"
   },
   statLabelActive: {
-    color: _sharedUi.buoyColors.primary
+    color: _sharedUi.night.color.accent
   },
   percentBadge: {
     paddingHorizontal: 8,

package/lib/commonjs/env/components/EnvVarRow.js

@@ -145,14 +145,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   expandedLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontWeight: "600",
     minWidth: 60,
     fontFamily: "monospace"
   },
   expandedValue: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -164,7 +164,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   expandedDescription: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     flex: 1
   }
 });

package/lib/commonjs/env/components/EnvVarSection.js

@@ -27,7 +27,7 @@ function EnvVarSection({
           children: title
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
           count: 0,
-          color: _sharedUi.buoyColors.primary
+          color: _sharedUi.night.color.accent
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.emptySection,
@@ -46,7 +46,7 @@ function EnvVarSection({
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
         count: count,
-        color: _sharedUi.buoyColors.primary
+        color: _sharedUi.night.color.accent
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.sectionContent,
@@ -67,14 +67,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   emptySection: {
     padding: 20,
-    backgroundColor: _sharedUi.buoyColors.primary + "08",
+    backgroundColor: _sharedUi.night.color.accent + "08",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "20",
+    borderColor: _sharedUi.night.color.accent + "20",
     alignItems: "center"
   },
   emptySectionText: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontSize: 11,
     textAlign: "center",
     fontFamily: "monospace",

package/lib/commonjs/env/components/EnvVarsModal.js

@@ -143,12 +143,12 @@ function EnvVarsModal({
         style: styles.headerSearchContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
           size: 12,
-          color: _sharedUi.buoyColors.textSecondary
+          color: _sharedUi.night.color.textSecondary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
           ref: searchInputRef,
           style: styles.headerSearchInput,
           placeholder: "Search env keys...",
-          placeholderTextColor: _sharedUi.buoyColors.textMuted,
+          placeholderTextColor: _sharedUi.night.color.placeholder,
           value: searchQuery,
           onChangeText: setSearchQuery,
           autoCorrect: false,
@@ -161,7 +161,7 @@ function EnvVarsModal({
           style: styles.clearButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
             size: 12,
-            color: _sharedUi.buoyColors.textSecondary
+            color: _sharedUi.night.color.textSecondary
           })
         })]
       })
@@ -206,7 +206,7 @@ function EnvVarsModal({
       style: styles.emptyState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
         size: 32,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.emptyTitle,
         children: searchQuery ? "No results found" : "No variables"
@@ -265,7 +265,9 @@ const styles = _reactNative.StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -276,7 +278,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   contentContainer: {
     padding: 8,
@@ -286,7 +289,7 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderRadius: 6,
     paddingHorizontal: 10,
     paddingVertical: 4,
@@ -294,13 +297,13 @@ const styles = _reactNative.StyleSheet.create({
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
+    borderColor: _sharedUi.night.color.border
   },
   headerSearchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     padding: 0,
     height: '100%'
   },
@@ -321,22 +324,22 @@ const styles = _reactNative.StyleSheet.create({
   sectionTitle: {
     fontSize: 10,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     letterSpacing: 1.2,
     fontFamily: "monospace"
   },
   countBadge: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    backgroundColor: _sharedUi.night.color.accent + "15",
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 9999,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    borderColor: _sharedUi.night.color.accent + "40"
   },
   countText: {
     fontSize: 10,
     fontWeight: "500",
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace"
   },
   emptyState: {
@@ -347,13 +350,13 @@ const styles = _reactNative.StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     marginTop: 12,
     marginBottom: 8
   },
   emptySubtitle: {
     fontSize: 13,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center"
   }
 });

package/lib/module/env/components/EnvStatsOverview.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { CompactRow, buoyColors } from "@buoy-gg/shared-ui";
+import { CompactRow, night } from "@buoy-gg/shared-ui";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export function EnvStatsOverview({
   stats,
@@ -82,39 +82,39 @@ const styles = StyleSheet.create({
   },
   statCard: {
     flex: 1,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12,
     alignItems: "center",
     justifyContent: "center",
     minHeight: 64
   },
   statCardActive: {
-    borderColor: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "10"
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft
   },
   statValue: {
     fontSize: 22,
     fontWeight: "700",
     fontFamily: "monospace",
     lineHeight: 26,
-    color: buoyColors.text
+    color: night.color.text
   },
   statValueActive: {
-    color: buoyColors.primary
+    color: night.color.accent
   },
   statLabel: {
     fontSize: 9,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 4,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     fontWeight: "600"
   },
   statLabelActive: {
-    color: buoyColors.primary
+    color: night.color.accent
   },
   percentBadge: {
     paddingHorizontal: 8,

package/lib/module/env/components/EnvVarRow.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, TypeBadge, buoyColors } from "@buoy-gg/shared-ui";
+import { CompactRow, TypeBadge, buoyColors, night } from "@buoy-gg/shared-ui";
 import { getEnvVarType } from "../utils/envTypeDetector";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getStatusConfig = (status, expectedType) => {
@@ -141,14 +141,14 @@ const styles = StyleSheet.create({
   },
   expandedLabel: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontWeight: "600",
     minWidth: 60,
     fontFamily: "monospace"
   },
   expandedValue: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -160,7 +160,7 @@ const styles = StyleSheet.create({
   },
   expandedDescription: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     flex: 1
   }
 });

package/lib/module/env/components/EnvVarSection.js

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { EnvVarRow } from "./EnvVarRow";
-import { SectionHeader, buoyColors } from "@buoy-gg/shared-ui";
+import { SectionHeader, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function EnvVarSection({
   title,
@@ -23,7 +23,7 @@ export function EnvVarSection({
           children: title
         }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
           count: 0,
-          color: buoyColors.primary
+          color: night.color.accent
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: styles.emptySection,
@@ -42,7 +42,7 @@ export function EnvVarSection({
         children: title
       }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
         count: count,
-        color: buoyColors.primary
+        color: night.color.accent
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: styles.sectionContent,
@@ -63,14 +63,14 @@ const styles = StyleSheet.create({
   },
   emptySection: {
     padding: 20,
-    backgroundColor: buoyColors.primary + "08",
+    backgroundColor: night.color.accent + "08",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "20",
+    borderColor: night.color.accent + "20",
     alignItems: "center"
   },
   emptySectionText: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontSize: 11,
     textAlign: "center",
     fontFamily: "monospace",

package/lib/module/env/components/EnvVarsModal.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, Search, X, displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { JsModal, devToolsStorageKeys, ModalHeader, HeaderSearchButton, Search, X, displayValue, buoyColors, night } from "@buoy-gg/shared-ui";
 import { useCallback, useState, useRef, useEffect, useMemo } from "react";
 import { View, TextInput, TouchableOpacity, StyleSheet, ScrollView, Text } from "react-native";
 import { EnvStatsOverview } from "./EnvStatsOverview";
@@ -138,12 +138,12 @@ export function EnvVarsModal({
         style: styles.headerSearchContainer,
         children: [/*#__PURE__*/_jsx(Search, {
           size: 12,
-          color: buoyColors.textSecondary
+          color: night.color.textSecondary
         }), /*#__PURE__*/_jsx(TextInput, {
           ref: searchInputRef,
           style: styles.headerSearchInput,
           placeholder: "Search env keys...",
-          placeholderTextColor: buoyColors.textMuted,
+          placeholderTextColor: night.color.placeholder,
           value: searchQuery,
           onChangeText: setSearchQuery,
           autoCorrect: false,
@@ -156,7 +156,7 @@ export function EnvVarsModal({
           style: styles.clearButton,
           children: /*#__PURE__*/_jsx(X, {
             size: 12,
-            color: buoyColors.textSecondary
+            color: night.color.textSecondary
           })
         })]
       })
@@ -201,7 +201,7 @@ export function EnvVarsModal({
       style: styles.emptyState,
       children: [/*#__PURE__*/_jsx(Search, {
         size: 32,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
         children: searchQuery ? "No results found" : "No variables"
@@ -260,7 +260,9 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: buoyColors.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -271,7 +273,8 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   contentContainer: {
     padding: 8,
@@ -281,7 +284,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     paddingHorizontal: 10,
     paddingVertical: 4,
@@ -289,13 +292,13 @@ const styles = StyleSheet.create({
     marginVertical: 4,
     height: 32,
     borderWidth: 1,
-    borderColor: buoyColors.border
+    borderColor: night.color.border
   },
   headerSearchInput: {
     flex: 1,
     marginLeft: 8,
     fontSize: 13,
-    color: buoyColors.text,
+    color: night.color.text,
     padding: 0,
     height: '100%'
   },
@@ -316,22 +319,22 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 10,
     fontWeight: "700",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     letterSpacing: 1.2,
     fontFamily: "monospace"
   },
   countBadge: {
-    backgroundColor: buoyColors.primary + "15",
+    backgroundColor: night.color.accent + "15",
     paddingHorizontal: 8,
     paddingVertical: 2,
     borderRadius: 9999,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "40"
+    borderColor: night.color.accent + "40"
   },
   countText: {
     fontSize: 10,
     fontWeight: "500",
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   emptyState: {
@@ -342,13 +345,13 @@ const styles = StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     marginTop: 12,
     marginBottom: 8
   },
   emptySubtitle: {
     fontSize: 13,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     textAlign: "center"
   }
 });

package/lib/typescript/env/components/EnvVarsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvVarsModal.d.ts","sourceRoot":"","sources":["../../../../src/env/components/EnvVarsModal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAc,MAAM,UAAU,CAAC;AAUtD,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,GACf,EAAE,iBAAiB,sCAmQnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,+BASA"}
+{"version":3,"file":"EnvVarsModal.d.ts","sourceRoot":"","sources":["../../../../src/env/components/EnvVarsModal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAc,MAAM,UAAU,CAAC;AAUtD,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,qDAAqD;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,GACf,EAAE,iBAAiB,sCAmQnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,+BASA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/env",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "Environment variable devtool for React Native — auto-discovers EXPO_PUBLIC_ vars, validates types, scores config health. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.25",
-    "@buoy-gg/floating-tools-core": "^7.0.25"
+    "@buoy-gg/floating-tools-core": "^7.0.27",
+    "@buoy-gg/shared-ui": "^7.0.27"
   },
   "peerDependencies": {
     "react": "*",