/** * BOND OS Unified Design System - Design Tokens * Centralized CSS Custom Properties (variables) * * ⚠️ CRITICAL: This is the SOURCE OF TRUTH for the design system * * Location: /public/shared/design-tokens.css * Synced to: gui/public/, gui-docs/public/, share-bond-os/public/ * * 🚨 DO NOT EDIT SYNCED COPIES - ONLY EDIT THIS FILE * After editing, run: npm run sync-design-tokens * * Shared across all BOND OS properties: * - docs.bond-os.ai (documentation portal) * - www.bond-os.ai (lead gen site) * - share.bond-os.ai (client sharing platform) * - app.bond-os.ai / dev.bond-os.ai / staging.bond-os.ai (main app) * * Last Updated: 2025-11-13 * * Usage: * - Import this file in your HTML * - Reference variables using var(--token-name) * - Example: color: var(--color-bond-red); * * Updating the design system: * 1. Edit THIS file (/public/shared/design-tokens.css) * 2. Run: npm run sync-design-tokens * 3. Verify: npm run validate-design-system * 4. Commit all synced files together */ :root, [data-theme="bond"] { /* ===== COLOR PALETTE ===== */ /* BOND Theme: Dark canvas with red & light accents */ /* Backgrounds */ --color-deep-dark: #2F2E2E; --color-darker-surface: #3a3939; --color-darkest-depth: #1a1a1a; --color-pure-black: #000000; /* Special: for video backgrounds only */ /* Text */ --color-text-primary: #EAEDEE; --color-text-secondary: #999999; --color-text-tertiary: #666666; /* Accents */ --color-bond-red: #FF4B4F; --color-bond-red-dark: #e63e42; /* UI States */ --color-success: #4a9e7c; --color-success-dark: #3a8e6c; --color-warning: #ff9800; --color-error: #ff6b6f; --color-info: #3b82f6; --color-info-dark: #2563eb; /* Semi-transparent backgrounds for alerts/notifications */ --color-error-background-subtle: rgba(255, 107, 111, 0.15); --color-success-background-subtle: rgba(74, 158, 124, 0.15); --color-warning-background-subtle: rgba(255, 152, 0, 0.15); --color-info-background-subtle: rgba(59, 130, 246, 0.15); --color-inactive-background-subtle: rgba(153, 153, 153, 0.1); /* Borders */ --color-border: #4a4949; /* Workflow Canvas & Edges */ --color-canvas-dots: #EAEDEE; --color-canvas-grid: #2F2E2E; --color-edge-default: #999999; --color-edge-running: #FF4B4F; --color-edge-success: #4a9e7c; --color-edge-error: #ff6b6f; /* Selection & Interaction */ --color-selection-overlay: rgba(255, 75, 79, 0.2); /* Loading States */ --color-spinner-primary: #FF4B4F; /* Workflow Status System - For node status badges */ /* 9 statuses with gradient backgrounds for visual depth */ /* Idle - Not started */ --status-idle-bg: linear-gradient(135deg, #3a3939 0%, #4a4949 100%); --status-idle-text: #999999; --status-idle-border: #4a4949; /* Validating - Initial validation */ --status-validating-bg: linear-gradient(135deg, #4a7c9e 0%, #5a8cae 100%); --status-validating-text: #EAEDEE; --status-validating-border: #5a8cae; /* Waiting - Queued for processing */ --status-waiting-bg: linear-gradient(135deg, #d97706 0%, #b45309 100%); --status-waiting-text: #EAEDEE; --status-waiting-border: #b45309; /* Processing - Active processing */ --status-processing-bg: linear-gradient(135deg, #FF4B4F 0%, #e63e42 100%); --status-processing-text: #EAEDEE; --status-processing-border: #e63e42; --status-processing-glow: none; /* No glow in BOND theme */ /* Running - Currently executing */ --status-running-bg: linear-gradient(135deg, #FF4B4F 0%, #e63e42 100%); --status-running-text: #EAEDEE; --status-running-border: #e63e42; --status-running-glow: none; /* Polling - Checking for results */ --status-polling-bg: linear-gradient(135deg, #cc3c3f 0%, #b53437 100%); --status-polling-text: #EAEDEE; --status-polling-border: #b53437; --status-polling-glow: none; /* Completed - Successfully finished */ --status-completed-bg: linear-gradient(135deg, #4a9e7c 0%, #3a8e6c 100%); --status-completed-text: #EAEDEE; --status-completed-border: #3a8e6c; /* Error - Failed execution */ --status-error-bg: linear-gradient(135deg, #ff6b6f 0%, #ff4b4f 100%); --status-error-text: #EAEDEE; --status-error-border: #ff4b4f; /* Cancelled - User stopped */ --status-cancelled-bg: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); --status-cancelled-text: #EAEDEE; --status-cancelled-border: #4b5563; /* Skipped - Bypassed execution */ --status-skipped-bg: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --status-skipped-text: #78350f; --status-skipped-border: #f59e0b; /* Panel/Control Extended States */ --control-hover: #4a4949; --control-active: #5a5959; --panel-header-background: var(--color-darker-surface); --panel-accent-background: var(--color-darker-surface); --panel-accent-border: var(--color-bond-red); /* Semantic Background Helpers - Solid colors for consistency with Light theme */ --error-background: #3d2829; /* Dark red tint */ --success-background: #273f35; /* Dark green tint */ --info-background: #1e2f42; /* Dark blue tint */ --warning-background: #3d3325; /* Dark orange tint */ /* Semantic Colors (for clarity) */ --color-background-primary: var(--color-deep-dark); --color-background-secondary: var(--color-darker-surface); --color-background-tertiary: var(--color-darkest-depth); --color-accent-primary: var(--color-bond-red); --color-accent-hover: var(--color-bond-red-dark); /* Section Background Colors - for marketing/landing pages with alternating sections */ --section-bg-default: var(--color-deep-dark); /* Default dark section */ --section-bg-elevated: var(--color-darker-surface); /* Slightly elevated dark section */ --section-bg-deep: var(--color-darkest-depth); /* Deepest dark section */ --section-bg-accent: var(--color-bond-red); /* Accent red section */ --section-bg-subtle: rgba(255, 75, 79, 0.05); /* Subtle red tinted section */ /* ===== TYPOGRAPHY ===== */ /* Font Families - All web fonts for cross-environment consistency (HTML + PDF) */ --font-headline: 'Scto Grotesk A Bond', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace; /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* ===== 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-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* ===== COMPONENT WIDTHS ===== */ --width-sidebar: 256px; /* Sidebar/palette width */ --width-panel-sm: 280px; /* Small panel (context menus) */ --width-panel-md: 350px; /* Medium panel (side panels) */ --width-panel-lg: 400px; /* Large panel (code editors, detailed views) */ --width-toast: 400px; /* Toast notification max width */ /* ===== BORDER RADIUS ===== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-badge: 10px; --radius-full: 9999px; /* ===== SHADOWS ===== */ /* BOND/Dark theme: Subtle light shadows for visibility on dark backgrounds */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.05); --shadow-standard: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(255, 255, 255, 0.08); --shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(255, 255, 255, 0.1); --shadow-deep: 0 12px 24px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(255, 255, 255, 0.12); --shadow-floating: 0 20px 40px rgba(0, 0, 0, 0.9), 0 8px 16px rgba(255, 255, 255, 0.15); /* ===== GRADIENTS ===== */ --gradient-bond-red: linear-gradient(135deg, #FF4B4F 0%, #e63e42 100%); --gradient-background: linear-gradient(135deg, #2F2E2E 0%, #1a1919 100%); --gradient-card: linear-gradient(135deg, #3a3939 0%, #2F2E2E 100%); /* ===== TRANSITIONS ===== */ --transition-fast: 150ms; --transition-normal: 300ms; --transition-slow: 500ms; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-ease-in: cubic-bezier(0.4, 0, 1, 1); --transition-ease-out: cubic-bezier(0, 0, 0.2, 1); --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX LAYERS ===== */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; /* ===== OPACITY VALUES ===== */ --opacity-disabled: 0.5; --opacity-hover: 0.8; --opacity-muted: 0.6; /* ===== COMMON PATTERNS ===== */ /* Card Styles */ --card-bg: var(--color-darker-surface); --card-border: 1px solid var(--color-border); --card-border-accent: 4px solid var(--color-bond-red); --card-padding: var(--spacing-6); --card-radius: var(--radius-md); --card-shadow: var(--shadow-standard); /* Button Styles */ --button-padding-y: var(--spacing-3); --button-padding-x: var(--spacing-4); --button-radius: var(--radius-md); --button-transition: all var(--transition-normal) var(--transition-ease); /* Input Styles */ --input-bg: var(--color-darker-surface); --input-border: 2px solid var(--color-border); --input-border-focus: 2px solid var(--color-bond-red); --input-padding: var(--spacing-3); --input-radius: var(--radius-md); /* Header Styles */ --header-bg: var(--color-darker-surface); --header-border: 1px solid var(--color-border); --header-height: 4rem; /* ===== SEMANTIC UI TOKENS ===== */ /* Theme-aware semantic mappings for UI components */ /* These provide consistent meaning across themes while allowing theme-specific values */ /* Node/Workflow Components */ --semantic-node-bg: var(--color-deep-dark); --semantic-node-border: var(--color-bond-red); --semantic-node-text: var(--color-text-primary); --semantic-node-subtext: var(--color-text-secondary); /* Panel/Control Components */ --semantic-panel-bg: var(--color-deep-dark); --semantic-panel-border: var(--color-border); --semantic-control-bg: var(--color-darker-surface); --semantic-control-border: var(--color-border); --semantic-control-text: var(--color-text-primary); /* Button Components */ --semantic-button-bg: var(--color-bond-red); --semantic-button-bg-hover: var(--color-bond-red-dark); --semantic-button-text: var(--color-text-primary); /* Canvas/Workflow Background */ --semantic-canvas-bg: var(--color-darkest-depth); /* Logo Filter - white logo works on dark backgrounds */ --logo-filter: none; } /* ===== LIGHT THEME ===== */ /* Light canvas with dark & red accents */ [data-theme="light"] { /* Backgrounds - inverted */ --color-deep-dark: #f9fafb; /* Lightest off-white, never pure white */ --color-darker-surface: #f3f4f6; --color-darkest-depth: #e5e7eb; --color-pure-black: #000000; /* Text - inverted */ --color-text-primary: #1a1a1a; --color-text-secondary: #6b7280; --color-text-tertiary: #9ca3af; /* Accents - same red */ --color-bond-red: #FF4B4F; --color-bond-red-dark: #e63e42; /* UI States - adjusted for light bg */ --color-success: #10b981; --color-success-dark: #059669; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; --color-info-dark: #2563eb; /* Borders - lighter */ --color-border: #e5e7eb; /* Logo Filter - invert white logo to black for light backgrounds */ --logo-filter: invert(1) brightness(0); /* Workflow Canvas & Edges - adjusted for light background */ --color-canvas-dots: #9ca3af; /* Darker dots for light background */ --color-canvas-grid: #f3f4f6; /* Light gray grid */ --color-edge-default: #4b5563; /* Darker gray for visibility */ --color-edge-running: #FF4B4F; /* Same red */ --color-edge-success: #10b981; /* Match light theme success */ --color-edge-error: #ef4444; /* Match light theme error */ /* Selection & Interaction */ --color-selection-overlay: rgba(229, 231, 235, 0.6); /* Light gray for light theme */ /* Loading States */ --color-spinner-primary: #FF4B4F; /* Same BOND red */ /* Workflow Status System - Light theme versions */ /* Brighter, more saturated gradients for light background */ /* Idle */ --status-idle-bg: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); --status-idle-text: #6b7280; --status-idle-border: #e5e7eb; /* Validating */ --status-validating-bg: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%); --status-validating-text: #f9fafb; --status-validating-border: #60a5fa; /* Waiting */ --status-waiting-bg: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%); --status-waiting-text: #78350f; --status-waiting-border: #fbbf24; /* Processing */ --status-processing-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); --status-processing-text: #f9fafb; --status-processing-border: #3b82f6; --status-processing-glow: rgba(59, 130, 246, 0.3); /* Running */ --status-running-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); --status-running-text: #f9fafb; --status-running-border: #3b82f6; --status-running-glow: rgba(59, 130, 246, 0.3); /* Polling */ --status-polling-bg: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); --status-polling-text: #f9fafb; --status-polling-border: #8b5cf6; --status-polling-glow: rgba(139, 92, 246, 0.3); /* Completed */ --status-completed-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%); --status-completed-text: #f9fafb; --status-completed-border: #10b981; /* Error */ --status-error-bg: linear-gradient(135deg, #f87171 0%, #ef4444 100%); --status-error-text: #f9fafb; --status-error-border: #ef4444; /* Cancelled */ --status-cancelled-bg: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); --status-cancelled-text: #f9fafb; --status-cancelled-border: #6b7280; /* Skipped */ --status-skipped-bg: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%); --status-skipped-text: #78350f; --status-skipped-border: #f59e0b; /* Panel/Control Extended States */ --control-hover: #f3f4f6; --control-active: #f3f4f6; --panel-header-background: #f8fafc; --panel-accent-background: #f0f9ff; --panel-accent-border: #bae6fd; /* Semantic Background Helpers */ --error-background: #fef2f2; --success-background: #f0fdf4; --info-background: #eff6ff; --warning-background: #fffbeb; /* Semantic Colors */ --color-background-primary: var(--color-deep-dark); --color-background-secondary: var(--color-darker-surface); --color-background-tertiary: var(--color-darkest-depth); --color-accent-primary: var(--color-bond-red); --color-accent-hover: var(--color-bond-red-dark); /* Section Background Colors - Light theme overrides */ --section-bg-default: var(--color-deep-dark); /* Primary background (white in light theme) */ --section-bg-elevated: var(--color-darker-surface); /* Elevated surface (off-white) */ --section-bg-deep: var(--color-darkest-depth); /* Deeper background (light gray) */ --section-bg-accent: var(--color-bond-red); /* Accent red section (same) */ --section-bg-subtle: rgba(255, 75, 79, 0.05); /* Subtle red tinted section */ /* Gradients */ --gradient-bond-red: linear-gradient(135deg, #FF4B4F 0%, #e63e42 100%); --gradient-card: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%); --gradient-dark-bg: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); /* Shadows - softer for light theme */ --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-standard: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-deep: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-focus: 0 0 0 3px rgba(255, 75, 79, 0.3); /* Input Styles */ --input-bg: #f9fafb; --input-border: 2px solid var(--color-border); --input-border-focus: 2px solid var(--color-bond-red); /* Header Styles */ --header-bg: #f9fafb; --header-border: 1px solid var(--color-border); /* ===== SEMANTIC UI TOKENS (Light Theme Overrides) ===== */ /* Light theme uses black borders and buttons for contrast */ /* Node/Workflow Components - Black borders in light theme */ --semantic-node-bg: var(--color-deep-dark); /* White */ --semantic-node-border: #000000; /* Black border for contrast */ --semantic-node-text: var(--color-text-primary); /* Dark text */ --semantic-node-subtext: var(--color-text-secondary); /* Panel/Control Components */ --semantic-panel-bg: var(--color-deep-dark); /* White */ --semantic-panel-border: var(--color-border); /* Light gray */ --semantic-control-bg: var(--color-deep-dark); /* White */ --semantic-control-border: var(--color-border); /* Light gray */ --semantic-control-text: var(--color-text-primary); /* Dark text */ /* Button Components - Black buttons in light theme */ --semantic-button-bg: #000000; /* Black button */ --semantic-button-bg-hover: #1f2937; /* Dark gray hover */ --semantic-button-text: #f9fafb; /* Off-white text on black */ /* Canvas/Workflow Background */ --semantic-canvas-bg: #f9fafb; /* Off-white canvas */ } /* Keep all other tokens theme-agnostic (typography, spacing, etc.) */ :root { /* ===== WORKFLOW CANVAS TOKENS ===== */ /* For React Flow workflow editor */ /* Canvas Background */ --canvas-background-light: #f9fafb; --canvas-background-dark: #1a1a1a; --canvas-dots-light: #d1d5db; --canvas-dots-dark: #EAEDEE; --canvas-grid: #f3f4f6; /* Node Styling */ --node-border-width: 1px; --node-border-radius: var(--radius-lg); --node-min-width: 280px; --node-padding: var(--spacing-4); /* Edge Styling */ --edge-width: 1px; --edge-width-hover: 1.5px; --edge-width-running: 2px; --edge-animation-duration: 1s; --edge-dash-length: 8px; --edge-dash-gap: 4px; /* Connection Handles */ --handle-size-default: 12px; --handle-size-source: 20px; --handle-hitbox-size: 32px; --handle-hover-ring-size: 120px; --handle-border-width: 2px; /* React Flow Controls & Minimap */ --control-background: var(--color-darker-surface); --control-border-color: var(--color-border); --control-text-color: var(--color-text-primary); --control-icon-color: var(--color-text-primary); --minimap-background: var(--color-darker-surface); --minimap-mask-color: var(--color-selection-overlay); --minimap-node-color: var(--color-bond-red); --minimap-border-radius: var(--radius-sm); /* ===== STATUS BADGE TOKENS ===== */ /* For workflow status indicators */ --badge-offset-top: calc(-1 * var(--spacing-2)); --badge-offset-right: calc(-1 * var(--spacing-2)); --badge-padding: var(--spacing-1) var(--spacing-2); --badge-border-radius: var(--radius-full); --badge-font-size: 0.6875rem; /* 11px */ --badge-font-weight: var(--font-weight-medium); --badge-text-transform: uppercase; --badge-letter-spacing: 0.02em; /* ===== FORM COMPONENT TOKENS ===== */ /* Input Heights */ --input-height-sm: 2rem; /* 32px */ --input-height-md: 2.5rem; /* 40px */ --input-height-lg: 3rem; /* 48px */ --input-font-size: var(--font-size-sm); --input-border-width: 2px; /* Select Dropdowns */ --select-arrow-size: 1.25rem; --select-padding-right: 2.5rem; /* Checkboxes & Radio */ --checkbox-size: 1.25rem; /* 20px */ --radio-size: 1.25rem; --check-icon-size: 0.875rem; /* 14px */ /* Range Sliders */ --slider-track-height: 8px; --slider-thumb-size: 20px; --slider-thumb-border-width: 2px; --slider-thumb-bg: var(--color-bond-red); --slider-thumb-border: var(--color-text-primary); --slider-track-bg: var(--color-border); /* ===== BUTTON TOKENS ===== */ /* Button Heights */ --button-height-sm: 2rem; /* 32px */ --button-height-md: 2.5rem; /* 40px */ --button-height-lg: 3rem; /* 48px */ /* Button Padding */ --button-padding-sm: var(--spacing-2) var(--spacing-3); --button-padding-md: var(--spacing-3) var(--spacing-4); --button-padding-lg: var(--spacing-4) var(--spacing-6); /* Button Typography */ --button-font-weight: var(--font-weight-semibold); --button-font-size-sm: var(--font-size-xs); --button-font-size-md: var(--font-size-sm); --button-font-size-lg: var(--font-size-base); /* Icon Buttons */ --icon-button-padding: var(--spacing-1); --icon-button-padding-md: var(--spacing-2); --icon-button-padding-lg: var(--spacing-3); /* ===== ICON SIZING ===== */ --icon-size-xs: 1rem; /* 16px */ --icon-size-sm: 1.25rem; /* 20px */ --icon-size-md: 1.5rem; /* 24px */ --icon-size-lg: 2rem; /* 32px */ --icon-size-xl: 3rem; /* 48px */ /* ===== AVATAR SIZING ===== */ --avatar-size-xs: 1.5rem; /* 24px */ --avatar-size-sm: 2rem; /* 32px */ --avatar-size-md: 2.5rem; /* 40px */ --avatar-size-lg: 3rem; /* 48px */ --avatar-size-xl: 4rem; /* 64px */ /* ===== MODAL TOKENS ===== */ --modal-width-sm: 24rem; /* 384px */ --modal-width-md: 32rem; /* 512px */ --modal-width-lg: 48rem; /* 768px */ --modal-width-xl: 64rem; /* 1024px */ --modal-backdrop: rgba(0, 0, 0, 0.6); --modal-padding: var(--spacing-6); --modal-header-padding: var(--spacing-4) var(--spacing-6); --modal-footer-padding: var(--spacing-3) var(--spacing-6); /* ===== PANEL TOKENS ===== */ --panel-padding-sm: var(--spacing-3) var(--spacing-4); --panel-padding-md: var(--spacing-4) var(--spacing-6); --panel-padding-lg: var(--spacing-6) var(--spacing-8); --panel-header-padding: var(--spacing-4) var(--spacing-6); --panel-footer-padding: var(--spacing-3) var(--spacing-6); /* ===== NAVIGATION TOKENS ===== */ --nav-height: 3.5rem; /* 56px */ --nav-item-padding: var(--spacing-2) var(--spacing-3); --nav-item-font-size: var(--font-size-xs); /* ===== TOAST NOTIFICATION TOKENS ===== */ --toast-width: 20rem; /* 320px */ --toast-padding: var(--spacing-4); --toast-icon-size: var(--icon-size-sm); --toast-duration: 4000ms; --toast-transition-duration: 300ms; /* ===== LOADING STATE TOKENS ===== */ --spinner-size-sm: 1rem; /* 16px */ --spinner-size-md: 1.5rem; /* 24px */ --spinner-size-lg: 2rem; /* 32px */ --spinner-border-width: 2px; --spinner-animation-duration: 0.8s; /* ===== INTERACTION TOKENS ===== */ --hover-lift: -2px; --hover-scale: 1.05; --active-scale: 0.98; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ===== TABLE TOKENS ===== */ --table-cell-padding: var(--spacing-3) var(--spacing-4); --table-header-bg: var(--color-background-secondary); --table-row-hover-bg: var(--color-background-secondary); --table-border: 1px solid var(--color-border); /* ===== DROPDOWN TOKENS ===== */ --dropdown-width: 16rem; /* 256px */ --dropdown-max-height: 20rem; /* 320px */ --dropdown-item-padding: var(--spacing-2) var(--spacing-3); --dropdown-item-hover-bg: var(--color-background-secondary); } /* ===== UTILITY CLASSES ===== */ /* These classes use the tokens above for common patterns */ .bond-card { background-color: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); } .bond-card-accent { border-left: var(--card-border-accent); } .bond-button-primary { background: var(--gradient-bond-red); color: var(--color-text-primary); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); border: none; font-weight: var(--font-weight-semibold); transition: var(--button-transition); cursor: pointer; } .bond-button-primary:hover { opacity: var(--opacity-hover); transform: translateY(-2px); } .bond-button-secondary { background-color: var(--color-background-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); font-weight: var(--font-weight-medium); transition: var(--button-transition); cursor: pointer; } .bond-button-secondary:hover { background-color: var(--color-background-primary); } .bond-input { background-color: var(--input-bg); border: var(--input-border); padding: var(--input-padding); border-radius: var(--input-radius); color: var(--color-text-primary); font-family: var(--font-body); transition: border-color var(--transition-normal); } .bond-input:focus { border: var(--input-border-focus); outline: none; } .bond-headline { font-family: var(--font-headline); color: var(--color-text-primary); font-weight: var(--font-weight-bold); } .bond-text-body { font-family: var(--font-body); color: var(--color-text-primary); line-height: var(--line-height-normal); } .bond-text-muted { color: var(--color-text-secondary); } .bond-gradient-bg { background: var(--gradient-background); } .bond-gradient-red { background: var(--gradient-bond-red); } /* === Extended Button Utilities === */ .bond-button-destructive { background-color: var(--color-error); color: var(--color-text-primary); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); border: none; font-weight: var(--button-font-weight); transition: var(--button-transition); cursor: pointer; } .bond-button-destructive:hover { opacity: var(--opacity-hover); } .bond-button-ghost { background-color: transparent; color: var(--color-text-secondary); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); border: none; font-weight: var(--font-weight-medium); transition: var(--button-transition); cursor: pointer; } .bond-button-ghost:hover { background-color: var(--color-background-secondary); color: var(--color-text-primary); } .bond-button-sm { padding: var(--button-padding-sm); font-size: var(--button-font-size-sm); height: var(--button-height-sm); } .bond-button-lg { padding: var(--button-padding-lg); font-size: var(--button-font-size-lg); height: var(--button-height-lg); } .bond-icon-button { padding: var(--icon-button-padding); border-radius: var(--radius-md); border: none; background-color: transparent; color: var(--color-text-secondary); cursor: pointer; transition: var(--button-transition); display: inline-flex; align-items: center; justify-content: center; } .bond-icon-button:hover { background-color: var(--color-background-secondary); color: var(--color-text-primary); } /* === Input & Form Utilities === */ .bond-select { background-color: var(--input-bg); border: var(--input-border); padding: var(--input-padding); padding-right: var(--select-padding-right); border-radius: var(--input-radius); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--input-font-size); transition: border-color var(--transition-normal); cursor: pointer; } .bond-select:focus { border: var(--input-border-focus); outline: none; } .bond-textarea { background-color: var(--input-bg); border: var(--input-border); padding: var(--input-padding); border-radius: var(--input-radius); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--input-font-size); transition: border-color var(--transition-normal); resize: vertical; min-height: 6rem; } .bond-textarea:focus { border: var(--input-border-focus); outline: none; } /* === Card Utilities === */ .bond-card-hover { transition: all var(--transition-normal) var(--transition-ease); } .bond-card-hover:hover { box-shadow: var(--shadow-elevated); border-color: var(--color-bond-red); transform: translateY(var(--hover-lift)); } .bond-card-interactive { box-shadow: var(--shadow-elevated); transition: all var(--transition-normal) var(--transition-ease); } .bond-card-interactive:hover { box-shadow: var(--shadow-floating); transform: translateY(var(--hover-lift)); } /* === Panel Utilities === */ .bond-panel { background-color: var(--color-background-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-standard); } .bond-panel-header { background-color: var(--color-background-primary); border-bottom: 1px solid var(--color-border); padding: var(--panel-header-padding); } .bond-panel-footer { background-color: var(--color-background-primary); border-top: 1px solid var(--color-border); padding: var(--panel-footer-padding); } .bond-panel-section { padding: var(--panel-padding-md); } /* === Modal Utilities === */ .bond-modal-backdrop { position: fixed; inset: 0; background-color: var(--modal-backdrop); z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; } .bond-modal { background-color: var(--color-background-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); max-width: var(--modal-width-md); width: 100%; z-index: var(--z-modal); max-height: 90vh; overflow-y: auto; } .bond-modal-sm { max-width: var(--modal-width-sm); } .bond-modal-lg { max-width: var(--modal-width-lg); } .bond-modal-xl { max-width: var(--modal-width-xl); } .bond-modal-header { padding: var(--modal-header-padding); border-bottom: 1px solid var(--color-border); } .bond-modal-body { padding: var(--modal-padding); } .bond-modal-footer { padding: var(--modal-footer-padding); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-3); } /* === Badge Utilities === */ .bond-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--badge-padding); border-radius: var(--badge-border-radius); font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); text-transform: var(--badge-text-transform); letter-spacing: var(--badge-letter-spacing); line-height: 1; } .bond-badge-success { background-color: var(--color-success); color: var(--color-text-primary); } .bond-badge-error { background-color: var(--color-error); color: var(--color-text-primary); } .bond-badge-warning { background-color: var(--color-warning); color: var(--color-text-primary); } .bond-badge-info { background-color: var(--color-info); color: var(--color-text-primary); } .bond-badge-neutral { background-color: var(--color-background-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); } /* === Toast Notification Utilities === */ .bond-toast { display: flex; align-items: start; gap: var(--spacing-3); padding: var(--toast-padding); border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); min-width: var(--toast-width); border-width: 1px; border-style: solid; } .bond-toast-success { background-color: rgba(74, 158, 124, 0.1); border-color: var(--color-success); color: var(--color-success); } .bond-toast-error { background-color: rgba(255, 107, 111, 0.1); border-color: var(--color-error); color: var(--color-error); } .bond-toast-warning { background-color: rgba(255, 152, 0, 0.1); border-color: var(--color-warning); color: var(--color-warning); } .bond-toast-info { background-color: rgba(59, 130, 246, 0.1); border-color: var(--color-info); color: var(--color-info); } /* === Loading Spinner Utilities === */ .bond-spinner { border: var(--spinner-border-width) solid var(--color-background-secondary); border-top-color: var(--color-bond-red); border-radius: 50%; width: var(--spinner-size-md); height: var(--spinner-size-md); animation: bond-spin var(--spinner-animation-duration) linear infinite; } .bond-spinner-sm { width: var(--spinner-size-sm); height: var(--spinner-size-sm); } .bond-spinner-lg { width: var(--spinner-size-lg); height: var(--spinner-size-lg); } @keyframes bond-spin { to { transform: rotate(360deg); } } /* === Table Utilities === */ .bond-table { width: 100%; border-collapse: collapse; border: var(--table-border); border-radius: var(--radius-md); } .bond-table thead { background-color: var(--table-header-bg); } .bond-table th, .bond-table td { padding: var(--table-cell-padding); text-align: left; border-bottom: var(--table-border); } .bond-table tbody tr:hover { background-color: var(--table-row-hover-bg); } .bond-table tbody tr:last-child td { border-bottom: none; } /* === Dropdown Utilities === */ .bond-dropdown { position: absolute; background-color: var(--color-background-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); min-width: var(--dropdown-width); max-height: var(--dropdown-max-height); overflow-y: auto; z-index: var(--z-dropdown); } .bond-dropdown-item { padding: var(--dropdown-item-padding); color: var(--color-text-primary); cursor: pointer; transition: background-color var(--transition-fast); } .bond-dropdown-item:hover { background-color: var(--dropdown-item-hover-bg); } .bond-dropdown-divider { height: 1px; background-color: var(--color-border); margin: var(--spacing-2) 0; } /* === Focus Utilities === */ .bond-focus-ring:focus { outline: var(--focus-ring-width) solid var(--color-bond-red); outline-offset: var(--focus-ring-offset); } .bond-focus-ring:focus:not(:focus-visible) { outline: none; } /* === Text Utilities === */ .bond-text-xs { font-size: var(--font-size-xs); } .bond-text-sm { font-size: var(--font-size-sm); } .bond-text-base { font-size: var(--font-size-base); } .bond-text-lg { font-size: var(--font-size-lg); } .bond-text-xl { font-size: var(--font-size-xl); } .bond-text-secondary { color: var(--color-text-secondary); } .bond-text-tertiary { color: var(--color-text-tertiary); } .bond-text-accent { color: var(--color-bond-red); } /* === Link Utilities === */ .bond-link { color: var(--color-bond-red); text-decoration: none; transition: color var(--transition-fast); } .bond-link:hover { color: var(--color-bond-red-dark); text-decoration: underline; } /* === Divider Utilities === */ .bond-divider { height: 1px; background-color: var(--color-border); border: none; margin: var(--spacing-4) 0; } .bond-divider-vertical { width: 1px; height: 100%; background-color: var(--color-border); margin: 0 var(--spacing-4); } /* ===================================================================== CONTRAST & ACCESSIBILITY GUIDELINES ===================================================================== */ /* * Text Contrast Rules - WCAG AA Compliance (4.5:1 minimum) * * IMPORTANT: Always ensure sufficient contrast between text and background * Use these established patterns for consistent, accessible design: * * LIGHT TEXT ON DARK/COLORED BACKGROUNDS: * - Primary text: white (#FFFFFF) or var(--color-text-primary) - Use on all colored gradients * - Secondary text: rgba(255, 255, 255, 0.95) or rgba(255, 255, 255, 0.9) * - Applies to: Alert boxes, status badges, colored cards * - Examples: * - Red gradients (errors, critical): white text * - Green gradients (success): white text * - Blue gradients (info): white text * - Dark backgrounds: var(--color-text-primary) * * DARK TEXT ON LIGHT BACKGROUNDS: * - Primary text: var(--color-deep-dark) or #2F2E2E * - Applies to: Light theme cards (not currently in use) * * COMMON MISTAKES TO AVOID: * ❌ Grey text on colored gradients (poor contrast) * ❌ var(--color-text-secondary) on anything except dark backgrounds * ❌ Colored text on colored backgrounds without testing contrast * * TESTING: Use browser DevTools contrast checker or https://webaim.org/resources/contrastchecker/ */