|
|
|
|
[data-slider] {
|
|
|
|
|
--_slider-track-size: var(--slider-track-size-md);
|
|
|
|
|
--_slider-thumb-size: var(--slider-thumb-size-md);
|
|
|
|
|
--_slider-hit-size: var(--slider-hit-size-md);
|
|
|
|
|
--_slider-tick-size: var(--slider-tick-size-md);
|
|
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
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-slider][data-size='xs'] {
|
|
|
|
|
--_slider-track-size: var(--slider-track-size-xs);
|
|
|
|
|
--_slider-thumb-size: var(--slider-thumb-size-xs);
|
|
|
|
|
--_slider-hit-size: var(--slider-hit-size-xs);
|
|
|
|
|
--_slider-tick-size: var(--slider-tick-size-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-size='sm'] {
|
|
|
|
|
--_slider-track-size: var(--slider-track-size-sm);
|
|
|
|
|
--_slider-thumb-size: var(--slider-thumb-size-sm);
|
|
|
|
|
--_slider-hit-size: var(--slider-hit-size-sm);
|
|
|
|
|
--_slider-tick-size: var(--slider-tick-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-size='lg'] {
|
|
|
|
|
--_slider-track-size: var(--slider-track-size-lg);
|
|
|
|
|
--_slider-thumb-size: var(--slider-thumb-size-lg);
|
|
|
|
|
--_slider-hit-size: var(--slider-hit-size-lg);
|
|
|
|
|
--_slider-tick-size: var(--slider-tick-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
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-slider][data-size='xl'] {
|
|
|
|
|
--_slider-track-size: var(--slider-track-size-xl);
|
|
|
|
|
--_slider-thumb-size: var(--slider-thumb-size-xl);
|
|
|
|
|
--_slider-hit-size: var(--slider-hit-size-xl);
|
|
|
|
|
--_slider-tick-size: var(--slider-tick-size-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-disabled] {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: var(--slider-disabled-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-orientation='horizontal'] {
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
block-size: var(--_slider-hit-size);
|
|
|
|
|
min-inline-size: var(--slider-min-inline-size);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-orientation='vertical'] {
|
|
|
|
|
inline-size: var(--_slider-hit-size);
|
|
|
|
|
block-size: var(--slider-min-block-size);
|
|
|
|
|
min-block-size: var(--slider-min-block-size);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider]::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-radius: var(--slider-track-radius);
|
|
|
|
|
background: var(--slider-track-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-orientation='horizontal']::before {
|
|
|
|
|
inset-inline: 0;
|
|
|
|
|
inset-block-start: 50%;
|
|
|
|
|
block-size: var(--_slider-track-size);
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider][data-orientation='vertical']::before {
|
|
|
|
|
inset-block: 0;
|
|
|
|
|
inset-inline-start: 50%;
|
|
|
|
|
inline-size: var(--_slider-track-size);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-range] {
|
|
|
|
|
border-radius: var(--slider-track-radius);
|
|
|
|
|
background: var(--slider-range-bg);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-range][data-orientation='horizontal'] {
|
|
|
|
|
inset-block-start: 50%;
|
|
|
|
|
block-size: var(--_slider-track-size);
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-range][data-orientation='vertical'] {
|
|
|
|
|
inset-inline-start: 50%;
|
|
|
|
|
inline-size: var(--_slider-track-size);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-thumb] {
|
|
|
|
|
inline-size: var(--_slider-thumb-size);
|
|
|
|
|
block-size: var(--_slider-thumb-size);
|
|
|
|
|
border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
|
|
|
|
|
border-radius: var(--slider-thumb-radius);
|
|
|
|
|
background: var(--slider-thumb-bg);
|
|
|
|
|
box-shadow: var(--slider-thumb-shadow);
|
|
|
|
|
cursor: grab;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--slider-transition-duration) var(--slider-transition-ease),
|
|
|
|
|
border-color var(--slider-transition-duration) var(--slider-transition-ease),
|
|
|
|
|
box-shadow var(--slider-transition-duration) var(--slider-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-thumb]:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-thumb]:focus-visible {
|
|
|
|
|
box-shadow: var(--slider-thumb-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-thumb][data-disabled] {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-tick] {
|
|
|
|
|
inline-size: var(--_slider-tick-size);
|
|
|
|
|
block-size: var(--_slider-tick-size);
|
|
|
|
|
border-radius: var(--slider-tick-radius);
|
|
|
|
|
background: var(--slider-tick-bg);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-tick][data-orientation='horizontal'] {
|
|
|
|
|
inset-block-start: 50%;
|
|
|
|
|
margin-block-start: calc(var(--_slider-tick-size) / -2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-tick][data-orientation='vertical'] {
|
|
|
|
|
inset-inline-start: 50%;
|
|
|
|
|
margin-inline-start: calc(var(--_slider-tick-size) / -2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-slider-tick][data-active] {
|
|
|
|
|
background: var(--slider-tick-bg-active);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-slider-thumb] {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
