Command Palette

Recipe CSS

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

/* === Command palette ===
   Spacing scales with --k-space (density token) — Compact/Default/Comfortable
   themes get tighter/looser padding throughout. Sizes are calibrated against
   Linear / Cursor / GitHub cmdp's: input area generous, item rows breathable,
   section labels with clear top-space so each group reads as its own block. */
.cmdp {
  border-radius: var(--k-radius-lg);
  border: var(--k-hairline, 1px solid var(--k-border));
  background: var(--k-surface-overlay, var(--k-surface-raised));
  box-shadow: var(--k-shadow-lg);
  overflow: hidden;
}
.cmdp__in {
  display: flex;
  align-items: center;
  gap: var(--k-s-12);
  padding: calc(var(--k-space, 16px) * 0.85) calc(var(--k-space, 16px) * 1);
  border-bottom: var(--k-divider);
}
/* Font-size uses --k-type-small to match every other input in the system.
 * Previously hardcoded to 15px ("primary tool" feel), but that meant the
 * combobox filter — which reuses .cmdp__in — rendered a different size
 * than its own select trigger and any sibling .in fields in the same form.
 * shadcn cmdk uses ~14px too; tight consistency beats marginal emphasis. */
.cmdp__in input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--k-type-small);
}
.cmdp__in input:focus,
.cmdp__in input:focus-visible { outline: 0; }
.cmdp__list {
  list-style: none;
  padding: var(--k-s-6);
  margin: 0;
  font-size: var(--k-type-small);
  /* Long result lists scroll inside the palette instead of growing off-screen. */
  max-height: var(--k-overlay-max-lg, 24rem); overflow-y: auto;
}
/* Command palette items follow the MD row grammar — slightly taller than
 * dropdown menu items because cmdp is a "search & select" surface, not a
 * "pick from a short list" one. The extra vertical room makes the search
 * results read as scannable cards rather than a packed menu. */
.cmdp__item {
  display: flex;
  align-items: center;
  gap: var(--k-row-gap, 10px);
  padding: 0 var(--k-row-px, 10px);
  min-height: var(--k-row-h-md, 32px);
  border-radius: var(--k-row-radius, 6px);
  color: var(--k-fg);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.cmdp__item > svg { width: var(--k-row-icon, 14px); height: var(--k-row-icon, 14px); flex-shrink: 0; }
/* Mouse hover highlights a row the same way arrow-keys do — without this the
   list feels dead vs cmdk (hovering a command did nothing). Active (--on) and
   hover share one highlight token so only one row ever reads as "current". */
.cmdp__item:hover { background: var(--k-state-hover); }
.cmdp__item--on { background: var(--k-state-hover); }
/* Empty-state — cmdk's defining "no results" affordance. */
.cmdp__empty {
  padding: var(--k-s-14) var(--k-s-14) var(--k-s-20);
  text-align: center;
  color: var(--k-fg-muted);
  font-size: var(--k-type-small);
}
/* Section label between items — clear top-space so each group reads as its
   own block, not "one extra row that happens to be uppercase". */
.cmdp__section {
  padding: var(--k-s-14) var(--k-s-14) var(--k-s-4);
  font-size: var(--k-type-caption);
  text-transform: uppercase;
  letter-spacing: var(--k-track-eyebrow);
  color: var(--k-fg-faint);
  font-weight: var(--k-weight-medium);
}
.cmdp__list + .cmdp__section { border-top: var(--k-divider); margin-top: var(--k-s-6); }
/* Per-item leading icon + trailing shortcut — shadcn pattern */
.cmdp__item-icon { color: var(--k-fg-muted); display: inline-flex; flex: none; }
.cmdp__shortcut {
  margin-left: auto;
  display: inline-flex;
  gap: var(--k-s-4);
  font-family: var(--k-font-mono);
  font-size: var(--k-type-caption);
  color: var(--k-fg-faint);
}