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

packages/web/src/scss/components/Radio/_Radio.scss

@@ -1,4 +1,8 @@
 // 1. Use `box-shadow` to ensure the state of the radio is visible when printed.
+// 2. We need to set the background-color of the non-disabled Radio input to initial color when it is hovered
+//    or active, because we need it contrasting with the background color.
+// 3. We need to set the color of the validation text and helper text to inherit when the Item is hovered or active,
+//    because we need it contrasting with the background color.
 
 @use 'sass:map';
 @use '../../theme/form-fields' as form-fields-theme;
@@ -20,11 +24,11 @@ $_field-name: 'Radio';
     margin: theme.$input-margin;
     font: inherit;
     border-radius: theme.$input-border-radius;
-    background-color: transparent;
+    background-color: form-fields-theme.$input-background-color;
     place-content: center;
 
     &:checked {
-        border-color: form-fields-theme.$inline-field-input-color-checked;
+        border-color: form-fields-theme.$inline-field-input-border-color-checked;
     }
 
     &::before {
@@ -84,16 +88,16 @@ $_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;
     }
-}
 
-.Radio--disabled > .Radio__input::before,
-.Radio > .Radio__input:disabled::before {
-    box-shadow: theme.$input-box-shadow-disabled; // 1.
+    &::before {
+        box-shadow: theme.$input-box-shadow-disabled; // 1.
+    }
 }
 
 .Radio--item {
@@ -106,17 +110,22 @@ $_field-name: 'Radio';
     @include form-fields-tools.item-disabled();
 }
 
-// stylelint-disable selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
-.Radio--item .Radio__input:checked ~ .Radio__label,
-.Radio--item .Radio__input:checked ~ .Radio__text > .Radio__label {
-    // stylelint-enable selector-max-class, selector-max-compound-selectors, selector-max-specificity
-    @include form-fields-tools.item-label-checked();
+.Radio--item .Radio__label {
+    @include form-fields-tools.item-label();
 }
 
 .Radio--item .Radio__helperText {
     @include form-fields-tools.item-helper-text();
 }
 
+// stylelint-disable selector-max-specificity -- 2.
+.Radio--item:not(.Radio--disabled) .Radio__input:hover:not(:checked),
+.Radio--item:not(.Radio--disabled) .Radio__input:active:not(:checked) {
+    background-color: form-fields-theme.$input-background-color;
+}
+// stylelint-enable selector-max-specificity
+
+// 3.
 .Radio--item:not(.Radio--disabled):hover .Radio__helperText,
 .Radio--item:not(.Radio--disabled):active .Radio__helperText {
     color: inherit;

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;
+    form-fields-theme.$inline-field-input-background-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;

packages/web/src/scss/components/index.scss

@@ -21,8 +21,7 @@
 
 // @forward 'Pill';
 @forward 'ProductLogo';
-
-// @forward 'Radio';
+@forward 'Radio';
 @forward 'ScrollView';
 
 // @forward 'Select';

tests/e2e/demo-components-compare.spec.ts

@@ -16,7 +16,6 @@ const IGNORED_TESTS: string[] = [
   'Item',
   'Link',
   'Pill',
-  'Radio',
   'Select',
   'Spinner',
   'Stack',