feat: update radio style

traefik · Jun 27, 2023 · 44baca7 · 44baca7
1 parent ea75108
commit 44baca7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/components/Radio/Radio.themes.ts b/components/Radio/Radio.themes.ts
@@ -15,11 +15,11 @@ export namespace Theme {
   type Factory = (primaryColor: ColorInfo) => Colors;
 
   export const getLight: Factory = (primaryColor) => ({
-    radioIndicator: tinycolor(primaryColor.value).darken(20).toHslString(),
+    radioIndicator: '$primary',
     radioBorder: '$deepBlue6',
     radioHoverBg: 'transparent',
-    radioHoverBorder: tinycolor(primaryColor.value).darken(20).toHslString(),
-    radioFocusBorder: tinycolor(primaryColor.value).darken(20).toHslString(),
+    radioHoverBorder: '$primary',
+    radioFocusBorder: '$primary',
     radioDisabledBg: '$deepBlue3',
     radioDisabledBorder: '$deepBlue5',
     radioIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),

diff --git a/components/Radio/Radio.tsx b/components/Radio/Radio.tsx
@@ -16,10 +16,10 @@ export const INDICATOR_BASE_STYLES = {
   '&::after': {
     content: '""',
     display: 'block',
-    width: '8px',
-    height: '8px',
+    width: '7px',
+    height: '7px',
     borderRadius: '$round',
-    backgroundColor: '$radioIndicator',
+    backgroundColor: '$contentBg',
   },
 };
 
@@ -50,13 +50,15 @@ export const RADIO_BASE_STYLES = {
   color: '$hiContrast',
   boxShadow: 'inset 0 0 0 1px $colors$radioBorder',
   overflow: 'hidden',
+  '&[data-state=checked]': {
+    backgroundColor: '$radioIndicator',
+  },
 };
 const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
   '@hover': {
     '&:hover': {
       cursor: 'pointer',
       boxShadow: 'inset 0 0 0 1px $colors$radioHoverBorder',
-      backgroundColor: '$radioHoverBg',
     },
   },
   '&:focus-visible': {
@@ -66,14 +68,16 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
 
   '&:disabled': {
     pointerEvents: 'none',
-    backgroundColor: '$radioDisabledBg',
     '&::placeholder': {
       color: '$radioDisabledText',
     },
+    '&[data-state=checked]': {
+      backgroundColor: '$radioIndicatorDisabledBg',
+    },
 
     [`& ${StyledIndicator}`]: {
       '&::after': {
-        backgroundColor: '$radioIndicatorDisabledBg',
+        backgroundColor: '$radioDisabledBg',
       },
     },
   },

diff --git a/components/RadioAccordion/RadioAccordion.tsx b/components/RadioAccordion/RadioAccordion.tsx
@@ -46,25 +46,18 @@ const StyledRadio = styled('div', RADIO_BASE_STYLES, {
   width: 18,
   height: 18,
   mr: '$2',
-});
-
-const StyledIndicator = styled('div', INDICATOR_BASE_STYLES, {
-  '&::after': {
-    '[data-state=open] &': {
-      backgroundColor: '$radioIndicator',
-    },
-    '[data-state=closed] &': {
-      backgroundColor: 'transparent',
-    },
+  '[data-state=open] &': {
+    backgroundColor: '$radioIndicator',
   },
 });
 
+const StyledIndicator = styled('div', INDICATOR_BASE_STYLES);
+
 const StyledRadioAccordionTrigger = styled(StyledAccordionTrigger, {
   '@hover': {
     '&:hover': {
       [`& ${StyledRadio}`]: {
         boxShadow: 'inset 0 0 0 1px $colors$radioHoverBorder',
-        backgroundColor: '$radioHoverBg',
       },
     },
   },