|
|
/*
|
|
|
* EmptyState recipe — passive "nothing here / no results" surface.
|
|
|
* Centered column: media (icon box or free media) + title + description +
|
|
|
* actions. `data-size` (sm | md | lg) drives density: `sm` is the compact
|
|
|
* in-collection empty (table/select/command), `md` the panel default,
|
|
|
* `lg` the full-page hero.
|
|
|
*
|
|
|
* `--empty-state-*` tokens are public overrides (recipes.empty-state.*);
|
|
|
* `--_empty-state-*` are internal recipe-local resolutions. Typography
|
|
|
* rides the `--size-{k}-*` bundle; the title steps ONE discrete size up
|
|
|
* from the component size (visual hierarchy without a heading-level
|
|
|
* coupling — level is semantic, size is visual).
|
|
|
*/
|
|
|
|
|
|
[data-empty-state] {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
gap: var(--empty-state-gap, var(--space-3));
|
|
|
padding-block: var(--_empty-state-padding-block);
|
|
|
padding-inline: var(--_empty-state-padding-inline);
|
|
|
min-inline-size: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* ── Size ──────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-empty-state][data-size='sm'] {
|
|
|
--_empty-state-padding-block: var(--space-4);
|
|
|
--_empty-state-padding-inline: var(--space-3);
|
|
|
--_empty-state-title-font-size: var(--size-md-font-size);
|
|
|
--_empty-state-body-font-size: var(--size-sm-font-size);
|
|
|
--_empty-state-media-glyph: var(--size-sm-icon-size);
|
|
|
}
|
|
|
|
|
|
[data-empty-state][data-size='md'] {
|
|
|
--_empty-state-padding-block: var(--space-8);
|
|
|
--_empty-state-padding-inline: var(--space-4);
|
|
|
--_empty-state-title-font-size: var(--size-lg-font-size);
|
|
|
--_empty-state-body-font-size: var(--size-md-font-size);
|
|
|
--_empty-state-media-glyph: var(--size-lg-icon-size);
|
|
|
}
|
|
|
|
|
|
[data-empty-state][data-size='lg'] {
|
|
|
--_empty-state-padding-block: var(--space-12);
|
|
|
--_empty-state-padding-inline: var(--space-5);
|
|
|
--_empty-state-title-font-size: var(--size-xl-font-size);
|
|
|
--_empty-state-body-font-size: var(--size-md-font-size);
|
|
|
--_empty-state-media-glyph: var(--size-xl-icon-size);
|
|
|
}
|
|
|
|
|
|
/* ── Media ─────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-empty-state-media] {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: var(--empty-state-media-fg, var(--color-content-muted));
|
|
|
}
|
|
|
|
|
|
[data-empty-state-media][data-kind='icon'] {
|
|
|
/* literal: the icon box is proportional to its glyph (2× keeps the
|
|
|
tinted plate readable at every size) */
|
|
|
inline-size: calc(var(--_empty-state-media-glyph) * 2);
|
|
|
block-size: calc(var(--_empty-state-media-glyph) * 2);
|
|
|
font-size: var(--_empty-state-media-glyph);
|
|
|
background: var(--empty-state-media-bg, var(--color-neutral-track));
|
|
|
border-radius: var(--empty-state-media-radius, var(--radius-lg));
|
|
|
}
|
|
|
|
|
|
/* ── Title ─────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-empty-state-title] {
|
|
|
margin: 0;
|
|
|
font-size: var(--_empty-state-title-font-size);
|
|
|
font-weight: var(--font-weight-semibold);
|
|
|
line-height: var(--font-line-height-sm, 1.4);
|
|
|
color: var(--color-content-primary);
|
|
|
}
|
|
|
|
|
|
/* ── Description ───────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-empty-state-description] {
|
|
|
margin: 0;
|
|
|
font-size: var(--_empty-state-body-font-size);
|
|
|
line-height: var(--font-line-height-md, 1.5);
|
|
|
color: var(--color-content-muted);
|
|
|
max-inline-size: var(--empty-state-description-measure, 45ch);
|
|
|
text-wrap: pretty;
|
|
|
}
|
|
|
|
|
|
/* ── Actions ───────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-empty-state-actions] {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: var(--empty-state-actions-gap, var(--space-2));
|
|
|
margin-block-start: var(--space-1);
|
|
|
}
|
