@casoon/dragonfly/ui/components/chip.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.

/*
 * Chip-Komponente
 *
 * Interaktive Chips oder Tags, optional mit Remove-Button.
 */

/**
 * Chips / Tags
 * 
 * Kompakte Kennzeichnungselemente für Filterbedingungen, Auswahloptionen oder Status.
 * Chips (auch bekannt als "Tokens") sind interaktive Elemente, die Auswahlen oder Eigenschaften darstellen.
 * 
 * @layer: elements
 * 
 * Accessibility:
 * - Für auswählbare Chips role="option" verwenden
 * - Fokuszustände gut sichtbar gestalten
 * - Bei löschbaren Chips beschreibende aria-label hinzufügen
 * - Tastaturnavigation unterstützen
 */

@layer elements {
  /* Basis-Chip */
  .chip {
    align-items: center;
    background-color: var(--color-neutral-100, #f3f4f6);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-neutral-800, #1f2937);
    display: inline-flex;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    transition: background-color 0.2s, box-shadow 0.2s;
  }
  
  /* Chip-Größen */
  .chip--sm {
    font-size: var(--text-xs, 0.75rem);
    padding: 0.125rem 0.5rem;
  }
  
  .chip--md {
    padding: 0.25rem 0.75rem;
  }
  
  .chip--lg {
    font-size: var(--text-base);
    padding: 0.375rem 1rem;
  }
  
  /* Chip-Farben */
  .chip--primary {
    background-color: var(--color-primary-100, #dbeafe);
    color: var(--color-primary-800, #1e40af);
  }
  
  .chip--secondary {
    background-color: var(--color-secondary-100, #f1f5f9);
    color: var(--color-secondary-800, #1e293b);
  }
  
  .chip--success {
    background-color: var(--color-success-100, #d1fae5);
    color: var(--color-success-800, #065f46);
  }
  
  .chip--warning {
    background-color: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #92400e);
  }
  
  .chip--danger {
    background-color: var(--color-error-100, #fee2e2);
    color: var(--color-error-800, #991b1b);
  }
  
  .chip--info {
    background-color: var(--color-info-100, #dbeafe);
    color: var(--color-info-800, #1e40af);
  }
  
  /* Solid-Varianten */
  .chip--solid {
    background-color: var(--color-neutral-600);
    color: white;
  }
  
  .chip--solid.chip--primary {
    background-color: var(--color-primary-500);
    color: white;
  }
  
  .chip--solid.chip--secondary {
    background-color: var(--color-secondary-500);
    color: white;
  }
  
  .chip--solid.chip--success {
    background-color: var(--color-success-500);
    color: white;
  }
  
  .chip--solid.chip--warning {
    background-color: var(--color-warning-500);
    color: var(--color-warning-900);
  }
  
  .chip--solid.chip--danger {
    background-color: var(--color-error-500);
    color: white;
  }
  
  .chip--solid.chip--info {
    background-color: var(--color-info-500);
    color: white;
  }
  
  /* Outline-Varianten */
  .chip--outline {
    background-color: transparent;
    border: 1px solid currentColor;
  }
  
  /* Icon im Chip */
  & .icon {
    display: inline-flex;
    font-size: 1em;
    height: 1em;
    width: 1em;
  }
  
  /* Remove-Button */
  & .remove {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    height: 11%.2em;
    justify-content: center;
    margin-right: -0.25rem;
    opacity: 0.7;
    padding: 0;
    transition: opacity 0.2s, background-color 0.2s;
    width: 11%.2em;
  }
  
  & .remove:hover {
    background-color: rgb(0 0 0 / 1000%);
    opacity: 1;
  }
  
  /* Avatar im Chip */
  & .avatar {
    border-radius: 50px;
    height: 10%.5em;
    margin-left: -0.25rem;
    object-fit: cover;
    width: 10%.5em;
  }
  
  /* Interaktiver Chip */
  .chip--interactive {
    cursor: pointer;
  }
  
  .chip--interactive:hover {
    background-color: var(--color-neutral-200, #e5e7eb);
  }
  
  .chip--interactive:focus {
    box-shadow: 0 0 0 2px var(--color-primary-200);
    outline: none;
  }
  
  /* Ausgewählter Chip */
  .chip--selected {
    background-color: var(--color-primary-100, #dbeafe);
    border: 1px solid var(--color-primary-300);
    color: var(--color-primary-800, #1e40af);
  }
  
  .chip--selected:hover {
    background-color: var(--color-primary-200);
  }
  
  /* Deaktivierter Chip */
  .chip--disabled {
    cursor: not-allowed;
    opacity: 5000%;
  }
  
  .chip--disabled & .remove {
    cursor: not-allowed;
  }
  
  /* Chip-Gruppe */
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .chip-group--inline {
    display: inline-flex;
  }
  
  .chip-group--vertical {
    flex-direction: column;
  }
}