|
|
/**
|
|
|
* Eidos — Dialog component recipe.
|
|
|
*
|
|
|
* Eidos applies universally to the data-attrs the dialog morfo emits. Tokens
|
|
|
* follow the bare-prefixed convention (`--dialog-*` public, `--_dialog-*`
|
|
|
* internal — see `eidos/components/README.md`). No `air-` / `eidos-`
|
|
|
* keyframe prefixes either.
|
|
|
*
|
|
|
* The morfo declares `data-last-action` as a prewrite on every close-* event,
|
|
|
* written BEFORE the `data-state` flips to 'closed'. The exit border-top is
|
|
|
* tinted by causa during the closing animation. See the data-last-action
|
|
|
* block at the bottom of this file.
|
|
|
*/
|
|
|
|
|
|
/* ── Trigger ───────────────────────────────────────────────────────────────
|
|
|
* The trigger composes the framework `<Button>` (eidos `dialog-trigger.svelte`
|
|
|
* renders `<Button {...props}>` via soma's `child`), so ALL its chrome —
|
|
|
* layout, bg, hover, focus-ring, disabled — comes from the Button recipe. No
|
|
|
* bespoke `[data-dialog-trigger]` envelope here: it would paint the SAME
|
|
|
* element as `[data-button]` and fight it (the Close recipe is the model).
|
|
|
*/
|
|
|
|
|
|
/* ── Overlay ───────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-dialog-overlay] {
|
|
|
position: fixed;
|
|
|
inset: 0;
|
|
|
background: color-mix(
|
|
|
in srgb,
|
|
|
var(--dialog-overlay-bg) var(--dialog-overlay-opacity),
|
|
|
transparent
|
|
|
);
|
|
|
backdrop-filter: blur(var(--dialog-overlay-blur));
|
|
|
z-index: var(--dialog-overlay-z);
|
|
|
}
|
|
|
|
|
|
/* Overlay + content enter/exit motion comes from the motion system (presets
|
|
|
* `fade` / `scale-fade` via `data-animation-style`). `data-state` here is only
|
|
|
* steady styling. Asymmetric timing — `fast` in / `slow` out — drawn from the
|
|
|
* canonical duration scale. See `eidos-motion.md`. */
|
|
|
[data-dialog-overlay],
|
|
|
[data-dialog-content] {
|
|
|
--motion-duration-enter: var(--duration-fast);
|
|
|
--motion-duration-exit: var(--duration-slow);
|
|
|
}
|
|
|
|
|
|
/* ── Content ───────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-dialog-content] {
|
|
|
--_dialog-size-width: var(--dialog-content-width-md);
|
|
|
--_dialog-padding: var(--dialog-content-padding-md);
|
|
|
--_dialog-width: var(--_dialog-content-width-override, var(--_dialog-size-width));
|
|
|
|
|
|
position: fixed;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
translate: -50% -50%;
|
|
|
z-index: calc(var(--dialog-overlay-z) + 1);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--dialog-stack-gap);
|
|
|
width: min(calc(100vw - var(--dialog-content-width-inset)), var(--_dialog-width));
|
|
|
min-width: var(--_dialog-content-min-width-override, auto);
|
|
|
max-width: var(--_dialog-content-max-width-override, none);
|
|
|
height: var(--_dialog-content-height-override, auto);
|
|
|
min-height: var(--_dialog-content-min-height-override, auto);
|
|
|
max-height: var(--_dialog-content-max-height-override, var(--dialog-content-max-height));
|
|
|
padding: var(--_dialog-padding);
|
|
|
overflow: auto;
|
|
|
/* Elevation bundle (surface · border · shadow) comes from the `modal` plane
|
|
|
via `data-depth` (A1, Decisión 8). The panel keeps only its own radius /
|
|
|
color — radius is a separate axis (Radix factor, A2). The intent variants
|
|
|
below override `border-color` on top of the plane's border. */
|
|
|
border-radius: var(--dialog-content-radius);
|
|
|
color: var(--dialog-content-color);
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
/* Content enter/exit motion comes from the motion system (preset `scale-fade`
|
|
|
* via `data-animation-style`). Soma's Presence waits for `getAnimations()`
|
|
|
* before unmounting, so the preset animation gates the cycle. `data-state` is
|
|
|
* steady styling only. */
|
|
|
|
|
|
/* ── Position (3×3 grid) ────────────────────────────────────────────────
|
|
|
* The default `[data-dialog-content]` rule above already centers the panel
|
|
|
* (`left/top: 50%; translate: -50% -50%;`) — that is the implicit
|
|
|
* `middle-center` form. The selectors below override the anchoring axes
|
|
|
* for the other 8 cells. `data-size='full'` and `data-sheet` come AFTER
|
|
|
* these in the cascade and win when applicable. */
|
|
|
|
|
|
[data-dialog-content][data-position='top-left'] {
|
|
|
top: var(--dialog-content-position-inset);
|
|
|
left: var(--dialog-content-position-inset);
|
|
|
right: auto;
|
|
|
bottom: auto;
|
|
|
translate: none;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='top-center'] {
|
|
|
top: var(--dialog-content-position-inset);
|
|
|
left: 50%;
|
|
|
right: auto;
|
|
|
bottom: auto;
|
|
|
translate: -50% 0;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='top-right'] {
|
|
|
top: var(--dialog-content-position-inset);
|
|
|
right: var(--dialog-content-position-inset);
|
|
|
left: auto;
|
|
|
bottom: auto;
|
|
|
translate: none;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='middle-left'] {
|
|
|
top: 50%;
|
|
|
left: var(--dialog-content-position-inset);
|
|
|
right: auto;
|
|
|
bottom: auto;
|
|
|
translate: 0 -50%;
|
|
|
}
|
|
|
|
|
|
/* `middle-center` is the default — no override needed. */
|
|
|
|
|
|
[data-dialog-content][data-position='middle-right'] {
|
|
|
top: 50%;
|
|
|
right: var(--dialog-content-position-inset);
|
|
|
left: auto;
|
|
|
bottom: auto;
|
|
|
translate: 0 -50%;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='bottom-left'] {
|
|
|
bottom: var(--dialog-content-position-inset);
|
|
|
left: var(--dialog-content-position-inset);
|
|
|
top: auto;
|
|
|
right: auto;
|
|
|
translate: none;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='bottom-center'] {
|
|
|
bottom: var(--dialog-content-position-inset);
|
|
|
left: 50%;
|
|
|
top: auto;
|
|
|
right: auto;
|
|
|
translate: -50% 0;
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-position='bottom-right'] {
|
|
|
bottom: var(--dialog-content-position-inset);
|
|
|
right: var(--dialog-content-position-inset);
|
|
|
top: auto;
|
|
|
left: auto;
|
|
|
translate: none;
|
|
|
}
|
|
|
|
|
|
/* ── Sizing ────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-dialog-content][data-size='sm'] {
|
|
|
--_dialog-size-width: var(--dialog-content-width-sm);
|
|
|
--_dialog-padding: var(--dialog-content-padding-sm);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-size='md'] {
|
|
|
--_dialog-size-width: var(--dialog-content-width-md);
|
|
|
--_dialog-padding: var(--dialog-content-padding-md);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-size='lg'] {
|
|
|
--_dialog-size-width: var(--dialog-content-width-lg);
|
|
|
--_dialog-padding: var(--dialog-content-padding-lg);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-size='xl'] {
|
|
|
--_dialog-size-width: var(--dialog-content-width-xl);
|
|
|
--_dialog-padding: var(--dialog-content-padding-full);
|
|
|
border-radius: var(--dialog-content-full-radius);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-size='full'] {
|
|
|
inset: var(--dialog-content-full-inset);
|
|
|
translate: none;
|
|
|
width: var(--_dialog-content-width-override, auto);
|
|
|
border-radius: var(--dialog-content-full-radius);
|
|
|
--_dialog-padding: var(--dialog-content-padding-full);
|
|
|
}
|
|
|
|
|
|
/* Auto-sheet: the eidos wrapper sets `data-sheet=""` on Content when the
|
|
|
* viewport is narrower than the `sm` breakpoint AND the requested size is
|
|
|
* not `full`. Bottom-anchored, full-width, top-rounded. */
|
|
|
[data-dialog-content][data-sheet] {
|
|
|
left: 0;
|
|
|
top: auto;
|
|
|
bottom: 0;
|
|
|
translate: none;
|
|
|
width: 100%;
|
|
|
max-height: var(--dialog-content-max-height-sheet);
|
|
|
border-radius: var(--dialog-content-radius) var(--dialog-content-radius) 0 0;
|
|
|
--_dialog-padding: var(--dialog-content-padding-sm);
|
|
|
}
|
|
|
|
|
|
/* ── Color (intent → palette) ──────────────────────────────────────────────
|
|
|
* Modal subset of the 8 system tokens (canon §3.1). Soma resolves the
|
|
|
* consumer's `intent` prop to `data-color`. The subset is intentionally
|
|
|
* tight: a dialog is not a hierarchy and irreversible loss should not be
|
|
|
* a dialog at all. Each intent tints the panel border and (for evaluative
|
|
|
* intents) the title color. The body background stays neutral so long-form
|
|
|
* content doesn't compete with the intent signal. */
|
|
|
/* neutral = the plane's own border (`--depth-modal-border`); no override needed. */
|
|
|
|
|
|
[data-dialog-content][data-color='risk'] {
|
|
|
border-color: var(--color-risk-border);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-color='risk'] [data-dialog-title] {
|
|
|
color: var(--color-risk-text);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-color='threat'] {
|
|
|
border-color: var(--color-threat-border);
|
|
|
}
|
|
|
|
|
|
[data-dialog-content][data-color='threat'] [data-dialog-title] {
|
|
|
color: var(--color-threat-text);
|
|
|
}
|
|
|
|
|
|
/* ── Layout shells (eidos-only, no morfo backing) ──────────────────────── */
|
|
|
|
|
|
[data-dialog-header] {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: start;
|
|
|
gap: var(--dialog-header-gap);
|
|
|
/* Reserve space on the trailing edge so a top-right close doesn't
|
|
|
* collide with title text. The padding flips when a close is anchored
|
|
|
* top-left via the rules below. */
|
|
|
padding-inline-end: calc(var(--dialog-close-size) + var(--space-2));
|
|
|
}
|
|
|
|
|
|
[data-dialog-content]:has([data-dialog-close][data-position^='top-left']) [data-dialog-header] {
|
|
|
padding-inline-end: 0;
|
|
|
padding-inline-start: calc(var(--dialog-close-size) + var(--space-2));
|
|
|
}
|
|
|
|
|
|
[data-dialog-content]:has([data-dialog-close][data-position^='bottom-']) [data-dialog-header],
|
|
|
[data-dialog-content]:has([data-dialog-close][data-position='top-center']) [data-dialog-header] {
|
|
|
padding-inline: 0;
|
|
|
}
|
|
|
|
|
|
[data-dialog-footer] {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: end;
|
|
|
gap: var(--dialog-footer-gap);
|
|
|
margin-top: var(--dialog-footer-margin-top);
|
|
|
}
|
|
|
|
|
|
/* ── Title / Description ───────────────────────────────────────────────── */
|
|
|
|
|
|
[data-dialog-title] {
|
|
|
margin: 0;
|
|
|
/* Typography role (Arq. 5 / THEMING §3): the title reads its own
|
|
|
`--dialog-title-*` knobs, which the recipe defaults to the canonical `h3`
|
|
|
heading role (primary/sans · lg · semibold). The role gives coherence by
|
|
|
default; the `--dialog-title-*` tokens stay the override surface — a theme,
|
|
|
the recipe config, or one `<Dialog.Content style>` can restyle dialog titles
|
|
|
WITHOUT retuning every `h3`. The intent tints below still override color. */
|
|
|
font-family: var(--dialog-title-font-family);
|
|
|
font-size: var(--dialog-title-font-size);
|
|
|
font-weight: var(--dialog-title-font-weight);
|
|
|
line-height: var(--dialog-title-line-height);
|
|
|
letter-spacing: var(--dialog-title-letter-spacing);
|
|
|
color: var(--dialog-title-color);
|
|
|
text-wrap: balance;
|
|
|
}
|
|
|
|
|
|
[data-dialog-description] {
|
|
|
margin: 0;
|
|
|
font-family: var(--dialog-description-font-family);
|
|
|
font-size: var(--dialog-description-font-size);
|
|
|
line-height: var(--dialog-description-line-height);
|
|
|
color: var(--dialog-description-color);
|
|
|
}
|
|
|
|
|
|
/* ── Close ─────────────────────────────────────────────────────────────────
|
|
|
* The close composes the canonical `<Button>` / `<IconButton>` (eidos
|
|
|
* `dialog-close.svelte`), so its chrome — layout, bg, hover, focus-ring,
|
|
|
* disabled, icon-only sizing — comes from the Button recipe. This recipe owns
|
|
|
* ONLY the dialog-specific concern: floating the close over Content when the
|
|
|
* consumer assigns `data-position`. Without `data-position` the button flows
|
|
|
* inline (e.g. a <Dialog.Close> in a Footer). */
|
|
|
[data-dialog-close][data-position] {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
/* ── Close position (subset of canonical Position — corners + top/bottom centers) ── */
|
|
|
/* Default: top-right (matches the eidos wrapper's `closePosition` default). */
|
|
|
[data-dialog-close][data-position='top-right'] {
|
|
|
top: var(--dialog-close-inset);
|
|
|
right: var(--dialog-close-inset);
|
|
|
}
|
|
|
[data-dialog-close][data-position='top-left'] {
|
|
|
top: var(--dialog-close-inset);
|
|
|
left: var(--dialog-close-inset);
|
|
|
}
|
|
|
[data-dialog-close][data-position='top-center'] {
|
|
|
top: var(--dialog-close-inset);
|
|
|
left: 50%;
|
|
|
translate: -50% 0;
|
|
|
}
|
|
|
[data-dialog-close][data-position='bottom-right'] {
|
|
|
bottom: var(--dialog-close-inset);
|
|
|
right: var(--dialog-close-inset);
|
|
|
}
|
|
|
[data-dialog-close][data-position='bottom-left'] {
|
|
|
bottom: var(--dialog-close-inset);
|
|
|
left: var(--dialog-close-inset);
|
|
|
}
|
|
|
[data-dialog-close][data-position='bottom-center'] {
|
|
|
bottom: var(--dialog-close-inset);
|
|
|
left: 50%;
|
|
|
translate: -50% 0;
|
|
|
}
|
|
|
|
|
|
/* ── data-last-action exit tinting ─────────────────────────────────────────
|
|
|
* The dialog morfo declares `prewrite` on every close-* event that writes
|
|
|
* `data-last-action` before `data-state` flips to 'closed'. Both attrs
|
|
|
* coexist during the exit animation; CSS tints the border-top by causa.
|
|
|
*/
|
|
|
[data-dialog-content][data-state='closed'][data-last-action='saved'] {
|
|
|
border-top-color: var(--color-fulfill-element);
|
|
|
}
|
|
|
[data-dialog-content][data-state='closed'][data-last-action='failed'] {
|
|
|
border-top-color: var(--color-threat-element);
|
|
|
}
|
|
|
[data-dialog-content][data-state='closed'][data-last-action='cancelled'],
|
|
|
[data-dialog-content][data-state='closed'][data-last-action='dismissed'],
|
|
|
[data-dialog-content][data-state='closed'][data-last-action='dismissed-outside'] {
|
|
|
border-top-color: var(--color-neutral-element);
|
|
|
}
|
