@ainativekit/devtools - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.cjs

@@ -36,3 +36,3 @@ 'use strict';
 // src/styles/devtools-theme.css
-styleInject(':root {\n  --ai-color-bg-primary: #ffffff;\n  --ai-color-bg-secondary: #e8e8e8;\n  --ai-color-bg-tertiary: #f3f3f3;\n  --ai-color-text-primary: #0d0d0d;\n  --ai-color-text-secondary: #5d5d5d;\n  --ai-color-text-tertiary: #8f8f8f;\n  --ai-color-icon-primary: #0d0d0d;\n  --ai-color-icon-secondary: #5d5d5d;\n  --ai-color-icon-tertiary: #8f8f8f;\n  --ai-color-border-light: rgba(13, 13, 13, 0.05);\n  --ai-color-border-default: rgba(13, 13, 13, 0.1);\n  --ai-color-border-heavy: rgba(13, 13, 13, 0.15);\n  --ai-color-border-primary: rgba(13, 13, 13, 0.1);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, black);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 75%, black);\n  --ai-color-brand-on-primary: #ffffff;\n  --ai-color-accent-blue: #0285ff;\n  --ai-color-accent-red: #e02e2a;\n  --ai-color-accent-orange: #e25507;\n  --ai-color-accent-green: #008635;\n  --ai-state-hover-background: rgba(13, 13, 13, 0.08);\n  --ai-state-hover-opacity: 0.9;\n  --ai-state-focus-outline: #0285ff;\n  --ai-font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --ai-font-weight-normal: 400;\n  --ai-font-weight-medium: 500;\n  --ai-font-weight-semibold: 600;\n  --ai-font-size-caption: 12px;\n  --ai-line-height-caption: 16px;\n  --ai-spacing-2: 4px;\n  --ai-spacing-4: 8px;\n  --ai-spacing-6: 12px;\n  --ai-spacing-8: 16px;\n  --ai-spacing-12: 24px;\n  --ai-radius-sm: 4px;\n  --ai-radius-md: 8px;\n  --ai-radius-base: 12px;\n  --ai-radius-full: 9999px;\n}\n[data-theme=dark] {\n  --ai-color-bg-primary: #212121;\n  --ai-color-bg-secondary: #303030;\n  --ai-color-bg-tertiary: #414141;\n  --ai-color-text-primary: #ffffff;\n  --ai-color-text-secondary: #cdcdcd;\n  --ai-color-text-tertiary: #afafaf;\n  --ai-color-icon-primary: #ffffff;\n  --ai-color-icon-secondary: #cdcdcd;\n  --ai-color-icon-tertiary: #afafaf;\n  --ai-color-border-light: rgba(255, 255, 255, 0.08);\n  --ai-color-border-default: rgba(255, 255, 255, 0.12);\n  --ai-color-border-heavy: rgba(255, 255, 255, 0.16);\n  --ai-color-border-primary: rgba(255, 255, 255, 0.12);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, white);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 90%, white);\n  --ai-color-accent-red: #ff8583;\n  --ai-color-accent-orange: #ff9e6c;\n  --ai-color-accent-green: #40c977;\n  --ai-state-hover-background: rgba(255, 255, 255, 0.08);\n}\n');
+styleInject(':root {\n  --ai-color-bg-primary: #ffffff;\n  --ai-color-bg-secondary: #e8e8e8;\n  --ai-color-bg-tertiary: #f3f3f3;\n  --ai-color-text-primary: #0d0d0d;\n  --ai-color-text-secondary: #5d5d5d;\n  --ai-color-text-tertiary: #8f8f8f;\n  --ai-color-icon-primary: #0d0d0d;\n  --ai-color-icon-secondary: #5d5d5d;\n  --ai-color-icon-tertiary: #8f8f8f;\n  --ai-color-border-light: rgba(13, 13, 13, 0.05);\n  --ai-color-border-default: rgba(13, 13, 13, 0.1);\n  --ai-color-border-heavy: rgba(13, 13, 13, 0.15);\n  --ai-color-border-primary: rgba(13, 13, 13, 0.1);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, black);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 75%, black);\n  --ai-color-brand-on-primary: #ffffff;\n  --ai-color-accent-blue: #0285ff;\n  --ai-color-accent-red: #e02e2a;\n  --ai-color-accent-orange: #e25507;\n  --ai-color-accent-green: #008635;\n  --ai-state-hover-background: rgba(13, 13, 13, 0.08);\n  --ai-state-hover-opacity: 0.9;\n  --ai-state-focus-outline: #0285ff;\n  --ai-color-state-info: #0285ff;\n  --ai-color-state-info-bg: rgba(2, 133, 255, 0.1);\n  --ai-color-state-success: #008635;\n  --ai-color-state-success-bg: rgba(0, 134, 53, 0.1);\n  --ai-color-state-warning: #e25507;\n  --ai-color-state-warning-bg: rgba(226, 85, 7, 0.1);\n  --ai-color-state-error: #e02e2a;\n  --ai-color-state-error-bg: rgba(224, 46, 42, 0.1);\n  --ai-font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --ai-font-weight-normal: 400;\n  --ai-font-weight-medium: 500;\n  --ai-font-weight-semibold: 600;\n  --ai-font-size-caption: 12px;\n  --ai-line-height-caption: 16px;\n  --ai-spacing-2: 4px;\n  --ai-spacing-4: 8px;\n  --ai-spacing-6: 12px;\n  --ai-spacing-8: 16px;\n  --ai-spacing-12: 24px;\n  --ai-radius-sm: 4px;\n  --ai-radius-md: 8px;\n  --ai-radius-base: 12px;\n  --ai-radius-full: 9999px;\n}\n[data-theme=dark] {\n  --ai-color-bg-primary: #212121;\n  --ai-color-bg-secondary: #303030;\n  --ai-color-bg-tertiary: #414141;\n  --ai-color-text-primary: #ffffff;\n  --ai-color-text-secondary: #cdcdcd;\n  --ai-color-text-tertiary: #afafaf;\n  --ai-color-icon-primary: #ffffff;\n  --ai-color-icon-secondary: #cdcdcd;\n  --ai-color-icon-tertiary: #afafaf;\n  --ai-color-border-light: rgba(255, 255, 255, 0.08);\n  --ai-color-border-default: rgba(255, 255, 255, 0.12);\n  --ai-color-border-heavy: rgba(255, 255, 255, 0.16);\n  --ai-color-border-primary: rgba(255, 255, 255, 0.12);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, white);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 90%, white);\n  --ai-color-accent-red: #ff8583;\n  --ai-color-accent-orange: #ff9e6c;\n  --ai-color-accent-green: #40c977;\n  --ai-state-hover-background: rgba(255, 255, 255, 0.08);\n  --ai-color-state-info: #0285ff;\n  --ai-color-state-info-bg: rgba(2, 133, 255, 0.15);\n  --ai-color-state-success: #40c977;\n  --ai-color-state-success-bg: rgba(64, 201, 119, 0.15);\n  --ai-color-state-warning: #ff9e6c;\n  --ai-color-state-warning-bg: rgba(255, 158, 108, 0.15);\n  --ai-color-state-error: #ff8583;\n  --ai-color-state-error-bg: rgba(255, 133, 131, 0.15);\n}\n');
 var ErrorBoundary = class extends React__default.default.Component {
@@ -53,6 +53,6 @@ constructor(props) {
         padding: "20px",
-        background: "#fee",
-        border: "1px solid #fcc",
-        borderRadius: "4px",
-        color: "#c00",
+        background: "var(--ai-color-state-error-bg)",
+        border: "1px solid var(--ai-color-state-error)",
+        borderRadius: "var(--ai-radius-sm)",
+        color: "var(--ai-color-state-error)",
         fontFamily: "monospace",
@@ -68,3 +68,3 @@ fontSize: "14px"
             padding: "10px",
-            background: "#fff",
+            background: "var(--ai-color-bg-primary)",
             overflow: "auto"
@@ -80,5 +80,5 @@ }, children: this.state.error.toString() })
               padding: "5px 10px",
