|
|
|
|
[data-breadcrumb] {
|
|
|
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-md);
|
|
|
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-md);
|
|
|
|
|
|
|
|
|
|
color: var(--breadcrumb-color);
|
|
|
|
|
font-family: var(--breadcrumb-font-family);
|
|
|
|
|
font-size: var(--_breadcrumb-font-size);
|
|
|
|
|
line-height: var(--breadcrumb-line-height);
|
|
|
|
|
}
|
|
|
|
|
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
[data-breadcrumb][data-size='xs'] {
|
|
|
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-xs);
|
|
|
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb][data-size='sm'] {
|
|
|
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-sm);
|
|
|
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb][data-size='lg'] {
|
|
|
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-lg);
|
|
|
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-list] {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--_breadcrumb-gap);
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-item],
|
|
|
|
|
[data-breadcrumb-separator] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-link] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
border-radius: var(--breadcrumb-link-radius);
|
|
|
|
|
color: var(--breadcrumb-link-color);
|
|
|
|
|
font-weight: var(--breadcrumb-link-font-weight);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
|
|
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-link]:hover:not([data-current]) {
|
|
|
|
|
color: var(--breadcrumb-link-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-link]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-link][data-current] {
|
|
|
|
|
color: var(--breadcrumb-link-color-current);
|
|
|
|
|
font-weight: var(--breadcrumb-link-font-weight-current);
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-separator] {
|
|
|
|
|
color: var(--breadcrumb-separator-color);
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-ellipsis] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
min-inline-size: var(--breadcrumb-ellipsis-size);
|
|
|
|
|
block-size: var(--breadcrumb-ellipsis-size);
|
|
|
|
|
border: var(--breadcrumb-ellipsis-border-width) solid var(--breadcrumb-ellipsis-border);
|
|
|
|
|
border-radius: var(--breadcrumb-ellipsis-radius);
|
|
|
|
|
background: var(--breadcrumb-ellipsis-bg);
|
|
|
|
|
color: var(--breadcrumb-ellipsis-color);
|
|
|
|
|
font: inherit;
|
|
|
|
|
outline: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive] {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
|
|
|
border-color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
|
|
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
|
|
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive]:hover {
|
|
|
|
|
border-color: var(--breadcrumb-ellipsis-border-hover);
|
|
|
|
|
background: var(--breadcrumb-ellipsis-bg-hover);
|
|
|
|
|
color: var(--breadcrumb-ellipsis-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive]:focus-visible {
|
|
|
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
|
|
|
outline-offset: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-breadcrumb-link],
|
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive] {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
