@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/dist/styles/inline.js

@@ -16,94 +16,21 @@ const colors = {
     warningLight: "#fbbf24",
     danger: "#ef4444",
     dangerLight: "#f87171",
-    // Neutral colors - Light mode
-    light: {
-        bg: "#ffffff",
-        bgSecondary: "#f9fafb",
-        bgTertiary: "#f3f4f6",
-        border: "#e2e8f0",
-        borderLight: "#f1f5f9",
-        text: "#111827",
-        textSecondary: "#6b7280",
-        textTertiary: "#9ca3af",
-        shadow: "rgba(0, 0, 0, 0.1)",
-        shadowMd: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-        shadowLg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-        shadowXl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
-    },
-    // Neutral colors - Dark mode
-    dark: {
-        bg: "#1f2937",
-        bgSecondary: "#111827",
-        bgTertiary: "#0f172a",
-        border: "#374151",
-        borderLight: "#4b5563",
-        text: "#f9fafb",
-        textSecondary: "#d1d5db",
-        textTertiary: "#9ca3af",
-        shadow: "rgba(0, 0, 0, 0.3)",
-        shadowMd: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
-        shadowLg: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
-        shadowXl: "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-    },
-};
-// Use light mode by default (can be made dynamic later)
-const getIsDark = () => {
-    if (typeof document !== "undefined") {
-        const root = document.documentElement;
-        if (root.classList.contains("dark")) {
-            return true;
-        }
-        if (root.classList.contains("light")) {
-            return false;
-        }
-    }
-    return (typeof window !== "undefined" &&
-        window.matchMedia?.("(prefers-color-scheme: dark)").matches);
 };
 const themeVars = {
     bg: "var(--ai-bg)",
-    bgSecondary: "var(--ai-bg-secondary)",
-    bgTertiary: "var(--ai-bg-tertiary)",
+    bgSecondary: "var(--ai-bg2)",
+    bgTertiary: "var(--ai-bg3)",
     border: "var(--ai-border)",
-    borderLight: "var(--ai-border-light)",
-    text: "var(--ai-text)",
-    textSecondary: "var(--ai-text-secondary)",
-    textTertiary: "var(--ai-text-tertiary)",
-    shadow: "var(--ai-shadow)",
-    shadowMd: "var(--ai-shadow-md)",
+    borderLight: "color-mix(in srgb, var(--ai-border) 70%, transparent)",
+    text: "var(--ai-foreground)",
+    textSecondary: "var(--ai-secondary)",
+    textTertiary: "var(--ai-tertiary)",
+    shadow: "var(--ai-shadow-sm)",
+    shadowMd: "var(--ai-shadow-sm)",
     shadowLg: "var(--ai-shadow-lg)",
     shadowXl: "var(--ai-shadow-xl)",
 };
-const applyThemeVariables = () => {
-    if (typeof document === "undefined") {
-        return;
-    }
-    const nextTheme = getIsDark() ? colors.dark : colors.light;
-    const root = document.documentElement;
-    root.style.setProperty("--ai-bg", nextTheme.bg);
-    root.style.setProperty("--ai-bg-secondary", nextTheme.bgSecondary);
-    root.style.setProperty("--ai-bg-tertiary", nextTheme.bgTertiary);
-    root.style.setProperty("--ai-border", nextTheme.border);
-    root.style.setProperty("--ai-border-light", nextTheme.borderLight);
-    root.style.setProperty("--ai-text", nextTheme.text);
-    root.style.setProperty("--ai-text-secondary", nextTheme.textSecondary);
-    root.style.setProperty("--ai-text-tertiary", nextTheme.textTertiary);
-    root.style.setProperty("--ai-shadow", nextTheme.shadow);
-    root.style.setProperty("--ai-shadow-md", nextTheme.shadowMd);
-    root.style.setProperty("--ai-shadow-lg", nextTheme.shadowLg);
-    root.style.setProperty("--ai-shadow-xl", nextTheme.shadowXl);
-};
-if (typeof window !== "undefined") {
-    applyThemeVariables();
-    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
-    media?.addEventListener?.("change", applyThemeVariables);
-    const observer = new MutationObserver(() => applyThemeVariables());
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["class"],
-    });
-}
 export const aiStyles = {
     // Input field
     input: {
@@ -112,7 +39,7 @@ export const aiStyles = {
         fontSize: "14px",
         lineHeight: "1.5",
         color: themeVars.text,
-        background: themeVars.bg,
+        background: "var(--ai-glass-strong)",
         border: `1px solid ${themeVars.border}`,
         borderColor: themeVars.border,
         borderRadius: "8px",
@@ -164,7 +91,7 @@ export const aiStyles = {
         fontSize: "14px",
         lineHeight: "1.5",
         color: themeVars.text,
-        background: themeVars.bg,
+        background: "var(--ai-glass-strong)",
         border: `1px solid ${themeVars.border}`,
         borderColor: themeVars.border,
         borderRadius: "8px",
@@ -241,7 +168,7 @@ export const aiStyles = {
         fontSize: "14px",
         lineHeight: "1.5",
         color: themeVars.text,
-        background: themeVars.bg,
+        background: "var(--ai-glass-strong)",
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: themeVars.border,
@@ -273,14 +200,14 @@ export const aiStyles = {
         height: "40px",
         border: `1px solid ${themeVars.border}`,
         borderRadius: "8px",
-        background: themeVars.bg,
+        background: "var(--ai-glass, rgba(255,255,255,0.7))",
         color: themeVars.text,
         cursor: "pointer",
         transition: "all 0.2s",
         boxShadow: themeVars.shadowMd,
     },
     statusButtonHover: {
-        background: themeVars.bgSecondary,
+        background: "var(--ai-glass-strong, rgba(255,255,255,0.82))",
         boxShadow: themeVars.shadowLg,
         transform: "scale(1.05)",
     },
@@ -295,7 +222,7 @@ export const aiStyles = {
         minWidth: "320px",
         maxWidth: "400px",
         padding: "16px",
-        background: themeVars.bg,
+        background: "var(--ai-bg2)",
         border: `1px solid ${themeVars.border}`,
         borderRadius: "12px",
         boxShadow: themeVars.shadowXl,
@@ -374,12 +301,12 @@ export const aiStyles = {
         transition: "all 0.2s",
         fontSize: "11px",
         fontWeight: 500,
-        background: `${colors.primary}10`,
-        border: `1px solid ${colors.primary}30`,
+        background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+        border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
     },
     tooltipLinkHover: {
-        background: `${colors.primary}20`,
-        borderColor: colors.primary,
+        background: "color-mix(in srgb, var(--ai-primary) 20%, transparent)",
+        borderColor: "var(--ai-primary)",
     },
     // Chip/Label
     chip: {
@@ -390,9 +317,9 @@ export const aiStyles = {
         fontSize: "12px",
         fontWeight: 500,
         borderRadius: "6px",
-        background: `${colors.primary}10`,
-        color: colors.primary,
-        border: `1px solid ${colors.primary}30`,
+        background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+        color: "var(--ai-primary)",
+        border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
     },
     // Modal (basic styles)
     modal: {
@@ -401,7 +328,7 @@ export const aiStyles = {
         left: 0,
         right: 0,
         bottom: 0,
-        zIndex: 9999,
+        zIndex: 2147483645,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -414,7 +341,7 @@ export const aiStyles = {
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.5)",
+        background: "var(--ai-overlay, rgba(0, 0, 0, 0.5))",
         backdropFilter: "blur(4px)",
         WebkitBackdropFilter: "blur(4px)",
     },
@@ -424,7 +351,8 @@ export const aiStyles = {
         maxWidth: "600px",
         maxHeight: "90vh",
         overflow: "auto",
-        background: themeVars.bg,
+        background: "var(--ai-bg2)",
+        border: "1px solid var(--ai-border)",
         borderRadius: "12px",
         boxShadow: themeVars.shadowXl,
         padding: "0",
@@ -507,38 +435,6 @@ export const aiStyles = {
         animation: "ai-spin 1s linear infinite",
     },
 };
-// Inject keyframes animation for spinner
-if (typeof document !== "undefined") {
-    const styleSheet = document.createElement("style");
-    styleSheet.textContent = `
-    @keyframes ai-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-    
-    @keyframes ai-fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    
-    @keyframes ai-slideUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.6; }
-    }
-  `;
-    document.head.appendChild(styleSheet);
-}
 // Helper function to calculate tooltip position
 export function calculateTooltipPosition(buttonRect, tooltipWidth = 350, tooltipHeight = 500) {
     const viewportWidth = window.innerWidth;