-              background: "#fff",
-              border: "1px solid #ccc",
-              borderRadius: "3px",
+              background: "var(--ai-color-bg-primary)",
+              border: "1px solid var(--ai-color-border-default)",
+              borderRadius: "var(--ai-radius-sm)",
               cursor: "pointer"
@@ -109,3 +109,4 @@ },
   autoLoad = true,
-  toolbarPosition = "top"
+  toolbarPosition = "top",
+  brandColors
 }) {
@@ -185,4 +186,3 @@ const normalizedWidgets = React.useMemo(() => {
     document.documentElement.setAttribute("data-theme", mockTheme);
-    const bgColor = mockTheme === "dark" ? "#1e1e1e" : "#ffffff";
-    document.body.style.backgroundColor = bgColor;
+    document.body.style.backgroundColor = "var(--ai-color-bg-primary)";
   }, [mockTheme]);
@@ -336,6 +336,6 @@ const setGlobals = (globals) => {
       right: 0,
-      background: mockTheme === "dark" ? "linear-gradient(to bottom, rgba(30,30,30,0.98), rgba(20,20,20,0.98))" : "linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(250,250,250,0.98))",
+      background: "var(--ai-color-bg-primary)",
       backdropFilter: "blur(10px)",
-      borderBottom: toolbarPosition === "top" ? mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)" : "none",
-      borderTop: toolbarPosition === "bottom" ? mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)" : "none",
+      borderBottom: toolbarPosition === "top" ? "1px solid var(--ai-color-border-default)" : "none",
+      borderTop: toolbarPosition === "bottom" ? "1px solid var(--ai-color-border-default)" : "none",
       padding: "12px 16px",
@@ -346,3 +346,3 @@ zIndex: 9999,
       gap: "10px",
-      boxShadow: toolbarPosition === "top" ? mockTheme === "dark" ? "0 4px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4)" : "0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08)" : mockTheme === "dark" ? "0 -4px 12px rgba(0,0,0,0.3), 0 -1px 3px rgba(0,0,0,0.4)" : "0 -4px 12px rgba(0,0,0,0.05), 0 -1px 3px rgba(0,0,0,0.08)"
+      boxShadow: toolbarPosition === "top" ? "0 4px 12px var(--ai-color-border-light), 0 1px 3px var(--ai-color-border-default)" : "0 -4px 12px var(--ai-color-border-light), 0 -1px 3px var(--ai-color-border-default)"
     }, children: [
@@ -360,3 +360,3 @@ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
           paddingRight: "12px",
-          borderRight: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.1)",
+          borderRight: "1px solid var(--ai-color-border-default)",
           marginRight: "4px"
@@ -368,3 +368,3 @@ }, children: [
             fontSize: "13px",
-            color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+            color: "var(--ai-color-text-primary)",
             letterSpacing: "-0.01em"
@@ -383,5 +383,5 @@ }, children: "Dev Tools" })
                 borderRadius: "6px",
-                border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                border: "1px solid var(--ai-color-border-heavy)",
+                background: "var(--ai-color-bg-primary)",
+                color: "var(--ai-color-text-primary)",
                 fontSize: "13px",
@@ -398,7 +398,7 @@ fontWeight: "500",
               onFocus: (e) => {
-                e.target.style.borderColor = "#3b82f6";
-                e.target.style.boxShadow = "0 0 0 3px rgba(59,130,246,0.1)";
+                e.target.style.borderColor = "var(--ai-color-state-info)";
+                e.target.style.boxShadow = "0 0 0 3px var(--ai-color-state-info-bg)";
               },
               onBlur: (e) => {
-                e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 e.target.style.boxShadow = "none";
@@ -415,3 +415,3 @@ },
             pointerEvents: "none",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "10px"
@@ -431,5 +431,5 @@ }, children: "\u25BC" })
                 borderRadius: "6px",
-                border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                border: "1px solid var(--ai-color-border-heavy)",
+                background: "var(--ai-color-bg-primary)",
+                color: "var(--ai-color-text-primary)",
                 fontSize: "13px",
