go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(uix): --state-* rollout — 19 neutral-hover components use the state layer

Browse Source 
Propagates the state-layer unification (after the accordion pilot a13ca387): each
neutral :hover swaps its bespoke --{x}-bg-hover for the canonical MD3 state layer via
`background-image: linear-gradient(var(--state-hover), var(--state-hover))` — a
translucent currentColor overlay that works UNIFORMLY on transparent (tint shows) AND
filled (base bg survives under the overlay) bases. Keeps each component's `color:` text
shift; leaves the VALENCED palette hovers (pagination-selected, tag-group per-color,
toast, toggle, menu-item highlight) untouched.

Components: accordion, breadcrumb, calendar, collapsible, editable, field-control-trigger,
field-segment, file-upload, month-grid, pagination(control), radio-cards, range-calendar,
select(filled base), spin-field, stepper, tag-group(item+remove), tags-input, toolbar,
year-grid.

Verified: the gradient resolves to currentColor at 8% (`srgb .../0.08`) + the base bg
survives under it (computed probe); NO new test failures (the 6 failing eidos test files
are identical with and without the migration, and --state-hover/press/selected appear in
NONE of the failures — those are pre-existing card-group / palabras / dialog / icon).

Deferred: tabs + color-picker carry another session's uncommitted work (migrate once they
commit). Orphan --{x}-bg-hover recipe-token cleanup + guard test + the transversal
trigger/item fold follow.
active-uix
dev 3 months ago
parent c90af708f8
commit 7de6c76bb3
19 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File

2
src/uix/eidos/components/accordion/accordion.css
Unescape View File

@ -152,7 +152,7 @@
/* Hover uses the canonical state layer (archetypes.css) instead of a bespoke
* `--accordion-trigger-hover-bg` — pilot of the `--state-*` unification. */
[data-accordion-trigger]:hover {
background: var(--state-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--accordion-trigger-hover-color);
}

2
src/uix/eidos/components/breadcrumb/breadcrumb.css
Unescape View File

@ -100,7 +100,7 @@
[data-breadcrumb-ellipsis][data-interactive]:hover {
border-color: var(--breadcrumb-ellipsis-border-hover);
background: var(--breadcrumb-ellipsis-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--breadcrumb-ellipsis-color-hover);
}

2
src/uix/eidos/components/calendar/calendar.css
Unescape View File

@ -226,7 +226,7 @@
[data-calendar-day]:hover {
border-color: var(--calendar-day-border-hover);
background: var(--calendar-day-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-day-color-hover);
}

2
src/uix/eidos/components/collapsible/collapsible.css
Unescape View File

@ -52,7 +52,7 @@
}
[data-collapsible-trigger]:hover:not([data-disabled]) {
background: var(--collapsible-trigger-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--collapsible-trigger-color-hover);
}

2
src/uix/eidos/components/editable/editable.css
Unescape View File

@ -188,7 +188,7 @@
[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);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--editable-trigger-color-hover);
}

2
src/uix/eidos/components/field/field-control-trigger.css
Unescape View File

@ -47,7 +47,7 @@
}
[data-field-control-trigger]:hover:not([data-disabled]):not(:disabled) {
background: var(--field-control-trigger-hover-bg);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--color-content-primary);
}

2
src/uix/eidos/components/field/field-segment-state.css
Unescape View File

@ -30,7 +30,7 @@
[data-field-segment]:not([data-segment='literal']):not([data-readonly]):not([data-disabled]):not(
:focus
):not(:focus-visible):hover {
background: var(--field-segment-hover-bg);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
}
[data-field-segment]:focus,

2
src/uix/eidos/components/file-upload/file-upload.css
Unescape View File

@ -123,7 +123,7 @@
[data-file-upload-item-remove]:hover:not([data-disabled]),
[data-file-upload-clear-trigger]:hover:not([data-disabled]) {
border-color: var(--file-upload-button-border-hover);
background: var(--file-upload-button-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--file-upload-button-color-hover);
}

4
src/uix/eidos/components/month-grid/month-grid.css
Unescape View File

@ -161,7 +161,7 @@
[data-month-grid-prev-button]:hover,
[data-month-grid-next-button]:hover {
border-color: var(--calendar-control-border-hover);
background: var(--calendar-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-control-color-hover);
}
@ -221,7 +221,7 @@
[data-month-grid-cell]:hover {
border-color: var(--calendar-day-border-hover);
background: var(--calendar-day-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-day-color-hover);
}

