437 lines
16 KiB
SCSS
437 lines
16 KiB
SCSS
|
// ============================================================================
|
||
|
|
// OpenClaw Control Center — M3 Design Tokens
|
||
|
|
// ============================================================================
|
||
|
|
// Single source of truth for all design tokens.
|
||
|
|
// Components should @use this module and reference tokens via variables or
|
||
|
|
// the theme() mixin rather than hardcoding values.
|
||
|
|
//
|
||
|
|
// Token structure:
|
||
|
|
// 1. Color tokens — palette, semantic, status, surface
|
||
|
|
// 2. Typography — families, sizes, weights, line-heights
|
||
|
|
// 3. Spacing — 4px base grid, named steps
|
||
|
|
// 4. Layout — dimensions, breakpoints, radii, shadows
|
||
|
|
// 5. Motion — durations, easing curves
|
||
|
|
// 6. Accessibility — focus, reduced-motion
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
@use 'sass:map';
|
||
|
|
@use 'sass:meta';
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 1. COLOR TOKENS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1a. Primary Palette (M3 cyan-based)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$color-primary-50: #ecfeff;
|
||
|
|
$color-primary-100: #cffafe;
|
||
|
|
$color-primary-200: #a5f3fc;
|
||
|
|
$color-primary-300: #67e8f9;
|
||
|
|
$color-primary-400: #22d3ee;
|
||
|
|
$color-primary-500: #38bdf8; // Brand primary
|
||
|
|
$color-primary-600: #0ea5e9;
|
||
|
|
$color-primary-700: #0284c7;
|
||
|
|
$color-primary-800: #0369a1;
|
||
|
|
$color-primary-900: #075985;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1b. Secondary Palette (M3 teal-based)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$color-secondary-50: #f0fdfa;
|
||
|
|
$color-secondary-100: #ccfbf1;
|
||
|
|
$color-secondary-200: #99f6e4;
|
||
|
|
$color-secondary-300: #5eead4;
|
||
|
|
$color-secondary-400: #2dd4bf; // Brand secondary
|
||
|
|
$color-secondary-500: #14b8a6;
|
||
|
|
$color-secondary-600: #0d9488;
|
||
|
|
$color-secondary-700: #0f766e;
|
||
|
|
$color-secondary-800: #115e59;
|
||
|
|
$color-secondary-900: #134e4a;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1c. Accent / Tertiary Palette (M3 violet-based)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$color-accent-50: #f5f3ff;
|
||
|
|
$color-accent-100: #ede9fe;
|
||
|
|
$color-accent-200: #ddd6fe;
|
||
|
|
$color-accent-300: #c4b5fd;
|
||
|
|
$color-accent-400: #a78bfa; // Brand accent
|
||
|
|
$color-accent-500: #8b5cf6;
|
||
|
|
$color-accent-600: #7c3aed;
|
||
|
|
$color-accent-700: #6d28d9;
|
||
|
|
$color-accent-800: #5b21b6;
|
||
|
|
$color-accent-900: #4c1d95;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1d. Danger / Error Palette
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$color-danger-50: #fef2f2;
|
||
|
|
$color-danger-100: #fee2e2;
|
||
|
|
$color-danger-200: #fecaca;
|
||
|
|
$color-danger-300: #fca5a5;
|
||
|
|
$color-danger-400: #f87171; // Brand danger
|
||
|
|
$color-danger-500: #ef4444;
|
||
|
|
$color-danger-600: #dc2626;
|
||
|
|
$color-danger-700: #b91c1c;
|
||
|
|
$color-danger-800: #991b1b;
|
||
|
|
$color-danger-900: #7f1d1d;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1e. Semantic Surface Tokens (Tactical Dark)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$color-surface-darkest: #0D0F12; // Page background
|
||
|
|
$color-surface-dark: #13161A; // Card / container surface
|
||
|
|
$color-surface-medium: #1C2027; // Container-elevated
|
||
|
|
$color-surface-light: #252B33; // Container-high / hover
|
||
|
|
$color-surface-lighter: #2D3748; // Border / divider zone
|
||
|
|
|
||
|
|
$color-on-surface: #E2E8F0; // Primary text on dark surfaces
|
||
|
|
$color-on-surface-variant: #8A9BB0; // Secondary / muted text
|
||
|
|
$color-on-surface-muted: #64748B; // Disabled / hint text
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1f. Status Colors (Semantic — outside M3 tonal system)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$status-active: #38bdf8;
|
||
|
|
$status-idle: #2dd4bf;
|
||
|
|
$status-thinking: #a78bfa;
|
||
|
|
$status-error: #f87171;
|
||
|
|
$status-offline: #64748b;
|
||
|
|
|
||
|
|
// Status background tints (12% opacity for badges, pills, backgrounds)
|
||
|
|
$status-active-bg: rgba(56, 189, 248, 0.12);
|
||
|
|
$status-idle-bg: rgba(45, 212, 191, 0.12);
|
||
|
|
$status-thinking-bg: rgba(167, 139, 250, 0.12);
|
||
|
|
$status-error-bg: rgba(248, 113, 113, 0.12);
|
||
|
|
$status-offline-bg: rgba(100, 116, 139, 0.12);
|
||
|
|
|
||
|
|
// Status border colors (40% opacity)
|
||
|
|
$status-active-border: rgba(56, 189, 248, 0.40);
|
||
|
|
$status-idle-border: rgba(45, 212, 191, 0.40);
|
||
|
|
$status-thinking-border: rgba(167, 139, 250, 0.40);
|
||
|
|
$status-error-border: rgba(248, 113, 113, 0.40);
|
||
|
|
$status-offline-border: rgba(100, 116, 139, 0.40);
|
||
|
|
|
||
|
|
// Map for iteration
|
||
|
|
$status-colors: (
|
||
|
|
'active': ('fg': $status-active, 'bg': $status-active-bg, 'border': $status-active-border),
|
||
|
|
'idle': ('fg': $status-idle, 'bg': $status-idle-bg, 'border': $status-idle-border),
|
||
|
|
'thinking': ('fg': $status-thinking, 'bg': $status-thinking-bg, 'border': $status-thinking-border),
|
||
|
|
'error': ('fg': $status-error, 'bg': $status-error-bg, 'border': $status-error-border),
|
||
|
|
'offline': ('fg': $status-offline, 'bg': $status-offline-bg, 'border': $status-offline-border),
|
||
|
|
);
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 1g. Full color map for programmatic access
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$colors: (
|
||
|
|
'primary': $color-primary-500,
|
||
|
|
'secondary': $color-secondary-400,
|
||
|
|
'accent': $color-accent-400,
|
||
|
|
'danger': $color-danger-400,
|
||
|
|
'surface': $color-surface-dark,
|
||
|
|
'surface-light': $color-surface-light,
|
||
|
|
'on-surface': $color-on-surface,
|
||
|
|
'on-surface-variant': $color-on-surface-variant,
|
||
|
|
'border': $color-surface-lighter,
|
||
|
|
);
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 2. TYPOGRAPHY TOKENS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2a. Font Families
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$font-family-brand: 'Inter, Roboto, sans-serif';
|
||
|
|
$font-family-body: 'Inter, Roboto, sans-serif';
|
||
|
|
$font-family-mono: 'Roboto Mono, Cascadia Code, Fira Code, monospace';
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2b. Font Sizes (M3 type scale)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$font-size-display-large: 57px;
|
||
|
|
$font-size-display-medium: 45px;
|
||
|
|
$font-size-display-small: 36px;
|
||
|
|
$font-size-headline-large: 32px;
|
||
|
|
$font-size-headline-medium: 28px;
|
||
|
|
$font-size-headline-small: 24px;
|
||
|
|
$font-size-title-large: 22px;
|
||
|
|
$font-size-title-medium: 16px;
|
||
|
|
$font-size-title-small: 14px;
|
||
|
|
$font-size-body-large: 16px;
|
||
|
|
$font-size-body-medium: 14px;
|
||
|
|
$font-size-body-small: 12px;
|
||
|
|
$font-size-label-large: 14px;
|
||
|
|
$font-size-label-medium: 12px;
|
||
|
|
$font-size-label-small: 11px;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2c. Font Weights
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$font-weight-regular: 400;
|
||
|
|
$font-weight-medium: 500;
|
||
|
|
$font-weight-bold: 600;
|
||
|
|
$font-weight-heavy: 700;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2d. Line Heights
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$line-height-tight: 1.2;
|
||
|
|
$line-height-normal: 1.5;
|
||
|
|
$line-height-relaxed: 1.6;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2e. Letter Spacing
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$letter-spacing-tight: -0.01em;
|
||
|
|
$letter-spacing-normal: 0em;
|
||
|
|
$letter-spacing-wide: 0.02em;
|
||
|
|
$letter-spacing-mono: 0.05em;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 2f. Typography map
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$typography: (
|
||
|
|
'font-family-brand': $font-family-brand,
|
||
|
|
'font-family-body': $font-family-body,
|
||
|
|
'font-family-mono': $font-family-mono,
|
||
|
|
'size-display-large': $font-size-display-large,
|
||
|
|
'size-headline-medium': $font-size-headline-medium,
|
||
|
|
'size-title-large': $font-size-title-large,
|
||
|
|
'size-title-medium': $font-size-title-medium,
|
||
|
|
'size-body-large': $font-size-body-large,
|
||
|
|
'size-body-medium': $font-size-body-medium,
|
||
|
|
'size-body-small': $font-size-body-small,
|
||
|
|
'size-label-large': $font-size-label-large,
|
||
|
|
'size-label-medium': $font-size-label-medium,
|
||
|
|
'weight-regular': $font-weight-regular,
|
||
|
|
'weight-medium': $font-weight-medium,
|
||
|
|
'weight-bold': $font-weight-bold,
|
||
|
|
);
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 3. SPACING TOKENS (4px grid)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
$spacing-0: 0px;
|
||
|
|
$spacing-1: 4px;
|
||
|
|
$spacing-2: 8px;
|
||
|
|
$spacing-3: 12px;
|
||
|
|
$spacing-4: 16px;
|
||
|
|
$spacing-5: 20px;
|
||
|
|
$spacing-6: 24px;
|
||
|
|
$spacing-7: 28px;
|
||
|
|
$spacing-8: 32px;
|
||
|
|
$spacing-9: 36px;
|
||
|
|
$spacing-10: 40px;
|
||
|
|
$spacing-12: 48px;
|
||
|
|
$spacing-14: 56px;
|
||
|
|
$spacing-16: 64px;
|
||
|
|
$spacing-20: 80px;
|
||
|
|
|
||
|
|
// Named semantic spacing
|
||
|
|
$spacing-unit: $spacing-2; // 8px — base grid unit
|
||
|
|
$spacing-card-gap: $spacing-4; // 16px
|
||
|
|
$spacing-card-pad: $spacing-5; // 20px
|
||
|
|
$spacing-section: $spacing-6; // 24px
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 4. LAYOUT TOKENS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 4a. Dimensions
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$nav-rail-collapsed-width: 72px;
|
||
|
|
$nav-rail-expanded-width: 256px;
|
||
|
|
$header-height: 64px;
|
||
|
|
$bottom-nav-height: 80px;
|
||
|
|
$card-border-radius: 16px;
|
||
|
|
$card-min-width: 320px;
|
||
|
|
$badge-height: 24px;
|
||
|
|
$badge-border-radius: 12px;
|
||
|
|
$status-dot-size: 10px;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 4b. Breakpoints (M3 canonical)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$breakpoint-compact: 599px; // Mobile phone
|
||
|
|
$breakpoint-medium: 767px; // Tablet portrait
|
||
|
|
$breakpoint-expanded: 1023px; // Tablet landscape
|
||
|
|
$breakpoint-large: 1439px; // Desktop
|
||
|
|
|
||
|
|
// Named breakpoint map for @media mixins
|
||
|
|
$breakpoints: (
|
||
|
|
'compact': $breakpoint-compact,
|
||
|
|
'medium': $breakpoint-medium,
|
||
|
|
'expanded': $breakpoint-expanded,
|
||
|
|
'large': $breakpoint-large,
|
||
|
|
);
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 4c. Border Radius
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$radius-none: 0px;
|
||
|
|
$radius-xs: 4px;
|
||
|
|
$radius-sm: 8px;
|
||
|
|
$radius-md: 12px;
|
||
|
|
$radius-lg: 16px;
|
||
|
|
$radius-xl: 24px;
|
||
|
|
$radius-full: 9999px;
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// 4d. Shadows (M3 elevation)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
$shadow-level-0: none;
|
||
|
|
$shadow-level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
|
||
|
|
$shadow-level-2: 0 2px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
||
|
|
$shadow-level-3: 0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3);
|
||
|
|
$shadow-level-4: 0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 5. MOTION TOKENS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
$duration-instant: 0ms; // No animation (reduced motion fallback)
|
||
|
|
$duration-fast: 100ms;
|
||
|
|
$duration-short: 150ms;
|
||
|
|
$duration-medium: 200ms;
|
||
|
|
$duration-standard: 300ms;
|
||
|
|
$duration-long: 500ms;
|
||
|
|
|
||
|
|
$easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // M3 standard
|
||
|
|
$easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // M3 decelerate (entering)
|
||
|
|
$easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // M3 accelerate (exiting)
|
||
|
|
$easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); // M3 sharp
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// 6. ACCESSIBILITY TOKENS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
$focus-ring-width: 2px;
|
||
|
|
$focus-ring-offset: 2px;
|
||
|
|
$focus-ring-color: $status-active;
|
||
|
|
$focus-ring-style: solid;
|
||
|
|
|
||
|
|
$min-touch-target: 48px;
|
||
|
|
$min-body-font: 16px;
|
||
|
|
|
||
|
|
// ============================================================================
|
||
|
|
// MIXINS
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Responsive breakpoint mixin
|
||
|
|
// Usage: @include tokens.respond-to('expanded') { ... }
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin respond-to($breakpoint) {
|
||
|
|
$value: map.get($breakpoints, $breakpoint);
|
||
|
|
@if $value {
|
||
|
|
@media (min-width: $value + 1) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@error "Unknown breakpoint: `#{$breakpoint}`. Valid: compact, medium, expanded, large";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Below-breakpoint mixin (max-width)
|
||
|
|
// Usage: @include tokens.below('expanded') { ... }
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin below($breakpoint) {
|
||
|
|
$value: map.get($breakpoints, $breakpoint);
|
||
|
|
@if $value {
|
||
|
|
@media (max-width: $value) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@error "Unknown breakpoint: `#{$breakpoint}`. Valid: compact, medium, expanded, large";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Focus ring mixin
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin focus-ring($color: $focus-ring-color) {
|
||
|
|
&:focus-visible {
|
||
|
|
outline: $focus-ring-width $focus-ring-style $color;
|
||
|
|
outline-offset: $focus-ring-offset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Card surface mixin
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin card-surface {
|
||
|
|
background-color: $color-surface-medium;
|
||
|
|
border-radius: $card-border-radius;
|
||
|
|
border: 1px solid $color-surface-lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Mono text mixin
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin mono-text($size: $font-size-body-medium) {
|
||
|
|
font-family: $font-family-mono;
|
||
|
|
font-size: $size;
|
||
|
|
letter-spacing: $letter-spacing-mono;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Status dot mixin
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin status-dot($status) {
|
||
|
|
$colors: map.get($status-colors, $status);
|
||
|
|
@if not $colors {
|
||
|
|
@error "Unknown status: `#{$status}`. Valid: active, idle, thinking, error, offline";
|
||
|
|
}
|
||
|
|
$fg: map.get($colors, 'fg');
|
||
|
|
|
||
|
|
width: $status-dot-size;
|
||
|
|
height: $status-dot-size;
|
||
|
|
border-radius: $radius-full;
|
||
|
|
background-color: $fg;
|
||
|
|
|
||
|
|
@if $status == 'active' {
|
||
|
|
animation: pulse-active $duration-standard $easing-standard infinite;
|
||
|
|
} @else if $status == 'thinking' {
|
||
|
|
animation: pulse-thinking 3s $easing-standard infinite;
|
||
|
|
} @else if $status == 'error' {
|
||
|
|
animation: pulse-error $duration-fast $easing-standard infinite;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Truncate text mixin (single line)
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin truncate {
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Screen-reader-only mixin
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin sr-only {
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
height: 1px;
|
||
|
|
padding: 0;
|
||
|
|
margin: -1px;
|
||
|
|
overflow: hidden;
|
||
|
|
clip: rect(0, 0, 0, 0);
|
||
|
|
white-space: nowrap;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// Touch target mixin — ensures minimum 48px touch area
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
@mixin touch-target($min-size: $min-touch-target) {
|
||
|
|
min-width: $min-size;
|
||
|
|
min-height: $min-size;
|
||
|
|
}
|