|
|
|
|
/*
|
|
|
|
|
* ContextMenu recipe.
|
|
|
|
|
*
|
|
|
|
|
* Functionally identical to DropdownMenu — same panel chrome, same
|
|
|
|
|
* item row treatment. Only differences:
|
|
|
|
|
*
|
|
|
|
|
* - Trigger is a `<span>` wrapper (NOT a button) that intercepts
|
|
|
|
|
* `contextmenu`. The recipe gives it no chrome by default; the
|
|
|
|
|
* wrapper is meant to feel inert until invoked.
|
|
|
|
|
* - Anchoring is to the cursor position rather than the trigger's
|
|
|
|
|
* bounding box — soma's floating layer handles this. The visual
|
|
|
|
|
* panel reads identical to DropdownMenu's.
|
|
|
|
|
*
|
|
|
|
|
* To avoid recipe duplication we lean on attribute selectors that
|
|
|
|
|
* cover both `data-dropdown-menu-*` and `data-context-menu-*` for the
|
|
|
|
|
* shared parts (Content, Item, Group, Separator, etc.). The Trigger
|
|
|
|
|
* gets its own rule since its semantics differ.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* ── Panel (Content / SubContent) ──────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-content],
|
|
|
|
|
[data-context-menu-sub-content] {
|
|
|
|
|
min-inline-size: var(--context-menu-content-min-width, 12rem);
|
|
|
|
|
max-block-size: var(--context-menu-content-max-height, min(60vh, 22rem));
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: var(--context-menu-content-padding, var(--space-1));
|
|
|
|
|
/* Elevation — surface · border · shadow — from the `overlay` plane via
|
|
|
|
|
`data-depth` (A1, Decisión 8). Radius / font / color stay the panel's own. */
|
|
|
|
|
border-radius: var(--context-menu-content-radius, var(--radius-md));
|
|
|
|
|
font-family: var(--style-label-font-family, var(--font-ui));
|
|
|
|
|
font-size: var(--context-menu-content-font-size, var(--font-size-sm));
|
|
|
|
|
color: var(--color-content-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-content]:focus-visible,
|
|
|
|
|
[data-context-menu-sub-content]:focus-visible {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Size scale → shared list-surface ───────────────────────────────────
|
|
|
|
|
*
|
|
|
|
|
* The size rhythm (font / item-height / padding / gap / content-padding /
|
|
|
|
|
* radius, 1:1 with the control sizes) lives in `lib/list-surface.css` — the
|
|
|
|
|
* ONE source shared by every menu + selection popup. The panel carries
|
|
|
|
|
* `data-list-surface` + `data-size` (stamped by the eidos Content/SubContent),
|
|
|
|
|
* so that block sets `--list-*`; here we just BRIDGE the panel's own public
|
|
|
|
|
* tokens to it, keeping them as the per-component override knobs. Mirrors the
|
|
|
|
|
* DropdownMenu bridge — both menus read identically.
|
|
|
|
|
*/
|
|
|
|
|
[data-context-menu-content],
|
|
|
|
|
[data-context-menu-sub-content] {
|
|
|
|
|
--context-menu-content-font-size: var(--list-font-size);
|
|
|
|
|
--context-menu-item-height: var(--list-item-height);
|
|
|
|
|
--context-menu-item-py: var(--list-item-py);
|
|
|
|
|
--context-menu-item-px: var(--list-item-px);
|
|
|
|
|
--context-menu-item-gap: var(--list-item-gap);
|
|
|
|
|
--context-menu-content-padding: var(--list-content-padding);
|
|
|
|
|
--context-menu-content-radius: var(--list-content-radius);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Event-driven item cascade rhythm — the Content wrapper marks itself
|
|
|
|
|
`[data-stagger]`; each direct-child item carries `data-animation-style` and
|
|
|
|
|
gets its structural index from `:nth-child`. `var(--motion-stagger)` is the
|
|
|
|
|
canonical 20ms (0 = parallel). Same mechanism as DropdownMenu; the appearance
|
|
|
|
|
flows from the `open` (emerge) event — no JS writes the index. Applies to the
|
|
|
|
|
root panel AND fly-out SubContent (both mark themselves `[data-stagger]`). */
|
|
|
|
|
[data-context-menu-content],
|
|
|
|
|
[data-context-menu-sub-content] {
|
|
|
|
|
--motion-stagger-each: var(--motion-stagger);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Item rows ─────────────────────────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-item],
|
|
|
|
|
[data-context-menu-checkbox-item],
|
|
|
|
|
[data-context-menu-radio-item],
|
|
|
|
|
[data-context-menu-sub-trigger] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--context-menu-item-gap, var(--space-2));
|
|
|
|
|
min-block-size: var(--context-menu-item-height, 2rem);
|
|
|
|
|
padding-block: var(--context-menu-item-py, var(--space-1));
|
|
|
|
|
padding-inline: var(--context-menu-item-px, var(--space-2));
|
|
|
|
|
border-radius: var(--context-menu-item-radius, var(--radius-sm));
|
|
|
|
|
color: var(--color-content-primary);
|
|
|
|
|
line-height: var(--leading-ui);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--duration-fast) var(--ease-default),
|
|
|
|
|
color var(--duration-fast) var(--ease-default);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-item]:hover:not([data-disabled]),
|
|
|
|
|
[data-context-menu-checkbox-item]:hover:not([data-disabled]),
|
|
|
|
|
[data-context-menu-radio-item]:hover:not([data-disabled]),
|
|
|
|
|
[data-context-menu-sub-trigger]:hover:not([data-disabled]),
|
|
|
|
|
[data-context-menu-item]:focus-visible,
|
|
|
|
|
[data-context-menu-checkbox-item]:focus-visible,
|
|
|
|
|
[data-context-menu-radio-item]:focus-visible,
|
|
|
|
|
[data-context-menu-sub-trigger]:focus-visible,
|
|
|
|
|
[data-context-menu-sub-trigger][data-state='open'] {
|
|
|
|
|
outline: none;
|
|
|
|
|
background: var(--context-menu-item-bg-hover, var(--color-primary-element));
|
|
|
|
|
color: var(--context-menu-item-fg-hover, var(--color-content-primary));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-item][data-disabled],
|
|
|
|
|
[data-context-menu-checkbox-item][data-disabled],
|
|
|
|
|
[data-context-menu-radio-item][data-disabled],
|
|
|
|
|
[data-context-menu-sub-trigger][data-disabled] {
|
|
|
|
|
cursor: default;
|
|
|
|
|
opacity: var(--context-menu-item-disabled-opacity, 0.55);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Indicator slot + ::before painting for checkbox-item / radio-item shared
|
|
|
|
|
with dropdown-menu via `lib/menu-indicator.css` (imported by eidos
|
|
|
|
|
entrypoint before this recipe). Override the private vars below if a
|
|
|
|
|
per-component tweak is needed. */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-sub-trigger]::after {
|
|
|
|
|
content: '';
|
|
|
|
|
margin-inline-start: auto;
|
|
|
|
|
inline-size: 0.625rem;
|
|
|
|
|
block-size: 0.625rem;
|
feat(eidos): canonize theming scales + tokenize magic numbers
Audit-driven canonization of the eidos theming layer: a canonical scale that
components bypass with literals drifts into N variants. Every axis is now
retunable-by-theme AND consumed via token, never a bare literal.
Bloque A/B (scales): --blur-* (Tailwind-aligned, depth planes consume it);
inner-shadow --shadow-inset-* (mode-aware) for the recessed plane; gradient
angle/named tokens; --breakpoint-* sourced from ActiveDom (runtime, dev-settable)
+ container queries; opacity dual numeric+semantic scale; border-width
none/thin/medium/thick/heavy (adds real 3px); tracking caps/widest. Fase 7:
3 size archetypes documented + coherence guard (no px/rem in recipe
font-size/icon-size).
Bloque C (magic numbers): z-index 80/50/99 (combobox/nav-menu/drag-drop) ->
recipe content-z/preview-z tokens (overlay micro-band soma mirrors); on-scale
durations -> var(--duration-*) (dialog fast/slow, card slow); 12 single
border/ring widths -> var(--border-width-*), value-preserving. Off-scale kept
only as justified recipe tokens (continuous spinner/loading periods, sub-fast
press). Self-contained dimensional scales (avatar ring, ring-thickness) left whole.
Docs: THEMING.md SS35 + SS6 + SS29, THEMING_NOTES, README, TSC. Excludes
words/palabras/chronos (active dev tracks).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
border-inline-end: var(--border-width-medium) solid currentColor;
|
|
|
|
|
border-block-start: var(--border-width-medium) solid currentColor;
|
|
|
|
|
transform: rotate(45deg);
|
feat(eidos): canonize theming scales + tokenize magic numbers
Audit-driven canonization of the eidos theming layer: a canonical scale that
components bypass with literals drifts into N variants. Every axis is now
retunable-by-theme AND consumed via token, never a bare literal.
Bloque A/B (scales): --blur-* (Tailwind-aligned, depth planes consume it);
inner-shadow --shadow-inset-* (mode-aware) for the recessed plane; gradient
angle/named tokens; --breakpoint-* sourced from ActiveDom (runtime, dev-settable)
+ container queries; opacity dual numeric+semantic scale; border-width
none/thin/medium/thick/heavy (adds real 3px); tracking caps/widest. Fase 7:
3 size archetypes documented + coherence guard (no px/rem in recipe
font-size/icon-size).
Bloque C (magic numbers): z-index 80/50/99 (combobox/nav-menu/drag-drop) ->
recipe content-z/preview-z tokens (overlay micro-band soma mirrors); on-scale
durations -> var(--duration-*) (dialog fast/slow, card slow); 12 single
border/ring widths -> var(--border-width-*), value-preserving. Off-scale kept
only as justified recipe tokens (continuous spinner/loading periods, sub-fast
press). Self-contained dimensional scales (avatar ring, ring-thickness) left whole.
Docs: THEMING.md SS35 + SS6 + SS29, THEMING_NOTES, README, TSC. Excludes
words/palabras/chronos (active dev tracks).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
opacity: var(--opacity-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Group / GroupHeading / Separator ─────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-group] {
|
|
|
|
|
display: contents;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-group-heading] {
|
|
|
|
|
padding-block: var(--context-menu-heading-py, var(--space-1));
|
|
|
|
|
padding-inline: var(--context-menu-heading-px, var(--space-2));
|
|
|
|
|
color: var(--color-content-muted);
|
|
|
|
|
font-size: var(--context-menu-heading-font-size, var(--font-size-xs));
|
|
|
|
|
font-weight: var(--style-label-font-weight, 500);
|
|
|
|
|
text-transform: uppercase;
|
feat(eidos): canonize theming scales + tokenize magic numbers
Audit-driven canonization of the eidos theming layer: a canonical scale that
components bypass with literals drifts into N variants. Every axis is now
retunable-by-theme AND consumed via token, never a bare literal.
Bloque A/B (scales): --blur-* (Tailwind-aligned, depth planes consume it);
inner-shadow --shadow-inset-* (mode-aware) for the recessed plane; gradient
angle/named tokens; --breakpoint-* sourced from ActiveDom (runtime, dev-settable)
+ container queries; opacity dual numeric+semantic scale; border-width
none/thin/medium/thick/heavy (adds real 3px); tracking caps/widest. Fase 7:
3 size archetypes documented + coherence guard (no px/rem in recipe
font-size/icon-size).
Bloque C (magic numbers): z-index 80/50/99 (combobox/nav-menu/drag-drop) ->
recipe content-z/preview-z tokens (overlay micro-band soma mirrors); on-scale
durations -> var(--duration-*) (dialog fast/slow, card slow); 12 single
border/ring widths -> var(--border-width-*), value-preserving. Off-scale kept
only as justified recipe tokens (continuous spinner/loading periods, sub-fast
press). Self-contained dimensional scales (avatar ring, ring-thickness) left whole.
Docs: THEMING.md SS35 + SS6 + SS29, THEMING_NOTES, README, TSC. Excludes
words/palabras/chronos (active dev tracks).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
letter-spacing: var(--tracking-caps);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-separator] {
|
|
|
|
|
margin-block: var(--context-menu-separator-my, var(--space-1));
|
|
|
|
|
block-size: 1px;
|
|
|
|
|
background: var(--context-menu-separator-bg, var(--color-border-subtle));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Trigger ──────────────────────────────────────────────────────── */
|
|
|
|
|
/*
|
|
|
|
|
* Default: no visual treatment. The Trigger is meant to feel inert
|
|
|
|
|
* until invoked. Consumers wrap whatever content they want
|
|
|
|
|
* right-clickable; the recipe stays out of the way.
|
|
|
|
|
*
|
|
|
|
|
* `data-state='open'` (set by soma when the menu is open) gets a
|
|
|
|
|
* subtle outline as a courtesy affordance — the user often forgets
|
|
|
|
|
* which area summoned the menu.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
[data-context-menu-trigger] {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-trigger][data-state='open'] {
|
|
|
|
|
outline: 1px dashed var(--color-border-default);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
border-radius: var(--radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── Arrow ────────────────────────────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-arrow] {
|
|
|
|
|
/* The arrow is part of the elevation surface — consume the `overlay` plane so
|
|
|
|
|
it always matches the panel (A1, like popover), not a parallel token. */
|
|
|
|
|
fill: var(--depth-overlay-surface);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ── State transitions ────────────────────────────────────────────── */
|
|
|
|
|
|
|
|
|
|
[data-context-menu-content][data-state='closed'],
|
|
|
|
|
[data-context-menu-sub-content][data-state='closed'] {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-context-menu-content][data-state='open'],
|
|
|
|
|
[data-context-menu-sub-content][data-state='open'] {
|
|
|
|
|
animation: context-menu-enter var(--duration-fast) var(--ease-out);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes context-menu-enter {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: scale(0.96);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
