@agentiffai/design 0.1.6 → 0.1.8

package/dist/theme/index.d.ts

@@ -1,102 +1,561 @@
 import * as React from 'react';
 import * as styled_components from 'styled-components';
 
+/**
+ * Dark Theme
+ * Applies token values for dark mode styling.
+ * Components should use theme values via styled-components ThemeProvider.
+ */
 declare const darkTheme: {
     name: string;
     colors: {
-        primary: string;
-        surface: string;
-        text: string;
-        border: string;
+        primary: "#2CB0AB";
+        secondary: "#264E68";
+        accent: "#459FB9";
+        seaGreen: "#4EB999";
+        background: {
+            readonly darkest: "#0a1b2a";
+            readonly darker: "#151a26";
+            readonly dark: "#1b2230";
+            readonly light: "#252d3d";
+        };
+        surface: "#1b2230";
+        surfaceHover: "#252d3d";
+        text: {
+            readonly primary: "#FFFFFF";
+            readonly secondary: "#B4B8C5";
+            readonly tertiary: "#6B7280";
+            readonly disabled: "#4B5563";
+        };
+        textPrimary: "#FFFFFF";
+        textSecondary: "#B4B8C5";
+        textTertiary: "#6B7280";
+        textDisabled: "#4B5563";
+        success: "#2CB0AB";
+        error: "#EF4444";
+        warning: "#F59E0B";
+        info: "#459FB9";
+        status: {
+            readonly pending: "#6B7280";
+            readonly idle: "#6B7280";
+            readonly running: "#459FB9";
+            readonly completed: "#2CB0AB";
+            readonly failed: "#EF4444";
+            readonly timeout: "#F59E0B";
+            readonly online: "#2CB0AB";
+            readonly offline: "#EF4444";
+            readonly busy: "#459FB9";
+        };
+        connection: {
+            readonly connected: "#2CB0AB";
+            readonly streaming: "#459FB9";
+            readonly disconnected: "#EF4444";
+            readonly reconnecting: "#F59E0B";
+        };
+        border: {
+            readonly default: "rgba(255, 255, 255, 0.1)";
+            readonly subtle: "rgba(255, 255, 255, 0.05)";
+            readonly hover: "rgba(255, 255, 255, 0.2)";
+            readonly focus: "#2CB0AB";
+            readonly error: "#EF4444";
+        };
+        borderDefault: "rgba(255, 255, 255, 0.1)";
+        borderFocus: "#2CB0AB";
+        message: {
+            readonly user: "#264E68";
+            readonly ai: "#1b2230";
+            readonly system: "#151a26";
+        };
+        overlay: "rgba(0, 0, 0, 0.5)";
+        backdrop: "rgba(27, 34, 48, 0.95)";
+        icon: {
+            readonly default: "#B4B8C5";
+            readonly muted: "#6B7280";
+            readonly active: "#2CB0AB";
+        };
+        platform: {
+            readonly facebook: "#1877F2";
+            readonly instagram: "#E4405F";
+            readonly linkedin: "#0A66C2";
+            readonly x: "#000000";
+            readonly twitter: "#1DA1F2";
+            readonly youtube: "#FF0000";
+            readonly reddit: "#FF4500";
+            readonly slack: "#4A154B";
+            readonly telegram: "#0088CC";
+            readonly whatsapp: "#25D366";
+            readonly gmail: "#EA4335";
+        };
+    };
+    typography: {
+        readonly fontFamily: {
+            readonly primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly heading: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly monospace: "'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
     };
     spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
     };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
+    borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly '2xl': "1.5rem";
+        readonly full: "9999px";
     };
-    fonts: {
-        body: string;
-        mono: string;
+    shadows: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly card: "0 4px 20px rgba(0, 0, 0, 0.3)";
+        readonly glow: {
+            readonly primary: "0 0 20px rgba(44, 176, 171, 0.3)";
+            readonly secondary: "0 0 20px rgba(38, 78, 104, 0.3)";
+            readonly accent: "0 0 20px rgba(69, 159, 185, 0.3)";
+        };
+    };
+    transitions: {
+        readonly fast: "150ms ease-in-out";
+        readonly normal: "250ms ease-in-out";
+        readonly slow: "350ms ease-in-out";
+    };
+    animation: {
+        readonly duration: {
+            readonly micro: "150ms";
+            readonly short: "200ms";
+            readonly medium: "300ms";
+            readonly long: "500ms";
+        };
+        readonly easing: {
+            readonly enter: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly linear: "linear";
+        };
+    };
+    zIndex: {
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly overlay: 1100;
+        readonly modal: 1200;
+        readonly popover: 1300;
+        readonly tooltip: 1400;
+        readonly toast: 1500;
+    };
+    breakpoints: {
+        readonly mobile: 640;
+        readonly tablet: 1024;
+        readonly desktop: 1280;
     };
 };
 
 declare const GlobalStyle: React.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
