You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
8.4 KiB
209 lines
8.4 KiB
/*
|
|
* Badge — small inline label / status pill.
|
|
*
|
|
* Four-axis variant cube:
|
|
* - data-variant: soft | solid | outline | ghost
|
|
* - data-color: primary | secondary | neutral | affirm | fulfill | risk | threat | loss
|
|
* - data-size: xs | sm | md | lg
|
|
* - data-rounded: sm | md | lg | full
|
|
*
|
|
* Internal slots (rendered conditionally by the Svelte file):
|
|
* - [data-badge-dot] — small coloured circle before the label
|
|
* - [data-badge-icon] — leading icon snippet
|
|
* - [data-badge-label] — wrapper around the children text
|
|
* - [data-badge-remove] — trailing X button
|
|
*
|
|
* Tokens cascade through `--_badge-*` private vars set per
|
|
* data-variant + data-color so the rules below stay flat. The recipe
|
|
* surface (`--badge-*`) feeds the canonical accent slots.
|
|
*/
|
|
|
|
[data-badge] {
|
|
--_badge-padding-inline: var(--badge-padding-inline-md);
|
|
--_badge-gap: var(--badge-gap-md);
|
|
--_badge-font-size: var(--badge-font-size-md);
|
|
--_badge-radius: var(--badge-radius-full);
|
|
/*
|
|
* The chip's height is a CONTROL height, not a padded line of text.
|
|
*
|
|
* It used to be `line-height + padding-block`, which made `md` mean 30px here
|
|
* and 36px everywhere a control lives — two scales sharing one set of names.
|
|
* The moment the chip composes a real control (the removable ✕ is an
|
|
* `IconButton`), that gap surfaces: measured, the same `md` badge came out 30px
|
|
* without the button and 46px with it. Sizing from the control token makes `md`
|
|
* mean one thing, and the block padding stops deciding the height — the
|
|
* inline padding still does its job, which is the chip's own business.
|
|
*/
|
|
|
|
/* Default variant = soft; overridden by data-variant below. */
|
|
/* private: CONMUTADOR by variant — `soft` / `solid` read the THM-2 palette
|
|
bridge, `outline` / `ghost` are the identity of the variant
|
|
(`transparent`). Flattening it would duplicate every rule per variant
|
|
(badge.md §5, signed: «las tres clases de F2-B en un solo componente»). */
|
|
--_badge-bg: var(--_badge-palette-track);
|
|
/* private: same CONMUTADOR — every branch is the bridge, with the named
|
|
finish's authored ink first in `solid` (badge.md §5, signed). */
|
|
--_badge-fg: var(--_badge-palette-text);
|
|
--_badge-border-color: transparent;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--_badge-gap);
|
|
min-block-size: var(--badge-min-height);
|
|
padding-inline: var(--_badge-padding-inline);
|
|
padding-block: 0;
|
|
border: var(--badge-border-width) solid var(--_badge-border-color);
|
|
border-radius: var(--_badge-radius);
|
|
background: var(--_badge-bg);
|
|
color: var(--_badge-fg);
|
|
font-family: var(--badge-font-family);
|
|
font-size: var(--_badge-font-size);
|
|
font-weight: var(--badge-font-weight);
|
|
line-height: var(--badge-line-height);
|
|
letter-spacing: var(--badge-letter-spacing);
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ── Size scale ──────────────────────────────────────────────────────── */
|
|
|
|
[data-badge][data-size='xs'] {
|
|
--_badge-padding-inline: var(--badge-padding-inline-xs);
|
|
--_badge-gap: var(--badge-gap-xs);
|
|
--_badge-font-size: var(--badge-font-size-xs);
|
|
}
|
|
|
|
[data-badge][data-size='sm'] {
|
|
--_badge-padding-inline: var(--badge-padding-inline-sm);
|
|
--_badge-gap: var(--badge-gap-sm);
|
|
--_badge-font-size: var(--badge-font-size-sm);
|
|
}
|
|
|
|
[data-badge][data-size='lg'] {
|
|
--_badge-padding-inline: var(--badge-padding-inline-lg);
|
|
--_badge-gap: var(--badge-gap-lg);
|
|
--_badge-font-size: var(--badge-font-size-lg);
|
|
}
|
|
|
|
/* ── Rounded ─────────────────────────────────────────────────────────── */
|
|
|
|
[data-badge][data-rounded='sm'] {
|
|
--_badge-radius: var(--badge-radius-sm);
|
|
}
|
|
[data-badge][data-rounded='md'] {
|
|
--_badge-radius: var(--badge-radius-md);
|
|
}
|
|
[data-badge][data-rounded='lg'] {
|
|
--_badge-radius: var(--badge-radius-lg);
|
|
}
|
|
[data-badge][data-rounded='full'] {
|
|
--_badge-radius: var(--badge-radius-full);
|
|
}
|
|
|
|
/* ── Variant slices ──────────────────────────────────────────────────── */
|
|
|
|
[data-badge][data-variant='soft'] {
|
|
--_badge-bg: var(--_badge-palette-track);
|
|
--_badge-fg: var(--_badge-palette-text);
|
|
--_badge-border-color: transparent;
|
|
}
|
|
|
|
[data-badge][data-variant='solid'] {
|
|
--_badge-bg: var(--_badge-palette-solid);
|
|
/* Optional NAMED-finish ink first (generator var, D11/D7), contrast as
|
|
fallback — deterministic, no specificity war. */
|
|
--_badge-fg: var(--_badge-finish-ink, var(--_badge-palette-contrast));
|
|
--_badge-border-color: transparent;
|
|
}
|
|
|
|
/* Gradient finish (acabado) — the `gradient` prop stamps [data-gradient]; the
|
|
generator derives --_badge-fill-finish from THIS instance's palette slots
|
|
(deep end falls back to `solid`: badges have no hover swap), scaled by the
|
|
theme dial (--gradient-finish-lift). Solid-fill treatment only. */
|
|
[data-badge][data-gradient][data-variant='solid'] {
|
|
/* private: the GENERATOR's gradient-finish ramp — `renderRecipeGradientFinish`
|
|
derives `--_badge-fill-finish` from this instance's palette slots, scaled by
|
|
the theme dial `--gradient-finish-lift`. A theme reaches it through the
|
|
palette and through that dial, never by naming it (gradient-as-color axis,
|
|
CLOSED; badge.md §5, signed). */
|
|
background-image: var(--_badge-fill-finish);
|
|
}
|
|
|
|
[data-badge][data-variant='outline'] {
|
|
--_badge-bg: transparent;
|
|
--_badge-fg: var(--_badge-palette-text);
|
|
--_badge-border-color: var(--_badge-palette-border);
|
|
}
|
|
|
|
[data-badge][data-variant='ghost'] {
|
|
--_badge-bg: transparent;
|
|
--_badge-fg: var(--_badge-palette-text);
|
|
--_badge-border-color: transparent;
|
|
}
|
|
|
|
/* ── Dot slot ────────────────────────────────────────────────────────── */
|
|
/*
|
|
* Status dot — small filled circle rendered before the label. Always
|
|
* uses the solid palette step so it reads even when the variant is
|
|
* soft / outline / ghost (where the bg would otherwise drown it).
|
|
*/
|
|
[data-badge-dot] {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--badge-dot-size);
|
|
block-size: var(--badge-dot-size);
|
|
border-radius: var(--badge-dot-radius);
|
|
background: var(--_badge-palette-solid);
|
|
}
|
|
|
|
[data-badge][data-variant='solid'] [data-badge-dot] {
|
|
/* On a solid background, switch the dot to the contrast tone so it
|
|
* still pops against the filled chip. */
|
|
background: var(--_badge-palette-contrast);
|
|
}
|
|
|
|
/* ── Icon slot ───────────────────────────────────────────────────────── */
|
|
|
|
[data-badge-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--badge-icon-size);
|
|
block-size: var(--badge-icon-size);
|
|
}
|
|
|
|
[data-badge-icon] :is(svg, [data-svg], [data-icon]) {
|
|
inline-size: 100%; /* literal: identity — the glyph IS its slot */
|
|
block-size: 100%; /* literal: identity — the glyph IS its slot */
|
|
}
|
|
|
|
/* ── Label ───────────────────────────────────────────────────────────── */
|
|
|
|
[data-badge-label] {
|
|
display: inline-block;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
/* ── Remove button ───────────────────────────────────────────────────── */
|
|
|
|
/*
|
|
* PLACEMENT ONLY. The affordance is a composed `IconButton`, so its size, ink,
|
|
* radius, hover, focus ring and glyph are ITS recipe's — consumed through public
|
|
* props from the Svelte file, never re-painted from here. Two recipes on one node
|
|
* both declaring size and colour at (0,1,0) is a specificity coin-flip, and the
|
|
* measurement showed the button winning: the ✕ came out at 36px inside a ~24px
|
|
* chip, in the button palette instead of the chip's ink.
|
|
*
|
|
* What stays is what the chip legitimately owns: how the piece is tucked into the
|
|
* row. The negative inline-end margin pulls it back over the chip's own padding
|
|
* so the glyph sits flush with the edge.
|
|
*/
|
|
[data-badge] [data-badge-remove] {
|
|
flex: 0 0 auto;
|
|
margin-inline-start: var(--badge-remove-margin-start);
|
|
margin-inline-end: calc(var(--badge-remove-size) * -0.25);
|
|
}
|