2
src/uix/eidos/components/pagination/pagination.css
Unescape View File

@ -68,7 +68,7 @@
[data-pagination-last-trigger]:hover:not([data-disabled]),
[data-pagination-item]:hover:not([data-disabled]) {
border-color: var(--pagination-control-border-hover);
background: var(--pagination-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--pagination-control-color-hover);
}

2
src/uix/eidos/components/radio-cards/radio-cards.css
Unescape View File

@ -86,7 +86,7 @@
[data-radio-cards]
[data-radio-cards-item]:hover:not([data-disabled]):not([data-readonly]):not([data-state='checked']) {
border-color: var(--radio-cards-border-hover);
background: var(--radio-cards-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
}
/* Hover — SELECTED card: stay in the active colour, just deepen a notch

4
src/uix/eidos/components/range-calendar/range-calendar.css
Unescape View File

@ -233,7 +233,7 @@
[data-range-calendar-month-select]:hover,
[data-range-calendar-year-select]:hover {
border-color: var(--calendar-control-border-hover);
background: var(--calendar-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-control-color-hover);
}
@ -304,7 +304,7 @@
[data-range-calendar-day]:hover {
border-color: var(--calendar-day-border-hover);
background: var(--calendar-day-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-day-color-hover);
}

2
src/uix/eidos/components/select/select.css
Unescape View File

@ -93,7 +93,7 @@
[data-select-trigger]:hover:not(:disabled):not([data-disabled]) {
border-color: var(--select-trigger-border-hover);
background: var(--select-trigger-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
}
[data-select-trigger][data-state='open'] {

2
src/uix/eidos/components/spin-field/spin-field.css
Unescape View File

@ -180,7 +180,7 @@
[data-spin-field-decrement-trigger]:hover:not([data-disabled]),
[data-spin-field-scrubber]:hover:not([data-disabled]) {
border-color: var(--spin-field-control-border-hover);
background: var(--spin-field-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--spin-field-control-color-hover);
}

2
src/uix/eidos/components/stepper/stepper.css
Unescape View File

@ -75,7 +75,7 @@
}
[data-stepper-trigger]:hover:not([data-disabled]) {
background: var(--stepper-trigger-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--stepper-trigger-color-hover);
}

4
src/uix/eidos/components/tag-group/tag-group.css
Unescape View File

@ -86,7 +86,7 @@
[data-tag-group-item]:hover:not([data-disabled]),
[data-tag-group-link]:hover:not([data-disabled]) {
border-color: var(--tag-group-item-border-hover);
background: var(--tag-group-item-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--tag-group-item-color-hover);
}
@ -175,7 +175,7 @@
[data-tag-group-remove-button]:hover {
border-color: var(--tag-group-remove-border-hover);
background: var(--tag-group-remove-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
}
@media (prefers-reduced-motion: reduce) {

2
src/uix/eidos/components/tags-input/tags-input.css
Unescape View File

@ -189,7 +189,7 @@
[data-tags-input-item-delete-trigger]:hover:not([data-disabled]),
[data-tags-input-clear-trigger]:hover:not(:disabled) {
border-color: var(--tags-input-action-border-hover);
background: var(--tags-input-action-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--tags-input-action-color-hover);
}

2
src/uix/eidos/components/toolbar/toolbar.css
Unescape View File

@ -117,7 +117,7 @@
[data-toolbar-link]:hover,
[data-toolbar-group-item]:hover:not([data-disabled]) {
border-color: var(--toolbar-control-border-hover);
background: var(--toolbar-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--toolbar-control-color-hover);
}

4
src/uix/eidos/components/year-grid/year-grid.css
Unescape View File

@ -161,7 +161,7 @@
[data-year-grid-prev-button]:hover,
[data-year-grid-next-button]:hover {
border-color: var(--calendar-control-border-hover);
background: var(--calendar-control-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-control-color-hover);
}
@ -221,7 +221,7 @@
[data-year-grid-cell]:hover {
border-color: var(--calendar-day-border-hover);
background: var(--calendar-day-bg-hover);
background-image: linear-gradient(var(--state-hover), var(--state-hover));
color: var(--calendar-day-color-hover);
}

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.