radio group updates

Author: huntabyte

src/components/demos/radio-group-demo.svelte

@@ -4,32 +4,32 @@
 
 <RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="amazing">Amazing</Label.Root>
 	</div>
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground "
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="average">Average</Label.Root>
 	</div>
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="terrible">Terrible</Label.Root>
 	</div>