@@ -446,7 +446,7 @@ fontWeight: "500",
               onFocus: (e) => {
-                e.target.style.borderColor = "#3b82f6";
-                e.target.style.boxShadow = "0 0 0 3px rgba(59,130,246,0.1)";
+                e.target.style.borderColor = "var(--ai-color-state-info)";
+                e.target.style.boxShadow = "0 0 0 3px var(--ai-color-state-info-bg)";
               },
               onBlur: (e) => {
-                e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 e.target.style.boxShadow = "none";
@@ -466,3 +466,3 @@ },
             pointerEvents: "none",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "10px"
@@ -474,3 +474,3 @@ }, children: "\u25BC" })
           height: "20px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+          background: "var(--ai-color-border-default)",
           margin: "0 4px"
@@ -481,3 +481,3 @@ } }),
           gap: "4px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)",
+          background: "var(--ai-color-border-light)",
           padding: "3px",
@@ -495,4 +495,4 @@ borderRadius: "8px"
                 border: "none",
-                background: widgetState === "loading" ? "#3b82f6" : "transparent",
-                color: widgetState === "loading" ? "white" : mockTheme === "dark" ? "#aaa" : "#555",
+                background: widgetState === "loading" ? "var(--ai-color-state-info)" : "transparent",
+                color: widgetState === "loading" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -506,4 +506,4 @@ fontWeight: "500",
                 if (widgetState !== "loading" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(59,130,246,0.1)";
-                  e.currentTarget.style.color = "#3b82f6";
+                  e.currentTarget.style.background = "var(--ai-color-state-info-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-info)";
                 }
@@ -514,3 +514,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -530,4 +530,4 @@ },
                 border: "none",
-                background: widgetState === "data" && !isLoading ? "#10b981" : "transparent",
-                color: widgetState === "data" && !isLoading ? "white" : mockTheme === "dark" ? "#aaa" : "#555",
+                background: widgetState === "data" && !isLoading ? "var(--ai-color-state-success)" : "transparent",
+                color: widgetState === "data" && !isLoading ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -541,4 +541,4 @@ fontWeight: "500",
                 if (widgetState !== "data" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(16,185,129,0.1)";
-                  e.currentTarget.style.color = "#10b981";
+                  e.currentTarget.style.background = "var(--ai-color-state-success-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-success)";
                 }
@@ -549,3 +549,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -566,3 +566,3 @@ },
                 background: "transparent",
-                color: mockTheme === "dark" ? "#aaa" : "#555",
+                color: "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -576,4 +576,4 @@ fontWeight: "500",
                 if (!e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(16,185,129,0.1)";
-                  e.currentTarget.style.color = "#10b981";
+                  e.currentTarget.style.background = "var(--ai-color-state-success-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-success)";
                 }
@@ -583,3 +583,3 @@ },
                 e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                e.currentTarget.style.color = "var(--ai-color-text-secondary)";
               },
@@ -598,4 +598,4 @@ children: "\u23F1\uFE0F Delayed"
                 border: "none",
-                background: widgetState === "empty" ? "#f59e0b" : "transparent",
-                color: widgetState === "empty" ? "white" : "#555",
+                background: widgetState === "empty" ? "var(--ai-color-state-warning)" : "transparent",
+                color: widgetState === "empty" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -609,4 +609,4 @@ fontWeight: "500",
                 if (widgetState !== "empty" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(245,158,11,0.1)";
-                  e.currentTarget.style.color = "#f59e0b";
+                  e.currentTarget.style.background = "var(--ai-color-state-warning-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-warning)";
                 }
@@ -617,3 +617,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -633,4 +633,4 @@ },
                 border: "none",
-                background: widgetState === "error" ? "#ef4444" : "transparent",
-                color: widgetState === "error" ? "white" : "#555",
+                background: widgetState === "error" ? "var(--ai-color-state-error)" : "transparent",
+                color: widgetState === "error" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -644,4 +644,4 @@ fontWeight: "500",
                 if (widgetState !== "error" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(239,68,68,0.1)";
-                  e.currentTarget.style.color = "#ef4444";
+                  e.currentTarget.style.background = "var(--ai-color-state-error-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-error)";
                 }
@@ -652,3 +652,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -663,3 +663,3 @@ },
           height: "20px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+          background: "var(--ai-color-border-default)",
           margin: "0 4px"
@@ -675,4 +675,4 @@ } }),
               borderRadius: "6px",
-              border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-              background: mockTheme === "dark" ? "#2a2a2a" : "white",
+              border: "1px solid var(--ai-color-border-heavy)",
+              background: "var(--ai-color-bg-primary)",
               fontSize: "14px",
@@ -686,8 +686,8 @@ cursor: "pointer",
             onMouseEnter: (e) => {
-              e.currentTarget.style.background = mockTheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)";
-              e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.2)";
+              e.currentTarget.style.background = "var(--ai-state-hover-background)";
+              e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
             },
             onMouseLeave: (e) => {
-              e.currentTarget.style.background = mockTheme === "dark" ? "#2a2a2a" : "white";
-              e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+              e.currentTarget.style.background = "var(--ai-color-bg-primary)";
+              e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
             },
@@ -706,4 +706,4 @@ children: mockTheme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
               border: "none",
-              background: showAdvancedSettings ? "rgba(59,130,246,0.1)" : "transparent",
-              color: showAdvancedSettings ? "#3b82f6" : mockTheme === "dark" ? "#aaa" : "#666",
+              background: showAdvancedSettings ? "var(--ai-color-state-info-bg)" : "transparent",
+              color: showAdvancedSettings ? "var(--ai-color-state-info)" : "var(--ai-color-text-secondary)",
               fontSize: "12px",
@@ -718,4 +718,4 @@ fontWeight: "500",
             onMouseEnter: (e) => {
-              e.currentTarget.style.background = "rgba(59,130,246,0.1)";
-              e.currentTarget.style.color = "#3b82f6";
+              e.currentTarget.style.background = "var(--ai-color-state-info-bg)";
+              e.currentTarget.style.color = "var(--ai-color-state-info)";
             },
@@ -725,3 +725,3 @@ onMouseLeave: (e) => {
                 e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#666";
+                e.currentTarget.style.color = "var(--ai-color-text-secondary)";
               }
@@ -746,3 +746,3 @@ },
         paddingTop: "8px",
