fix: ClickStack switch checked-state color not applying theme tokens

[elizabetdev]

Summary

Mantine's Switch component falls back to theme.primaryColor (yellow in the ClickStack theme) for its checked-state track. Other binary form controls in this theme — Checkbox and Radio — already remap to the ClickStack accent token via their respective CSS vars, which is why the toggle visibly rendered yellow while an adjacent checkbox/radio rendered black on the same setting page.

This adds a Switch.extend override that mirrors the existing Checkbox/Radio blocks, remapping --switch-color to var(--click-global-color-accent-default).

+    Switch: Switch.extend({
+      vars: () => ({
+        root: {
+          '--switch-color': 'var(--click-global-color-accent-default)',
+        },
+      }),
+    }),

--switch-color is the documented Mantine v7+ CSS variable that controls the checked-state track background, so no additional styles overrides are needed — the thumb color, focus ring, and disabled state all keep their default behavior.

Where this is visible

Anywhere a Switch is rendered under the ClickStack theme.

Before / After

Scope

• Only clickstack/mantineTheme.ts is changed.
• The hyperdx theme intentionally keeps theme.primaryColor (green) for its checked Switch — matching the existing behaviour of its un-overridden Checkbox and Radio.

Test plan

• Open Preferences→ Use UTC time
• Toggle a Switch off and on; confirm the thumb still slides and the unchecked-state background, focus ring, and disabled state are unchanged.
• Switch the app to the HyperDX theme and confirm toggles still render with the green primary color (no regression there).

[changeset-bot]

🦋 Changeset detected

Latest commit: 72a61f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	May 8, 2026 3:12pm

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 2
• Production lines changed: 33
• Branch: fix/clickstack-switch-color-theme-token
• Author: elizabetdev

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

PR Review

• ⚠️ Comment in packages/app/src/theme/themes/clickstack/mantineTheme.ts:333 says "attribute selector on the checkbox input" — should read "switch input" to match the actual selector (input[role='switch']) → minor wording fix.

Otherwise ✅ no critical issues. The Switch.extend block mirrors the existing Checkbox/Radio pattern at mantineTheme.ts:308-324, uses Mantine's documented --switch-color CSS var, and the SCSS overrides in _tokens.scss:432-435 correctly rely on the scheme-aware --click-global-color-background-default token so dark/light both work without duplication. Reliance on Mantine's input + * sibling structure is appropriately called out in the inline comment.

[github-actions]

Deep Review

✅ No critical issues found.

🟡 P2 -- recommended

• packages/app/src/theme/themes/clickstack/_tokens.scss:432 -- The .theme-clickstack input[role='switch'][data-checked='true'] + * rule uses the universal next-sibling combinator and is coupled to Mantine's exact Switch DOM ordering, so any future Mantine version that inserts an element between the input and the track will silently retarget the override onto the wrong element instead of failing visibly.
  • Fix: Tighten the target to a class-bearing element (e.g. + [class*='Switch-track']) so a structural change manifests as a missing-class regression caught by visual review rather than an invisible miss.
  • _{maintainability, previous-comments}
• packages/app/src/theme/themes/clickstack/mantineTheme.ts:325 -- Switch theming is intentionally split across Switch.extend({ vars }) here and a global SCSS attribute selector in _tokens.scss, but the diff does not verify that --switch-thumb-bg and --switch-text-color cannot be set via the Mantine vars/styles API on the track slot, leaving the cross-file indirection unproven and asymmetric with the adjacent Checkbox/Radio blocks.
  • Fix: Try Switch.extend({ vars: () => ({ root: {...}, track: { '--switch-text-color': '...', '--switch-thumb-bg': '...' } }) }) (or a styles callback keyed off data-checked); if neither reaches Mantine's :checked + .track cascade, link the Mantine source/issue that proves the limitation in the inline comment so the workaround is auditable.
  • _{maintainability, kieran-typescript}

🔵 P3 nitpicks (1)

• packages/app/src/theme/themes/clickstack/mantineTheme.ts:333 -- The inline note inside Switch.extend says the override is applied via "an attribute selector on the checkbox input", but the SCSS selector in _tokens.scss actually targets input[role='switch'][data-checked='true']; this reads as a copy-paste leftover from the adjacent Checkbox/Radio blocks and was already flagged by a prior automated review without being addressed.
  • Fix: Replace checkbox input with switch input (or quote the actual selector input[role='switch'][data-checked='true']) so a maintainer following the cross-file pointer is not aimed at the wrong component.
  • _{correctness, maintainability, kieran-typescript, previous-comments}

---

Reviewers (8): correctness, testing, maintainability, project-standards, agent-native, learnings-researcher, kieran-typescript, previous-comments.

Testing gaps:

• No render assertion verifying Mantine's Switch input exposes both role='switch' and data-checked='true' -- both attributes are load-bearing for the contrast override and a Mantine upgrade that drops or renames either silently regresses the fix.
• No coverage for disabled-checked, light-mode, or HyperDX-theme (non-clickstack) regression -- the global SCSS rule scoping needs all three to confirm intended scope and no bleed.
• Verification gap: whether --switch-thumb-bg and --switch-text-color can be set directly via Switch.extend({ vars: () => ({ track: { ... } }) }) is not validated in the diff; if reachable, the SCSS escape hatch could be dropped and all Switch theming colocated in mantineTheme.ts next to Checkbox/Radio.

[github-actions]

E2E Test Results

✅ All tests passed • 164 passed • 3 skipped • 1216s

Status	Count
✅ Passed	164
❌ Failed	0
⚠️ Flaky	5
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[teeohhem]

Noticed an E2E test failure and re-ran it and it passed. I put up a PR to fix the flake independently - #2243