+/**
+ * Light Theme
+ * Applies light mode styling using token values.
+ * Uses inverted colors from the dark theme for light backgrounds.
+ * Components should use theme values via styled-components ThemeProvider.
+ */
 declare const lightTheme: {
     name: string;
     colors: {
-        primary: string;
+        primary: "#2CB0AB";
+        secondary: "#264E68";
+        accent: "#459FB9";
+        seaGreen: "#4EB999";
+        background: {
+            darkest: string;
+            darker: string;
+            dark: string;
+            light: string;
+        };
         surface: string;
-        text: string;
-        border: string;
+        surfaceHover: string;
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+        };
+        textPrimary: string;
+        textSecondary: string;
+        textTertiary: string;
+        textDisabled: string;
+        success: "#2CB0AB";
+        error: "#EF4444";
+        warning: "#F59E0B";
+        info: "#459FB9";
+        status: {
+            readonly pending: "#6B7280";
+            readonly idle: "#6B7280";
+            readonly running: "#459FB9";
+            readonly completed: "#2CB0AB";
+            readonly failed: "#EF4444";
+            readonly timeout: "#F59E0B";
+            readonly online: "#2CB0AB";
+            readonly offline: "#EF4444";
+            readonly busy: "#459FB9";
+        };
+        connection: {
+            readonly connected: "#2CB0AB";
+            readonly streaming: "#459FB9";
+            readonly disconnected: "#EF4444";
+            readonly reconnecting: "#F59E0B";
+        };
+        border: {
+            default: string;
+            subtle: string;
+            hover: string;
+            focus: "#2CB0AB";
+            error: "#EF4444";
+        };
+        borderDefault: string;
+        borderFocus: "#2CB0AB";
+        message: {
+            user: string;
+            ai: string;
+            system: string;
+        };
+        overlay: string;
+        backdrop: string;
+        icon: {
+            default: string;
+            muted: string;
+            active: "#2CB0AB";
+        };
+        platform: {
+            readonly facebook: "#1877F2";
+            readonly instagram: "#E4405F";
+            readonly linkedin: "#0A66C2";
+            readonly x: "#000000";
+            readonly twitter: "#1DA1F2";
+            readonly youtube: "#FF0000";
+            readonly reddit: "#FF4500";
+            readonly slack: "#4A154B";
+            readonly telegram: "#0088CC";
+            readonly whatsapp: "#25D366";
+            readonly gmail: "#EA4335";
+        };
+    };
+    typography: {
+        readonly fontFamily: {
+            readonly primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly heading: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly monospace: "'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
     };
     spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
     };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
+    borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly '2xl': "1.5rem";
+        readonly full: "9999px";
     };
-    fonts: {
-        body: string;
-        mono: string;
+    shadows: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly card: "0 4px 20px rgba(0, 0, 0, 0.3)";
+        readonly glow: {
+            readonly primary: "0 0 20px rgba(44, 176, 171, 0.3)";
+            readonly secondary: "0 0 20px rgba(38, 78, 104, 0.3)";
+            readonly accent: "0 0 20px rgba(69, 159, 185, 0.3)";
+        };
+    };
+    transitions: {
+        readonly fast: "150ms ease-in-out";
+        readonly normal: "250ms ease-in-out";
+        readonly slow: "350ms ease-in-out";
+    };
+    animation: {
+        readonly duration: {
+            readonly micro: "150ms";
+            readonly short: "200ms";
+            readonly medium: "300ms";
+            readonly long: "500ms";
+        };
+        readonly easing: {
+            readonly enter: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly linear: "linear";
+        };
+    };
+    zIndex: {
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly overlay: 1100;
+        readonly modal: 1200;
+        readonly popover: 1300;
+        readonly tooltip: 1400;
+        readonly toast: 1500;
+    };
+    breakpoints: {
+        readonly mobile: 640;
+        readonly tablet: 1024;
+        readonly desktop: 1280;
     };
 };
 
