Add CSS variables for shadows

Author: KoolADE85

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

@@ -11,4 +11,6 @@
     --Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
     --Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
     --Dash-Fill-Disabled: rgba(0, 24, 102, 0.1);
+    --Dash-Shading-Strong: rgba(22, 23, 24, 0.35);
+    --Dash-Shading-Weak: rgba(22, 23, 24, 0.2);
 }

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

@@ -71,8 +71,8 @@
     max-width: 98vw;
     overflow-y: auto;
     z-index: 500;
-    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
-        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
+        0px 10px 20px -15px var(--Dash-Shading-Weak);
 }
 
 .dash-dropdown-value-count,

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

@@ -58,7 +58,7 @@
     background-color: var(--Dash-Fill-Interactive-Strong);
     border: 2px solid var(--Dash-Fill-Inverse-Strong);
     border-radius: 50%;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px 0 var(--Dash-Shading-Weak);
     cursor: pointer;
     outline: none;
     transition: all 0.15s ease-in-out;
@@ -67,7 +67,7 @@
 .dash-slider-thumb:focus,
 .dash-slider-thumb:hover {
     transform: scale(1.125); /* Scale to make 16px thumb appear as 18px */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px var(--Dash-Shading-Weak);
 }
 
 .dash-slider-thumb:focus .dash-slider-tooltip,
@@ -125,7 +125,7 @@
     padding: calc(var(--Dash-Spacing) * 3);
     font-size: 12px;
     line-height: 1;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px var(--Dash-Shading-Strong);
     background-color: var(--Dash-Fill-Inverse-Strong);
     user-select: none;
     z-index: 1000;