diff --git a/packages/web/src/scss/components/Radio/_Radio.scss b/packages/web/src/scss/components/Radio/_Radio.scss index e185d1f7fa..de41e28f9a 100644 --- a/packages/web/src/scss/components/Radio/_Radio.scss +++ b/packages/web/src/scss/components/Radio/_Radio.scss @@ -84,10 +84,11 @@ $_field-name: 'Radio'; .Radio--disabled > .Radio__input, .Radio > .Radio__input:disabled { - border-color: form-fields-theme.$input-color-disabled; + border-color: form-fields-theme.$input-border-color-disabled; + background-color: form-fields-theme.$input-background-color-disabled; &:checked { - border-color: form-fields-theme.$input-color-disabled; + border-color: form-fields-theme.$input-border-color-disabled; } } diff --git a/packages/web/src/scss/components/Radio/_theme.scss b/packages/web/src/scss/components/Radio/_theme.scss index f4e43062c4..7a905fcdd1 100644 --- a/packages/web/src/scss/components/Radio/_theme.scss +++ b/packages/web/src/scss/components/Radio/_theme.scss @@ -1,16 +1,16 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../../settings/transitions'; @use '../../theme/form-fields' as form-fields-theme; -$input-border-radius: 50%; +$input-border-radius: global-tokens.$radius-full; $input-size: 20px; -$input-margin: 2px; +$input-margin: global-tokens.$space-200; $input-inner-dot-size: 10px; -$input-box-shadow-x: tokens.$space-600; -$input-box-shadow-y: tokens.$space-600; +$input-box-shadow-x: global-tokens.$space-700; +$input-box-shadow-y: global-tokens.$space-700; $input-box-shadow-before: inset $input-box-shadow-x $input-box-shadow-y form-fields-theme.$inline-field-input-color-checked; $input-box-shadow-disabled: inset $input-box-shadow-x $input-box-shadow-y form-fields-theme.$input-color-disabled; $input-transition-duration: transitions.$duration-100; $input-transition-timing: transitions.$timing-eased-in-out; -$input-focus-shadow: tokens.$focus; +$input-focus-shadow: global-tokens.$focus; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 8872b44246..558bcd5398 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -20,7 +20,8 @@ // @forward 'Modal'; // @forward 'Pagination'; // @forward 'Pill'; -// @forward 'Radio'; +@forward 'Radio'; + // @forward 'ScrollView'; // @forward 'Select'; @forward 'Stack'; diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss index 152920dade..863731150a 100644 --- a/packages/web/src/scss/theme/_form-fields.scss +++ b/packages/web/src/scss/theme/_form-fields.scss @@ -5,6 +5,9 @@ $gap: global-tokens.$space-500; $input-typography: global-tokens.$body-medium-regular; $input-color-disabled: var(--#{globals.$prefix}color-disabled-text); +$input-background: var(--#{globals.$prefix}color-background-form-field-default); +$input-background-hover: var(--#{globals.$prefix}color-background-form-field-hover); +$input-background-active: var(--#{globals.$prefix}color-background-form-field-active); $input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); $input-border-color-success: var(--#{globals.$prefix}color-border-interactive-success); $input-border-color-warning: var(--#{globals.$prefix}color-border-interactive-warning); diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss index 72110b8ef5..e93a97eb3e 100644 --- a/packages/web/src/scss/tools/_form-fields.scss +++ b/packages/web/src/scss/tools/_form-fields.scss @@ -73,12 +73,23 @@ appearance: none; color: form-fields-theme.$inline-field-input-color-unchecked; border: form-fields-theme.$inline-field-input-outline-width solid currentcolor; + background-color: form-fields-theme.$input-background; cursor: cursors.$form-fields; &:focus-visible { outline: 0; box-shadow: form-fields-theme.$input-focus-shadow; } + + @media (hover: hover) { + &:hover { + background-color: form-fields-theme.$input-background-hover; + } + } + + &:active { + background-color: form-fields-theme.$input-background-active; + } } @mixin box-field-input() { diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index 144f1a1b83..f6ba84daa8 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -22,7 +22,6 @@ const IGNORED_TESTS: string[] = [ 'Modal', 'Pagination', 'Pill', - 'Radio', 'ScrollView', 'Select', 'Spinner', diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png index cdc054aefe..e31bf23539 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png differ