@casoon/dragonfly/icons/index.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.

/*
 * Icon System
 *
 * Hauptdatei für das Icon-System der UI-Bibliothek.
 * Definiert das Basissystem für Icons und ihre Varianten.
 */

/* 
 * Modulare Icon-Imports
 * Aktuell auskommentiert, da die Dateien noch nicht existieren.
 * Sollten mit expliziten Layer-Angaben versehen werden.
 */

/* Geplante Icon-Module (derzeit nicht implementiert) */

/* @import url('./basic/basic-icons.css') layer(icons.basic); */

/* @import url('./brands/brand-icons.css') layer(icons.brands); */

/* @import url('./functional/functional-icons.css') layer(icons.functional); */

/* @import url('./illustrations/illustration-icons.css') layer(icons.illustrations); */

/**
 * Basis-Icon-System
 * Definiert Größen, Farben und Grundstile für alle Icons
 */
@layer icons {
  /* Basis-Icon-Klasse */
  .icon {
    display: var(--display-inline-block);
    flex-shrink: 0;
    height: var(--icon-size-md);
    vertical-align: var(--position-middle);
    width: var(--icon-size-md);
  }
  
  /* Icon-Größenvarianten */
  .icon-xs { 
    height: var(--icon-size-xs); 
    width: var(--icon-size-xs); 
  }
  
  .icon-sm { 
    height: var(--icon-size-sm); 
    width: var(--icon-size-sm); 
  }
  
  .icon-md { 
    height: var(--icon-size-md); 
    width: var(--icon-size-md); 
  }
  
  .icon-lg { 
    height: var(--icon-size-lg); 
    width: var(--icon-size-lg); 
  }
  
  .icon-xl { 
    height: var(--icon-size-xl); 
    width: var(--icon-size-xl); 
  }
  
  .icon-2xl { 
    height: var(--icon-size-2xl); 
    width: var(--icon-size-2xl); 
  }
  
  .icon-3xl { 
    height: var(--icon-size-3xl); 
    width: var(--icon-size-3xl); 
  }
  
  /* Icon-Farbvarianten - entsprechen den globalen Farbvariablen */
  .icon-current { color: currentColor; }

  .icon-primary { color: var(--color-primary-500); }

  .icon-secondary { color: var(--color-secondary-500); }

  .icon-success { color: var(--color-success); }

  .icon-warning { color: var(--color-warning); }

  .icon-error { color: var(--color-error); }

  .icon-info { color: var(--color-info); }

  .icon-muted { color: var(--color-gray-400); }
}