Attachment

Recipe CSS

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

/* === Attachment chip family (#113) ====================================
 * Pill with left thumb (icon-box) + label/meta stack + remove button.
 * Mid-string truncation via direction:rtl on the label clips from the
 * left when there's not enough room — Apple Finder pattern. */
.att-chip-stack {
  display: flex;
  flex-direction: column;
  /* The kit's standard vertical gap for stacked cards/rows — one token shared
   * by radio-cards, kanban column, slot picker, event lists. Scales w/ density. */
  gap: var(--k-stack-gap, 8px);
}
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-8);
  padding: var(--k-s-4) var(--k-s-6) var(--k-s-4) var(--k-s-4);
  background: var(--k-surface-2);
  border: var(--k-hairline, 1px solid var(--k-border));
  border-radius: var(--k-radius-md);
  min-width: 0;
}
.att-chip__thumb {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  color: var(--k-fg-muted);
}
.att-chip--file .att-chip__thumb { background: var(--k-primary-soft); color: var(--k-primary-soft-fg); }
.att-chip--link .att-chip__thumb { background: var(--k-info-soft); color: var(--k-info); }
.att-chip--audio .att-chip__thumb { background: var(--k-warning-soft); color: var(--k-warning); }
.att-chip--image .att-chip__thumb { background: var(--k-success-soft); color: var(--k-success); }
.att-chip__thumb svg { width: var(--k-icon-sm); height: var(--k-icon-sm); }
.att-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.att-chip__label {
  font-size: var(--k-type-small);
  font-weight: var(--k-weight-medium);
  color: var(--k-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-chip__meta {
  font-size: var(--k-type-caption);
  color: var(--k-fg-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-chip__x {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--k-fg-muted);
  cursor: pointer;
  font-size: var(--k-type-body);
  line-height: 1;
  transition: background var(--k-dur-fast, 110ms) var(--k-ease, ease);
}
/* Hit-target (Invariant I4) — visual stays small; ::before centres a --k-hit-min
   (24px) click area (WCAG-AA floor). */
.att-chip__x::before { content: ''; position: absolute; top: 50%; left: 50%; width: var(--k-hit-min); height: var(--k-hit-min); transform: translate(-50%, -50%); }
.att-chip__x:hover { background: var(--k-state-hover); color: var(--k-fg); }