@lastbrain/ai-ui-react 1.0.9 → 1.0.11

package/src/styles/inline.ts

@@ -24,8 +24,8 @@ const colors = {
     bg: "#ffffff",
     bgSecondary: "#f9fafb",
     bgTertiary: "#f3f4f6",
-    border: "#e5e7eb",
-    borderLight: "#f3f4f6",
+    border: "#e2e8f0",
+    borderLight: "#f1f5f9",
     text: "#111827",
     textSecondary: "#6b7280",
     textTertiary: "#9ca3af",
@@ -59,10 +59,72 @@ const colors = {
 };
 
 // Use light mode by default (can be made dynamic later)
-const isDark =
-  typeof window !== "undefined" &&
-  window.matchMedia?.("(prefers-color-scheme: dark)").matches;
-const theme = isDark ? colors.dark : colors.light;
+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)",
+  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)",
+  shadowLg: "var(--ai-shadow-lg)",
+  shadowXl: "var(--ai-shadow-xl)",
+} as const;
+
+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
@@ -71,13 +133,15 @@ export const aiStyles = {
     padding: "12px 40px 12px 16px",
     fontSize: "14px",
     lineHeight: "1.5",
-    color: theme.text,
-    background: theme.bg,
-    border: `1px solid ${theme.border}`,
+    color: themeVars.text,
+    background: themeVars.bg,
+    border: `1px solid ${themeVars.border}`,
+    borderColor: themeVars.border,
     borderRadius: "8px",
     outline: "none",
     transition: "all 0.2s",
     fontFamily: "inherit",
+    boxShadow: "none",
   } as React.CSSProperties,
 
   inputFocus: {
@@ -107,17 +171,17 @@ export const aiStyles = {
     padding: "0",
     border: "none",
     borderRadius: "6px",
-    background: colors.primary,
-    color: "#ffffff",
+    background: "transparent",
+    color: colors.primary,
     cursor: "pointer",
     transition: "all 0.2s",
-    boxShadow: theme.shadowMd,
+    boxShadow: "none",
   } as React.CSSProperties,
 
   inputAiButtonHover: {
-    background: colors.primaryHover,
-    boxShadow: theme.shadowLg,
-    transform: "translateY(-50%) scale(1.05)",
+    background: `${colors.primary}33`,
+    boxShadow: "none",
+    transform: "translateY(-50%)",
   } as React.CSSProperties,
 
   // Textarea
@@ -127,14 +191,16 @@ export const aiStyles = {
     padding: "12px 40px 12px 16px",
     fontSize: "14px",
     lineHeight: "1.5",
-    color: theme.text,
-    background: theme.bg,
-    border: `1px solid ${theme.border}`,
+    color: themeVars.text,
+    background: themeVars.bg,
+    border: `1px solid ${themeVars.border}`,
+    borderColor: themeVars.border,
     borderRadius: "8px",
     outline: "none",
     transition: "all 0.2s",
     fontFamily: "inherit",
-    resize: "vertical" as const,
+    resize: "none" as const,
+    boxShadow: "none",
   } as React.CSSProperties,
 
   textareaFocus: {
@@ -159,17 +225,17 @@ export const aiStyles = {
     padding: "0",
     border: "none",
     borderRadius: "6px",
-    background: colors.primary,
-    color: "#ffffff",
+    background: "transparent",
+    color: colors.primary,
     cursor: "pointer",
     transition: "all 0.2s",
-    boxShadow: theme.shadowMd,
+    boxShadow: "none",
   } as React.CSSProperties,
 
   textareaAiButtonHover: {
-    background: colors.primaryHover,
-    boxShadow: theme.shadowLg,
-    transform: "scale(1.05)",
+    background: `${colors.primary}33`,
+    boxShadow: "none",
+    transform: "none",
   } as React.CSSProperties,
 
   // Button
@@ -188,13 +254,13 @@ export const aiStyles = {
     borderRadius: "8px",
     cursor: "pointer" as const,
     transition: "all 0.2s",
-    boxShadow: theme.shadowMd,
+    boxShadow: themeVars.shadowMd,
     fontFamily: "inherit",
   } as React.CSSProperties,
 
   buttonHover: {
     background: colors.primaryHover,
-    boxShadow: theme.shadowLg,
+    boxShadow: themeVars.shadowLg,
     transform: "translateY(-1px)",
   } as React.CSSProperties,
 
@@ -210,9 +276,9 @@ export const aiStyles = {
     padding: "12px 16px",
     fontSize: "14px",
     lineHeight: "1.5",
-    color: theme.text,
-    background: theme.bg,
-    border: `1px solid ${theme.border}`,
+    color: themeVars.text,
+    background: themeVars.bg,
+    border: `1px solid ${themeVars.border}`,
     borderRadius: "8px",
     outline: "none",
     transition: "all 0.2s",
@@ -232,18 +298,18 @@ export const aiStyles = {
     justifyContent: "center" as const,
     width: "40px",
     height: "40px",
-    border: `1px solid ${theme.border}`,
+    border: `1px solid ${themeVars.border}`,
     borderRadius: "8px",
-    background: theme.bg,
-    color: theme.text,
+    background: themeVars.bg,
+    color: themeVars.text,
     cursor: "pointer" as const,
     transition: "all 0.2s",
-    boxShadow: theme.shadowMd,
+    boxShadow: themeVars.shadowMd,
   } as React.CSSProperties,
 
   statusButtonHover: {
-    background: theme.bgSecondary,
-    boxShadow: theme.shadowLg,
+    background: themeVars.bgSecondary,
+    boxShadow: themeVars.shadowLg,
     transform: "scale(1.05)",
   } as React.CSSProperties,
 
@@ -259,12 +325,12 @@ export const aiStyles = {
     minWidth: "320px",
     maxWidth: "400px",
     padding: "16px",
-    background: theme.bg,
-    border: `1px solid ${theme.border}`,
+    background: themeVars.bg,
+    border: `1px solid ${themeVars.border}`,
     borderRadius: "12px",
-    boxShadow: theme.shadowXl,
+    boxShadow: themeVars.shadowXl,
     fontSize: "12px",
-    color: theme.text,
+    color: themeVars.text,
     pointerEvents: "auto" as const,
   } as React.CSSProperties,
 
@@ -273,13 +339,13 @@ export const aiStyles = {
     fontSize: "16px",
     paddingBottom: "12px",
     marginBottom: "12px",
-    borderBottom: `1px solid ${theme.borderLight}`,
-    color: theme.text,
+    borderBottom: `1px solid ${themeVars.borderLight}`,
+    color: themeVars.text,
   } as React.CSSProperties,
 
   tooltipSection: {
     padding: "12px 0",
-    borderTop: `1px solid ${theme.borderLight}`,
+    borderTop: `1px solid ${themeVars.borderLight}`,
   } as React.CSSProperties,
 
   tooltipSectionFirst: {
@@ -291,7 +357,7 @@ export const aiStyles = {
     fontWeight: 600,
     marginBottom: "8px",
     fontSize: "11px",
-    color: theme.textSecondary,
+    color: themeVars.textSecondary,
     textTransform: "uppercase" as const,
     letterSpacing: "0.05em",
   } as React.CSSProperties,
@@ -305,7 +371,7 @@ export const aiStyles = {
   } as React.CSSProperties,
 
   tooltipLabel: {
-    color: theme.textSecondary,
+    color: themeVars.textSecondary,
     fontSize: "12px",
   } as React.CSSProperties,
 
@@ -313,13 +379,13 @@ export const aiStyles = {
     fontFamily:
       'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     fontSize: "12px",
-    color: theme.text,
+    color: themeVars.text,
     fontWeight: 500,
   } as React.CSSProperties,
 
   tooltipValueBold: {
     fontWeight: 700,
-    color: theme.text,
+    color: themeVars.text,
   } as React.CSSProperties,
 
   tooltipValueSuccess: {
@@ -338,7 +404,7 @@ export const aiStyles = {
     justifyContent: "space-between" as const,
     paddingTop: "12px",
     marginTop: "8px",
-    borderTop: `1px solid ${theme.borderLight}`,
+    borderTop: `1px solid ${themeVars.borderLight}`,
   } as React.CSSProperties,
 
   tooltipLink: {
@@ -406,9 +472,9 @@ export const aiStyles = {
     maxWidth: "600px",
     maxHeight: "90vh",
     overflow: "auto" as const,
-    background: theme.bg,
+    background: themeVars.bg,
     borderRadius: "12px",
-    boxShadow: theme.shadowXl,
+    boxShadow: themeVars.shadowXl,
     padding: "0",
     animation: "ai-slideUp 0.3s ease-out",
   } as React.CSSProperties,
@@ -418,14 +484,14 @@ export const aiStyles = {
     alignItems: "center" as const,
     justifyContent: "space-between" as const,
     padding: "20px 24px",
-    borderBottom: `1px solid ${theme.borderLight}`,
+    borderBottom: `1px solid ${themeVars.borderLight}`,
   } as React.CSSProperties,
 
   modalTitle: {
     fontSize: "18px",
     fontWeight: 600,
     margin: 0,
-    color: theme.text,
+    color: themeVars.text,
   } as React.CSSProperties,
 
   modalCloseButton: {
@@ -438,7 +504,7 @@ export const aiStyles = {
     border: "none",
     borderRadius: "6px",
     background: "transparent",
-    color: theme.textSecondary,
+    color: themeVars.textSecondary,
     fontSize: "24px",
     lineHeight: "1",
     cursor: "pointer" as const,
@@ -446,13 +512,13 @@ export const aiStyles = {
   } as React.CSSProperties,
 
   modalCloseButtonHover: {
-    background: theme.bgSecondary,
-    color: theme.text,
+    background: themeVars.bgSecondary,
+    color: themeVars.text,
   } as React.CSSProperties,
 
   modalBody: {
     padding: "24px",
-    color: theme.textSecondary,
+    color: themeVars.textSecondary,
     lineHeight: "1.6",
   } as React.CSSProperties,
 
@@ -461,7 +527,7 @@ export const aiStyles = {
     gap: "12px",
     justifyContent: "flex-end" as const,
     padding: "20px 24px",
-    borderTop: `1px solid ${theme.borderLight}`,
+    borderTop: `1px solid ${themeVars.borderLight}`,
   } as React.CSSProperties,
 
   modalLabel: {
@@ -469,7 +535,7 @@ export const aiStyles = {
     marginBottom: "8px",
     fontSize: "14px",
     fontWeight: 500,
-    color: theme.text,
+    color: themeVars.text,
   } as React.CSSProperties,
 
   modalInputGroup: {
@@ -478,14 +544,14 @@ export const aiStyles = {
 
   // Buttons variants
   buttonSecondary: {
-    background: theme.bgSecondary,
-    color: theme.text,
-    border: `1px solid ${theme.border}`,
+    background: themeVars.bgSecondary,
+    color: themeVars.text,
+    border: `1px solid ${themeVars.border}`,
   } as React.CSSProperties,
 
   buttonSecondaryHover: {
-    background: theme.bgTertiary,
-    borderColor: theme.borderLight,
+    background: themeVars.bgTertiary,
+    borderColor: themeVars.borderLight,
   } as React.CSSProperties,
 
   // Spinner