DDK compatibility changes

Author: KoolADE85

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

@@ -5,17 +5,25 @@
     align-items: center;
     width: 170px; /* default input width */
     height: 32px;
+    background: var(--Dash-Fill-Inverse-Strong);
     border-radius: var(--Dash-Spacing);
     border: 1px solid var(--Dash-Stroke-Strong);
     box-sizing: border-box;
     container-type: inline-size;
     vertical-align: middle;
+    color: inherit;
+    overflow: hidden;
+}
+
+.dash-input-container:has(input[type='range']) {
+    background: inherit;
 }
 
 /* Input field styles */
 .dash-input-element {
     padding: var(--Dash-Spacing) calc(2 * var(--Dash-Spacing));
-    background: var(--Dash-Fill-Inverse-Strong);
+    color: inherit;
+    background: inherit;
     border: none;
     border-radius: var(--Dash-Spacing);
     flex: 1 1 0;

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

@@ -66,6 +66,7 @@
     transition: all 0.15s ease-in-out;
 }
 
+.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);
@@ -80,7 +81,7 @@
     position: absolute;
     font-size: 12px;
     line-height: 12px;
-    color: #6b7280;
+    color: var(--Dash-Text-Strong);
     white-space: nowrap;
     pointer-events: none;
 }

components/dash-core-components/src/fragments/RangeSlider.tsx

@@ -285,7 +285,10 @@ export default function RangeSlider(props: RangeSliderProps) {
                             disabled={disabled}
                         />
                     )}
-                    <div className="dash-slider-wrapper">
+                    <div
+                        className="dash-slider-wrapper"
+                        onClickCapture={e => e.preventDefault()} // prevent interactions from "clicking" the parent, particularly when slider is inside a label tag
+                    >
                         <Tooltip.Provider>
                             <RadixSlider.Root
                                 ref={sliderRef}