Merge pull request #43 from getpingback/fix/radio-colors

fix: radio colors
getpingback · Nov 26, 2024 · 26396ed · 26396ed
2 parents 99eab3d + 978f8b0
commit 26396ed
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 117 deletions.
diff --git a/src/components/radio-group/radio-group.tsx b/src/components/radio-group/radio-group.tsx
@@ -2,50 +2,38 @@ import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { cn } from '@/lib/utils';
 
-interface RadioGroupProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
   direction?: 'horizontal' | 'vertical';
 }
 
 interface RadioItemProps extends RadioGroupPrimitive.RadioGroupItemProps {
   children?: React.ReactNode;
 }
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ children, direction = 'horizontal', ...props }, ref) => (
-  <RadioGroupPrimitive.Root
-    ref={ref}
-    className={cn('flex gap-1', { 'flex-col': direction === 'horizontal' })}
-    {...props}
-  >
-    {children}
-  </RadioGroupPrimitive.Root>
-));
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ children, direction = 'horizontal', ...props }, ref) => (
+    <RadioGroupPrimitive.Root ref={ref} className={cn('flex gap-1', { 'flex-col': direction === 'horizontal' })} {...props}>
+      {children}
+    </RadioGroupPrimitive.Root>
+  )
+);
 
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioItem = ({
-  id,
-  value,
-  children,
-  disabled,
-  ...props
-}: RadioItemProps) => (
+const RadioItem = ({ id, value, children, disabled, ...props }: RadioItemProps) => (
   <div className="flex items-center gap-2 h-8 rounded-lg w-fit transition duration-200 py-1 px-2">
     <RadioGroupPrimitive.Item
       value={value}
       id={id}
       disabled={disabled}
-      className="peer border border-input-outline w-4 h-4 rounded-full enabled:hover:ring-8 enabled:hover:ring-coolGray-500/10 aria-checked:ring-input-informative aria-checked:border-4 enabled:aria-checked:border-input-filled transition duration-200 enabled:hover:cursor-pointer disabled:border-input-outline/45 disabled:hover:cursor-not-allowed"
+      className="peer border border-solid border-input-outline w-4 h-4 rounded-full enabled:hover:ring-8 enabled:hover:ring-input-outline-hover aria-checked:ring-input-selected-hover aria-checked:border-4 enabled:aria-checked:border-input-selected transition duration-200 enabled:hover:cursor-pointer disabled:border-input-outline/45 disabled:hover:cursor-not-allowed"
       {...props}
     >
       <RadioGroupPrimitive.Indicator />
     </RadioGroupPrimitive.Item>
 
     <label
-      className="text-secondary-foreground text-sm peer-hover:cursor-pointer peer-disabled:hover:cursor-not-allowed peer-focus:underline duration-200 transition peer-enabled:peer-aria-checked:text-highlighted-foreground peer-enabled:peer-aria-checked:decoration-input-filled peer-disabled:text-secondary-foreground/45"
+      className="text-secondary-foreground text-sm peer-hover:cursor-pointer peer-disabled:hover:cursor-not-allowed peer-focus:underline duration-200 transition peer-enabled:peer-aria-checked:text-highlighted-foreground peer-enabled:peer-aria-checked:decoration-input-selected peer-disabled:text-secondary-foreground/45"
       htmlFor={id}
     >
       {children}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -34,22 +34,18 @@
     --border-divider-color: #e4e4e7;
     --border-cards-color: #3f3f4614;
     --border-input_filled-color: #9061f9;
-    --border-button_outlined-color: #71717a;
 
     --background-informative: #9061f914;
 
-    --bottom_sheet-2: 0px 0px 1px 1px rgba(0, 0, 0, 0.04),
-      0px 4px 16px -2px rgba(0, 0, 0, 0.08);
-    --modals-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.04),
-      0px -6px 24px -3px rgba(0, 0, 0, 0.08);
-    --dropdown-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.04),
-      0px 10px 40px -5px rgba(0, 0, 0, 0.08);
+    --bottom_sheet-2: 0px 0px 1px 1px rgba(0, 0, 0, 0.04), 0px 4px 16px -2px rgba(0, 0, 0, 0.08);
+    --modals-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.04), 0px -6px 24px -3px rgba(0, 0, 0, 0.08);
+    --dropdown-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.04), 0px 10px 40px -5px rgba(0, 0, 0, 0.08);
 
     --button-solid-shadow: 0px 0px 0px 3px #9061f940;
 
     --list-hightlight--hover: 0px 0px 0px 3px rgba(14, 159, 110, 0.12);
     --list-actived: #9061f914;
-    --list-hover: #71717a0a;
+    --list-hover: #71717a14;
     --list-hightlight: rgba(14, 159, 110, 0.04);
     --list-label_default: #71717a;
 
@@ -70,11 +66,7 @@
     --text-error_accent: #c81e1e;
     --text-money: #0e9f6e;
 
-    --palette-gradiente-active_menu: linear-gradient(
-      270deg,
-      #7e3af200 0%,
-      #7e3af20b 100%
-    );
+    --palette-gradiente-active_menu: linear-gradient(270deg, #7e3af200 0%, #7e3af20b 100%);
 
     --icons-default: #71717a;
   }
@@ -110,11 +102,9 @@
     --border-cards-color: #fafafa14;
 
     --bottom_sheet-2: 0px 0px 1px 1px #0000007a, 0px -4px 16px -2px #0000007a;
-    --modals-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.04),
-      0px -6px 24px -3px rgba(0, 0, 0, 0.08);
+    --modals-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.04), 0px -6px 24px -3px rgba(0, 0, 0, 0.08);
     --button-solid-shadow: 0px 0px 0px 3px #9061f940;
-    --dropdown-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.04),
-      0px 10px 40px -5px rgba(0, 0, 0, 0.08);
+    --dropdown-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.04), 0px 10px 40px -5px rgba(0, 0, 0, 0.08);
 
     --list-hightlight--hover: 0px 0px 0px 3px rgba(14, 159, 110, 0.12);
     --list-actived: #ac94fa14;
@@ -139,11 +129,7 @@
     --text-error_accent: #f98080;
     --text-money: #31c48d;
 
-    --palette-gradiente-active_menu: linear-gradient(
-      270deg,
-      #ac94fa 0%,
-      #ac94fa00 100%
-    );
+    --palette-gradiente-active_menu: linear-gradient(270deg, #ac94fa 0%, #ac94fa00 100%);
 
     --icons-default: #e4e4e7;
   }