From 980d43347a8d7cd810300c73c488b81d0b8a9b18 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 28 Apr 2026 13:30:07 +0200 Subject: [PATCH] fix: checkbox, switch and radio focus outline color not applied --- .changeset/mighty-goats-sleep.md | 5 +++++ .changeset/tangy-islands-scream.md | 5 +++++ packages/components/src/components/checkbox/checkbox.ts | 2 +- packages/components/src/components/radio/radio.ts | 5 +++++ packages/components/src/components/switch/switch.ts | 2 +- packages/tokens/scripts/tailwind/tailwind-generator.js | 4 ++-- packages/tokens/scripts/tailwind/token-engine.js | 5 +++-- packages/tokens/themes/tailwind.css | 9 +++++---- 8 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 .changeset/mighty-goats-sleep.md create mode 100644 .changeset/tangy-islands-scream.md diff --git a/.changeset/mighty-goats-sleep.md b/.changeset/mighty-goats-sleep.md new file mode 100644 index 0000000000..cda773edd3 --- /dev/null +++ b/.changeset/mighty-goats-sleep.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/tokens': patch +--- + +Wrapped `--outline-color-primary`, `--outline-color-error` and `--outline-color-white` in `rgba()` so `outline-*` utilities resolve correctly in multi-theming diff --git a/.changeset/tangy-islands-scream.md b/.changeset/tangy-islands-scream.md new file mode 100644 index 0000000000..7731cfbff2 --- /dev/null +++ b/.changeset/tangy-islands-scream.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Fixed focus outline color in `sd-checkbox`, `sd-switch` and `sd-radio` not using the primary color. diff --git a/packages/components/src/components/checkbox/checkbox.ts b/packages/components/src/components/checkbox/checkbox.ts index 1681ade2af..fa72c9b007 100644 --- a/packages/components/src/components/checkbox/checkbox.ts +++ b/packages/components/src/components/checkbox/checkbox.ts @@ -252,7 +252,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl class=${cx( 'relative flex flex-shrink-0 items-center justify-center border sd-checkbox-border-width rounded-sm h-4 w-4', 'transition-colors ease-in-out duration-medium group-hover:duration-fast', - 'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary', + 'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary outline-transparent', { sm: 'mt-[2px]', md: 'mt-[3px]', diff --git a/packages/components/src/components/radio/radio.ts b/packages/components/src/components/radio/radio.ts index b18ca30a8c..7ed17256eb 100644 --- a/packages/components/src/components/radio/radio.ts +++ b/packages/components/src/components/radio/radio.ts @@ -190,6 +190,11 @@ export default class SdRadio extends SolidElement { @apply outline-none; } + [part='control--checked'], + [part='control--unchecked'] { + @apply outline-transparent; + } + /* Checked + focus */ :host(:focus-visible) [part='control--checked'], :host(:focus-visible) [part='control--unchecked'] { diff --git a/packages/components/src/components/switch/switch.ts b/packages/components/src/components/switch/switch.ts index 644776073e..efc1c4b7b9 100644 --- a/packages/components/src/components/switch/switch.ts +++ b/packages/components/src/components/switch/switch.ts @@ -208,7 +208,7 @@ export default class SdSwitch extends SolidElement implements SolidFormControl { class=${cx( `relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 - peer-focus-visible:outline-primary transition-colors ease-in-out duration-medium hover:duration-fast`, + peer-focus-visible:outline-primary outline-transparent transition-colors ease-in-out duration-medium hover:duration-fast`, this.disabled && this.checked ? 'bg-neutral-500' : this.disabled diff --git a/packages/tokens/scripts/tailwind/tailwind-generator.js b/packages/tokens/scripts/tailwind/tailwind-generator.js index b332bd14ab..63992b4367 100644 --- a/packages/tokens/scripts/tailwind/tailwind-generator.js +++ b/packages/tokens/scripts/tailwind/tailwind-generator.js @@ -67,7 +67,7 @@ export class TailwindCSSGenerator { this.css.property('outline-style', 'solid'), this.css.property('outline-offset', '2px'), this.css.property('outline-width', '2px'), - this.css.property('outline-color', 'rgba(var(--outline-color-primary))') + this.css.property('outline-color', 'var(--outline-color-primary)') ]) ), this.css.utility( @@ -76,7 +76,7 @@ export class TailwindCSSGenerator { this.css.property('outline-style', 'solid'), this.css.property('outline-offset', '2px'), this.css.property('outline-width', '2px'), - this.css.property('outline-color', 'rgba(var(--outline-color-white))') + this.css.property('outline-color', 'var(--outline-color-white)') ]) ) ]); diff --git a/packages/tokens/scripts/tailwind/token-engine.js b/packages/tokens/scripts/tailwind/token-engine.js index 98dbf0cead..36cd4fb386 100644 --- a/packages/tokens/scripts/tailwind/token-engine.js +++ b/packages/tokens/scripts/tailwind/token-engine.js @@ -67,8 +67,9 @@ export class TokenProcessingEngine { baseVars: [ '--sizing-varspacing: var(--tw-varspacing);', '--spacing-varspacing: var(--tw-varspacing);', - '--outline-color-primary: var(--sd-color-border-primary, var(--sd-color-primary));', - '--outline-color-error: var(--sd-color-border-error, var(--sd-color-error));', + '--outline-color-primary: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));', + '--outline-color-error: rgba(var(--sd-color-border-error, var(--sd-color-error)));', + '--outline-color-white: rgba(var(--sd-color-border-white, var(--sd-color-white)));', '--drop-shadow-sm: var(--sd-drop-shadow-sm);', '--drop-shadow: var(--sd-drop-shadow);', '--shadow-sm: var(--sd-shadow-sm);', diff --git a/packages/tokens/themes/tailwind.css b/packages/tokens/themes/tailwind.css index 710e42135d..36dfb7ac8f 100644 --- a/packages/tokens/themes/tailwind.css +++ b/packages/tokens/themes/tailwind.css @@ -106,8 +106,9 @@ --opacity-80: var(--sd-opacity-80); --opacity-85: var(--sd-opacity-85); --opacity-90: var(--sd-opacity-90); - --outline-color-error: var(--sd-color-border-error, var(--sd-color-error)); - --outline-color-primary: var(--sd-color-border-primary, var(--sd-color-primary)); + --outline-color-error: rgba(var(--sd-color-border-error, var(--sd-color-error))); + --outline-color-primary: rgba(var(--sd-color-border-primary, var(--sd-color-primary))); + --outline-color-white: rgba(var(--sd-color-border-white, var(--sd-color-white))); --radius-default: var(--sd-radius); --radius-full: var(--sd-radius-full); --radius-lg: var(--sd-radius-lg); @@ -293,12 +294,12 @@ outline-style: solid; outline-offset: 2px; outline-width: 2px; - outline-color: rgba(var(--outline-color-primary)); + outline-color: var(--outline-color-primary); } @utility focus-outline-inverted { outline-style: solid; outline-offset: 2px; outline-width: 2px; - outline-color: rgba(var(--outline-color-white)); + outline-color: var(--outline-color-white); } \ No newline at end of file