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.
171 lines
6.0 KiB
171 lines
6.0 KiB
/*
|
|
* Banner recipe — full-bleed announcement strip. Reads `data-intent`
|
|
* (the standard UIX color-role channel) and `data-variant` (soft / solid
|
|
* / outline / ghost) to pick the right palette mix from the recipe
|
|
* `--banner-{intent}-*` palette forwarders (overridable via
|
|
* `recipes.banner.{intent}-{slot}`). `data-size` controls vertical density.
|
|
*
|
|
* Variant cascade:
|
|
* soft — `--color-{intent}-track` bg + `--color-{intent}-text` fg
|
|
* solid — `--color-{intent}-solid` bg + `--color-{intent}-contrast` fg
|
|
* outline — transparent bg, `--color-{intent}-border` ring + text
|
|
* ghost — transparent surface — text only
|
|
*
|
|
* `--banner-*` tokens are public overrides; `--_banner-*` are internal
|
|
* recipe-local resolutions.
|
|
*/
|
|
|
|
[data-banner] {
|
|
/* Shared structural surface. */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--banner-gap, var(--space-3));
|
|
padding-block: var(--_banner-padding-block);
|
|
padding-inline: var(--_banner-padding-inline);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
box-sizing: border-box;
|
|
font-size: var(--_banner-font-size);
|
|
line-height: var(--font-line-height-sm, 1.4);
|
|
background: var(--_banner-bg, transparent);
|
|
color: var(--_banner-fg, inherit);
|
|
border: var(--_banner-border-width, 0) solid var(--_banner-border-color, transparent);
|
|
border-radius: var(--banner-radius, 0);
|
|
}
|
|
|
|
/* ── Size ──────────────────────────────────────────────────────────── */
|
|
|
|
[data-banner][data-size='sm'] {
|
|
--_banner-padding-block: var(--space-2);
|
|
--_banner-padding-inline: var(--space-3);
|
|
--_banner-font-size: var(--font-size-sm);
|
|
}
|
|
|
|
[data-banner][data-size='md'] {
|
|
--_banner-padding-block: var(--space-3);
|
|
--_banner-padding-inline: var(--space-4);
|
|
--_banner-font-size: var(--font-size-md);
|
|
}
|
|
|
|
[data-banner][data-size='lg'] {
|
|
--_banner-padding-block: var(--space-4);
|
|
--_banner-padding-inline: var(--space-5);
|
|
--_banner-font-size: var(--font-size-lg);
|
|
}
|
|
|
|
/* ── Intent palette resolution ─────────────────────────────────────── */
|
|
|
|
[data-banner][data-intent='primary'] {
|
|
--_banner-solid: var(--banner-primary-solid);
|
|
--_banner-solid-contrast: var(--banner-primary-contrast);
|
|
--_banner-track: var(--banner-primary-track);
|
|
--_banner-border: var(--banner-primary-border);
|
|
--_banner-text: var(--banner-primary-text);
|
|
}
|
|
[data-banner][data-intent='secondary'] {
|
|
--_banner-solid: var(--banner-secondary-solid);
|
|
--_banner-solid-contrast: var(--banner-secondary-contrast);
|
|
--_banner-track: var(--banner-secondary-track);
|
|
--_banner-border: var(--banner-secondary-border);
|
|
--_banner-text: var(--banner-secondary-text);
|
|
}
|
|
[data-banner][data-intent='neutral'] {
|
|
--_banner-solid: var(--banner-neutral-solid);
|
|
--_banner-solid-contrast: var(--banner-neutral-contrast);
|
|
--_banner-track: var(--banner-neutral-track);
|
|
--_banner-border: var(--banner-neutral-border);
|
|
--_banner-text: var(--banner-neutral-text);
|
|
}
|
|
[data-banner][data-intent='affirm'] {
|
|
--_banner-solid: var(--banner-affirm-solid);
|
|
--_banner-solid-contrast: var(--banner-affirm-contrast);
|
|
--_banner-track: var(--banner-affirm-track);
|
|
--_banner-border: var(--banner-affirm-border);
|
|
--_banner-text: var(--banner-affirm-text);
|
|
}
|
|
[data-banner][data-intent='fulfill'] {
|
|
--_banner-solid: var(--banner-fulfill-solid);
|
|
--_banner-solid-contrast: var(--banner-fulfill-contrast);
|
|
--_banner-track: var(--banner-fulfill-track);
|
|
--_banner-border: var(--banner-fulfill-border);
|
|
--_banner-text: var(--banner-fulfill-text);
|
|
}
|
|
[data-banner][data-intent='risk'] {
|
|
--_banner-solid: var(--banner-risk-solid);
|
|
--_banner-solid-contrast: var(--banner-risk-contrast);
|
|
--_banner-track: var(--banner-risk-track);
|
|
--_banner-border: var(--banner-risk-border);
|
|
--_banner-text: var(--banner-risk-text);
|
|
}
|
|
[data-banner][data-intent='threat'] {
|
|
--_banner-solid: var(--banner-threat-solid);
|
|
--_banner-solid-contrast: var(--banner-threat-contrast);
|
|
--_banner-track: var(--banner-threat-track);
|
|
--_banner-border: var(--banner-threat-border);
|
|
--_banner-text: var(--banner-threat-text);
|
|
}
|
|
[data-banner][data-intent='loss'] {
|
|
--_banner-solid: var(--banner-loss-solid);
|
|
--_banner-solid-contrast: var(--banner-loss-contrast);
|
|
--_banner-track: var(--banner-loss-track);
|
|
--_banner-border: var(--banner-loss-border);
|
|
--_banner-text: var(--banner-loss-text);
|
|
}
|
|
|
|
/* ── Variant treatment ─────────────────────────────────────────────── */
|
|
|
|
[data-banner][data-variant='soft'] {
|
|
--_banner-bg: var(--_banner-track);
|
|
--_banner-fg: var(--_banner-text);
|
|
--_banner-border-width: 0;
|
|
}
|
|
|
|
[data-banner][data-variant='solid'] {
|
|
--_banner-bg: var(--_banner-solid);
|
|
--_banner-fg: var(--_banner-solid-contrast);
|
|
--_banner-border-width: 0;
|
|
}
|
|
|
|
[data-banner][data-variant='outline'] {
|
|
--_banner-bg: transparent;
|
|
--_banner-fg: var(--_banner-text);
|
|
--_banner-border-width: var(--border-width);
|
|
--_banner-border-color: var(--_banner-border);
|
|
}
|
|
|
|
[data-banner][data-variant='ghost'] {
|
|
--_banner-bg: transparent;
|
|
--_banner-fg: var(--_banner-text);
|
|
--_banner-border-width: 0;
|
|
}
|
|
|
|
/* ── Close button (eidos-only part) ────────────────────────────────── */
|
|
|
|
[data-banner-close] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-inline-start: auto;
|
|
inline-size: var(--space-6);
|
|
block-size: var(--space-6);
|
|
padding: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
border: 0;
|
|
border-radius: var(--radius-sm, var(--space-1));
|
|
cursor: pointer;
|
|
opacity: var(--opacity-subtle);
|
|
transition: opacity var(--duration-fast) ease, background-color var(--duration-fast) ease;
|
|
}
|
|
|
|
[data-banner-close]:hover {
|
|
opacity: 1;
|
|
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
}
|
|
|
|
[data-banner-close]:focus-visible {
|
|
outline: var(--border-width-medium) solid currentColor;
|
|
outline-offset: 1px;
|
|
opacity: 1;
|
|
}
|