@agentiffai/design 1.3.28 → 1.4.0

package/dist/theme/index.cjs

@@ -5,66 +5,44 @@ var styledComponents = require('styled-components');
 // src/theme/tokens.ts
 var tokens = {
   colors: {
-    // Brand colors
     primary: "#2CB0AB",
-    // Teal (main brand color)
     secondary: "#264E68",
-    // Deep Blue
     accent: "#459FB9",
-    // Sky Blue
     seaGreen: "#4EB999",
-    // Sea Green (additional brand color)
-    // Backgrounds - dark theme optimized
     background: {
       darkest: "#0a1b2a",
-      // Darkest Blue (brand color)
       darker: "#151a26",
-      // Discord gray (preserved)
       dark: "#1b2230",
-      // Discord surface gray (preserved)
       light: "#252d3d"
-      // Discord border gray (preserved)
     },
-    // Text hierarchy
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
       tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
-    // Semantic colors
     success: "#2CB0AB",
-    // Teal (brand aligned)
     error: "#EF4444",
     warning: "#F59E0B",
     info: "#459FB9",
-    // Sky Blue (brand aligned)
-    // Status colors (for workflow/SSE events)
     status: {
       pending: "#6B7280",
       editing: "#3B82F6",
       idle: "#6B7280",
       running: "#459FB9",
-      // Sky Blue (brand aligned)
       completed: "#2CB0AB",
-      // Teal (brand aligned)
       failed: "#EF4444",
       timeout: "#F59E0B",
-      // Badge status (online/offline pattern)
       online: "#2CB0AB",
       offline: "#EF4444",
       busy: "#459FB9"
     },
-    // Connection status
     connection: {
       connected: "#2CB0AB",
-      // Teal (brand aligned)
       streaming: "#459FB9",
-      // Sky Blue (brand aligned)
       disconnected: "#EF4444",
       reconnecting: "#F59E0B"
     },
-    // Surface variants (for overlays, cards, panels)
     surface: {
       base: "#1b2230",
       elevated: "#252d3d",
@@ -75,40 +53,41 @@ var tokens = {
       glass: "rgba(255, 255, 255, 0.26)",
       glassBorder: "rgba(255, 255, 255, 0.3)"
     },
-    // UI Element colors
     border: {
       default: "rgba(255, 255, 255, 0.1)",
       subtle: "rgba(255, 255, 255, 0.05)",
       hover: "rgba(255, 255, 255, 0.2)",
       focus: "#2CB0AB",
-      // Teal (brand aligned)
       error: "#EF4444"
     },
-    // Scrollbar colors
+    category: {
+      setup: "#459FB9",
+      integration: "#8B5CF6",
+      generation: "#2CB0AB",
+      image: "#EC4899",
+      scheduling: "#F59E0B",
+      completion: "#4EB999",
+      processing: "#459FB9",
+      custom: "#6B7280",
+      notion: "#6B7280"
+    },
     scrollbar: {
       track: "transparent",
       thumb: "rgba(255, 255, 255, 0.2)",
       thumbHover: "rgba(255, 255, 255, 0.3)"
     },
-    // Message bubbles
     message: {
       user: "#264E68",
-      // Deep Blue (brand color)
       ai: "#1b2230",
-      // Dark background
       system: "#151a26"
-      // Darker background
     },
-    // Overlays and backdrops
     overlay: "rgba(0, 0, 0, 0.5)",
     backdrop: "rgba(27, 34, 48, 0.95)",
-    // Icon colors
     icon: {
       default: "#B4B8C5",
       muted: "#6B7280",
       active: "#2CB0AB"
     },
-    // Platform brand colors (for social media icons)
     platform: {
       facebook: "#1877F2",
       instagram: "#E4405F",
@@ -131,21 +110,13 @@ var tokens = {
     },
     fontSize: {
       xs: "0.875rem",
-      // 14px (was 12px, increased for better readability)
       sm: "1rem",
-      // 16px (was 14px, increased for better readability)
       base: "1.125rem",
-      // 18px (was 16px, increased for better readability)
       lg: "1.125rem",
-      // 18px (heading size, unchanged)
       xl: "1.25rem",
-      // 20px (heading size, unchanged)
       "2xl": "1.5rem",
-      // 24px (heading size, unchanged)
       "3xl": "1.875rem",
-      // 30px (heading size, unchanged)
       "4xl": "2.25rem"
-      // 36px (heading size, unchanged)
     },
     fontWeight: {
       light: 300,
@@ -162,34 +133,21 @@ var tokens = {
   },
   spacing: {
     xs: "0.25rem",
-    // 4px
     sm: "0.5rem",
-    // 8px
     md: "1rem",
-    // 16px
     lg: "1.5rem",
-    // 24px
     xl: "2rem",
-    // 32px
     "2xl": "3rem",
-    // 48px
     "3xl": "4rem"
-    // 64px
   },
   borderRadius: {
     none: "0",
     sm: "0.25rem",
-    // 4px
     md: "0.5rem",
-    // 8px
     lg: "0.75rem",
-    // 12px
     xl: "1rem",
-    // 16px
     "2xl": "1.5rem",
-    // 24px
     full: "9999px"
-    // Fully rounded
   },
   shadows: {
     none: "none",
@@ -221,6 +179,19 @@ var tokens = {
       exit: "cubic-bezier(0.4, 0, 1, 1)",
       smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
       linear: "linear"
+    },
+    overlay: {
+      duration: "200ms",
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    typewriter: {
+      speed: "50ms"
+    },
+    spinner: {
+      duration: "1000ms"
+    },
+    pulse: {
+      duration: "2000ms"
     }
   },
   zIndex: {

package/dist/theme/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/tokens.ts","../../src/theme/darkTheme.ts","../../src/theme/GlobalStyle.tsx","../../src/theme/lightTheme.ts"],"names":["createGlobalStyle"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Design Tokens\n * Centralized design system tokens for colors, typography, spacing, etc.\n * These tokens are the single source of truth for styling across all components.\n */\n\nexport const tokens = {\n  colors: {\n    // Brand colors\n    primary: '#2CB0AB', // Teal (main brand color)\n    secondary: '#264E68', // Deep Blue\n    accent: '#459FB9', // Sky Blue\n    seaGreen: '#4EB999', // Sea Green (additional brand color)\n\n    // Backgrounds - dark theme optimized\n    background: {\n      darkest: '#0a1b2a', // Darkest Blue (brand color)\n      darker: '#151a26', // Discord gray (preserved)\n      dark: '#1b2230', // Discord surface gray (preserved)\n      light: '#252d3d', // Discord border gray (preserved)\n    },\n\n    // Text hierarchy\n    text: {\n      primary: '#FFFFFF',\n      secondary: '#B4B8C5',\n      tertiary: '#9CA3AF',\n      disabled: '#4B5563',\n    },\n\n    // Semantic colors\n    success: '#2CB0AB', // Teal (brand aligned)\n    error: '#EF4444',\n    warning: '#F59E0B',\n    info: '#459FB9', // Sky Blue (brand aligned)\n\n    // Status colors (for workflow/SSE events)\n    status: {\n      pending: '#6B7280',\n      editing: '#3B82F6',\n      idle: '#6B7280',\n      running: '#459FB9', // Sky Blue (brand aligned)\n      completed: '#2CB0AB', // Teal (brand aligned)\n      failed: '#EF4444',\n      timeout: '#F59E0B',\n      // Badge status (online/offline pattern)\n      online: '#2CB0AB',\n      offline: '#EF4444',\n      busy: '#459FB9',\n    },\n\n    // Connection status\n    connection: {\n      connected: '#2CB0AB', // Teal (brand aligned)\n      streaming: '#459FB9', // Sky Blue (brand aligned)\n      disconnected: '#EF4444',\n      reconnecting: '#F59E0B',\n    },\n\n    // Surface variants (for overlays, cards, panels)\n    surface: {\n      base: '#1b2230',\n      elevated: '#252d3d',\n      overlay: 'rgba(255, 255, 255, 0.05)',\n      overlayHover: 'rgba(255, 255, 255, 0.1)',\n      overlayActive: 'rgba(255, 255, 255, 0.15)',\n      subtle: 'rgba(255, 255, 255, 0.02)',\n      glass: 'rgba(255, 255, 255, 0.26)',\n      glassBorder: 'rgba(255, 255, 255, 0.3)',\n    },\n\n    // UI Element colors\n    border: {\n      default: 'rgba(255, 255, 255, 0.1)',\n      subtle: 'rgba(255, 255, 255, 0.05)',\n      hover: 'rgba(255, 255, 255, 0.2)',\n      focus: '#2CB0AB', // Teal (brand aligned)\n      error: '#EF4444',\n    },\n\n    // Scrollbar colors\n    scrollbar: {\n      track: 'transparent',\n      thumb: 'rgba(255, 255, 255, 0.2)',\n      thumbHover: 'rgba(255, 255, 255, 0.3)',\n    },\n\n    // Message bubbles\n    message: {\n      user: '#264E68', // Deep Blue (brand color)\n      ai: '#1b2230', // Dark background\n      system: '#151a26', // Darker background\n    },\n\n    // Overlays and backdrops\n    overlay: 'rgba(0, 0, 0, 0.5)',\n    backdrop: 'rgba(27, 34, 48, 0.95)',\n\n    // Icon colors\n    icon: {\n      default: '#B4B8C5',\n      muted: '#6B7280',\n      active: '#2CB0AB',\n    },\n\n    // Platform brand colors (for social media icons)\n    platform: {\n      facebook: '#1877F2',\n      instagram: '#E4405F',\n      linkedin: '#0A66C2',\n      x: '#000000',\n      twitter: '#1DA1F2',\n      youtube: '#FF0000',\n      reddit: '#FF4500',\n      slack: '#4A154B',\n      telegram: '#0088CC',\n      whatsapp: '#25D366',\n      gmail: '#EA4335',\n    },\n  },\n\n  typography: {\n    fontFamily: {\n      primary:\n        \"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif\",\n      heading:\n        \"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif\",\n      monospace: \"'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace\",\n    },\n    fontSize: {\n      xs: '0.875rem', // 14px (was 12px, increased for better readability)\n      sm: '1rem', // 16px (was 14px, increased for better readability)\n      base: '1.125rem', // 18px (was 16px, increased for better readability)\n      lg: '1.125rem', // 18px (heading size, unchanged)\n      xl: '1.25rem', // 20px (heading size, unchanged)\n      '2xl': '1.5rem', // 24px (heading size, unchanged)\n      '3xl': '1.875rem', // 30px (heading size, unchanged)\n      '4xl': '2.25rem', // 36px (heading size, unchanged)\n    },\n    fontWeight: {\n      light: 300,\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n    lineHeight: {\n      tight: 1.25,\n      normal: 1.5,\n      relaxed: 1.75,\n    },\n  },\n\n  spacing: {\n    xs: '0.25rem', // 4px\n    sm: '0.5rem', // 8px\n    md: '1rem', // 16px\n    lg: '1.5rem', // 24px\n    xl: '2rem', // 32px\n    '2xl': '3rem', // 48px\n    '3xl': '4rem', // 64px\n  },\n\n  borderRadius: {\n    none: '0',\n    sm: '0.25rem', // 4px\n    md: '0.5rem', // 8px\n    lg: '0.75rem', // 12px\n    xl: '1rem', // 16px\n    '2xl': '1.5rem', // 24px\n    full: '9999px', // Fully rounded\n  },\n\n  shadows: {\n    none: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    card: '0 4px 20px rgba(0, 0, 0, 0.3)',\n    glow: {\n      primary: '0 0 20px rgba(44, 176, 171, 0.3)',\n      secondary: '0 0 20px rgba(38, 78, 104, 0.3)',\n      accent: '0 0 20px rgba(69, 159, 185, 0.3)',\n    },\n  },\n\n  transitions: {\n    fast: '150ms ease-in-out',\n    normal: '250ms ease-in-out',\n    slow: '350ms ease-in-out',\n  },\n\n  animation: {\n    duration: {\n      micro: '150ms',\n      short: '200ms',\n      medium: '300ms',\n      long: '500ms',\n    },\n    easing: {\n      enter: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      exit: 'cubic-bezier(0.4, 0, 1, 1)',\n      smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      linear: 'linear',\n    },\n  },\n\n  zIndex: {\n    base: 0,\n    dropdown: 1000,\n    sticky: 1020,\n    fixed: 1030,\n    overlay: 1100,\n    modal: 1200,\n    popover: 1300,\n    tooltip: 1400,\n    toast: 1500,\n  },\n\n  breakpoints: {\n    mobile: 640,\n    tablet: 1024,\n    desktop: 1280,\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\n","import { tokens } from './tokens';\n\n/**\n * Dark Theme\n * Applies token values for dark mode styling.\n * Components should use theme values via styled-components ThemeProvider.\n */\nexport const darkTheme = {\n  name: 'dark',\n  colors: {\n    // Brand\n    primary: tokens.colors.primary,\n    secondary: tokens.colors.secondary,\n    accent: tokens.colors.accent,\n    seaGreen: tokens.colors.seaGreen,\n\n    // Backgrounds\n    background: tokens.colors.background,\n    surface: tokens.colors.background.dark,\n    surfaceHover: tokens.colors.background.light,\n\n    // Text\n    text: tokens.colors.text,\n    textPrimary: tokens.colors.text.primary,\n    textSecondary: tokens.colors.text.secondary,\n    textTertiary: tokens.colors.text.tertiary,\n    textDisabled: tokens.colors.text.disabled,\n\n    // Semantic\n    success: tokens.colors.success,\n    error: tokens.colors.error,\n    warning: tokens.colors.warning,\n    info: tokens.colors.info,\n\n    // Status\n    status: tokens.colors.status,\n\n    // Connection\n    connection: tokens.colors.connection,\n\n    // Border\n    border: tokens.colors.border,\n    borderDefault: tokens.colors.border.default,\n    borderFocus: tokens.colors.border.focus,\n\n    // Message\n    message: tokens.colors.message,\n\n    // Overlay\n    overlay: tokens.colors.overlay,\n    backdrop: tokens.colors.backdrop,\n\n    // Icon\n    icon: tokens.colors.icon,\n\n    // Platform\n    platform: tokens.colors.platform,\n  },\n  typography: tokens.typography,\n  spacing: tokens.spacing,\n  borderRadius: tokens.borderRadius,\n  shadows: tokens.shadows,\n  transitions: tokens.transitions,\n  animation: tokens.animation,\n  zIndex: tokens.zIndex,\n  breakpoints: tokens.breakpoints,\n};\n\nexport type DarkTheme = typeof darkTheme;\n","import { createGlobalStyle } from 'styled-components';\n\nexport const GlobalStyle = createGlobalStyle`\n  /* Universal tap highlight removal - nuclear option for Android WebKit */\n  * {\n    -webkit-tap-highlight-color: transparent !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  html {\n    /* Ensure tap highlight is disabled at root level */\n    -webkit-tap-highlight-color: transparent;\n    -webkit-touch-callout: none;\n  }\n\n  body {\n    margin: 0;\n    padding: 0;\n    font-family: ${({ theme }) => theme.fonts.body};\n    color: ${({ theme }) => theme.colors.text};\n    background-color: ${({ theme }) => theme.colors.surface};\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    /* Disable tap highlight on body as well */\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Remove mobile tap highlight for ALL interactive elements */\n  a,\n  button,\n  input,\n  select,\n  textarea,\n  label,\n  [role=\"button\"],\n  [role=\"link\"],\n  [role=\"tab\"],\n  [role=\"menuitem\"],\n  [role=\"option\"],\n  [tabindex]:not([tabindex=\"-1\"]),\n  [onclick] {\n    -webkit-tap-highlight-color: transparent !important;\n    -webkit-touch-callout: none;\n    touch-action: manipulation;\n  }\n\n  button {\n    font-family: inherit;\n    /* Prevent text selection flash on tap */\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n","import { tokens } from './tokens';\n\n/**\n * Light Theme\n * Applies light mode styling using token values.\n * Uses inverted colors from the dark theme for light backgrounds.\n * Components should use theme values via styled-components ThemeProvider.\n */\nexport const lightTheme = {\n  name: 'light',\n  colors: {\n    // Brand\n    primary: tokens.colors.primary,\n    secondary: tokens.colors.secondary,\n    accent: tokens.colors.accent,\n    seaGreen: tokens.colors.seaGreen,\n\n    // Backgrounds - light theme (inverted from dark)\n    background: {\n      darkest: '#FFFFFF',\n      darker: '#F7F8FA',\n      dark: '#EDEFF2',\n      light: '#E5E7EB',\n    },\n\n    // Surfaces\n    surface: '#FFFFFF',\n    surfaceHover: '#F7F8FA',\n\n    // Text - light theme (inverted)\n    text: {\n      primary: '#1F2937',\n      secondary: '#4B5563',\n      tertiary: '#9CA3AF',\n      disabled: '#D1D5DB',\n    },\n    textPrimary: '#1F2937',\n    textSecondary: '#4B5563',\n    textTertiary: '#9CA3AF',\n    textDisabled: '#D1D5DB',\n\n    // Semantic\n    success: tokens.colors.success,\n    error: tokens.colors.error,\n    warning: tokens.colors.warning,\n    info: tokens.colors.info,\n\n    // Status\n    status: tokens.colors.status,\n\n    // Connection\n    connection: tokens.colors.connection,\n\n    // Border - light theme\n    border: {\n      default: 'rgba(0, 0, 0, 0.1)',\n      subtle: 'rgba(0, 0, 0, 0.05)',\n      hover: 'rgba(0, 0, 0, 0.2)',\n      focus: tokens.colors.primary,\n      error: tokens.colors.error,\n    },\n    borderDefault: 'rgba(0, 0, 0, 0.1)',\n    borderFocus: tokens.colors.primary,\n\n    // Message\n    message: {\n      user: '#E0F2F1',\n      ai: '#F5F5F5',\n      system: '#E8E8E8',\n    },\n\n    // Overlay\n    overlay: 'rgba(0, 0, 0, 0.3)',\n    backdrop: 'rgba(255, 255, 255, 0.95)',\n\n    // Icon\n    icon: {\n      default: '#4B5563',\n      muted: '#9CA3AF',\n      active: tokens.colors.primary,\n    },\n\n    // Platform\n    platform: tokens.colors.platform,\n  },\n  typography: tokens.typography,\n  spacing: tokens.spacing,\n  borderRadius: tokens.borderRadius,\n  shadows: tokens.shadows,\n  transitions: tokens.transitions,\n  animation: tokens.animation,\n  zIndex: tokens.zIndex,\n  breakpoints: tokens.breakpoints,\n};\n\nexport type LightTheme = typeof lightTheme;\n"]}
+{"version":3,"sources":["../../src/theme/tokens.ts","../../src/theme/darkTheme.ts","../../src/theme/GlobalStyle.tsx","../../src/theme/lightTheme.ts"],"names":["createGlobalStyle"],"mappings":"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","file":"index.cjs","sourcesContent":["export const tokens = {\n  colors: {\n    primary: '#2CB0AB',\n    secondary: '#264E68',\n    accent: '#459FB9',\n    seaGreen: '#4EB999',\n\n    background: {\n      darkest: '#0a1b2a',\n      darker: '#151a26',\n      dark: '#1b2230',\n      light: '#252d3d',\n    },\n\n    text: {\n      primary: '#FFFFFF',\n      secondary: '#B4B8C5',\n      tertiary: '#9CA3AF',\n      disabled: '#4B5563',\n    },\n\n    success: '#2CB0AB',\n    error: '#EF4444',\n    warning: '#F59E0B',\n    info: '#459FB9',\n\n    status: {\n      pending: '#6B7280',\n      editing: '#3B82F6',\n      idle: '#6B7280',\n      running: '#459FB9',\n      completed: '#2CB0AB',\n      failed: '#EF4444',\n      timeout: '#F59E0B',\n      online: '#2CB0AB',\n      offline: '#EF4444',\n      busy: '#459FB9',\n    },\n\n    connection: {\n      connected: '#2CB0AB',\n      streaming: '#459FB9',\n      disconnected: '#EF4444',\n      reconnecting: '#F59E0B',\n    },\n\n    surface: {\n      base: '#1b2230',\n      elevated: '#252d3d',\n      overlay: 'rgba(255, 255, 255, 0.05)',\n      overlayHover: 'rgba(255, 255, 255, 0.1)',\n      overlayActive: 'rgba(255, 255, 255, 0.15)',\n      subtle: 'rgba(255, 255, 255, 0.02)',\n      glass: 'rgba(255, 255, 255, 0.26)',\n      glassBorder: 'rgba(255, 255, 255, 0.3)',\n    },\n\n    border: {\n      default: 'rgba(255, 255, 255, 0.1)',\n      subtle: 'rgba(255, 255, 255, 0.05)',\n      hover: 'rgba(255, 255, 255, 0.2)',\n      focus: '#2CB0AB',\n      error: '#EF4444',\n    },\n\n    category: {\n      setup: '#459FB9',\n      integration: '#8B5CF6',\n      generation: '#2CB0AB',\n      image: '#EC4899',\n      scheduling: '#F59E0B',\n      completion: '#4EB999',\n      processing: '#459FB9',\n      custom: '#6B7280',\n      notion: '#6B7280',\n    },\n\n    scrollbar: {\n      track: 'transparent',\n      thumb: 'rgba(255, 255, 255, 0.2)',\n      thumbHover: 'rgba(255, 255, 255, 0.3)',\n    },\n\n    message: {\n      user: '#264E68',\n      ai: '#1b2230',\n      system: '#151a26',\n    },\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n    backdrop: 'rgba(27, 34, 48, 0.95)',\n\n    icon: {\n      default: '#B4B8C5',\n      muted: '#6B7280',\n      active: '#2CB0AB',\n    },\n\n    platform: {\n      facebook: '#1877F2',\n      instagram: '#E4405F',\n      linkedin: '#0A66C2',\n      x: '#000000',\n      twitter: '#1DA1F2',\n      youtube: '#FF0000',\n      reddit: '#FF4500',\n      slack: '#4A154B',\n      telegram: '#0088CC',\n      whatsapp: '#25D366',\n      gmail: '#EA4335',\n    },\n  },\n\n  typography: {\n    fontFamily: {\n      primary:\n        \"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif\",\n      heading:\n        \"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif\",\n      monospace: \"'Roboto Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace\",\n    },\n    fontSize: {\n      xs: '0.875rem',\n      sm: '1rem',\n      base: '1.125rem',\n      lg: '1.125rem',\n      xl: '1.25rem',\n      '2xl': '1.5rem',\n      '3xl': '1.875rem',\n      '4xl': '2.25rem',\n    },\n    fontWeight: {\n      light: 300,\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700,\n    },\n    lineHeight: {\n      tight: 1.25,\n      normal: 1.5,\n      relaxed: 1.75,\n    },\n  },\n\n  spacing: {\n    xs: '0.25rem',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n    '2xl': '3rem',\n    '3xl': '4rem',\n  },\n\n  borderRadius: {\n    none: '0',\n    sm: '0.25rem',\n    md: '0.5rem',\n    lg: '0.75rem',\n    xl: '1rem',\n    '2xl': '1.5rem',\n    full: '9999px',\n  },\n\n  shadows: {\n    none: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n    card: '0 4px 20px rgba(0, 0, 0, 0.3)',\n    glow: {\n      primary: '0 0 20px rgba(44, 176, 171, 0.3)',\n      secondary: '0 0 20px rgba(38, 78, 104, 0.3)',\n      accent: '0 0 20px rgba(69, 159, 185, 0.3)',\n    },\n  },\n\n  transitions: {\n    fast: '150ms ease-in-out',\n    normal: '250ms ease-in-out',\n    slow: '350ms ease-in-out',\n  },\n\n  animation: {\n    duration: {\n      micro: '150ms',\n      short: '200ms',\n      medium: '300ms',\n      long: '500ms',\n    },\n    easing: {\n      enter: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      exit: 'cubic-bezier(0.4, 0, 1, 1)',\n      smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      linear: 'linear',\n    },\n    overlay: {\n      duration: '200ms',\n      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    },\n    typewriter: {\n      speed: '50ms',\n    },\n    spinner: {\n      duration: '1000ms',\n    },\n    pulse: {\n      duration: '2000ms',\n    },\n  },\n\n  zIndex: {\n    base: 0,\n    dropdown: 1000,\n    sticky: 1020,\n    fixed: 1030,\n    overlay: 1100,\n    modal: 1200,\n    popover: 1300,\n    tooltip: 1400,\n    toast: 1500,\n  },\n\n  breakpoints: {\n    mobile: 640,\n    tablet: 1024,\n    desktop: 1280,\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\n","import { tokens } from './tokens';\n\n/**\n * Dark Theme\n * Applies token values for dark mode styling.\n * Components should use theme values via styled-components ThemeProvider.\n */\nexport const darkTheme = {\n  name: 'dark',\n  colors: {\n    // Brand\n    primary: tokens.colors.primary,\n    secondary: tokens.colors.secondary,\n    accent: tokens.colors.accent,\n    seaGreen: tokens.colors.seaGreen,\n\n    // Backgrounds\n    background: tokens.colors.background,\n    surface: tokens.colors.background.dark,\n    surfaceHover: tokens.colors.background.light,\n\n    // Text\n    text: tokens.colors.text,\n    textPrimary: tokens.colors.text.primary,\n    textSecondary: tokens.colors.text.secondary,\n    textTertiary: tokens.colors.text.tertiary,\n    textDisabled: tokens.colors.text.disabled,\n\n    // Semantic\n    success: tokens.colors.success,\n    error: tokens.colors.error,\n    warning: tokens.colors.warning,\n    info: tokens.colors.info,\n\n    // Status\n    status: tokens.colors.status,\n\n    // Connection\n    connection: tokens.colors.connection,\n\n    // Border\n    border: tokens.colors.border,\n    borderDefault: tokens.colors.border.default,\n    borderFocus: tokens.colors.border.focus,\n\n    // Message\n    message: tokens.colors.message,\n\n    // Overlay\n    overlay: tokens.colors.overlay,\n    backdrop: tokens.colors.backdrop,\n\n    // Icon\n    icon: tokens.colors.icon,\n\n    // Platform\n    platform: tokens.colors.platform,\n  },\n  typography: tokens.typography,\n  spacing: tokens.spacing,\n  borderRadius: tokens.borderRadius,\n  shadows: tokens.shadows,\n  transitions: tokens.transitions,\n  animation: tokens.animation,\n  zIndex: tokens.zIndex,\n  breakpoints: tokens.breakpoints,\n};\n\nexport type DarkTheme = typeof darkTheme;\n","import { createGlobalStyle } from 'styled-components';\n\nexport const GlobalStyle = createGlobalStyle`\n  /* Universal tap highlight removal - nuclear option for Android WebKit */\n  * {\n    -webkit-tap-highlight-color: transparent !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  html {\n    /* Ensure tap highlight is disabled at root level */\n    -webkit-tap-highlight-color: transparent;\n    -webkit-touch-callout: none;\n  }\n\n  body {\n    margin: 0;\n    padding: 0;\n    font-family: ${({ theme }) => theme.fonts.body};\n    color: ${({ theme }) => theme.colors.text};\n    background-color: ${({ theme }) => theme.colors.surface};\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    /* Disable tap highlight on body as well */\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Remove mobile tap highlight for ALL interactive elements */\n  a,\n  button,\n  input,\n  select,\n  textarea,\n  label,\n  [role=\"button\"],\n  [role=\"link\"],\n  [role=\"tab\"],\n  [role=\"menuitem\"],\n  [role=\"option\"],\n  [tabindex]:not([tabindex=\"-1\"]),\n  [onclick] {\n    -webkit-tap-highlight-color: transparent !important;\n    -webkit-touch-callout: none;\n    touch-action: manipulation;\n  }\n\n  button {\n    font-family: inherit;\n    /* Prevent text selection flash on tap */\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n","import { tokens } from './tokens';\n\n/**\n * Light Theme\n * Applies light mode styling using token values.\n * Uses inverted colors from the dark theme for light backgrounds.\n * Components should use theme values via styled-components ThemeProvider.\n */\nexport const lightTheme = {\n  name: 'light',\n  colors: {\n    // Brand\n    primary: tokens.colors.primary,\n    secondary: tokens.colors.secondary,\n    accent: tokens.colors.accent,\n    seaGreen: tokens.colors.seaGreen,\n\n    // Backgrounds - light theme (inverted from dark)\n    background: {\n      darkest: '#FFFFFF',\n      darker: '#F7F8FA',\n      dark: '#EDEFF2',\n      light: '#E5E7EB',\n    },\n\n    // Surfaces\n    surface: '#FFFFFF',\n    surfaceHover: '#F7F8FA',\n\n    // Text - light theme (inverted)\n    text: {\n      primary: '#1F2937',\n      secondary: '#4B5563',\n      tertiary: '#9CA3AF',\n      disabled: '#D1D5DB',\n    },\n    textPrimary: '#1F2937',\n    textSecondary: '#4B5563',\n    textTertiary: '#9CA3AF',\n    textDisabled: '#D1D5DB',\n\n    // Semantic\n    success: tokens.colors.success,\n    error: tokens.colors.error,\n    warning: tokens.colors.warning,\n    info: tokens.colors.info,\n\n    // Status\n    status: tokens.colors.status,\n\n    // Connection\n    connection: tokens.colors.connection,\n\n    // Border - light theme\n    border: {\n      default: 'rgba(0, 0, 0, 0.1)',\n      subtle: 'rgba(0, 0, 0, 0.05)',\n      hover: 'rgba(0, 0, 0, 0.2)',\n      focus: tokens.colors.primary,\n      error: tokens.colors.error,\n    },\n    borderDefault: 'rgba(0, 0, 0, 0.1)',\n    borderFocus: tokens.colors.primary,\n\n    // Message\n    message: {\n      user: '#E0F2F1',\n      ai: '#F5F5F5',\n      system: '#E8E8E8',\n    },\n\n    // Overlay\n    overlay: 'rgba(0, 0, 0, 0.3)',\n    backdrop: 'rgba(255, 255, 255, 0.95)',\n\n    // Icon\n    icon: {\n      default: '#4B5563',\n      muted: '#9CA3AF',\n      active: tokens.colors.primary,\n    },\n\n    // Platform\n    platform: tokens.colors.platform,\n  },\n  typography: tokens.typography,\n  spacing: tokens.spacing,\n  borderRadius: tokens.borderRadius,\n  shadows: tokens.shadows,\n  transitions: tokens.transitions,\n  animation: tokens.animation,\n  zIndex: tokens.zIndex,\n  breakpoints: tokens.breakpoints,\n};\n\nexport type LightTheme = typeof lightTheme;\n"]}

package/dist/theme/index.d.cts

@@ -166,6 +166,19 @@ declare const darkTheme: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     zIndex: {
         readonly base: 0;
@@ -353,6 +366,19 @@ declare const lightTheme: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     zIndex: {
         readonly base: 0;
@@ -372,11 +398,6 @@ declare const lightTheme: {
     };
 };
 
-/**
- * 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: {
     readonly colors: {
         readonly primary: "#2CB0AB";
@@ -434,6 +455,17 @@ declare const tokens: {
             readonly focus: "#2CB0AB";
             readonly error: "#EF4444";
         };
+        readonly category: {
+            readonly setup: "#459FB9";
+            readonly integration: "#8B5CF6";
+            readonly generation: "#2CB0AB";
+            readonly image: "#EC4899";
+            readonly scheduling: "#F59E0B";
+            readonly completion: "#4EB999";
+            readonly processing: "#459FB9";
+            readonly custom: "#6B7280";
+            readonly notion: "#6B7280";
+        };
         readonly scrollbar: {
             readonly track: "transparent";
             readonly thumb: "rgba(255, 255, 255, 0.2)";
@@ -543,6 +575,19 @@ declare const tokens: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     readonly zIndex: {
         readonly base: 0;

package/dist/theme/index.d.ts

@@ -166,6 +166,19 @@ declare const darkTheme: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     zIndex: {
         readonly base: 0;
@@ -353,6 +366,19 @@ declare const lightTheme: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     zIndex: {
         readonly base: 0;
@@ -372,11 +398,6 @@ declare const lightTheme: {
     };
 };
 
-/**
- * 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: {
     readonly colors: {
         readonly primary: "#2CB0AB";
@@ -434,6 +455,17 @@ declare const tokens: {
             readonly focus: "#2CB0AB";
             readonly error: "#EF4444";
         };
+        readonly category: {
+            readonly setup: "#459FB9";
+            readonly integration: "#8B5CF6";
+            readonly generation: "#2CB0AB";
+            readonly image: "#EC4899";
+            readonly scheduling: "#F59E0B";
+            readonly completion: "#4EB999";
+            readonly processing: "#459FB9";
+            readonly custom: "#6B7280";
+            readonly notion: "#6B7280";
+        };
         readonly scrollbar: {
             readonly track: "transparent";
             readonly thumb: "rgba(255, 255, 255, 0.2)";
@@ -543,6 +575,19 @@ declare const tokens: {
             readonly smooth: "cubic-bezier(0.4, 0, 0.2, 1)";
             readonly linear: "linear";
         };
+        readonly overlay: {
+            readonly duration: "200ms";
+            readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly typewriter: {
+            readonly speed: "50ms";
+        };
+        readonly spinner: {
+            readonly duration: "1000ms";
+        };
+        readonly pulse: {
+            readonly duration: "2000ms";
+        };
     };
     readonly zIndex: {
         readonly base: 0;

package/dist/theme/index.js

@@ -3,66 +3,44 @@ import { createGlobalStyle } from 'styled-components';
 // src/theme/tokens.ts
 var tokens = {
   colors: {
-    // Brand colors
     primary: "#2CB0AB",
-    // Teal (main brand color)
     secondary: "#264E68",
-    // Deep Blue
     accent: "#459FB9",
-    // Sky Blue
     seaGreen: "#4EB999",
-    // Sea Green (additional brand color)
-    // Backgrounds - dark theme optimized
     background: {
       darkest: "#0a1b2a",
-      // Darkest Blue (brand color)
       darker: "#151a26",
-      // Discord gray (preserved)
       dark: "#1b2230",
-      // Discord surface gray (preserved)
       light: "#252d3d"
-      // Discord border gray (preserved)
     },
-    // Text hierarchy
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
       tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
-    // Semantic colors
     success: "#2CB0AB",
-    // Teal (brand aligned)
     error: "#EF4444",
     warning: "#F59E0B",
     info: "#459FB9",
-    // Sky Blue (brand aligned)
-    // Status colors (for workflow/SSE events)
     status: {
       pending: "#6B7280",
       editing: "#3B82F6",
       idle: "#6B7280",
       running: "#459FB9",
-      // Sky Blue (brand aligned)
       completed: "#2CB0AB",
-      // Teal (brand aligned)
       failed: "#EF4444",
       timeout: "#F59E0B",
-      // Badge status (online/offline pattern)
       online: "#2CB0AB",
       offline: "#EF4444",
       busy: "#459FB9"
     },
-    // Connection status
     connection: {
       connected: "#2CB0AB",
-      // Teal (brand aligned)
       streaming: "#459FB9",
-      // Sky Blue (brand aligned)
       disconnected: "#EF4444",
       reconnecting: "#F59E0B"
     },
-    // Surface variants (for overlays, cards, panels)
     surface: {
       base: "#1b2230",
       elevated: "#252d3d",
@@ -73,40 +51,41 @@ var tokens = {
       glass: "rgba(255, 255, 255, 0.26)",
       glassBorder: "rgba(255, 255, 255, 0.3)"
     },
-    // UI Element colors
     border: {
       default: "rgba(255, 255, 255, 0.1)",
       subtle: "rgba(255, 255, 255, 0.05)",
       hover: "rgba(255, 255, 255, 0.2)",
       focus: "#2CB0AB",
-      // Teal (brand aligned)
       error: "#EF4444"
     },
-    // Scrollbar colors
+    category: {
+      setup: "#459FB9",
+      integration: "#8B5CF6",
+      generation: "#2CB0AB",
+      image: "#EC4899",
+      scheduling: "#F59E0B",
+      completion: "#4EB999",
+      processing: "#459FB9",
+      custom: "#6B7280",
+      notion: "#6B7280"
+    },
     scrollbar: {
       track: "transparent",
       thumb: "rgba(255, 255, 255, 0.2)",
       thumbHover: "rgba(255, 255, 255, 0.3)"
     },
-    // Message bubbles
     message: {
       user: "#264E68",
-      // Deep Blue (brand color)
       ai: "#1b2230",
-      // Dark background
       system: "#151a26"
-      // Darker background
     },
-    // Overlays and backdrops
     overlay: "rgba(0, 0, 0, 0.5)",
     backdrop: "rgba(27, 34, 48, 0.95)",
-    // Icon colors
     icon: {
       default: "#B4B8C5",
       muted: "#6B7280",
       active: "#2CB0AB"
     },
-    // Platform brand colors (for social media icons)
     platform: {
       facebook: "#1877F2",
       instagram: "#E4405F",
@@ -129,21 +108,13 @@ var tokens = {
     },
     fontSize: {
       xs: "0.875rem",
-      // 14px (was 12px, increased for better readability)
       sm: "1rem",
-      // 16px (was 14px, increased for better readability)
       base: "1.125rem",
-      // 18px (was 16px, increased for better readability)
       lg: "1.125rem",
-      // 18px (heading size, unchanged)
       xl: "1.25rem",
-      // 20px (heading size, unchanged)
       "2xl": "1.5rem",
-      // 24px (heading size, unchanged)
       "3xl": "1.875rem",
-      // 30px (heading size, unchanged)
       "4xl": "2.25rem"
-      // 36px (heading size, unchanged)
     },
     fontWeight: {
       light: 300,
@@ -160,34 +131,21 @@ var tokens = {
   },
   spacing: {
     xs: "0.25rem",
-    // 4px
     sm: "0.5rem",
-    // 8px
     md: "1rem",
-    // 16px
     lg: "1.5rem",
-    // 24px
     xl: "2rem",
-    // 32px
     "2xl": "3rem",
-    // 48px
     "3xl": "4rem"
-    // 64px
   },
   borderRadius: {
     none: "0",
     sm: "0.25rem",
-    // 4px
     md: "0.5rem",
-    // 8px
     lg: "0.75rem",
-    // 12px
     xl: "1rem",
-    // 16px
     "2xl": "1.5rem",
-    // 24px
     full: "9999px"
-    // Fully rounded
   },
   shadows: {
     none: "none",
@@ -219,6 +177,19 @@ var tokens = {
       exit: "cubic-bezier(0.4, 0, 1, 1)",
       smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
       linear: "linear"
+    },
+    overlay: {
+      duration: "200ms",
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    typewriter: {
+      speed: "50ms"
+    },
+    spinner: {
+      duration: "1000ms"
+    },
+    pulse: {
+      duration: "2000ms"
     }
   },
   zIndex: {