@buoy-gg/console 7.0.26 → 7.0.27

package/src/devtools/ConsoleHeader.tsx

@@ -11,7 +11,7 @@ import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import {
   ModalHeader,
   TabSelector,
-  macOSColors,
+  night,
   Search,
   Filter,
   Trash2,
@@ -50,11 +50,11 @@ export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
       <ModalHeader.Content title="" noMargin>
         {c.searchActive ? (
           <View style={styles.searchContainer}>
-            <Search size={14} color={macOSColors.text.secondary} />
+            <Search size={14} color={night.color.textSecondary} />
             <TextInput
               style={styles.searchInput}
               placeholder="Filter logs…  /regex/  -exclude"
-              placeholderTextColor={macOSColors.text.muted}
+              placeholderTextColor={night.color.placeholder}
               value={c.query}
               onChangeText={c.setQuery}
               autoCapitalize="none"
@@ -64,7 +64,7 @@ export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
             />
             {c.query.length > 0 ? (
               <TouchableOpacity onPress={() => c.setQuery("")} style={styles.searchClear}>
-                <X size={14} color={macOSColors.text.secondary} />
+                <X size={14} color={night.color.textSecondary} />
               </TouchableOpacity>
             ) : null}
           </View>
@@ -83,7 +83,7 @@ export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
           style={[styles.actionBtn, c.searchActive && styles.actionBtnActive]}
           accessibilityLabel="Search logs"
         >
-          <Search size={14} color={c.searchActive ? macOSColors.semantic.info : macOSColors.text.secondary} />
+          <Search size={14} color={c.searchActive ? night.color.accent : night.color.textSecondary} />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -91,7 +91,7 @@ export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
           style={[styles.actionBtn, c.isLevelCustom && styles.actionBtnActive]}
           accessibilityLabel="Filters"
         >
-          <Filter size={14} color={c.isLevelCustom ? macOSColors.semantic.info : macOSColors.text.muted} />
+          <Filter size={14} color={c.isLevelCustom ? night.color.accent : night.color.textSecondary} />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -100,7 +100,7 @@ export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
           style={[styles.actionBtn, !hasRows && styles.actionBtnDisabled]}
           accessibilityLabel="Clear console"
         >
-          <Trash2 size={14} color={hasRows ? macOSColors.text.muted : macOSColors.text.disabled} />
+          <Trash2 size={14} color={hasRows ? night.color.textSecondary : night.color.textTertiary} />
         </TouchableOpacity>
       </ModalHeader.Actions>
     </ModalHeader>
@@ -112,15 +112,15 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center",
   },
   actionBtnActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "40",
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
   },
   actionBtnDisabled: {
     opacity: 0.55,
@@ -128,16 +128,16 @@ const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: night.color.surfaceElevated,
+    borderRadius: night.radius.row,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5,
   },
   searchInput: {
     flex: 1,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2,

package/src/devtools/ConsoleView.tsx

@@ -29,7 +29,9 @@ export function ConsoleView() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: consoleTheme.baseContainer,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent",
   },
   headerBar: {
     paddingHorizontal: 12,

package/src/devtools/theme.ts

@@ -1,12 +1,9 @@
 /**
- * Console palette — a dark theme matched to Buoy's shared design tokens
- * (`macOSColors` in @buoy-gg/shared-ui) so the console reads as part of the
- * tool suite, tuned for contrast per WCAG AA:
- *   - body text  #F5F5F7 on #0A0A0C   ≈ 17:1
- *   - secondary  #A1A1A6 on #0A0A0C   ≈ 7:1
- *   - links      #40CCFF on #0A0A0C   ≈ 9:1
- *   - dividers / nesting guides lightened to ~#3A3A40 so lines are clearly
- *     visible against the near-black surface.
+ * Console palette — a dark theme whose CHROME entries (surfaces, dividers,
+ * default/secondary text) come from Buoy's `night` tokens so the console reads
+ * as part of the night suite, while the Chrome-DevTools DATA colours (level
+ * rows, value types, links, ANSI) stay classic — they tell the user something
+ * about the logged data.
  * `lightTheme` below holds the exact DevTools light tokens and `consoleTheme`
  * picks between the two from the host app's surface. Every shipped theme is
  * dark today, so the light branch is currently unreachable — it is kept because
@@ -17,7 +14,7 @@
  */
 
 import { Platform } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 
 /**
  * Monospace font. On the desktop dashboard (react-native-web) the generic
@@ -72,18 +69,18 @@ export const lightTheme: ConsoleColors = {
   valuePreview: "rgba(31,31,31,0.62)",
 };
 
-/** Dark theme (active) — matched to Buoy macOSColors, contrast-tuned. */
+/** Dark theme (active) — night chrome, classic DevTools data colours. */
 export const darkTheme: ConsoleColors = {
-  baseContainer: "#0A0A0C", // macOSColors.background.base
+  baseContainer: "#0A0A0C", // desktop inline shell base (modal path is transparent)
   surfaceError: "rgba(255,69,58,0.15)", // semantic.errorBackground
   surfaceYellow: "rgba(255,235,59,0.13)", // semantic.warningBackground
-  divider: "#3A3A40", // lightened from border.default (#2D2D2F) for visible lines
-  inputBackground: "#26262A", // background.input
-  menuBackground: "#1A1A1C", // background.card
-  onSurface: "#F5F5F7", // text.primary  (~17:1)
+  divider: night.color.fillTertiary, // row hairlines + nesting guides (strong enough to stay visible)
+  inputBackground: night.color.surfaceElevated,
+  menuBackground: night.color.surface,
+  onSurface: night.color.text,
   onSurfaceYellow: "#FFE9A3", // light warm yellow on dark warning row
   onErrorContainer: "#FFB4AB", // light red on dark error row
-  tokenSubtle: "#A1A1A6", // text.secondary (~7:1 — timestamps, previews)
+  tokenSubtle: night.color.textSecondary, // timestamps, previews
   primary: "#40CCFF", // semantic.infoLight (links, ~9:1)
   valueNumber: "#FF9F1C", // orange (number + boolean)
   valueString: "#7EE787", // green (string/regexp/symbol)