From 18eeef9d357c7fa7321248d60fd58c898d1a0f97 Mon Sep 17 00:00:00 2001
From: Robin Cussol <me@robincussol.com>
Date: Fri, 31 May 2024 14:33:17 +0200
Subject: [PATCH] feat(Radio): update component visually to match latest Figma

The task was to only update the 'selected' state (both in 'normal' and
'disabled' states), but I noticed additional inconsistencies between
Figma and the current state.

Resolves FEPLT-2012
---
 packages/orbit-components/src/Radio/index.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/orbit-components/src/Radio/index.tsx b/packages/orbit-components/src/Radio/index.tsx
index 09dc93b465..045592f1ad 100644
--- a/packages/orbit-components/src/Radio/index.tsx
+++ b/packages/orbit-components/src/Radio/index.tsx
@@ -33,10 +33,10 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         !disabled && [
           !checked &&
             (hasError
-              ? "[&>.orbit-radio-icon-container]:border-form-element-error [&>.orbit-radio-icon-container]:hover:border-form-element-error-hover [&>.orbit-radio-icon-container]:active:border-form-element-error "
+              ? "[&>.orbit-radio-icon-container]:border-form-element-error [&>.orbit-radio-icon-container]:hover:border-form-element-error-hover [&>.orbit-radio-icon-container]:active:border-form-element-error"
               : "[&>.orbit-radio-icon-container]:border-form-element [&>.orbit-radio-icon-container]:hover:border-form-element-hover [&>.orbit-radio-icon-container]:active:border-form-element-active"),
           checked &&
-            "[&>.orbit-radio-icon-container]:border-form-element-focus [&>.orbit-radio-icon-container]:bg-blue-normal active:border-form-element-focus",
+            "[&>.orbit-radio-icon-container]:border-form-element-focus active:border-form-element-focus [&>.orbit-radio-icon-container]:bg-white-normal",
         ],
       )}
     >
@@ -64,18 +64,21 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "flex flex-none items-center justify-center",
             "size-icon-medium rounded-full",
             "duration-fast scale-100 transition-all ease-in-out",
-            "lm:border border-[2px] border-solid",
+            "lm:border border-solid",
+            checked ? "border-[2px]" : "border-[1px]",
             "active:scale-95",
-            "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
-            disabled
-              ? "bg-form-element-disabled-background border-transparent"
-              : "bg-form-element-background",
+            !disabled &&
+              (hasError && !checked
+                ? "peer-focus:outline-red-light"
+                : "peer-focus:outline-blue-light"),
+            "peer-focus:outline peer-focus:outline-2",
+            disabled ? "bg-cloud-light border-cloud-dark" : "bg-form-element-background",
           )}
         >
           <span
             className={cx(
-              "size-xs rounded-full",
-              disabled ? "bg-cloud-light" : "bg-form-element-background",
+              "size-[10px] rounded-full",
+              disabled ? "bg-cloud-dark" : "bg-blue-normal",
               checked ? "visible" : "invisible",
             )}
           />