CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-122: Scaffold Control Center React frontend
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
Details

Browse Source
This commit is contained in:
Joshua
2026-05-07 20:15:30 -04:00
parent cce3e061a7
commit 8da593c450
116 changed files with 10724 additions and 6611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend-legacy/src/styles/_css-properties.scss Normal file
View File

@@ -0,0 +1,115 @@
// ============================================================================
// OpenClaw Control Center — CSS Custom Property Output
// ============================================================================
// This module emits ALL design tokens as CSS custom properties on :root.
// Import this in styles.scss to make tokens available to all components.
//
// Tokens are namespaced with --cc- (Control Center) to avoid collisions
// with Angular Material's --mat- variables.
// ============================================================================
@use 'tokens' as *;
// ---------------------------------------------------------------------------
// Emit all CSS custom properties
// ---------------------------------------------------------------------------
@mixin emit-custom-properties {
:root {
// --- Color tokens ---
--cc-color-primary: #{$color-primary-500};
--cc-color-secondary: #{$color-secondary-400};
--cc-color-accent: #{$color-accent-400};
--cc-color-danger: #{$color-danger-400};
// --- Surface tokens ---
--cc-surface-darkest: #{$color-surface-darkest};
--cc-surface-dark: #{$color-surface-dark};
--cc-surface-medium: #{$color-surface-medium};
--cc-surface-light: #{$color-surface-light};
--cc-surface-lighter: #{$color-surface-lighter};
// --- On-surface tokens ---
--cc-on-surface: #{$color-on-surface};
--cc-on-surface-variant: #{$color-on-surface-variant};
--cc-on-surface-muted: #{$color-on-surface-muted};
// --- Status tokens ---
--cc-status-active: #{$status-active};
--cc-status-idle: #{$status-idle};
--cc-status-thinking: #{$status-thinking};
--cc-status-error: #{$status-error};
--cc-status-offline: #{$status-offline};
--cc-status-active-bg: #{$status-active-bg};
--cc-status-idle-bg: #{$status-idle-bg};
--cc-status-thinking-bg: #{$status-thinking-bg};
--cc-status-error-bg: #{$status-error-bg};
--cc-status-offline-bg: #{$status-offline-bg};
--cc-status-active-border: #{$status-active-border};
--cc-status-idle-border: #{$status-idle-border};
--cc-status-thinking-border: #{$status-thinking-border};
--cc-status-error-border: #{$status-error-border};
--cc-status-offline-border: #{$status-offline-border};
// --- Typography tokens ---
--cc-font-brand: #{$font-family-brand};
--cc-font-body: #{$font-family-body};
--cc-font-mono: #{$font-family-mono};
// --- Spacing tokens ---
--cc-spacing-0: #{$spacing-0};
--cc-spacing-1: #{$spacing-1};
--cc-spacing-2: #{$spacing-2};
--cc-spacing-3: #{$spacing-3};
--cc-spacing-4: #{$spacing-4};
--cc-spacing-5: #{$spacing-5};
--cc-spacing-6: #{$spacing-6};
--cc-spacing-7: #{$spacing-7};
--cc-spacing-8: #{$spacing-8};
--cc-spacing-10: #{$spacing-10};
--cc-spacing-12: #{$spacing-12};
--cc-spacing-16: #{$spacing-16};
// --- Layout tokens ---
--cc-nav-rail-collapsed: #{$nav-rail-collapsed-width};
--cc-nav-rail-expanded: #{$nav-rail-expanded-width};
--cc-header-height: #{$header-height};
--cc-bottom-nav-height: #{$bottom-nav-height};
--cc-card-radius: #{$card-border-radius};
--cc-card-min-width: #{$card-min-width};
// --- Radius tokens ---
--cc-radius-none: #{$radius-none};
--cc-radius-xs: #{$radius-xs};
--cc-radius-sm: #{$radius-sm};
--cc-radius-md: #{$radius-md};
--cc-radius-lg: #{$radius-lg};
--cc-radius-xl: #{$radius-xl};
--cc-radius-full: #{$radius-full};
// --- Shadow tokens ---
--cc-shadow-0: #{$shadow-level-0};
--cc-shadow-1: #{$shadow-level-1};
--cc-shadow-2: #{$shadow-level-2};
--cc-shadow-3: #{$shadow-level-3};
--cc-shadow-4: #{$shadow-level-4};
// --- Motion tokens ---
--cc-duration-fast: #{$duration-fast};
--cc-duration-short: #{$duration-short};
--cc-duration-medium: #{$duration-medium};
--cc-duration-standard: #{$duration-standard};
--cc-duration-long: #{$duration-long};
--cc-easing-standard: #{$easing-standard};
--cc-easing-decelerate: #{$easing-decelerate};
--cc-easing-accelerate: #{$easing-accelerate};
// --- Accessibility tokens ---
--cc-focus-width: #{$focus-ring-width};
--cc-focus-offset: #{$focus-ring-offset};
--cc-focus-color: #{$focus-ring-color};
--cc-touch-min: #{$min-touch-target};
}
}

474
frontend-legacy/src/styles/_tokens.scss Normal file
View File

