@casoon/dragonfly/themes/variants/monochrome.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Monochrome Theme Variant - Token-Based Version
 * 
 * Standalone theme variant that can be loaded independently.
 * Uses [data-theme="monochrome"] scope for activation.
 * CDN-compatible and opt-in via import or JS.
 * 
 * @layer themes.variants
 */

@layer themes.variants {
  [data-theme="monochrome"] {
    /* Primary Colors - Pure monochrome black/white theme */
    --color-primary: #000;
    --color-secondary: #404040;
    
    /* Status Colors - Monochrome status colors using grayscale */
    --color-success: #404040;
    --color-warning: #666;
    --color-error: #000;
    --color-info: #808080;
    
    /* Text Colors - High contrast monochrome */
    --color-text: #000;
    --color-text-muted: #666;
    --color-text-inverse: #fff;
    
    /* Surface Colors - Pure monochrome surfaces */
    --color-background: #fff;
    --color-surface: #f5f5f5;
    --color-surface-elevated: #fff;
    
    /* Border Colors - Monochrome borders */
    --color-border: #ccc;
    --color-border-strong: #999;
    
    /* Transition Colors for smooth animations */
    --color-transition-primary: #000;
    --color-transition-surface: #fff;
    --color-transition-text: #000;
    
    /* Monochrome-specific theme properties */
    --theme-monochrome-accent: #000;
    --theme-monochrome-gradient-start: var(--theme-gradient-start, #000);
    --theme-monochrome-gradient-end: var(--theme-gradient-end, #404040);
    
    /* High contrast focus and interaction states */
    --color-focus: #000;
    --color-focus-glow: rgb(0 0 0 / 3000%);
    
    /* Monochrome shadow properties */
    --shadow-opacity-sm: 0.1;
    --shadow-opacity-md: 0.2;
    --shadow-opacity-lg: 0.3;
    --shadow-opacity-xl: 0.4;
    --shadow-color: var(--theme-shadow-color, rgb(0 0 0));
    
    /* Backdrop properties using theme backdrop tokens */
    --color-backdrop: rgb(0 0 0 / 8000%);
    --backdrop-blur: var(--theme-backdrop-blur, 8px);
    
    /* Monochrome status background colors */
    --color-success-bg: #f5f5f5;
    --color-warning-bg: #f0f0f0;
    --color-error-bg: #eee;
    --color-info-bg: #fafafa;
    
    /* Monochrome status border colors */
    --color-success-border: #ccc;
    --color-warning-border: #bbb;
    --color-error-border: #999;
    --color-info-border: #ddd;
    
    /* Sharp interaction states for monochrome clarity */
    --hover-opacity: 0.7;
    --hover-scale: 1.02;
    --active-opacity: 0.8;
    --active-scale: 0.98;
    --disabled-opacity: 0.4;
    
    /* Clean transition properties */
    --transition-fast: var(--theme-transition-fast, 150ms);
    --transition-normal: var(--theme-transition-normal, 250ms);
    --transition-slow: var(--theme-transition-slow, 400ms);
    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));
  }
}