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

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

@@ -1,4 +1,7 @@
-// 1. Use `box-shadow` to ensure the state of the radio is visible when printed.
+// 1. 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.
+// 2. 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,19 +23,19 @@ $_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 {
         content: '';
         width: theme.$input-inner-dot-size;
         height: theme.$input-inner-dot-size;
         border-radius: theme.$input-border-radius;
-        box-shadow: theme.$input-box-shadow-before; // 1.
+        background-color: theme.$input-background-color;
         transform: scale(0);
         transition-property: transform;
         transition-duration: theme.$input-transition-duration;
@@ -47,19 +50,15 @@ $_field-name: 'Radio';
 .Radio__helperText {
     @include form-fields-tools.helper-text();
 
-    margin-left: form-fields-theme.$gap;
+    margin-left: form-fields-theme.$inline-field-gap;
 }
 
-@include form-fields-tools.input-field-validation-states(
-    $_field-name,
-    theme.$input-box-shadow-x,
-    theme.$input-box-shadow-y
-);
+@include form-fields-tools.input-field-validation-states($_field-name);
 
 .Radio__label {
     @include form-fields-tools.inline-field-label();
 
-    margin-left: form-fields-theme.$gap;
+    margin-left: form-fields-theme.$inline-field-gap;
 }
 
 .Radio__label--hidden {
@@ -70,54 +69,60 @@ $_field-name: 'Radio';
     @include form-fields-tools.label-required();
 }
 
-.Radio--disabled {
-    @include form-fields-tools.inline-field-root-disabled();
+.Radio--item {
+    @include form-fields-tools.item();
 }
 
-.Radio--disabled .Radio__label {
-    @include form-fields-tools.label-disabled();
+.Radio--item:is(.Radio--disabled, .Radio.is-disabled),
+.Radio--item:has(.Radio__input:disabled) {
+    @include form-fields-tools.item-disabled();
 }
 
-.Radio--disabled .Radio__helperText {
-    @include form-fields-tools.helper-text-disabled();
+.Radio--item .Radio__label {
+    @include form-fields-tools.item-label();
 }
 
-.Radio--disabled > .Radio__input,
-.Radio > .Radio__input:disabled {
-    border-color: form-fields-theme.$input-color-disabled;
-
-    &:checked {
-        border-color: form-fields-theme.$input-color-disabled;
-    }
+.Radio--item .Radio__helperText {
+    @include form-fields-tools.item-helper-text();
 }
 
-.Radio--disabled > .Radio__input::before,
-.Radio > .Radio__input:disabled::before {
-    box-shadow: theme.$input-box-shadow-disabled; // 1.
+:is(.Radio--disabled, .Radio.is-disabled),
+.Radio:has(.Radio__input:disabled) {
+    @include form-fields-tools.inline-field-root-disabled();
 }
 
-.Radio--item {
-    @include form-fields-tools.item();
-
-    display: flex;
+:is(.Radio--disabled, .Radio.is-disabled) .Radio__label,
+.Radio:has(.Radio__input:disabled) .Radio__label {
+    @include form-fields-tools.label-disabled();
 }
 
-.Radio--item.Radio--disabled {
-    @include form-fields-tools.item-disabled();
+:is(.Radio--disabled, .Radio.is-disabled) .Radio__helperText,
+.Radio:has(.Radio__input:disabled) .Radio__helperText {
+    @include form-fields-tools.helper-text-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();
+:is(.Radio--disabled, .Radio.is-disabled) > .Radio__input,
+.Radio > .Radio__input: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-border-color-disabled;
+    }
+
+    &::before {
+        background-color: theme.$input-background-color-disabled;
+    }
 }
 
-.Radio--item .Radio__helperText {
-    @include form-fields-tools.item-helper-text();
+// stylelint-disable selector-max-specificity -- 1.
+.Radio--item:not(.Radio--disabled, .Radio.is-disabled) .Radio__input:is(:hover, :active):not(:checked, :disabled) {
+    background-color: form-fields-theme.$input-background-color;
 }
 
-.Radio--item:not(.Radio--disabled):hover .Radio__helperText,
-.Radio--item:not(.Radio--disabled):active .Radio__helperText {
+// 2.
+.Radio--item:not(.Radio--disabled, .Radio.is-disabled):is(:hover, :active) .Radio__helperText,
+.Radio--item:is(:hover, :active):not(:has(.Radio__input:disabled)) .Radio__helperText {
     color: inherit;
 }
+// stylelint-enable selector-max-specificity

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

@@ -1,16 +1,13 @@
-@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-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-background-color: form-fields-theme.$inline-field-input-background-color-checked;
+$input-background-color-disabled: 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

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

packages/web/src/scss/tools/_form-fields.scss

@@ -1,3 +1,5 @@
+// 1. Force the color to be printed as-is, without any color adjustment.
+
 @use 'sass:map';
 @use '../settings/cursors';
 @use '../theme/form-fields' as form-fields-theme;
@@ -76,6 +78,7 @@
     border: form-fields-theme.$inline-field-input-border-width solid form-fields-theme.$input-border-color;
     background-color: form-fields-theme.$input-background-color;
     cursor: cursors.$form-fields;
+    print-color-adjust: exact; // 1.
 
     &:focus-visible {
         outline: 0;
@@ -122,7 +125,7 @@
     }
 }
 
-@mixin input-field-validation-states($field-name, $shadow-x: null, $shadow-y: null) {
+@mixin input-field-validation-states($field-name) {
     @each $validation-state-name, $validation-state-value in form-fields-theme.$validation-states {
         @if $field-name == 'FileUploaderInput' {
             :is(.#{$field-name}--#{$validation-state-name}, .#{$field-name}.has-#{$validation-state-name})
@@ -153,7 +156,6 @@
                 @if $field-name == 'Radio' {
                     &::before {
                         background-color: map.get($validation-state-value, input-border-color);
-                        box-shadow: inset $shadow-x $shadow-y map.get($validation-state-value, input-border-color);
                     }
                 }
             }

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

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