-        borderTop: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.08)" : "1px solid rgba(0,0,0,0.06)"
+        borderTop: "1px solid var(--ai-color-border-light)"
       }, children: [
@@ -754,3 +754,3 @@ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
         }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: mockTheme === "dark" ? "#aaa" : "#666", fontWeight: "500" }, children: "Device:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: "var(--ai-color-text-secondary)", fontWeight: "500" }, children: "Device:" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
@@ -766,5 +766,5 @@ /* @__PURE__ */ jsxRuntime.jsxs(
                   borderRadius: "6px",
-                  border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                  background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                  color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                  border: "1px solid var(--ai-color-border-heavy)",
+                  background: "var(--ai-color-bg-primary)",
+                  color: "var(--ai-color-text-primary)",
                   fontSize: "12px",
@@ -780,6 +780,6 @@ fontWeight: "500",
                 onFocus: (e) => {
-                  e.target.style.borderColor = "#3b82f6";
+                  e.target.style.borderColor = "var(--ai-color-state-info)";
                 },
                 onBlur: (e) => {
-                  e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                  e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 },
@@ -799,3 +799,3 @@ children: [
               pointerEvents: "none",
-              color: mockTheme === "dark" ? "#aaa" : "#666",
+              color: "var(--ai-color-text-secondary)",
               fontSize: "9px"
@@ -814,5 +814,5 @@ }, children: "\u25BC" })
               border: "1px solid",
-              borderColor: debugMode === "border" ? "#ef4444" : mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)",
-              background: debugMode === "border" ? "rgba(239,68,68,0.1)" : mockTheme === "dark" ? "#2a2a2a" : "white",
-              color: debugMode === "border" ? "#ef4444" : mockTheme === "dark" ? "#aaa" : "#666",
+              borderColor: debugMode === "border" ? "var(--ai-color-state-error)" : "var(--ai-color-border-heavy)",
+              background: debugMode === "border" ? "var(--ai-color-state-error-bg)" : "var(--ai-color-bg-primary)",
+              color: debugMode === "border" ? "var(--ai-color-state-error)" : "var(--ai-color-text-secondary)",
               fontSize: "12px",
@@ -825,4 +825,4 @@ fontWeight: "500",
               if (debugMode !== "border") {
-                e.currentTarget.style.borderColor = "#ef4444";
-                e.currentTarget.style.background = "rgba(239,68,68,0.05)";
+                e.currentTarget.style.borderColor = "var(--ai-color-state-error)";
+                e.currentTarget.style.background = "var(--ai-color-state-error-bg)";
               }
@@ -832,4 +832,4 @@ },
               if (debugMode !== "border") {
-                e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
-                e.currentTarget.style.background = mockTheme === "dark" ? "#2a2a2a" : "white";
+                e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
+                e.currentTarget.style.background = "var(--ai-color-bg-primary)";
               }
@@ -852,4 +852,4 @@ },
             borderRadius: "12px",
-            background: "rgba(59,130,246,0.1)",
-            color: "#3b82f6",
+            background: "var(--ai-color-state-info-bg)",
+            color: "var(--ai-color-state-info)",
             fontSize: "11px",
@@ -862,7 +862,7 @@ fontWeight: "600",
             borderRadius: "12px",
-            background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.5)",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            background: "var(--ai-color-border-light)",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "11px",
             fontWeight: "600",
-            border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)"
+            border: "1px solid var(--ai-color-border-light)"
           }, children: [
@@ -876,4 +876,4 @@ mockTheme === "dark" ? "\u{1F319}" : "\u2600\uFE0F",
             borderRadius: "12px",
-            background: mockTheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            background: "var(--ai-state-hover-background)",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "11px",
@@ -898,3 +898,3 @@ fontWeight: "600"
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(ActiveComponent, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { brandColors, children: /* @__PURE__ */ jsxRuntime.jsx(ActiveComponent, {}) }) }),
       debugMode === "border" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -901,0 +901,0 @@ "div",

dist/index.d.cts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Theme } from '@ainativekit/ui';
+import { Theme, BrandColorConfig } from '@ainativekit/ui';
 export { DisplayMode, OpenAiGlobals, SetGlobalsEvent, Theme } from '@ainativekit/ui';
@@ -98,2 +98,14 @@
     toolbarPosition?: 'top' | 'bottom';
+    /**
+     * Custom brand colors to apply to widgets
+     * Supports light/dark mode variants
+     * @example
+     * ```typescript
+     * brandColors: {
+     *   primary: { light: '#137044', dark: '#71D19E' },
+     *   success: '#10b981'
+     * }
+     * ```
+     */
+    brandColors?: BrandColorConfig;
 }
@@ -121,3 +133,3 @@ /**
 
-declare function DevContainer({ children, dataLoader, emptyDataLoader, widgets, dataLoaders, emptyDataLoaders, defaultDataLoader, defaultWidget, loadingDelay, theme: initialTheme, autoLoad, toolbarPosition, }: DevContainerProps): react_jsx_runtime.JSX.Element;
+declare function DevContainer({ children, dataLoader, emptyDataLoader, widgets, dataLoaders, emptyDataLoaders, defaultDataLoader, defaultWidget, loadingDelay, theme: initialTheme, autoLoad, toolbarPosition, brandColors, }: DevContainerProps): react_jsx_runtime.JSX.Element;
 
@@ -124,0 +136,0 @@ /**

dist/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Theme } from '@ainativekit/ui';
+import { Theme, BrandColorConfig } from '@ainativekit/ui';
 export { DisplayMode, OpenAiGlobals, SetGlobalsEvent, Theme } from '@ainativekit/ui';
@@ -98,2 +98,14 @@
     toolbarPosition?: 'top' | 'bottom';
+    /**
+     * Custom brand colors to apply to widgets
+     * Supports light/dark mode variants
+     * @example
+     * ```typescript
+     * brandColors: {
+     *   primary: { light: '#137044', dark: '#71D19E' },
+     *   success: '#10b981'
+     * }
+     * ```
+     */
+    brandColors?: BrandColorConfig;
 }
