Feat(web): Switch Radio component to v3 design tokens #DS-1447

lmc-eu · Sep 5, 2024 · fd0517c · fd0517c
1 parent 0cf82e1
commit fd0517c
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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