@casoon/dragonfly/tokens/shadows.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.

/**
 * Shadow Properties with @property Definitions
 * 
 * Typed CSS custom properties for shadows using @property.
 * This enables better tooling support, autocomplete, and animation capabilities.
 * 
 * @layer tokens.properties
 */

@layer tokens.properties {
  /* Base Shadow Properties */
  @property --shadow-none {
    inherits: false;
    initial-value: none;
    
  }
  
  @property --shadow-xs {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
    
  }
  
  @property --shadow-sm {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
    
  }
  
  @property --shadow-md {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-lg {
    inherits: false;
    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-xl {
    inherits: false;
    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-2xl {
    inherits: false;
    initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);
    
  }
  
  @property --shadow-inner {
    inherits: false;
    initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
    
  }
  
  /* Component-Specific Shadow Properties */
  @property --shadow-card {
    inherits: false;
    initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-modal {
    inherits: false;
    initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-dropdown {
    inherits: false;
    initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-tooltip {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    
  }
  
  @property --shadow-button {
    inherits: false;
    initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
    
  }
  
  @property --shadow-button-hover {
    inherits: false;
    initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
    
  }
}

/* Fallback Values für alle Shadow-Definitionen */
:root {
  /* Base Shadow Scale */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
  
  /* Component Shadows */
  --shadow-card: var(--shadow-sm);
  --shadow-modal: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-tooltip: var(--shadow-md);
  --shadow-button: var(--shadow-xs);
  --shadow-button-hover: var(--shadow-md);
}