Skip to content

Commit 72d1381

Browse files
committed
Improved the Switch styles
1 parent 113d2e4 commit 72d1381

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

apps/webapp/app/components/primitives/Switch.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ const variations = {
88
large: {
99
container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition focus-custom",
1010
root: "h-6 w-11",
11-
thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
12-
text: "text-sm text-charcoal-400 group-hover:text-charcoal-200 transition",
11+
thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
12+
text: "text-sm text-text-dimmed",
1313
},
1414
small: {
1515
container:
1616
"flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
1717
root: "h-3 w-6",
18-
thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
19-
text: "text-xs",
18+
thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
19+
text: "text-xs text-text-dimmed",
2020
},
2121
};
2222

@@ -38,7 +38,7 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
3838
) : null}
3939
<div
4040
className={cn(
41-
"inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-text-link group-data-[state=unchecked]:bg-charcoal-700",
41+
"inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-blue-500 group-data-[state=unchecked]:bg-charcoal-700 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50",
4242
root
4343
)}
4444
>

0 commit comments

Comments
 (0)