@airsurfer09/web-handsfree
Version:
A React package for integrating Convai's AI-powered voice assistants with LiveKit for real-time audio/video conversations
290 lines (285 loc) • 8.27 kB
JavaScript
// Aero AI Module Theme - Translucent Glass Design System
export const aeroTheme = {
// Color Palette
colors: {
// Primary colors
primary: {
50: "#f0f9ff",
100: "#e0f2fe",
200: "#bae6fd",
300: "#7dd3fc",
400: "#38bdf8",
500: "#0ea5e9",
600: "#0284c7",
700: "#0369a1",
800: "#075985",
900: "#0c4a6e",
},
convai: {
light: "#1EB453",
medium: "#0b6049",
dark: "#084c3a",
},
// Neutral colors for glass effects
neutral: {
50: "#fafafa",
100: "#f5f5f5",
200: "#e5e5e5",
300: "#d4d4d4",
400: "#a3a3a3",
500: "#737373",
600: "#525252",
700: "#404040",
800: "#262626",
900: "#171717",
},
// Glass overlay colors
glass: {
light: "rgba(255, 255, 255, 0.1)",
medium: "rgba(255, 255, 255, 0.15)",
dark: "rgba(0, 0, 0, 0.1)",
backdrop: "rgba(255, 255, 255, 0.8)",
card: "rgba(255, 255, 255, 0.9)",
backdropLight: "blur(20px)",
borderLight: "1px solid rgba(255, 255, 255, 0.2)",
},
// Accent colors
accent: {
purple: "#8b5cf6",
green: "#10b981",
blue: "#3b82f6",
orange: "#f59e0b",
red: "#ef4444",
},
// Error colors
error: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
},
// Text colors
text: {
primary: "#1f2937",
secondary: "#6b7280",
tertiary: "#9ca3af",
inverse: "#ffffff",
},
},
// Typography
typography: {
fontFamily: {
primary: '"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
title: '"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
header: '"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
mono: 'SF Mono, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
},
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
},
sizes: {
xs: "0.75rem",
sm: "0.875rem",
body: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
caption: "0.75rem",
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
},
},
// Spacing
spacing: {
xs: "0.25rem",
sm: "0.5rem",
md: "1rem",
lg: "1.5rem",
xl: "2rem",
"2xl": "3rem",
"3xl": "4rem",
},
// Border Radius
borderRadius: {
none: "0",
sm: "0.25rem",
md: "0.5rem",
lg: "0.75rem",
xl: "1rem",
"2xl": "1.5rem",
full: "9999px",
},
// Shadows
shadows: {
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
glass: "0 8px 32px rgba(0, 0, 0, 0.1)",
},
// Glass Effects
glass: {
backdrop: "blur(20px)",
backdropLight: "blur(10px)",
backdropHeavy: "blur(40px)",
border: "1px solid rgba(255, 255, 255, 0.2)",
borderLight: "1px solid rgba(255, 255, 255, 0.1)",
},
// Transitions
transitions: {
fast: "0.15s ease-in-out",
normal: "0.2s ease-in-out",
slow: "0.3s ease-in-out",
spring: "0.4s cubic-bezier(0.4, 0, 0.2, 1)",
snappy: "all 0.1s ease-out",
},
// Z-index scale
zIndex: {
base: 1,
dropdown: 1000,
sticky: 1020,
fixed: 1030,
modal: 1040,
popover: 1050,
tooltip: 1060,
},
};
// Common glass component styles
export const glassStyles = {
// Primary glass container
container: `
background: ${aeroTheme.colors.glass.backdrop};
backdrop-filter: ${aeroTheme.glass.backdrop};
border: ${aeroTheme.glass.border};
border-radius: ${aeroTheme.borderRadius.xl};
box-shadow: ${aeroTheme.shadows.glass};
`,
// Light glass overlay
overlay: `
background: ${aeroTheme.colors.glass.light};
backdrop-filter: ${aeroTheme.glass.backdropLight};
border: ${aeroTheme.glass.borderLight};
border-radius: ${aeroTheme.borderRadius.lg};
`,
// Card glass effect
card: `
background: ${aeroTheme.colors.glass.card};
backdrop-filter: ${aeroTheme.glass.backdrop};
border: ${aeroTheme.glass.borderLight};
border-radius: ${aeroTheme.borderRadius.lg};
box-shadow: ${aeroTheme.shadows.md};
`,
// Input glass effect
input: `
background: ${aeroTheme.colors.glass.medium};
backdrop-filter: ${aeroTheme.glass.backdropLight};
border: ${aeroTheme.glass.borderLight};
border-radius: ${aeroTheme.borderRadius.full};
transition: ${aeroTheme.transitions.normal};
&:focus {
background: ${aeroTheme.colors.glass.card};
border-color: ${aeroTheme.colors.primary[400]};
box-shadow: 0 0 0 3px ${aeroTheme.colors.primary[100]};
}
`,
// Button glass effect
button: `
background: ${aeroTheme.colors.glass.medium};
backdrop-filter: ${aeroTheme.glass.backdropLight};
border: ${aeroTheme.glass.borderLight};
border-radius: ${aeroTheme.borderRadius.lg};
transition: ${aeroTheme.transitions.normal};
&:hover {
background: ${aeroTheme.colors.glass.card};
transform: translateY(-1px);
box-shadow: ${aeroTheme.shadows.lg};
}
&:active {
transform: translateY(0);
}
`,
};
// Icon sizes for consistency
export const iconSizes = {
xs: "12px",
sm: "16px",
md: "20px",
lg: "24px",
xl: "32px",
"2xl": "40px",
};
// Common component variants
export const variants = {
// Button variants
button: {
primary: `
background: linear-gradient(135deg, ${aeroTheme.colors.primary[500]}, ${aeroTheme.colors.primary[600]});
color: ${aeroTheme.colors.text.inverse};
box-shadow: 0 4px 12px ${aeroTheme.colors.primary[200]};
`,
secondary: `
background: ${aeroTheme.colors.glass.medium};
color: ${aeroTheme.colors.text.primary};
border: ${aeroTheme.glass.borderLight};
`,
ghost: `
background: transparent;
color: ${aeroTheme.colors.text.secondary};
&:hover {
background: ${aeroTheme.colors.glass.light};
color: ${aeroTheme.colors.text.primary};
}
`,
},
// Input variants
input: {
default: glassStyles.input,
search: `
${glassStyles.input}
padding-left: 2.5rem;
`,
},
// Card variants
card: {
default: glassStyles.card,
elevated: `
${glassStyles.card}
box-shadow: ${aeroTheme.shadows.xl};
`,
interactive: `
${glassStyles.card}
cursor: pointer;
transition: ${aeroTheme.transitions.normal};
&:hover {
transform: translateY(-2px);
box-shadow: ${aeroTheme.shadows.xl};
}
`,
},
};
//# sourceMappingURL=theme.js.map