Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
462 lines
14 KiB
TypeScript
462 lines
14 KiB
TypeScript
// ============================================================================
|
|
// OpenClaw Control Center — Design Tokens (TypeScript)
|
|
// ============================================================================
|
|
// Typed representation of the design system tokens for programmatic access.
|
|
// These mirror the SCSS tokens in styles/_tokens.scss and the CSS custom
|
|
// properties emitted by styles/_css-properties.scss.
|
|
//
|
|
// Usage:
|
|
// import { CcTokens } from '@app/design/tokens';
|
|
// const primary = CcTokens.color.primary;
|
|
// const surface = CcTokens.surface.dark;
|
|
// ============================================================================
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Color Palette
|
|
// ---------------------------------------------------------------------------
|
|
export const CcColors = {
|
|
primary: {
|
|
50: '#ecfeff',
|
|
100: '#cffafe',
|
|
200: '#a5f3fc',
|
|
300: '#67e8f9',
|
|
400: '#22d3ee',
|
|
500: '#38bdf8',
|
|
600: '#0ea5e9',
|
|
700: '#0284c7',
|
|
800: '#0369a1',
|
|
900: '#075985',
|
|
},
|
|
secondary: {
|
|
50: '#f0fdfa',
|
|
100: '#ccfbf1',
|
|
200: '#99f6e4',
|
|
300: '#5eead4',
|
|
400: '#2dd4bf',
|
|
500: '#14b8a6',
|
|
600: '#0d9488',
|
|
700: '#0f766e',
|
|
800: '#115e59',
|
|
900: '#134e4a',
|
|
},
|
|
accent: {
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#8b5cf6',
|
|
600: '#7c3aed',
|
|
700: '#6d28d9',
|
|
800: '#5b21b6',
|
|
900: '#4c1d95',
|
|
},
|
|
danger: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
},
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Semantic Colors (Tactical Dark)
|
|
// ---------------------------------------------------------------------------
|
|
export const CcSemanticColors = {
|
|
surface: {
|
|
darkest: '#0D0F12',
|
|
dark: '#13161A',
|
|
medium: '#1C2027',
|
|
light: '#252B33',
|
|
lighter: '#2D3748',
|
|
},
|
|
onSurface: {
|
|
primary: '#E2E8F0',
|
|
variant: '#8A9BB0',
|
|
muted: '#64748B',
|
|
},
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Status Colors
|
|
// ---------------------------------------------------------------------------
|
|
export const CcStatusColors = {
|
|
active: { fg: '#38bdf8', bg: 'rgba(56, 189, 248, 0.12)', border: 'rgba(56, 189, 248, 0.40)' },
|
|
idle: { fg: '#2dd4bf', bg: 'rgba(45, 212, 191, 0.12)', border: 'rgba(45, 212, 191, 0.40)' },
|
|
thinking: { fg: '#a78bfa', bg: 'rgba(167, 139, 250, 0.12)', border: 'rgba(167, 139, 250, 0.40)' },
|
|
error: { fg: '#f87171', bg: 'rgba(248, 113, 113, 0.12)', border: 'rgba(248, 113, 113, 0.40)' },
|
|
offline: { fg: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', border: 'rgba(100, 116, 139, 0.40)' },
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Convenience exports for component usage (CUB-20)
|
|
// ---------------------------------------------------------------------------
|
|
/** Status colors — maps AgentStatus to hex values */
|
|
export const STATUS_COLORS: Record<string, string> = {
|
|
active: '#38BDF8',
|
|
idle: '#2DD4BF',
|
|
thinking: '#A78BFA',
|
|
error: '#F87171',
|
|
offline: '#64748B',
|
|
};
|
|
|
|
/** Status background tints (12% opacity) */
|
|
export const STATUS_BG_COLORS: Record<string, string> = {
|
|
active: 'rgba(56, 189, 248, 0.12)',
|
|
idle: 'rgba(45, 212, 191, 0.12)',
|
|
thinking: 'rgba(167, 139, 250, 0.12)',
|
|
error: 'rgba(248, 113, 113, 0.12)',
|
|
offline: 'rgba(100, 116, 139, 0.12)',
|
|
};
|
|
|
|
/** Surface overrides (CUB-20 convenience) */
|
|
export const SURFACE = {
|
|
background: '#0D0F12',
|
|
surface: '#13161A',
|
|
container: '#1C2027',
|
|
containerHigh: '#252B33',
|
|
onSurface: '#E2E8F0',
|
|
onSurfaceVariant: '#8A9BB0',
|
|
outline: '#2D3748',
|
|
} as const;
|
|
|
|
/** Tactical Dark Mode color palette (CUB-20 convenience) */
|
|
export const COLORS = {
|
|
surface: '#0F172A',
|
|
surfaceLight: '#1E293B',
|
|
primary: '#38BDF8',
|
|
secondary: '#2DD4BF',
|
|
accent: '#A78BFA',
|
|
danger: '#F87171',
|
|
textPrimary: '#FFFFFF',
|
|
textSecondary: '#94A3B8',
|
|
border: '#334155',
|
|
} as const;
|
|
|
|
/** Layout constants (CUB-20 convenience) */
|
|
export const LAYOUT = {
|
|
navRailCollapsedWidth: 72,
|
|
navRailExpandedWidth: 256,
|
|
headerHeight: 64,
|
|
bottomNavHeight: 80,
|
|
cardBorderRadius: 16,
|
|
cardMinWidth: 320,
|
|
cardGap: 16,
|
|
cardPadding: 20,
|
|
sectionPadding: 24,
|
|
spacingUnit: 8,
|
|
} as const;
|
|
|
|
/** Breakpoints (px) (CUB-20 convenience) */
|
|
export const BREAKPOINTS = {
|
|
mobile: 599,
|
|
tablet: 1023,
|
|
desktop: 1024,
|
|
} as const;
|
|
|
|
/** Channel icon mapping (CUB-20) */
|
|
export const CHANNEL_ICONS: Record<string, string> = {
|
|
telegram: 'telegram',
|
|
slack: 'chat',
|
|
discord: 'forum',
|
|
whatsapp: 'chat',
|
|
webchat: 'language',
|
|
email: 'email',
|
|
mqtt: 'sensors',
|
|
};
|
|
|
|
/** Human-readable status labels (CUB-20) */
|
|
export const STATUS_LABELS: Record<string, string> = {
|
|
active: 'Active',
|
|
idle: 'Idle',
|
|
thinking: 'Thinking…',
|
|
error: 'Error',
|
|
offline: 'Offline',
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Typography
|
|
// ---------------------------------------------------------------------------
|
|
export const CcTypography = {
|
|
fontFamily: {
|
|
brand: "'Inter, Roboto, sans-serif'",
|
|
body: "'Inter, Roboto, sans-serif'",
|
|
mono: "'Roboto Mono, Cascadia Code, Fira Code, monospace'",
|
|
},
|
|
size: {
|
|
displayLarge: '57px',
|
|
displayMedium: '45px',
|
|
displaySmall: '36px',
|
|
headlineLarge: '32px',
|
|
headlineMedium: '28px',
|
|
headlineSmall: '24px',
|
|
titleLarge: '22px',
|
|
titleMedium: '16px',
|
|
titleSmall: '14px',
|
|
bodyLarge: '16px',
|
|
bodyMedium: '14px',
|
|
bodySmall: '12px',
|
|
labelLarge: '14px',
|
|
labelMedium: '12px',
|
|
labelSmall: '11px',
|
|
},
|
|
weight: {
|
|
regular: 400,
|
|
medium: 500,
|
|
bold: 600,
|
|
heavy: 700,
|
|
},
|
|
lineHeight: {
|
|
tight: '1.2',
|
|
normal: '1.5',
|
|
relaxed: '1.6',
|
|
},
|
|
letterSpacing: {
|
|
tight: '-0.01em',
|
|
normal: '0em',
|
|
wide: '0.02em',
|
|
mono: '0.05em',
|
|
},
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Spacing (4px grid)
|
|
// ---------------------------------------------------------------------------
|
|
export const CcSpacing = {
|
|
0: '0px',
|
|
1: '4px',
|
|
2: '8px',
|
|
3: '12px',
|
|
4: '16px',
|
|
5: '20px',
|
|
6: '24px',
|
|
7: '28px',
|
|
8: '32px',
|
|
9: '36px',
|
|
10: '40px',
|
|
12: '48px',
|
|
14: '56px',
|
|
16: '64px',
|
|
20: '80px',
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Layout
|
|
// ---------------------------------------------------------------------------
|
|
export const CcLayout = {
|
|
navRailCollapsedWidth: '72px',
|
|
navRailExpandedWidth: '256px',
|
|
headerHeight: '64px',
|
|
bottomNavHeight: '80px',
|
|
cardBorderRadius: '16px',
|
|
cardMinWidth: '320px',
|
|
badgeHeight: '24px',
|
|
badgeBorderRadius: '12px',
|
|
statusDotSize: '10px',
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Breakpoints (M3 canonical)
|
|
// ---------------------------------------------------------------------------
|
|
export const CcBreakpoints = {
|
|
compact: 599,
|
|
medium: 767,
|
|
expanded: 1023,
|
|
large: 1439,
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Border Radius
|
|
// ---------------------------------------------------------------------------
|
|
export const CcRadius = {
|
|
none: '0px',
|
|
xs: '4px',
|
|
sm: '8px',
|
|
md: '12px',
|
|
lg: '16px',
|
|
xl: '24px',
|
|
full: '9999px',
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Shadows (M3 elevation)
|
|
// ---------------------------------------------------------------------------
|
|
export const CcShadows = {
|
|
level0: 'none',
|
|
level1: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)',
|
|
level2: '0 2px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',
|
|
level3: '0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3)',
|
|
level4: '0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.3)',
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Motion
|
|
// ---------------------------------------------------------------------------
|
|
export const CcMotion = {
|
|
duration: {
|
|
instant: 0,
|
|
fast: 100,
|
|
short: 150,
|
|
medium: 200,
|
|
standard: 300,
|
|
long: 500,
|
|
},
|
|
easing: {
|
|
standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
|
|
},
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Accessibility
|
|
// ---------------------------------------------------------------------------
|
|
export const CcA11y = {
|
|
focusRing: {
|
|
width: '2px',
|
|
offset: '2px',
|
|
color: '#38bdf8',
|
|
style: 'solid',
|
|
},
|
|
minTouchTarget: 48,
|
|
minBodyFont: 16,
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Aggregate token object for convenient access
|
|
// ---------------------------------------------------------------------------
|
|
export const CcTokens = {
|
|
color: CcColors,
|
|
semantic: CcSemanticColors,
|
|
status: CcStatusColors,
|
|
typography: CcTypography,
|
|
spacing: CcSpacing,
|
|
layout: CcLayout,
|
|
breakpoints: CcBreakpoints,
|
|
radius: CcRadius,
|
|
shadows: CcShadows,
|
|
motion: CcMotion,
|
|
a11y: CcA11y,
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CSS Custom Property Names
|
|
// ---------------------------------------------------------------------------
|
|
export const CcCssProps = {
|
|
// Color
|
|
colorPrimary: '--cc-color-primary',
|
|
colorSecondary: '--cc-color-secondary',
|
|
colorAccent: '--cc-color-accent',
|
|
colorDanger: '--cc-color-danger',
|
|
|
|
// Surface
|
|
surfaceDarkest: '--cc-surface-darkest',
|
|
surfaceDark: '--cc-surface-dark',
|
|
surfaceMedium: '--cc-surface-medium',
|
|
surfaceLight: '--cc-surface-light',
|
|
surfaceLighter: '--cc-surface-lighter',
|
|
|
|
// On-surface
|
|
onSurface: '--cc-on-surface',
|
|
onSurfaceVariant: '--cc-on-surface-variant',
|
|
onSurfaceMuted: '--cc-on-surface-muted',
|
|
|
|
// Status
|
|
statusActive: '--cc-status-active',
|
|
statusIdle: '--cc-status-idle',
|
|
statusThinking: '--cc-status-thinking',
|
|
statusError: '--cc-status-error',
|
|
statusOffline: '--cc-status-offline',
|
|
statusActiveBg: '--cc-status-active-bg',
|
|
statusIdleBg: '--cc-status-idle-bg',
|
|
statusThinkingBg: '--cc-status-thinking-bg',
|
|
statusErrorBg: '--cc-status-error-bg',
|
|
statusOfflineBg: '--cc-status-offline-bg',
|
|
statusActiveBorder: '--cc-status-active-border',
|
|
statusIdleBorder: '--cc-status-idle-border',
|
|
statusThinkingBorder: '--cc-status-thinking-border',
|
|
statusErrorBorder: '--cc-status-error-border',
|
|
statusOfflineBorder: '--cc-status-offline-border',
|
|
|
|
// Typography
|
|
fontBrand: '--cc-font-brand',
|
|
fontBody: '--cc-font-body',
|
|
fontMono: '--cc-font-mono',
|
|
|
|
// Spacing
|
|
spacing2: '--cc-spacing-2',
|
|
spacing4: '--cc-spacing-4',
|
|
spacing6: '--cc-spacing-6',
|
|
spacing8: '--cc-spacing-8',
|
|
spacing12: '--cc-spacing-12',
|
|
spacing16: '--cc-spacing-16',
|
|
|
|
// Layout
|
|
navRailCollapsed: '--cc-nav-rail-collapsed',
|
|
navRailExpanded: '--cc-nav-rail-expanded',
|
|
headerHeight: '--cc-header-height',
|
|
bottomNavHeight: '--cc-bottom-nav-height',
|
|
cardRadius: '--cc-card-radius',
|
|
cardMinWidth: '--cc-card-min-width',
|
|
|
|
// Radius
|
|
radiusNone: '--cc-radius-none',
|
|
radiusXs: '--cc-radius-xs',
|
|
radiusSm: '--cc-radius-sm',
|
|
radiusMd: '--cc-radius-md',
|
|
radiusLg: '--cc-radius-lg',
|
|
radiusXl: '--cc-radius-xl',
|
|
radiusFull: '--cc-radius-full',
|
|
|
|
// Shadows
|
|
shadow0: '--cc-shadow-0',
|
|
shadow1: '--cc-shadow-1',
|
|
shadow2: '--cc-shadow-2',
|
|
shadow3: '--cc-shadow-3',
|
|
shadow4: '--cc-shadow-4',
|
|
|
|
// Motion
|
|
durationFast: '--cc-duration-fast',
|
|
durationShort: '--cc-duration-short',
|
|
durationMedium: '--cc-duration-medium',
|
|
durationStandard: '--cc-duration-standard',
|
|
durationLong: '--cc-duration-long',
|
|
easingStandard: '--cc-easing-standard',
|
|
easingDecelerate: '--cc-easing-decelerate',
|
|
easingAccelerate: '--cc-easing-accelerate',
|
|
|
|
// Accessibility
|
|
focusWidth: '--cc-focus-width',
|
|
focusOffset: '--cc-focus-offset',
|
|
focusColor: '--cc-focus-color',
|
|
touchMin: '--cc-touch-min',
|
|
} as const;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Utility: Read a CSS custom property from the document
|
|
// ---------------------------------------------------------------------------
|
|
export function getCssToken(propertyName: string): string {
|
|
return getComputedStyle(document.documentElement).getPropertyValue(propertyName).trim();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Utility: Set a CSS custom property on the document root
|
|
// ---------------------------------------------------------------------------
|
|
export function setCssToken(propertyName: string, value: string): void {
|
|
document.documentElement.style.setProperty(propertyName, value);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Utility: Get status color by agent status type
|
|
// ---------------------------------------------------------------------------
|
|
export function getStatusColor(status: string): { fg: string; bg: string; border: string } {
|
|
const statusMap: Record<string, { fg: string; bg: string; border: string }> = CcStatusColors;
|
|
return statusMap[status] ?? CcStatusColors.offline;
|
|
} |