Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
285 lines
8.8 KiB
SCSS
285 lines
8.8 KiB
SCSS
// ============================================================================
|
|
// OpenClaw Control Center — M3 Tactical Dark Theme
|
|
// ============================================================================
|
|
// Main global stylesheet. Imports the design system token modules and
|
|
// applies the M3 dark theme. All tokens are defined once in
|
|
// styles/_tokens.scss — SCSS variables and mixins
|
|
// styles/_css-properties.scss — CSS custom property output
|
|
// styles/_utilities.scss — utility mixins for components
|
|
//
|
|
// Components should @use these modules rather than hardcoding values.
|
|
// ============================================================================
|
|
|
|
@use 'styles/tokens' as tokens;
|
|
@use 'styles/css-properties' as css-props;
|
|
@use 'styles/utilities' as utils;
|
|
@use '@angular/material' as mat;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// M3 Theme Definition
|
|
// ---------------------------------------------------------------------------
|
|
// Using mat.define-theme() with custom color tokens to match the tactical
|
|
// dark palette. Angular Material 19+ uses the new theming API.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
$dark-theme: mat.define-theme((
|
|
color: (
|
|
theme-type: dark,
|
|
primary: mat.$cyan-palette,
|
|
tertiary: mat.$violet-palette,
|
|
),
|
|
typography: (
|
|
brand-family: tokens.$font-family-brand,
|
|
plain-family: tokens.$font-family-body,
|
|
bold-weight: tokens.$font-weight-bold,
|
|
medium-weight: tokens.$font-weight-medium,
|
|
regular-weight: tokens.$font-weight-regular,
|
|
),
|
|
density: (
|
|
scale: 0,
|
|
),
|
|
));
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Apply theme to :root
|
|
// ---------------------------------------------------------------------------
|
|
html {
|
|
height: 100%;
|
|
@include mat.theme($dark-theme);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Emit Design System CSS Custom Properties
|
|
// ---------------------------------------------------------------------------
|
|
@include css-props.emit-custom-properties;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Per spec Section 5.1 "Status Colors (Semantic — outside M3 tonal system)"
|
|
// These are NOT part of the M3 tonal palette; they are semantic overrides.
|
|
// ---------------------------------------------------------------------------
|
|
:root {
|
|
// --- Tactical Dark Mode color palette (CUB-47) ---
|
|
--color-surface: #0F172A;
|
|
--color-surface-light: #1E293B;
|
|
--color-primary: #38BDF8;
|
|
--color-secondary: #2DD4BF;
|
|
--color-accent: #A78BFA;
|
|
--color-danger: #F87171;
|
|
--color-text-primary: #FFFFFF;
|
|
--color-text-secondary: #94A3B8;
|
|
--color-border: #334155;
|
|
|
|
// --- Status colors ---
|
|
--status-active: #38BDF8;
|
|
--status-idle: #2DD4BF;
|
|
--status-thinking: #A78BFA;
|
|
--status-error: #F87171;
|
|
--status-offline: #64748B;
|
|
|
|
// --- Status background tints (12% opacity) ---
|
|
--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);
|
|
|
|
// --- Surface overrides (tactical dark palette) ---
|
|
--cc-background: #0D0F12;
|
|
--cc-surface: #13161A;
|
|
--cc-surface-container: #1C2027;
|
|
--cc-surface-container-high: #252B33;
|
|
--cc-on-surface: #E2E8F0;
|
|
--cc-on-surface-variant: #8A9BB0;
|
|
--cc-outline: #2D3748;
|
|
|
|
// --- Mono font stack ---
|
|
--cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace;
|
|
|
|
// --- Layout constants ---
|
|
--cc-nav-rail-collapsed-width: 72px;
|
|
--cc-nav-rail-expanded-width: 256px;
|
|
--cc-header-height: 64px;
|
|
--cc-header-height-compact: 56px;
|
|
--cc-bottom-nav-height: 80px;
|
|
--cc-card-border-radius: 16px;
|
|
--cc-card-min-width: 280px;
|
|
--cc-card-gap: 16px;
|
|
--cc-card-padding: 20px;
|
|
--cc-section-padding: 24px;
|
|
--cc-section-padding-compact: 16px;
|
|
--cc-spacing-unit: 8px;
|
|
|
|
// --- Responsive breakpoints (CUB-27) ---
|
|
--cc-breakpoint-compact: 599px; // 0-599px: phone / compact
|
|
--cc-breakpoint-medium: 600px; // 600-1023px: tablet / medium
|
|
--cc-breakpoint-expanded: 1024px; // ≥1024px: desktop/kiosk / expanded
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Global Body Styles
|
|
// ---------------------------------------------------------------------------
|
|
body {
|
|
background-color: var(--cc-surface-darkest);
|
|
color: var(--cc-on-surface);
|
|
font-family: var(--cc-font-body);
|
|
margin: 0;
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Typography Helpers
|
|
// ---------------------------------------------------------------------------
|
|
.text-mono {
|
|
font-family: var(--cc-font-mono);
|
|
font-size: tokens.$font-size-body-medium;
|
|
font-weight: tokens.$font-weight-regular;
|
|
letter-spacing: tokens.$letter-spacing-mono;
|
|
}
|
|
|
|
.text-display-large {
|
|
font-size: tokens.$font-size-display-large;
|
|
font-weight: tokens.$font-weight-heavy;
|
|
line-height: tokens.$line-height-tight;
|
|
letter-spacing: tokens.$letter-spacing-tight;
|
|
}
|
|
|
|
.text-headline-medium {
|
|
font-size: tokens.$font-size-headline-medium;
|
|
font-weight: tokens.$font-weight-bold;
|
|
line-height: tokens.$line-height-tight;
|
|
}
|
|
|
|
.text-title-large {
|
|
font-size: tokens.$font-size-title-large;
|
|
font-weight: tokens.$font-weight-bold;
|
|
}
|
|
|
|
.text-title-medium {
|
|
font-size: tokens.$font-size-title-medium;
|
|
font-weight: tokens.$font-weight-medium;
|
|
}
|
|
|
|
.text-body-large {
|
|
font-size: tokens.$font-size-body-large;
|
|
font-weight: tokens.$font-weight-regular;
|
|
line-height: tokens.$line-height-normal;
|
|
}
|
|
|
|
.text-body-medium {
|
|
font-size: tokens.$font-size-body-medium;
|
|
font-weight: tokens.$font-weight-regular;
|
|
line-height: tokens.$line-height-normal;
|
|
}
|
|
|
|
.text-label-medium {
|
|
font-size: tokens.$font-size-label-medium;
|
|
font-weight: tokens.$font-weight-medium;
|
|
letter-spacing: tokens.$letter-spacing-wide;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Status Dot Pulse Animations
|
|
// ---------------------------------------------------------------------------
|
|
@keyframes pulse-active {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.7; transform: scale(1.15); }
|
|
}
|
|
|
|
@keyframes pulse-error {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
@keyframes pulse-thinking {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Status Dot Utility Classes
|
|
// ---------------------------------------------------------------------------
|
|
.status-dot {
|
|
width: tokens.$status-dot-size;
|
|
height: tokens.$status-dot-size;
|
|
border-radius: tokens.$radius-full;
|
|
display: inline-block;
|
|
|
|
&--active {
|
|
background-color: var(--cc-status-active);
|
|
animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
|
|
}
|
|
|
|
&--idle {
|
|
background-color: var(--cc-status-idle);
|
|
}
|
|
|
|
&--thinking {
|
|
background-color: var(--cc-status-thinking);
|
|
animation: pulse-thinking 3s tokens.$easing-standard infinite;
|
|
}
|
|
|
|
&--error {
|
|
background-color: var(--cc-status-error);
|
|
animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
|
|
}
|
|
|
|
&--offline {
|
|
background-color: var(--cc-status-offline);
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Accessibility: Reduced Motion
|
|
// ---------------------------------------------------------------------------
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.status-dot--active,
|
|
.status-dot--error,
|
|
.status-dot--thinking {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Screen-reader-only utility
|
|
// ---------------------------------------------------------------------------
|
|
.sr-only {
|
|
@include tokens.sr-only;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Truncate utility
|
|
// ---------------------------------------------------------------------------
|
|
.truncate {
|
|
@include tokens.truncate;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Focus ring utility
|
|
// ---------------------------------------------------------------------------
|
|
.focus-ring {
|
|
@include tokens.focus-ring;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Scrollbar Styling (Tactical Dark)
|
|
// ---------------------------------------------------------------------------
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--cc-surface-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--cc-surface-lighter);
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
background: var(--cc-on-surface-variant);
|
|
}
|
|
} |