@@ -0,0 +1,474 @@
// ============================================================================
// 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;
}
// ============================================================================
// CUB-20 / CUB-27 CONVENIENCE ALIASES
// ============================================================================
// Short aliases used by agent-card, hub-page, and other components.
// These map to the canonical M3 tokens above.
$cc-background: $color-surface-darkest;
$cc-surface: $color-surface-dark;
$cc-surface-container: $color-surface-medium;
$cc-surface-container-high: $color-surface-light;
$cc-on-surface: $color-on-surface;
$cc-on-surface-variant: $color-on-surface-variant;
$cc-outline: $color-surface-lighter;
$cc-font-mono: $font-family-mono;
$cc-font-family: $font-family-brand;
$cc-nav-rail-collapsed-width: $nav-rail-collapsed-width;
$cc-nav-rail-expanded-width: $nav-rail-expanded-width;
$cc-header-height: $header-height;
$cc-bottom-nav-height: $bottom-nav-height;
$cc-card-border-radius: $card-border-radius;
$cc-card-min-width: $card-min-width;
$cc-card-gap: $spacing-card-gap;
$cc-card-padding: $spacing-card-pad;
$cc-section-padding: $spacing-section;
$cc-spacing-unit: $spacing-unit;
$cc-breakpoint-mobile: $breakpoint-compact;
$cc-breakpoint-tablet: $breakpoint-medium;
$cc-breakpoint-desktop: $breakpoint-expanded;
$cc-surface-darkest: $color-surface-darkest;
$cc-surface-dark: $color-surface-dark;
$cc-surface-medium: $color-surface-medium;
$cc-surface-light: $color-surface-light;
$cc-surface-lighter: $color-surface-lighter;

170
frontend-legacy/src/styles/_utilities.scss Normal file
View File

@@ -0,0 +1,170 @@
// ============================================================================
// OpenClaw Control Center — Utility Mixins
// ============================================================================
// Reusable patterns that enforce design-system consistency.
// Components should @use this module and include mixins rather than
// writing repetitive CSS blocks.
// ============================================================================
@use 'tokens' as *;
// ---------------------------------------------------------------------------
// Elevation / Surface Card
// Applies consistent card styling using design tokens.
// Usage: @include utils.card-surface();
// ---------------------------------------------------------------------------
@mixin card-surface($elevation: 1) {
background-color: var(--cc-surface-medium);
border-radius: var(--cc-card-radius);
border: 1px solid var(--cc-surface-lighter);
box-shadow: var(--cc-shadow-#{$elevation});
transition: box-shadow var(--cc-duration-short) var(--cc-easing-standard);
}
// ---------------------------------------------------------------------------
// Elevated card on hover
// ---------------------------------------------------------------------------
@mixin card-hover($elevation: 2) {
&:hover {
box-shadow: var(--cc-shadow-#{$elevation});
}
}
// ---------------------------------------------------------------------------
// Status-aware left border
// Applies colored left border based on agent status.
// Usage: @include utils.status-border('active');
// ---------------------------------------------------------------------------
@mixin status-border($status) {
$status-map: (
'active': var(--cc-status-active),
'idle': var(--cc-status-idle),
'thinking': var(--cc-status-thinking),
'error': var(--cc-status-error),
'offline': var(--cc-status-offline),
);
$color: map-get($status-map, $status);
@if not $color {
$color: var(--cc-status-offline);
}
border-left: 4px solid $color;
}
// ---------------------------------------------------------------------------
// Status badge / pill
// ---------------------------------------------------------------------------
@mixin status-badge($status) {
$fg-map: (
'active': var(--cc-status-active),
'idle': var(--cc-status-idle),
'thinking': var(--cc-status-thinking),
'error': var(--cc-status-error),
'offline': var(--cc-status-offline),
);
$bg-map: (
'active': var(--cc-status-active-bg),
'idle': var(--cc-status-idle-bg),
'thinking': var(--cc-status-thinking-bg),
'error': var(--cc-status-error-bg),
'offline': var(--cc-status-offline-bg),
);
display: inline-flex;
align-items: center;
gap: 6px;
height: $badge-height;
padding: 0 8px;
border-radius: $badge-border-radius;
background-color: map-get($bg-map, $status);
color: map-get($fg-map, $status);
font-size: $font-size-label-medium;
font-weight: $font-weight-medium;
white-space: nowrap;
}
// ---------------------------------------------------------------------------
// Glass surface (frosted glass effect)
// ---------------------------------------------------------------------------
@mixin glass-surface {
background-color: rgba(19, 22, 26, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--cc-surface-lighter);
}
// ---------------------------------------------------------------------------
// Responsive grid
// Creates a responsive grid that adapts from 1-col to 2-col.
// ---------------------------------------------------------------------------
@mixin responsive-grid($min-col-width: $card-min-width, $gap: $spacing-card-gap) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($min-col-width, 1fr));
gap: $gap;
}
// ---------------------------------------------------------------------------
// Scroll container
// ---------------------------------------------------------------------------
@mixin scroll-container($direction: 'y') {
@if $direction == 'y' {
overflow-y: auto;
overflow-x: hidden;
} @else {
overflow-x: auto;
overflow-y: hidden;
}
-webkit-overflow-scrolling: touch;
// Custom scrollbar (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);
}
}
}
// ---------------------------------------------------------------------------
// Page container
// Standard page padding and layout
// ---------------------------------------------------------------------------
@mixin page-container {
padding: $spacing-section;
min-height: 400px;
overflow-x: hidden;
}
// ---------------------------------------------------------------------------
// Transition helpers
// ---------------------------------------------------------------------------
@mixin transition-colors($duration: $duration-short) {
transition: color #{$duration} $easing-standard,
background-color #{$duration} $easing-standard,
border-color #{$duration} $easing-standard;
}
@mixin transition-transform($duration: $duration-medium) {
transition: transform #{$duration} $easing-standard;
}
@mixin transition-opacity($duration: $duration-short) {
transition: opacity #{$duration} $easing-standard;
}
// ---------------------------------------------------------------------------
// Reduced motion
// Wraps content in a reduced-motion media query.
// ---------------------------------------------------------------------------
@mixin reduced-motion {
@media (prefers-reduced-motion: reduce) {
@content;
}
}