Chip Color Variants

<div class="nuda-chip-colors">
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--neutral">neutral</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--accent">accent</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--success">success</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--warn">warn</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--danger">danger</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--info">info</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--violet">violet</span>
  <span class="nuda-chip-colors__chip nuda-chip-colors__chip--pink">pink</span>
</div>

/* Chip Color Variants
   Eight semantic presets — pick by modifier class.
   Customize: per-variant color/background/border */

.nuda-chip-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-colors__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font: 500 11px/1 ui-sans-serif, system-ui, sans-serif;
  border-radius: 99px;
  border: 1px solid;
}

.nuda-chip-colors__chip--neutral {
  color: #fafafa;
  background: #111114;
  border-color: rgba(255, 255, 255, 0.08);
}

.nuda-chip-colors__chip--accent {
  color: #09090b;
  background: #e4ff54;
  border-color: #e4ff54;
}

.nuda-chip-colors__chip--success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}

.nuda-chip-colors__chip--warn {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
}

.nuda-chip-colors__chip--danger {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.nuda-chip-colors__chip--info {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.nuda-chip-colors__chip--violet {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
}

.nuda-chip-colors__chip--pink {
  color: #f9a8d4;
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.3);
}