193 lines
5.3 KiB
SCSS
193 lines
5.3 KiB
SCSS
// Design Tokens for Bolt.ai Style System
|
|
// Based on consensus from multiple AI models for optimal UI transformation
|
|
|
|
// ============================================
|
|
// Color Palette
|
|
// ============================================
|
|
:root {
|
|
// Primary Colors - Subtle, professional tones
|
|
--color-primary: #dc2626; // Monaco red for branding
|
|
--color-primary-light: #fef2f2; // Very light red for backgrounds
|
|
--color-primary-soft: rgba(220, 38, 38, 0.1); // Soft red for hover states
|
|
|
|
// Background Colors
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f8f9fa;
|
|
--color-bg-gradient: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
|
|
// Glass Effects - Subtle transparency
|
|
--color-glass-white: rgba(255, 255, 255, 0.6);
|
|
--color-glass-light: rgba(255, 255, 255, 0.8);
|
|
--color-glass-dark: rgba(0, 0, 0, 0.05);
|
|
|
|
// Text Colors
|
|
--color-text-primary: #27272a;
|
|
--color-text-secondary: #6b7280;
|
|
--color-text-muted: #9ca3af;
|
|
--color-text-white: #ffffff;
|
|
|
|
// Status Colors
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
// Border Colors
|
|
--color-border-light: rgba(0, 0, 0, 0.05);
|
|
--color-border-medium: rgba(0, 0, 0, 0.1);
|
|
--color-border-white: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
// ============================================
|
|
// Spacing System (8-point grid)
|
|
// ============================================
|
|
$spacing-unit: 8px;
|
|
|
|
$space-0: 0;
|
|
$space-1: $spacing-unit; // 8px
|
|
$space-2: $spacing-unit * 2; // 16px
|
|
$space-3: $spacing-unit * 3; // 24px
|
|
$space-4: $spacing-unit * 4; // 32px
|
|
$space-5: $spacing-unit * 5; // 40px
|
|
$space-6: $spacing-unit * 6; // 48px
|
|
$space-7: $spacing-unit * 7; // 56px
|
|
$space-8: $spacing-unit * 8; // 64px
|
|
$space-10: $spacing-unit * 10; // 80px
|
|
$space-12: $spacing-unit * 12; // 96px
|
|
|
|
// ============================================
|
|
// Typography Scale
|
|
// ============================================
|
|
:root {
|
|
// Font Families
|
|
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
|
|
|
|
// Font Sizes
|
|
--text-xs: 0.75rem; // 12px
|
|
--text-sm: 0.875rem; // 14px
|
|
--text-base: 1rem; // 16px
|
|
--text-lg: 1.125rem; // 18px
|
|
--text-xl: 1.25rem; // 20px
|
|
--text-2xl: 1.5rem; // 24px
|
|
--text-3xl: 1.875rem; // 30px
|
|
--text-4xl: 2.25rem; // 36px
|
|
--text-5xl: 3rem; // 48px
|
|
|
|
// Font Weights
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
--font-extrabold: 800;
|
|
|
|
// Line Heights
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.75;
|
|
|
|
// Letter Spacing
|
|
--tracking-tight: -0.02em;
|
|
--tracking-normal: 0;
|
|
--tracking-wide: 0.05em;
|
|
}
|
|
|
|
// ============================================
|
|
// Border Radius
|
|
// ============================================
|
|
:root {
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
// ============================================
|
|
// Shadows (Subtle, layered approach)
|
|
// ============================================
|
|
:root {
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
|
|
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
|
|
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
--shadow-monaco: 0 8px 24px rgba(220, 38, 38, 0.15);
|
|
}
|
|
|
|
// ============================================
|
|
// Glass Effects (Reduced blur for performance)
|
|
// ============================================
|
|
:root {
|
|
--blur-none: 0;
|
|
--blur-sm: 2px;
|
|
--blur-md: 4px;
|
|
--blur-lg: 8px; // Maximum blur, use sparingly
|
|
}
|
|
|
|
// ============================================
|
|
// Transitions (Consistent timing)
|
|
// ============================================
|
|
:root {
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
--transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
// ============================================
|
|
// Z-Index Scale
|
|
// ============================================
|
|
:root {
|
|
--z-base: 0;
|
|
--z-dropdown: 10;
|
|
--z-sticky: 20;
|
|
--z-overlay: 30;
|
|
--z-modal: 40;
|
|
--z-popover: 50;
|
|
--z-tooltip: 60;
|
|
--z-max: 9999;
|
|
}
|
|
|
|
// ============================================
|
|
// Breakpoints
|
|
// ============================================
|
|
$breakpoint-sm: 640px;
|
|
$breakpoint-md: 768px;
|
|
$breakpoint-lg: 1024px;
|
|
$breakpoint-xl: 1280px;
|
|
$breakpoint-2xl: 1536px;
|
|
|
|
// ============================================
|
|
// Utility Mixins
|
|
// ============================================
|
|
@mixin glass-effect($blur: var(--blur-sm), $bg: var(--color-glass-white)) {
|
|
background: $bg;
|
|
backdrop-filter: blur($blur);
|
|
-webkit-backdrop-filter: blur($blur);
|
|
border: 1px solid var(--color-border-white);
|
|
}
|
|
|
|
@mixin hover-lift() {
|
|
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
}
|
|
|
|
@mixin text-gradient() {
|
|
background: var(--color-bg-gradient);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
@mixin focus-ring() {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
} |