Fix incorrect CSS variable name

Author: KoolADE85

components/dash-core-components/src/components/Tabs.tsx

@@ -102,7 +102,7 @@ function Tabs({
     colors = {
         border: 'var(--Dash-Stroke-Weak)',
         primary: 'var(--Dash-Fill-Interactive-Strong)',
-        background: 'var(--Dash-Fill-Weak)',
+        background: 'var(--Dash-Fill-Interactive-Weak)',
     },
     vertical = false,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

components/dash-core-components/src/components/css/calendar.css

@@ -30,7 +30,7 @@
 
 .dash-datepicker-calendar td:hover {
     cursor: pointer;
-    background-color: var(--Dash-Fill-Weak);
+    background-color: var(--Dash-Fill-Interactive-Weak);
 }
 
 .dash-datepicker-calendar td:focus {

components/dash-core-components/src/components/css/dcc.css

@@ -3,7 +3,7 @@
     --Dash-Stroke-Strong: rgba(0, 18, 77, 0.45);
     --Dash-Stroke-Weak: rgba(0, 24, 102, 0.1);
     --Dash-Fill-Interactive-Strong: #7f4bc4;
-    --Dash-Fill-Weak: rgba(0, 30, 128, 0.04);
+    --Dash-Fill-Interactive-Weak: rgba(0, 30, 128, 0.04);
     --Dash-Fill-Inverse-Strong: #fff;
     --Dash-Text-Primary: rgba(0, 18, 77, 0.87);
     --Dash-Text-Strong: rgba(0, 9, 38, 0.9);

components/dash-core-components/src/components/css/dropdown.css

@@ -108,7 +108,7 @@
     padding: 4px;
     border-radius: 4px;
     color: var(--Dash-Text-Weak);
-    background: var(--Dash-Fill-Weak);
+    background: var(--Dash-Fill-Interactive-Weak);
     font-size: 0.875em;
 }