|
|
|
|
[data-editable] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-md);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-md);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-md);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-md);
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-primary-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-primary-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-primary-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-primary-text);
|
|
|
|
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--_editable-gap);
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
font-family: var(--editable-font-family);
|
|
|
|
|
font-size: var(--_editable-font-size);
|
|
|
|
|
line-height: var(--editable-line-height);
|
|
|
|
|
color: var(--editable-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-editing] {
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
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-editable][data-size='xs'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-xs);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-xs);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-xs);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-size='sm'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-sm);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-sm);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-sm);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-size='lg'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-lg);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-lg);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-lg);
|
|
|
|
|
--_editable-font-size: var(--editable-font-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-editable][data-size='xl'] {
|
|
|
|
|
--_editable-gap: var(--editable-gap-xl);
|
|
|
|
|
--_editable-control-height: var(--editable-control-height-xl);
|
|
|
|
|
--_editable-control-px: var(--editable-control-px-xl);
|
|
|
|
|
--_editable-font-size: var(--editable-font-size-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='secondary'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-secondary-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-secondary-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-secondary-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='neutral'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-neutral-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-neutral-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-neutral-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='affirm'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-affirm-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-affirm-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-affirm-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='risk'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-risk-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-risk-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-risk-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-risk-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='threat'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-color-threat-solid);
|
|
|
|
|
--_editable-accent-track: var(--editable-color-threat-track);
|
|
|
|
|
--_editable-accent-border: var(--editable-color-threat-border);
|
|
|
|
|
--_editable-accent-text: var(--editable-color-threat-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-area] {
|
|
|
|
|
display: grid;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-inline-size: var(--editable-area-min-inline-size);
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-control] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--editable-trigger-gap);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview],
|
|
|
|
|
[data-editable-input] {
|
|
|
|
|
grid-area: 1 / 1;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
min-inline-size: 0;
|
|
|
|
|
min-block-size: var(--_editable-control-height);
|
|
|
|
|
padding-inline: var(--_editable-control-px);
|
|
|
|
|
border: var(--editable-control-border-width) solid transparent;
|
|
|
|
|
border-radius: var(--editable-control-radius);
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
font: inherit;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
inline-size: fit-content;
|
|
|
|
|
max-inline-size: 100%;
|
|
|
|
|
cursor: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-input] {
|
|
|
|
|
inline-size: 100%;
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
background: var(--editable-control-bg);
|
|
|
|
|
box-shadow: var(--editable-control-shadow), var(--editable-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='outline'] [data-editable-input] {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-preview] {
|
|
|
|
|
padding-inline: 0;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost'] [data-editable-input] {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
border-color: var(--editable-control-border-hover);
|
|
|
|
|
background: var(--editable-control-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-variant='ghost']
|
|
|
|
|
[data-editable-preview]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-input]:hover:not([data-disabled]):not([data-readonly]) {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview]:focus-visible,
|
|
|
|
|
[data-editable-input]:focus-visible {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
box-shadow: var(--editable-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview][data-placeholder-shown],
|
|
|
|
|
[data-editable-input]::placeholder {
|
|
|
|
|
color: var(--editable-placeholder-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger],
|
|
|
|
|
[data-editable-submit-trigger],
|
|
|
|
|
[data-editable-cancel-trigger] {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: var(--editable-trigger-gap);
|
|
|
|
|
block-size: var(--_editable-control-height);
|
|
|
|
|
padding-inline: var(--editable-trigger-px);
|
|
|
|
|
border: var(--editable-trigger-border-width) solid var(--editable-trigger-border);
|
|
|
|
|
border-radius: var(--editable-trigger-radius);
|
|
|
|
|
background: var(--editable-trigger-bg);
|
|
|
|
|
color: var(--editable-trigger-color);
|
|
|
|
|
font: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition:
|
|
|
|
|
background var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
border-color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
color var(--editable-transition-duration) var(--editable-transition-ease),
|
|
|
|
|
box-shadow var(--editable-transition-duration) var(--editable-transition-ease);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-submit-trigger] {
|
|
|
|
|
border-color: var(--_editable-accent-border);
|
|
|
|
|
background: var(--_editable-accent-solid);
|
|
|
|
|
color: var(--editable-submit-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger]:hover:not(:disabled),
|
|
|
|
|
[data-editable-cancel-trigger]:hover:not(:disabled) {
|
|
|
|
|
border-color: var(--editable-trigger-border-hover);
|
|
|
|
|
background: var(--editable-trigger-bg-hover);
|
|
|
|
|
color: var(--editable-trigger-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-submit-trigger]:hover:not(:disabled) {
|
|
|
|
|
filter: brightness(var(--editable-submit-hover-brightness));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-edit-trigger]:focus-visible,
|
|
|
|
|
[data-editable-submit-trigger]:focus-visible,
|
|
|
|
|
[data-editable-cancel-trigger]:focus-visible {
|
|
|
|
|
box-shadow: var(--editable-focus-shadow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable-preview][hidden],
|
|
|
|
|
[data-editable-input][hidden],
|
|
|
|
|
[data-editable-edit-trigger][hidden],
|
|
|
|
|
[data-editable-submit-trigger][hidden],
|
|
|
|
|
[data-editable-cancel-trigger][hidden] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-editing] [data-editable-edit-trigger],
|
|
|
|
|
[data-editable]:not([data-editing]) [data-editable-submit-trigger],
|
|
|
|
|
[data-editable]:not([data-editing]) [data-editable-cancel-trigger] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-disabled],
|
|
|
|
|
[data-editable-preview][data-disabled],
|
|
|
|
|
[data-editable-input][data-disabled],
|
|
|
|
|
[data-editable-control][data-disabled],
|
|
|
|
|
[data-editable-edit-trigger][data-disabled],
|
|
|
|
|
[data-editable-submit-trigger][data-disabled],
|
|
|
|
|
[data-editable-cancel-trigger][data-disabled] {
|
|
|
|
|
cursor: default;
|
|
|
|
|
opacity: var(--editable-disabled-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-editable-preview],
|
|
|
|
|
[data-editable-input],
|
|
|
|
|
[data-editable-edit-trigger],
|
|
|
|
|
[data-editable-submit-trigger],
|
|
|
|
|
[data-editable-cancel-trigger] {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