@@ -121,3 +133,3 @@ /**
 
-declare function DevContainer({ children, dataLoader, emptyDataLoader, widgets, dataLoaders, emptyDataLoaders, defaultDataLoader, defaultWidget, loadingDelay, theme: initialTheme, autoLoad, toolbarPosition, }: DevContainerProps): react_jsx_runtime.JSX.Element;
+declare function DevContainer({ children, dataLoader, emptyDataLoader, widgets, dataLoaders, emptyDataLoaders, defaultDataLoader, defaultWidget, loadingDelay, theme: initialTheme, autoLoad, toolbarPosition, brandColors, }: DevContainerProps): react_jsx_runtime.JSX.Element;
 
@@ -124,0 +136,0 @@ /**

dist/index.js

 import React, { useMemo, useState, useEffect } from 'react';
-import { SetGlobalsEvent } from '@ainativekit/ui';
+import { ThemeProvider, SetGlobalsEvent } from '@ainativekit/ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -30,3 +30,3 @@
 // src/styles/devtools-theme.css
-styleInject(':root {\n  --ai-color-bg-primary: #ffffff;\n  --ai-color-bg-secondary: #e8e8e8;\n  --ai-color-bg-tertiary: #f3f3f3;\n  --ai-color-text-primary: #0d0d0d;\n  --ai-color-text-secondary: #5d5d5d;\n  --ai-color-text-tertiary: #8f8f8f;\n  --ai-color-icon-primary: #0d0d0d;\n  --ai-color-icon-secondary: #5d5d5d;\n  --ai-color-icon-tertiary: #8f8f8f;\n  --ai-color-border-light: rgba(13, 13, 13, 0.05);\n  --ai-color-border-default: rgba(13, 13, 13, 0.1);\n  --ai-color-border-heavy: rgba(13, 13, 13, 0.15);\n  --ai-color-border-primary: rgba(13, 13, 13, 0.1);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, black);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 75%, black);\n  --ai-color-brand-on-primary: #ffffff;\n  --ai-color-accent-blue: #0285ff;\n  --ai-color-accent-red: #e02e2a;\n  --ai-color-accent-orange: #e25507;\n  --ai-color-accent-green: #008635;\n  --ai-state-hover-background: rgba(13, 13, 13, 0.08);\n  --ai-state-hover-opacity: 0.9;\n  --ai-state-focus-outline: #0285ff;\n  --ai-font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --ai-font-weight-normal: 400;\n  --ai-font-weight-medium: 500;\n  --ai-font-weight-semibold: 600;\n  --ai-font-size-caption: 12px;\n  --ai-line-height-caption: 16px;\n  --ai-spacing-2: 4px;\n  --ai-spacing-4: 8px;\n  --ai-spacing-6: 12px;\n  --ai-spacing-8: 16px;\n  --ai-spacing-12: 24px;\n  --ai-radius-sm: 4px;\n  --ai-radius-md: 8px;\n  --ai-radius-base: 12px;\n  --ai-radius-full: 9999px;\n}\n[data-theme=dark] {\n  --ai-color-bg-primary: #212121;\n  --ai-color-bg-secondary: #303030;\n  --ai-color-bg-tertiary: #414141;\n  --ai-color-text-primary: #ffffff;\n  --ai-color-text-secondary: #cdcdcd;\n  --ai-color-text-tertiary: #afafaf;\n  --ai-color-icon-primary: #ffffff;\n  --ai-color-icon-secondary: #cdcdcd;\n  --ai-color-icon-tertiary: #afafaf;\n  --ai-color-border-light: rgba(255, 255, 255, 0.08);\n  --ai-color-border-default: rgba(255, 255, 255, 0.12);\n  --ai-color-border-heavy: rgba(255, 255, 255, 0.16);\n  --ai-color-border-primary: rgba(255, 255, 255, 0.12);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, white);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 90%, white);\n  --ai-color-accent-red: #ff8583;\n  --ai-color-accent-orange: #ff9e6c;\n  --ai-color-accent-green: #40c977;\n  --ai-state-hover-background: rgba(255, 255, 255, 0.08);\n}\n');
+styleInject(':root {\n  --ai-color-bg-primary: #ffffff;\n  --ai-color-bg-secondary: #e8e8e8;\n  --ai-color-bg-tertiary: #f3f3f3;\n  --ai-color-text-primary: #0d0d0d;\n  --ai-color-text-secondary: #5d5d5d;\n  --ai-color-text-tertiary: #8f8f8f;\n  --ai-color-icon-primary: #0d0d0d;\n  --ai-color-icon-secondary: #5d5d5d;\n  --ai-color-icon-tertiary: #8f8f8f;\n  --ai-color-border-light: rgba(13, 13, 13, 0.05);\n  --ai-color-border-default: rgba(13, 13, 13, 0.1);\n  --ai-color-border-heavy: rgba(13, 13, 13, 0.15);\n  --ai-color-border-primary: rgba(13, 13, 13, 0.1);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, black);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 75%, black);\n  --ai-color-brand-on-primary: #ffffff;\n  --ai-color-accent-blue: #0285ff;\n  --ai-color-accent-red: #e02e2a;\n  --ai-color-accent-orange: #e25507;\n  --ai-color-accent-green: #008635;\n  --ai-state-hover-background: rgba(13, 13, 13, 0.08);\n  --ai-state-hover-opacity: 0.9;\n  --ai-state-focus-outline: #0285ff;\n  --ai-color-state-info: #0285ff;\n  --ai-color-state-info-bg: rgba(2, 133, 255, 0.1);\n  --ai-color-state-success: #008635;\n  --ai-color-state-success-bg: rgba(0, 134, 53, 0.1);\n  --ai-color-state-warning: #e25507;\n  --ai-color-state-warning-bg: rgba(226, 85, 7, 0.1);\n  --ai-color-state-error: #e02e2a;\n  --ai-color-state-error-bg: rgba(224, 46, 42, 0.1);\n  --ai-font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --ai-font-weight-normal: 400;\n  --ai-font-weight-medium: 500;\n  --ai-font-weight-semibold: 600;\n  --ai-font-size-caption: 12px;\n  --ai-line-height-caption: 16px;\n  --ai-spacing-2: 4px;\n  --ai-spacing-4: 8px;\n  --ai-spacing-6: 12px;\n  --ai-spacing-8: 16px;\n  --ai-spacing-12: 24px;\n  --ai-radius-sm: 4px;\n  --ai-radius-md: 8px;\n  --ai-radius-base: 12px;\n  --ai-radius-full: 9999px;\n}\n[data-theme=dark] {\n  --ai-color-bg-primary: #212121;\n  --ai-color-bg-secondary: #303030;\n  --ai-color-bg-tertiary: #414141;\n  --ai-color-text-primary: #ffffff;\n  --ai-color-text-secondary: #cdcdcd;\n  --ai-color-text-tertiary: #afafaf;\n  --ai-color-icon-primary: #ffffff;\n  --ai-color-icon-secondary: #cdcdcd;\n  --ai-color-icon-tertiary: #afafaf;\n  --ai-color-border-light: rgba(255, 255, 255, 0.08);\n  --ai-color-border-default: rgba(255, 255, 255, 0.12);\n  --ai-color-border-heavy: rgba(255, 255, 255, 0.16);\n  --ai-color-border-primary: rgba(255, 255, 255, 0.12);\n  --ai-color-brand-primary: #0285ff;\n  --ai-color-brand-primary-hover: color-mix(in srgb, #0285ff 85%, white);\n  --ai-color-brand-primary-active: color-mix(in srgb, #0285ff 90%, white);\n  --ai-color-accent-red: #ff8583;\n  --ai-color-accent-orange: #ff9e6c;\n  --ai-color-accent-green: #40c977;\n  --ai-state-hover-background: rgba(255, 255, 255, 0.08);\n  --ai-color-state-info: #0285ff;\n  --ai-color-state-info-bg: rgba(2, 133, 255, 0.15);\n  --ai-color-state-success: #40c977;\n  --ai-color-state-success-bg: rgba(64, 201, 119, 0.15);\n  --ai-color-state-warning: #ff9e6c;\n  --ai-color-state-warning-bg: rgba(255, 158, 108, 0.15);\n  --ai-color-state-error: #ff8583;\n  --ai-color-state-error-bg: rgba(255, 133, 131, 0.15);\n}\n');
 var ErrorBoundary = class extends React.Component {
@@ -47,6 +47,6 @@ constructor(props) {
         padding: "20px",
-        background: "#fee",
-        border: "1px solid #fcc",
-        borderRadius: "4px",
-        color: "#c00",
+        background: "var(--ai-color-state-error-bg)",
+        border: "1px solid var(--ai-color-state-error)",
+        borderRadius: "var(--ai-radius-sm)",
+        color: "var(--ai-color-state-error)",
         fontFamily: "monospace",
@@ -62,3 +62,3 @@ fontSize: "14px"
             padding: "10px",
-            background: "#fff",
+            background: "var(--ai-color-bg-primary)",
             overflow: "auto"
@@ -74,5 +74,5 @@ }, children: this.state.error.toString() })
               padding: "5px 10px",
-              background: "#fff",
-              border: "1px solid #ccc",
-              borderRadius: "3px",
+              background: "var(--ai-color-bg-primary)",
+              border: "1px solid var(--ai-color-border-default)",
+              borderRadius: "var(--ai-radius-sm)",
               cursor: "pointer"
@@ -103,3 +103,4 @@ },
   autoLoad = true,
-  toolbarPosition = "top"
+  toolbarPosition = "top",
+  brandColors
 }) {
@@ -179,4 +180,3 @@ const normalizedWidgets = useMemo(() => {
     document.documentElement.setAttribute("data-theme", mockTheme);
-    const bgColor = mockTheme === "dark" ? "#1e1e1e" : "#ffffff";
-    document.body.style.backgroundColor = bgColor;
+    document.body.style.backgroundColor = "var(--ai-color-bg-primary)";
   }, [mockTheme]);
@@ -330,6 +330,6 @@ const setGlobals = (globals) => {
       right: 0,
-      background: mockTheme === "dark" ? "linear-gradient(to bottom, rgba(30,30,30,0.98), rgba(20,20,20,0.98))" : "linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(250,250,250,0.98))",
+      background: "var(--ai-color-bg-primary)",
       backdropFilter: "blur(10px)",
-      borderBottom: toolbarPosition === "top" ? mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)" : "none",
-      borderTop: toolbarPosition === "bottom" ? mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)" : "none",
+      borderBottom: toolbarPosition === "top" ? "1px solid var(--ai-color-border-default)" : "none",
+      borderTop: toolbarPosition === "bottom" ? "1px solid var(--ai-color-border-default)" : "none",
       padding: "12px 16px",
@@ -340,3 +340,3 @@ zIndex: 9999,
       gap: "10px",
-      boxShadow: toolbarPosition === "top" ? mockTheme === "dark" ? "0 4px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4)" : "0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08)" : mockTheme === "dark" ? "0 -4px 12px rgba(0,0,0,0.3), 0 -1px 3px rgba(0,0,0,0.4)" : "0 -4px 12px rgba(0,0,0,0.05), 0 -1px 3px rgba(0,0,0,0.08)"
+      boxShadow: toolbarPosition === "top" ? "0 4px 12px var(--ai-color-border-light), 0 1px 3px var(--ai-color-border-default)" : "0 -4px 12px var(--ai-color-border-light), 0 -1px 3px var(--ai-color-border-default)"
     }, children: [
@@ -354,3 +354,3 @@ /* @__PURE__ */ jsxs("div", { style: {
           paddingRight: "12px",
-          borderRight: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.1)",
+          borderRight: "1px solid var(--ai-color-border-default)",
           marginRight: "4px"
@@ -362,3 +362,3 @@ }, children: [
             fontSize: "13px",
-            color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+            color: "var(--ai-color-text-primary)",
             letterSpacing: "-0.01em"
@@ -377,5 +377,5 @@ }, children: "Dev Tools" })
                 borderRadius: "6px",
