Control-Center/frontend-legacy/src/styles/_css-properties.scss

// ============================================================================
// 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};
  }
}