/** * ChatKit Design Tokens * ===================== * * This file is the SINGLE SOURCE OF TRUTH for all design tokens. * It is loaded by every widget via: * * WHAT'S HERE (Global): * - Primitive tokens: Raw color values, spacing, radius, shadows * - Semantic tokens: Themeable values (--bg-surface, --text-primary, etc.) * - Theme overrides: [data-theme="dark"], [data-corners="square"] * - Base reset: html, body, *, button, input * * WHAT'S LOCAL (in each widget's style.css): * - Widget-specific layout and components * - Widget-specific square corner overrides (for layout shifts) * * HOW THEMING WORKS: * 1. Embed script passes URL params: ?theme=dark&corners=square&primary=2563EB * 2. config.js reads params and sets data-* attributes on * 3. CSS selectors like :root[data-theme="dark"] activate overrides * 4. Custom colors are injected as inline style on :root */ :root { /* ========================================= PRIMITIVE TOKENS (Fixed Values) ========================================= */ /* Brand Colors */ --color-brand-primary: #2563EB; /* blue-600 */ --color-brand-primary-contrast: #FFFFFF; --color-brand-accent: #8B5CF6; /* purple-500 */ --color-brand-accent-light: #F3E8FF; /* purple-100 */ --color-brand-accent-subtle: #FAF5FF; /* purple-50 */ --color-brand-accent-dark: #7C3AED; /* purple-600 */ --color-brand-accent-deep: #581C87; /* purple-900 */ /* Neutral Colors (Light Scale) */ --color-neutral-50: #FAFAFA; --color-neutral-100: #F5F5F5; --color-neutral-200: #E5E5E5; --color-neutral-300: #D4D4D4; --color-neutral-400: #A3A3A3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; --color-neutral-950: #0A0A0A; /* Semantic Colors */ --color-success: #22C55E; /* green-500 */ --color-white: #FFFFFF; --color-black: #000000; /* Typography */ --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ /* Radius */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ========================================= SEMANTIC TOKENS (Themable) ========================================= */ /* Default: LIGHT MODE */ --bg-surface: var(--color-white); --bg-surface-subtle: var(--color-neutral-50); --bg-surface-hover: var(--color-neutral-100); --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-500); --text-tertiary: var(--color-neutral-400); --border-subtle: var(--color-neutral-200); --border-default: var(--color-neutral-200); /* Accent Semantics */ --accent-bg-subtle: var(--color-brand-accent-subtle); --accent-border-light: var(--color-brand-accent-light); --accent-text: var(--color-brand-accent-deep); --accent-icon: var(--color-brand-accent-dark); } /* ========================================= OVERRIDES ========================================= */ /* 1. DARK MODE */ :root[data-theme="dark"] { /* Re-map neutrals for Dark Mode */ --bg-surface: #171717; /* neutral-900 */ --bg-surface-subtle: #262626; /* neutral-800 */ --bg-surface-hover: #404040; /* neutral-700 */ --text-primary: #FFFFFF; --text-secondary: #A3A3A3; /* neutral-400 */ --text-tertiary: #737373; /* neutral-500 */ --border-subtle: #262626; /* neutral-800 */ --border-default: #404040; /* neutral-700 */ /* Adjust Shadows for Dark Mode */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5); /* Adjust Accents */ /* In dark mode, subtle bg is darker purple */ --accent-bg-subtle: rgba(139, 92, 246, 0.1); --accent-border-light: rgba(139, 92, 246, 0.2); --accent-text: #E9D5FF; /* purple-200 */ --accent-icon: #A78BFA; /* purple-400 */ } /* 2. SQUARE CORNERS */ :root[data-corners="square"] { --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --radius-full: 0px; } /* Base Reset for Widgets */ html, body { margin: 0; padding: 0; font-family: var(--font-family-sans); -webkit-font-smoothing: antialiased; box-sizing: border-box; overflow: visible; height: auto; min-height: fit-content; background: transparent; color: var(--text-primary); } *, *::before, *::after { box-sizing: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; margin: 0; } input { font-family: inherit; color: var(--text-primary); }