-                border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                border: "1px solid var(--ai-color-border-heavy)",
+                background: "var(--ai-color-bg-primary)",
+                color: "var(--ai-color-text-primary)",
                 fontSize: "13px",
@@ -392,7 +392,7 @@ fontWeight: "500",
               onFocus: (e) => {
-                e.target.style.borderColor = "#3b82f6";
-                e.target.style.boxShadow = "0 0 0 3px rgba(59,130,246,0.1)";
+                e.target.style.borderColor = "var(--ai-color-state-info)";
+                e.target.style.boxShadow = "0 0 0 3px var(--ai-color-state-info-bg)";
               },
               onBlur: (e) => {
-                e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 e.target.style.boxShadow = "none";
@@ -409,3 +409,3 @@ },
             pointerEvents: "none",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "10px"
@@ -425,5 +425,5 @@ }, children: "\u25BC" })
                 borderRadius: "6px",
-                border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                border: "1px solid var(--ai-color-border-heavy)",
+                background: "var(--ai-color-bg-primary)",
+                color: "var(--ai-color-text-primary)",
                 fontSize: "13px",
@@ -440,7 +440,7 @@ fontWeight: "500",
               onFocus: (e) => {
-                e.target.style.borderColor = "#3b82f6";
-                e.target.style.boxShadow = "0 0 0 3px rgba(59,130,246,0.1)";
+                e.target.style.borderColor = "var(--ai-color-state-info)";
+                e.target.style.boxShadow = "0 0 0 3px var(--ai-color-state-info-bg)";
               },
               onBlur: (e) => {
-                e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 e.target.style.boxShadow = "none";
@@ -460,3 +460,3 @@ },
             pointerEvents: "none",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "10px"
