File Upload

Recipe CSS

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

/* === File upload dropzone === */
.dropzone {
  border: 2px dashed var(--k-border);
  border-radius: var(--k-radius-md);
  padding: var(--k-s-24) var(--k-s-16);
  text-align: center;
  background: var(--k-surface-sunken);
  color: var(--k-fg-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-s-6);
  cursor: pointer;
  transition: border-color var(--k-dur, 200ms), background var(--k-dur, 200ms);
}
.dropzone:hover, .dropzone--over {
  border-color: var(--k-primary);
  background: var(--k-primary-soft);
  color: var(--k-primary-soft-fg);
}
.dropzone__icon {
  width: var(--k-icon-chip);
  height: var(--k-icon-chip);
  border-radius: 50%;
  background: var(--k-surface-2);
  color: var(--k-fg);
  display: inline-grid;
  place-items: center;
}
.dropzone__title { font-weight: var(--k-weight-semibold); color: var(--k-fg); font-size: var(--k-type-body); }
.dropzone__hint { font-size: var(--k-type-caption); }