@buoy-gg/debug-borders 7.0.25 → 7.0.27

package/lib/commonjs/debug-borders/components/DebugBordersModal.js

@@ -97,7 +97,7 @@ function DebugBordersModal({
           accessibilityHint: "Tap to toggle debug borders",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Layers, {
             size: 40,
-            color: enabled ? _sharedUi.macOSColors.semantic.success : _sharedUi.macOSColors.text.secondary
+            color: enabled ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.buttonText, enabled && styles.buttonTextActive],
             children: enabled ? "Disable Borders" : "Enable Borders"
@@ -131,7 +131,9 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   content: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
     borderRadius: 16,
     padding: 32,
     width: "85%",
@@ -141,12 +143,12 @@ const styles = _reactNative.StyleSheet.create({
   title: {
     fontSize: 24,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     marginBottom: 8
   },
   description: {
     fontSize: 14,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     textAlign: "center",
     marginBottom: 24
   },
@@ -158,7 +160,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   statusLabel: {
     fontSize: 14,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "600"
   },
   statsRow: {
@@ -169,12 +171,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   statsLabel: {
     fontSize: 14,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontWeight: "600"
   },
   statsValue: {
     fontSize: 16,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontWeight: "700"
   },
   toggleContainer: {
@@ -187,28 +189,28 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     padding: 24,
     borderRadius: 16,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 2,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     minWidth: 200
   },
   buttonActive: {
-    borderColor: _sharedUi.macOSColors.semantic.success,
-    backgroundColor: `${_sharedUi.macOSColors.semantic.success}15`
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   buttonText: {
     marginTop: 12,
     fontSize: 16,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.secondary
+    color: _sharedUi.night.color.textSecondary
   },
   buttonTextActive: {
-    color: _sharedUi.macOSColors.semantic.success
+    color: _sharedUi.night.color.accent
   },
   infoBox: {
     flexDirection: "row",
     alignItems: "flex-start",
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     padding: 12,
     borderRadius: 8,
     marginBottom: 24,
@@ -217,17 +219,17 @@ const styles = _reactNative.StyleSheet.create({
   infoText: {
     flex: 1,
     fontSize: 12,
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     lineHeight: 16
   },
   closeButton: {
     paddingVertical: 12,
     paddingHorizontal: 32,
-    backgroundColor: _sharedUi.macOSColors.semantic.info,
+    backgroundColor: _sharedUi.night.color.accent,
     borderRadius: 8
   },
   closeButtonText: {
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.onAccent,
     fontSize: 16,
     fontWeight: "600"
   }

package/lib/module/debug-borders/components/DebugBordersModal.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { macOSColors, Layers, StatusBadge, StatusIndicator } from "@buoy-gg/shared-ui";
+import { night, Layers, StatusBadge, StatusIndicator } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DebugBordersManager = require("../utils/DebugBordersManager");
 
@@ -92,7 +92,7 @@ export function DebugBordersModal({
           accessibilityHint: "Tap to toggle debug borders",
           children: [/*#__PURE__*/_jsx(Layers, {
             size: 40,
-            color: enabled ? macOSColors.semantic.success : macOSColors.text.secondary
+            color: enabled ? night.color.accent : night.color.textSecondary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.buttonText, enabled && styles.buttonTextActive],
             children: enabled ? "Disable Borders" : "Enable Borders"
@@ -126,7 +126,9 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   content: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
+    borderWidth: 1,
+    borderColor: night.color.border,
     borderRadius: 16,
     padding: 32,
     width: "85%",
@@ -136,12 +138,12 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 24,
     fontWeight: "700",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     marginBottom: 8
   },
   description: {
     fontSize: 14,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     textAlign: "center",
     marginBottom: 24
   },
@@ -153,7 +155,7 @@ const styles = StyleSheet.create({
   },
   statusLabel: {
     fontSize: 14,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontWeight: "600"
   },
   statsRow: {
@@ -164,12 +166,12 @@ const styles = StyleSheet.create({
   },
   statsLabel: {
     fontSize: 14,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontWeight: "600"
   },
   statsValue: {
     fontSize: 16,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontWeight: "700"
   },
   toggleContainer: {
@@ -182,28 +184,28 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     padding: 24,
     borderRadius: 16,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 2,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     minWidth: 200
   },
   buttonActive: {
-    borderColor: macOSColors.semantic.success,
-    backgroundColor: `${macOSColors.semantic.success}15`
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft
   },
   buttonText: {
     marginTop: 12,
     fontSize: 16,
     fontWeight: "600",
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   buttonTextActive: {
-    color: macOSColors.semantic.success
+    color: night.color.accent
   },
   infoBox: {
     flexDirection: "row",
     alignItems: "flex-start",
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     padding: 12,
     borderRadius: 8,
     marginBottom: 24,
@@ -212,17 +214,17 @@ const styles = StyleSheet.create({
   infoText: {
     flex: 1,
     fontSize: 12,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     lineHeight: 16
   },
   closeButton: {
     paddingVertical: 12,
     paddingHorizontal: 32,
-    backgroundColor: macOSColors.semantic.info,
+    backgroundColor: night.color.accent,
     borderRadius: 8
   },
   closeButtonText: {
-    color: macOSColors.text.primary,
+    color: night.color.onAccent,
     fontSize: 16,
     fontWeight: "600"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/debug-borders",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "Layout debugging borders for React Native — depth-colored, touch-through, tap any label to inspect testIDs & styles. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,19 +26,19 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/core": "^7.0.25",
-    "@buoy-gg/shared-ui": "^7.0.25"
+    "@buoy-gg/core": "^7.0.27",
+    "@buoy-gg/shared-ui": "^7.0.27"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/license": "7.0.25"
+    "@buoy-gg/license": "7.0.27"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "^7.0.25"
+    "@buoy-gg/license": "^7.0.27"
   },
   "react-native-builder-bob": {
     "source": "src",