@@ -468,3 +468,3 @@ }, children: "\u25BC" })
           height: "20px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+          background: "var(--ai-color-border-default)",
           margin: "0 4px"
@@ -475,3 +475,3 @@ } }),
           gap: "4px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)",
+          background: "var(--ai-color-border-light)",
           padding: "3px",
@@ -489,4 +489,4 @@ borderRadius: "8px"
                 border: "none",
-                background: widgetState === "loading" ? "#3b82f6" : "transparent",
-                color: widgetState === "loading" ? "white" : mockTheme === "dark" ? "#aaa" : "#555",
+                background: widgetState === "loading" ? "var(--ai-color-state-info)" : "transparent",
+                color: widgetState === "loading" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -500,4 +500,4 @@ fontWeight: "500",
                 if (widgetState !== "loading" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(59,130,246,0.1)";
-                  e.currentTarget.style.color = "#3b82f6";
+                  e.currentTarget.style.background = "var(--ai-color-state-info-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-info)";
                 }
@@ -508,3 +508,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -524,4 +524,4 @@ },
                 border: "none",
-                background: widgetState === "data" && !isLoading ? "#10b981" : "transparent",
-                color: widgetState === "data" && !isLoading ? "white" : mockTheme === "dark" ? "#aaa" : "#555",
+                background: widgetState === "data" && !isLoading ? "var(--ai-color-state-success)" : "transparent",
+                color: widgetState === "data" && !isLoading ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -535,4 +535,4 @@ fontWeight: "500",
                 if (widgetState !== "data" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(16,185,129,0.1)";
-                  e.currentTarget.style.color = "#10b981";
+                  e.currentTarget.style.background = "var(--ai-color-state-success-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-success)";
                 }
@@ -543,3 +543,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -560,3 +560,3 @@ },
                 background: "transparent",
-                color: mockTheme === "dark" ? "#aaa" : "#555",
+                color: "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -570,4 +570,4 @@ fontWeight: "500",
                 if (!e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(16,185,129,0.1)";
-                  e.currentTarget.style.color = "#10b981";
+                  e.currentTarget.style.background = "var(--ai-color-state-success-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-success)";
                 }
@@ -577,3 +577,3 @@ },
                 e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                e.currentTarget.style.color = "var(--ai-color-text-secondary)";
               },
@@ -592,4 +592,4 @@ children: "\u23F1\uFE0F Delayed"
                 border: "none",
-                background: widgetState === "empty" ? "#f59e0b" : "transparent",
-                color: widgetState === "empty" ? "white" : "#555",
+                background: widgetState === "empty" ? "var(--ai-color-state-warning)" : "transparent",
+                color: widgetState === "empty" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -603,4 +603,4 @@ fontWeight: "500",
                 if (widgetState !== "empty" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(245,158,11,0.1)";
-                  e.currentTarget.style.color = "#f59e0b";
+                  e.currentTarget.style.background = "var(--ai-color-state-warning-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-warning)";
                 }
@@ -611,3 +611,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -627,4 +627,4 @@ },
                 border: "none",
-                background: widgetState === "error" ? "#ef4444" : "transparent",
-                color: widgetState === "error" ? "white" : "#555",
+                background: widgetState === "error" ? "var(--ai-color-state-error)" : "transparent",
+                color: widgetState === "error" ? "var(--ai-color-brand-on-primary)" : "var(--ai-color-text-secondary)",
                 fontSize: "12px",
@@ -638,4 +638,4 @@ fontWeight: "500",
                 if (widgetState !== "error" && !e.currentTarget.disabled) {
-                  e.currentTarget.style.background = "rgba(239,68,68,0.1)";
-                  e.currentTarget.style.color = "#ef4444";
+                  e.currentTarget.style.background = "var(--ai-color-state-error-bg)";
+                  e.currentTarget.style.color = "var(--ai-color-state-error)";
                 }
@@ -646,3 +646,3 @@ },
                   e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#555";
+                  e.currentTarget.style.color = "var(--ai-color-text-secondary)";
                 }
@@ -657,3 +657,3 @@ },
           height: "20px",
-          background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
+          background: "var(--ai-color-border-default)",
           margin: "0 4px"
@@ -669,4 +669,4 @@ } }),
               borderRadius: "6px",
-              border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-              background: mockTheme === "dark" ? "#2a2a2a" : "white",
+              border: "1px solid var(--ai-color-border-heavy)",
+              background: "var(--ai-color-bg-primary)",
               fontSize: "14px",
@@ -680,8 +680,8 @@ cursor: "pointer",
             onMouseEnter: (e) => {
-              e.currentTarget.style.background = mockTheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)";
-              e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.2)";
+              e.currentTarget.style.background = "var(--ai-state-hover-background)";
+              e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
             },
             onMouseLeave: (e) => {
-              e.currentTarget.style.background = mockTheme === "dark" ? "#2a2a2a" : "white";
-              e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+              e.currentTarget.style.background = "var(--ai-color-bg-primary)";
+              e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
             },
