diff --git a/ui/src/styles/base-theme-tokens.node.test.ts b/ui/src/styles/base-theme-tokens.node.test.ts index fd789b73a93c..b68d8b706aa7 100644 --- a/ui/src/styles/base-theme-tokens.node.test.ts +++ b/ui/src/styles/base-theme-tokens.node.test.ts @@ -73,4 +73,21 @@ describe("Control UI base theme tokens", () => { expect(violations).toEqual([]); }); + + it("routes every Web Awesome switch through the shared accent", () => { + const baseCss = fs.readFileSync(path.join(stylesDir, "base.css"), "utf8"); + const localOverrides = collectFiles(stylesDir, [".css"]) + .filter((filePath) => !filePath.endsWith("base.css")) + .filter((filePath) => + /[^{}]*wa-switch[^{}]*\{[^}]*--wa-form-control-activated-color:/su.test( + fs.readFileSync(filePath, "utf8"), + ), + ) + .map((filePath) => path.relative(stylesDir, filePath)); + + expect(baseCss).toMatch( + /wa-switch\s*\{[^}]*--wa-form-control-activated-color:\s*var\(--accent\);[^}]*\}/su, + ); + expect(localOverrides).toEqual([]); + }); }); diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css index 6f977133ea1d..dcb03c95feff 100644 --- a/ui/src/styles/base.css +++ b/ui/src/styles/base.css @@ -1128,6 +1128,13 @@ a:hover { text-decoration-thickness: 2px; } +/* Web Awesome defaults checked switches to brand blue. Keep every switch on + the Control UI accent, matching native check controls and custom switches. */ +wa-switch { + --wa-form-control-activated-color: var(--accent); + --wa-color-focus: var(--ring); +} + /* Web Awesome dropdown items ship `cursor: pointer` on their shadow host. Document rules beat `:host`, so route them through the policy here — and re-add the disabled cue this override would otherwise clobber. */ diff --git a/ui/src/styles/settings.css b/ui/src/styles/settings.css index 879ca44fd1e3..b8caf1c05d5e 100644 --- a/ui/src/styles/settings.css +++ b/ui/src/styles/settings.css @@ -473,9 +473,6 @@ } wa-switch.settings-toggle { - /* Web Awesome defaults to brand blue; settings controls follow the active scene. */ - --wa-form-control-activated-color: var(--accent); - --wa-color-focus: var(--ring); flex: none; }