Use CSS variable for background color

KoolADE85 · KoolADE85 · commit d76d25bf3332 · 2025-12-16T17:04:28.000-07:00
diff --git a/components/dash-core-components/src/components/css/button.css b/components/dash-core-components/src/components/css/button.css
@@ -1,10 +1,6 @@
 .dash-button {
     line-height: 32px;
-    background: color-mix(
-        in srgb,
-        var(--Dash-Fill-Interactive-Strong) 5%,
-        transparent
-    );
+    background: var(--Dash-Fill-Interactive-Weak);
     color: var(--Dash-Fill-Interactive-Strong);
     padding: 0 calc(var(--Dash-Spacing) * 2);
     border-radius: 4px;
diff --git a/components/dash-core-components/src/components/css/calendar.css b/components/dash-core-components/src/components/css/calendar.css
@@ -42,11 +42,7 @@
 }
 
 .dash-datepicker-calendar td.dash-datepicker-calendar-date-highlighted {
-    background-color: color-mix(
-        in srgb,
-        var(--Dash-Fill-Interactive-Strong) 5%,
-        transparent 95%
-    );
+    background-color: var(--Dash-Fill-Interactive-Weak);
     color: var(--Dash-Fill-Interactive-Strong);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -42,11 +42,7 @@`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.dash-datepicker-calendar td.dash-datepicker-calendar-date-highlighted {`
`45`		`- background-color: color-mix(`
`46`		`- in srgb,`
`47`		`- var(--Dash-Fill-Interactive-Strong) 5%,`
`48`		`- transparent 95%`
`49`		`- );`
	`45`	`+ background-color: var(--Dash-Fill-Interactive-Weak);`
`50`	`46`	`color: var(--Dash-Fill-Interactive-Strong);`
`51`	`47`	`}`
`52`	`48`