diff --git a/src/uix/eidos/components/accordion/accordion.css b/src/uix/eidos/components/accordion/accordion.css
index 269bdd804..f227a45a3 100644
--- a/src/uix/eidos/components/accordion/accordion.css
+++ b/src/uix/eidos/components/accordion/accordion.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/breadcrumb/breadcrumb.css b/src/uix/eidos/components/breadcrumb/breadcrumb.css
index c4d80b262..977e06174 100644
--- a/src/uix/eidos/components/breadcrumb/breadcrumb.css
+++ b/src/uix/eidos/components/breadcrumb/breadcrumb.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/calendar/calendar.css b/src/uix/eidos/components/calendar/calendar.css
index 4bcd57403..f3aeb6d18 100644
--- a/src/uix/eidos/components/calendar/calendar.css
+++ b/src/uix/eidos/components/calendar/calendar.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/collapsible/collapsible.css b/src/uix/eidos/components/collapsible/collapsible.css
index 9ad4fc621..8198384ca 100644
--- a/src/uix/eidos/components/collapsible/collapsible.css
+++ b/src/uix/eidos/components/collapsible/collapsible.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/editable/editable.css b/src/uix/eidos/components/editable/editable.css
index 8e5237825..49411f348 100644
--- a/src/uix/eidos/components/editable/editable.css
+++ b/src/uix/eidos/components/editable/editable.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/field/field-control-trigger.css b/src/uix/eidos/components/field/field-control-trigger.css
index 7ea79ce85..7928860f9 100644
--- a/src/uix/eidos/components/field/field-control-trigger.css
+++ b/src/uix/eidos/components/field/field-control-trigger.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/field/field-segment-state.css b/src/uix/eidos/components/field/field-segment-state.css
index fb9b26e06..75e8f0957 100644
--- a/src/uix/eidos/components/field/field-segment-state.css
+++ b/src/uix/eidos/components/field/field-segment-state.css
@@ -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,
diff --git a/src/uix/eidos/components/file-upload/file-upload.css b/src/uix/eidos/components/file-upload/file-upload.css
index 376565bd0..bf4f01ec1 100644
--- a/src/uix/eidos/components/file-upload/file-upload.css
+++ b/src/uix/eidos/components/file-upload/file-upload.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/month-grid/month-grid.css b/src/uix/eidos/components/month-grid/month-grid.css
index 30d0ca458..740c9c728 100644
--- a/src/uix/eidos/components/month-grid/month-grid.css
+++ b/src/uix/eidos/components/month-grid/month-grid.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/pagination/pagination.css b/src/uix/eidos/components/pagination/pagination.css
index 5e7d7b721..145d823ef 100644
--- a/src/uix/eidos/components/pagination/pagination.css
+++ b/src/uix/eidos/components/pagination/pagination.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/radio-cards/radio-cards.css b/src/uix/eidos/components/radio-cards/radio-cards.css
index f5ffa0997..76e0cd5c9 100644
--- a/src/uix/eidos/components/radio-cards/radio-cards.css
+++ b/src/uix/eidos/components/radio-cards/radio-cards.css
@@ -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
diff --git a/src/uix/eidos/components/range-calendar/range-calendar.css b/src/uix/eidos/components/range-calendar/range-calendar.css
index bacaa6aed..076d12adb 100644
--- a/src/uix/eidos/components/range-calendar/range-calendar.css
+++ b/src/uix/eidos/components/range-calendar/range-calendar.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/select/select.css b/src/uix/eidos/components/select/select.css
index e0af0a8c9..d77b0d570 100644
--- a/src/uix/eidos/components/select/select.css
+++ b/src/uix/eidos/components/select/select.css
@@ -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'] {
diff --git a/src/uix/eidos/components/spin-field/spin-field.css b/src/uix/eidos/components/spin-field/spin-field.css
index 20249f876..26bd09652 100644
--- a/src/uix/eidos/components/spin-field/spin-field.css
+++ b/src/uix/eidos/components/spin-field/spin-field.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/stepper/stepper.css b/src/uix/eidos/components/stepper/stepper.css
index 3b2b7ed53..283cd32c8 100644
--- a/src/uix/eidos/components/stepper/stepper.css
+++ b/src/uix/eidos/components/stepper/stepper.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/tag-group/tag-group.css b/src/uix/eidos/components/tag-group/tag-group.css
index bfb466ae0..02d746588 100644
--- a/src/uix/eidos/components/tag-group/tag-group.css
+++ b/src/uix/eidos/components/tag-group/tag-group.css
@@ -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) {
diff --git a/src/uix/eidos/components/tags-input/tags-input.css b/src/uix/eidos/components/tags-input/tags-input.css
index e9df492c7..b3c7f4932 100644
--- a/src/uix/eidos/components/tags-input/tags-input.css
+++ b/src/uix/eidos/components/tags-input/tags-input.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/toolbar/toolbar.css b/src/uix/eidos/components/toolbar/toolbar.css
index 787fa9d11..37c75df6e 100644
--- a/src/uix/eidos/components/toolbar/toolbar.css
+++ b/src/uix/eidos/components/toolbar/toolbar.css
@@ -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);
 }
 
diff --git a/src/uix/eidos/components/year-grid/year-grid.css b/src/uix/eidos/components/year-grid/year-grid.css
index f8890250f..e015ac56f 100644
--- a/src/uix/eidos/components/year-grid/year-grid.css
+++ b/src/uix/eidos/components/year-grid/year-grid.css
@@ -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);
 }