fix: slider thumb and mark styling not applying theme tokens (#2000)

## Summary
- **Thumb styling**: Moved from `classNames` to inline `styles` to fix CSS specificity issue where Mantine's default `:where()` selectors override CSS module classes due to load order. Inline styles always win.
- **Mark styling**: Added `!important` to mark CSS module overrides (size, border-color, background-color) so theme tokens apply reliably over Mantine defaults.
- **Vertical centering**: Added `margin-top: 1px` to center 6px mark dots within the 8px track height.
- **Removed broken transform**: Removed the `translateX(1px) translateY(1px)` nudge that was misaligning marks and labels.
- **Token fix**: Corrected `--color-slider-dot-active` values in ClickStack dark/light modes.

Follows up on #1988.

### Before

<img width="1724" height="158" alt="image" src="https://github.com/user-attachments/assets/9983920d-d6dc-40ab-9f87-6f7370eb1209" />

### After

<img width="1732" height="174" alt="image" src="https://github.com/user-attachments/assets/a60370fb-c079-4408-804d-4d4c6e9451a4" />

## Test plan
- [ ] Verify slider thumb uses theme token colors (not Mantine white/default) in both ClickStack and HyperDX themes
- [ ] Verify slider mark dots are solid 6px circles with correct token colors
- [ ] Verify mark dots are vertically centered on the track
- [ ] Verify mark labels ("0", "10") are horizontally aligned with track endpoints
- [ ] Verify no visual regressions in both dark and light modes for both themes

.changeset/fix-slider-styling.md

@@ -0,0 +1,10 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: slider thumb and mark styling not applying theme tokens
+
+- Move slider thumb styling from classNames to inline styles to fix CSS specificity issue where Mantine defaults override theme tokens
+- Add !important to slider mark styles to ensure token-based colors apply
+- Fix vertical centering of 6px slider mark dots within the 8px track
+- Remove broken translateX/translateY nudge that misaligned marks

packages/app/src/theme/themes/clickstack/_tokens.scss

@@ -156,7 +156,7 @@
   --color-slider-thumb: var(--click-global-color-accent-default);
   --color-slider-thumb-border: var(--click-global-color-accent-default);
   --color-slider-dot: var(--click-global-color-text-muted);
-  --color-slider-dot-active: var(--mantine-color-yellow-8);
+  --color-slider-dot-active: var(--mantine-color-yellow-7);
 
   /* Code / Misc UI */
   --color-bg-code: #1d1e30;
@@ -363,7 +363,7 @@
   --color-slider-thumb: var(--click-global-color-accent-default);
   --color-slider-thumb-border: var(--click-global-color-accent-default);
   --color-slider-dot: var(--click-global-color-text-muted);
-  --color-slider-dot-active: var(--mantine-color-gray-3);
+  --color-slider-dot-active: var(--mantine-color-dark-3);
 
   /* Code / Misc UI */
   --color-bg-code: var(--click-global-color-background-muted);

packages/app/src/theme/themes/clickstack/mantineTheme.ts

@@ -112,8 +112,13 @@ const makeTheme = ({
           '--slider-color': 'var(--color-slider-bar)',
         },
       }),
+      styles: {
+        thumb: {
+          backgroundColor: 'var(--color-slider-thumb)',
+          borderColor: 'var(--color-slider-thumb-border)',
+        },
+      },
       classNames: {
-        thumb: componentClasses.sliderThumb,
         mark: componentClasses.sliderMark,
       },
     }),

packages/app/src/theme/themes/components.module.scss

@@ -1,18 +1,13 @@
-.sliderThumb {
-  background-color: var(--color-slider-thumb);
-  border-color: var(--color-slider-thumb-border);
-}
-
 .sliderMark {
-  width: 6px;
-  height: 6px;
+  width: 6px !important;
+  height: 6px !important;
+  margin-top: 1px;
   border-radius: 100%;
-  transform: translateX(1px) translateY(1px);
-  border-color: var(--color-slider-dot);
-  background-color: var(--color-slider-dot);
+  border-color: var(--color-slider-dot) !important;
+  background-color: var(--color-slider-dot) !important;
 
   &[data-filled] {
-    border-color: var(--color-slider-dot-active);
-    background-color: var(--color-slider-dot-active);
+    border-color: var(--color-slider-dot-active) !important;
+    background-color: var(--color-slider-dot-active) !important;
   }
 }

packages/app/src/theme/themes/hyperdx/mantineTheme.ts

@@ -126,8 +126,13 @@ const makeTheme = ({
           '--slider-color': 'var(--color-slider-bar)',
         },
       }),
+      styles: {
+        thumb: {
+          backgroundColor: 'var(--color-slider-thumb)',
+          borderColor: 'var(--color-slider-thumb-border)',
+        },
+      },
       classNames: {
-        thumb: componentClasses.sliderThumb,
         mark: componentClasses.sliderMark,
       },
     }),