@@ -700,4 +700,4 @@ children: mockTheme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
               border: "none",
-              background: showAdvancedSettings ? "rgba(59,130,246,0.1)" : "transparent",
-              color: showAdvancedSettings ? "#3b82f6" : mockTheme === "dark" ? "#aaa" : "#666",
+              background: showAdvancedSettings ? "var(--ai-color-state-info-bg)" : "transparent",
+              color: showAdvancedSettings ? "var(--ai-color-state-info)" : "var(--ai-color-text-secondary)",
               fontSize: "12px",
@@ -712,4 +712,4 @@ fontWeight: "500",
             onMouseEnter: (e) => {
-              e.currentTarget.style.background = "rgba(59,130,246,0.1)";
-              e.currentTarget.style.color = "#3b82f6";
+              e.currentTarget.style.background = "var(--ai-color-state-info-bg)";
+              e.currentTarget.style.color = "var(--ai-color-state-info)";
             },
@@ -719,3 +719,3 @@ onMouseLeave: (e) => {
                 e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = mockTheme === "dark" ? "#aaa" : "#666";
+                e.currentTarget.style.color = "var(--ai-color-text-secondary)";
               }
@@ -740,3 +740,3 @@ },
         paddingTop: "8px",
-        borderTop: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.08)" : "1px solid rgba(0,0,0,0.06)"
+        borderTop: "1px solid var(--ai-color-border-light)"
       }, children: [
@@ -748,3 +748,3 @@ /* @__PURE__ */ jsxs("div", { style: {
         }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: mockTheme === "dark" ? "#aaa" : "#666", fontWeight: "500" }, children: "Device:" }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--ai-color-text-secondary)", fontWeight: "500" }, children: "Device:" }),
           /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
@@ -760,5 +760,5 @@ /* @__PURE__ */ jsxs(
                   borderRadius: "6px",
-                  border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.15)" : "1px solid rgba(0,0,0,0.12)",
-                  background: mockTheme === "dark" ? "#2a2a2a" : "white",
-                  color: mockTheme === "dark" ? "#e5e5e5" : "#333",
+                  border: "1px solid var(--ai-color-border-heavy)",
+                  background: "var(--ai-color-bg-primary)",
+                  color: "var(--ai-color-text-primary)",
                   fontSize: "12px",
@@ -774,6 +774,6 @@ fontWeight: "500",
                 onFocus: (e) => {
-                  e.target.style.borderColor = "#3b82f6";
+                  e.target.style.borderColor = "var(--ai-color-state-info)";
                 },
                 onBlur: (e) => {
-                  e.target.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
+                  e.target.style.borderColor = "var(--ai-color-border-heavy)";
                 },
@@ -793,3 +793,3 @@ children: [
               pointerEvents: "none",
-              color: mockTheme === "dark" ? "#aaa" : "#666",
+              color: "var(--ai-color-text-secondary)",
               fontSize: "9px"
@@ -808,5 +808,5 @@ }, children: "\u25BC" })
               border: "1px solid",
-              borderColor: debugMode === "border" ? "#ef4444" : mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)",
-              background: debugMode === "border" ? "rgba(239,68,68,0.1)" : mockTheme === "dark" ? "#2a2a2a" : "white",
-              color: debugMode === "border" ? "#ef4444" : mockTheme === "dark" ? "#aaa" : "#666",
+              borderColor: debugMode === "border" ? "var(--ai-color-state-error)" : "var(--ai-color-border-heavy)",
+              background: debugMode === "border" ? "var(--ai-color-state-error-bg)" : "var(--ai-color-bg-primary)",
+              color: debugMode === "border" ? "var(--ai-color-state-error)" : "var(--ai-color-text-secondary)",
               fontSize: "12px",
@@ -819,4 +819,4 @@ fontWeight: "500",
               if (debugMode !== "border") {
-                e.currentTarget.style.borderColor = "#ef4444";
-                e.currentTarget.style.background = "rgba(239,68,68,0.05)";
+                e.currentTarget.style.borderColor = "var(--ai-color-state-error)";
+                e.currentTarget.style.background = "var(--ai-color-state-error-bg)";
               }
@@ -826,4 +826,4 @@ },
               if (debugMode !== "border") {
-                e.currentTarget.style.borderColor = mockTheme === "dark" ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
-                e.currentTarget.style.background = mockTheme === "dark" ? "#2a2a2a" : "white";
+                e.currentTarget.style.borderColor = "var(--ai-color-border-heavy)";
+                e.currentTarget.style.background = "var(--ai-color-bg-primary)";
               }
@@ -846,4 +846,4 @@ },
             borderRadius: "12px",
-            background: "rgba(59,130,246,0.1)",
-            color: "#3b82f6",
+            background: "var(--ai-color-state-info-bg)",
+            color: "var(--ai-color-state-info)",
             fontSize: "11px",
@@ -856,7 +856,7 @@ fontWeight: "600",
             borderRadius: "12px",
-            background: mockTheme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.5)",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            background: "var(--ai-color-border-light)",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "11px",
             fontWeight: "600",
-            border: mockTheme === "dark" ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.08)"
+            border: "1px solid var(--ai-color-border-light)"
           }, children: [
@@ -870,4 +870,4 @@ mockTheme === "dark" ? "\u{1F319}" : "\u2600\uFE0F",
             borderRadius: "12px",
-            background: mockTheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)",
-            color: mockTheme === "dark" ? "#aaa" : "#666",
+            background: "var(--ai-state-hover-background)",
+            color: "var(--ai-color-text-secondary)",
             fontSize: "11px",
@@ -892,3 +892,3 @@ fontWeight: "600"
     }, children: [
-      /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ActiveComponent, {}) }),
+      /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ThemeProvider, { brandColors, children: /* @__PURE__ */ jsx(ActiveComponent, {}) }) }),
       debugMode === "border" && /* @__PURE__ */ jsx(
@@ -895,0 +895,0 @@ "div",

package.json

 {
   "name": "@ainativekit/devtools",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK",
@@ -5,0 +5,0 @@ "author": "Jake Lin",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

2090

0.67%

Worsened metrics

Total package byte prevSize

274653

-0.35%

No dependency changes