Usage Meter

Recipe CSS

This is the exact CSS your kit ships for Usage Meter — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Usage meter ===
   Progress bar with title + percentage + CTA. Banded color shifts from
   primary at low % to warning at 75%+ to danger at 90%+ — visual urgency
   without a separate alert. */
.usage {
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  padding: calc(var(--k-space, 14px) * 0.75);
  background: var(--k-surface);
  display: flex;
  flex-direction: column;
  gap: var(--k-s-10);
}
.usage__head { display: flex; align-items: baseline; justify-content: space-between; }
.usage__title { font-weight: var(--k-weight-semibold); font-size: var(--k-type-body); }
.usage__pct { font-size: var(--k-type-eyebrow); color: var(--k-fg-muted); font-variant-numeric: tabular-nums; }
.usage__bar {
  width: 100%;
  height: 6px;
  background: var(--k-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.usage__fill {
  height: 100%;
  background: var(--k-fill, var(--k-primary));
  border-radius: 999px;
  animation: progress-grow 800ms var(--k-ease-out, cubic-bezier(.2,.8,.2,1)) backwards;
  transform-origin: left;
}
.usage--warn .usage__fill { background: var(--k-warning); }
.usage--danger .usage__fill { background: var(--k-danger); }
.usage__foot { display: flex; align-items: center; justify-content: space-between; }
.usage__hint { font-size: var(--k-type-caption); color: var(--k-fg-muted); }