+/**
+ * Design Tokens
+ * Centralized design system tokens for colors, typography, spacing, etc.
+ * These tokens are the single source of truth for styling across all components.
+ */
 declare const tokens: {
-    colors: {
-        primary: {
-            light: string;
-            dark: string;
+    readonly colors: {
+        readonly primary: "#2CB0AB";
+        readonly secondary: "#264E68";
+        readonly accent: "#459FB9";
+        readonly seaGreen: "#4EB999";
+        readonly background: {
+            readonly darkest: "#0a1b2a";
+            readonly darker: "#151a26";
+            readonly dark: "#1b2230";
+            readonly light: "#252d3d";
         };
-        secondary: {
-            light: string;
-            dark: string;
+        readonly text: {
+            readonly primary: "#FFFFFF";
+            readonly secondary: "#B4B8C5";
+            readonly tertiary: "#6B7280";
+            readonly disabled: "#4B5563";
         };
-        accent: {
-            light: string;
-            dark: string;
+        readonly success: "#2CB0AB";
+        readonly error: "#EF4444";
+        readonly warning: "#F59E0B";
+        readonly info: "#459FB9";
+        readonly status: {
+            readonly pending: "#6B7280";
+            readonly idle: "#6B7280";
+            readonly running: "#459FB9";
+            readonly completed: "#2CB0AB";
+            readonly failed: "#EF4444";
+            readonly timeout: "#F59E0B";
+            readonly online: "#2CB0AB";
+            readonly offline: "#EF4444";
+            readonly busy: "#459FB9";
         };
-        surface: {
-            light: string;
-            dark: string;
+        readonly connection: {
+            readonly connected: "#2CB0AB";
+            readonly streaming: "#459FB9";
+            readonly disconnected: "#EF4444";
+            readonly reconnecting: "#F59E0B";
         };
-        text: {
-            light: string;
-            dark: string;
+        readonly surface: {
+            readonly base: "#1b2230";
+            readonly elevated: "#252d3d";
+            readonly overlay: "rgba(255, 255, 255, 0.05)";
+            readonly overlayHover: "rgba(255, 255, 255, 0.1)";
+            readonly overlayActive: "rgba(255, 255, 255, 0.15)";
+            readonly subtle: "rgba(255, 255, 255, 0.02)";
+            readonly glass: "rgba(255, 255, 255, 0.26)";
+            readonly glassBorder: "rgba(255, 255, 255, 0.3)";
         };
-        border: {
-            light: string;
-            dark: string;
+        readonly border: {
+            readonly default: "rgba(255, 255, 255, 0.1)";
+            readonly subtle: "rgba(255, 255, 255, 0.05)";
+            readonly hover: "rgba(255, 255, 255, 0.2)";
+            readonly focus: "#2CB0AB";
+            readonly error: "#EF4444";
+        };
+        readonly scrollbar: {
+            readonly track: "transparent";
+            readonly thumb: "rgba(255, 255, 255, 0.2)";
+            readonly thumbHover: "rgba(255, 255, 255, 0.3)";
+        };
+        readonly message: {
+            readonly user: "#264E68";
+            readonly ai: "#1b2230";
+            readonly system: "#151a26";
+        };
+        readonly overlay: "rgba(0, 0, 0, 0.5)";
+        readonly backdrop: "rgba(27, 34, 48, 0.95)";
+        readonly icon: {
+            readonly default: "#B4B8C5";
+            readonly muted: "#6B7280";
+            readonly active: "#2CB0AB";
+        };
+        readonly platform: {
+            readonly facebook: "#1877F2";
+            readonly instagram: "#E4405F";
+            readonly linkedin: "#0A66C2";
+            readonly x: "#000000";
+            readonly twitter: "#1DA1F2";
+            readonly youtube: "#FF0000";
+            readonly reddit: "#FF4500";
+            readonly slack: "#4A154B";
+            readonly telegram: "#0088CC";
+            readonly whatsapp: "#25D366";
+            readonly gmail: "#EA4335";
         };
     };
-    spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    radii: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fonts: {
-        body: string;
-        mono: string;
+    readonly typography: {
+        readonly fontFamily: {
+            readonly primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly heading: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif";
+            readonly monospace: "'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
+    };
+    readonly spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
+    };
+    readonly borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly '2xl': "1.5rem";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly card: "0 4px 20px rgba(0, 0, 0, 0.3)";
+        readonly glow: {
+            readonly primary: "0 0 20px rgba(44, 176, 171, 0.3)";
+            readonly secondary: "0 0 20px rgba(38, 78, 104, 0.3)";
+            readonly accent: "0 0 20px rgba(69, 159, 185, 0.3)";
+        };
+    };
+    readonly transitions: {
+        readonly fast: "150ms ease-in-out";
+        readonly normal: "250ms ease-in-out";
+        readonly slow: "350ms ease-in-out";
+    };
+    readonly animation: {
+        readonly duration: {
+            readonly micro: "150ms";
+            readonly short: "200ms";
+            readonly medium: "300ms";
+            readonly long: "500ms";
+        };
+        readonly easing: {
+            readonly enter: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly linear: "linear";
+        };
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly overlay: 1100;
+        readonly modal: 1200;
+        readonly popover: 1300;
+        readonly tooltip: 1400;
+        readonly toast: 1500;
+    };
+    readonly breakpoints: {
+        readonly mobile: 640;
+        readonly tablet: 1024;
+        readonly desktop: 1280;
     };
 };