diff --git a/packages/canary/src/components/accordion.tsx b/packages/canary/src/components/accordion.tsx
index 8c85cd71a..c44ecefcc 100644
--- a/packages/canary/src/components/accordion.tsx
+++ b/packages/canary/src/components/accordion.tsx
@@ -84,7 +84,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>
diff --git a/packages/canary/src/components/badge.tsx b/packages/canary/src/components/badge.tsx
index c0f0dcaf8..5e1505527 100644
--- a/packages/canary/src/components/badge.tsx
+++ b/packages/canary/src/components/badge.tsx
@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'h-5 px-1 text-12 leading-none',
-        xs: 'px-1.5 py-0 text-11 font-light',
+        sm: 'text-12 h-5 px-1 leading-none',
+        xs: 'text-11 px-1.5 py-0 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'h-[18px] px-2 text-12'
+        '18': 'text-12 h-[18px] px-2'
       },
       borderRadius: {
         default: '',
diff --git a/packages/canary/src/components/button.tsx b/packages/canary/src/components/button.tsx
index 8b9f3397b..88b47950c 100644
--- a/packages/canary/src/components/button.tsx
+++ b/packages/canary/src/components/button.tsx
@@ -6,15 +6,15 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        outline: 'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'text-foreground-8 hover:bg-background-4 hover:text-foreground-1',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
diff --git a/packages/canary/src/components/card.tsx b/packages/canary/src/components/card.tsx
index 0cf8d5190..c1f87035e 100644
--- a/packages/canary/src/components/card.tsx
+++ b/packages/canary/src/components/card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
+const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
   variants: {
     variant: {
       default: '',
diff --git a/packages/canary/src/components/command.tsx b/packages/canary/src/components/command.tsx
index 0287a9857..251ba6416 100644
--- a/packages/canary/src/components/command.tsx
+++ b/packages/canary/src/components/command.tsx
@@ -28,7 +28,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>
diff --git a/packages/canary/src/components/dialog.tsx b/packages/canary/src/components/dialog.tsx
index c41d960a0..04dc27458 100644
--- a/packages/canary/src/components/dialog.tsx
+++ b/packages/canary/src/components/dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/packages/canary/src/components/drawer.tsx b/packages/canary/src/components/drawer.tsx
index a5d6675ff..da578589a 100644
--- a/packages/canary/src/components/drawer.tsx
+++ b/packages/canary/src/components/drawer.tsx
@@ -36,7 +36,7 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
diff --git a/packages/canary/src/components/dropdown-menu.tsx b/packages/canary/src/components/dropdown-menu.tsx
index 568281734..b8534e57b 100644
--- a/packages/canary/src/components/dropdown-menu.tsx
+++ b/packages/canary/src/components/dropdown-menu.tsx
@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
-      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
-        <Icon className="h-[7px] text-icons-5" name="checkbox" />
+    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex size-4 items-center justify-center rounded-sm border">
+      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex size-full items-center justify-center">
+        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>
diff --git a/packages/canary/src/components/effects/spotlights-box.tsx b/packages/canary/src/components/effects/spotlights-box.tsx
index 536f2d320..3a819be9b 100644
--- a/packages/canary/src/components/effects/spotlights-box.tsx
+++ b/packages/canary/src/components/effects/spotlights-box.tsx
@@ -88,7 +88,7 @@ function Root({ highlightTop = '', highlightBottom = '', logo, logoSize = 84, ch
 
   return (
     <div
-      className="group relative h-[220px] w-full cursor-pointer overflow-hidden rounded-lg border border-primary/5 duration-150 ease-in-out"
+      className="border-primary/5 group relative h-[220px] w-full cursor-pointer overflow-hidden rounded-lg border duration-150 ease-in-out"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -98,7 +98,7 @@ function Root({ highlightTop = '', highlightBottom = '', logo, logoSize = 84, ch
         height="100%"
         className="absolute inset-0 size-full rounded-lg brightness-110 duration-150 ease-in-out group-hover:brightness-125"
       />
-      <div className="absolute inset-px rounded-lg bg-background/40" />
+      <div className="bg-background/40 absolute inset-px rounded-lg" />
       <div className="absolute inset-0 flex items-center justify-center">
         {logo && <Icon name={logo} size={logoSize} />}
       </div>
diff --git a/packages/canary/src/components/input-otp.tsx b/packages/canary/src/components/input-otp.tsx
index 7a8adb019..656a2d218 100644
--- a/packages/canary/src/components/input-otp.tsx
+++ b/packages/canary/src/components/input-otp.tsx
@@ -51,7 +51,7 @@ const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
         {char}
         {hasFakeCaret && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-            <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+            <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
           </div>
         )}
       </div>
diff --git a/packages/canary/src/components/list-actions.tsx b/packages/canary/src/components/list-actions.tsx
index 094588ef3..2ce54b0db 100644
--- a/packages/canary/src/components/list-actions.tsx
+++ b/packages/canary/src/components/list-actions.tsx
@@ -32,8 +32,8 @@ function Right({ children }: { children: React.ReactNode }) {
 function Dropdown({ title, items, onChange, selectedValue }: DropdownProps) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="flex cursor-pointer items-center gap-1.5 text-tertiary-background duration-100 ease-in-out hover:text-primary">
-        {selectedValue && <span className="size-[4px] rounded-full bg-primary"></span>}
+      <DropdownMenuTrigger className="text-tertiary-background hover:text-primary flex cursor-pointer items-center gap-1.5 duration-100 ease-in-out">
+        {selectedValue && <span className="bg-primary size-[4px] rounded-full"></span>}
         <Text
           size={2}
           className={cn('text-primary/80', {
diff --git a/packages/canary/src/components/navbar-project-chooser.tsx b/packages/canary/src/components/navbar-project-chooser.tsx
index f40e89352..120000277 100644
--- a/packages/canary/src/components/navbar-project-chooser.tsx
+++ b/packages/canary/src/components/navbar-project-chooser.tsx
@@ -32,7 +32,7 @@ function Root({ logo }: ProjectProps) {
         showOnFocus
       />
       <Dialog open={isSearchDialogOpen} onOpenChange={closeSearchDialog}>
-        <DialogContent className="h-[600px] max-w-[800px] border-border bg-primary-background">
+        <DialogContent className="border-border bg-primary-background h-[600px] max-w-[800px]">
           <DialogHeader>
             <DialogTitle>Search</DialogTitle>
             <DialogDescription>
diff --git a/packages/canary/src/components/navbar-user.tsx b/packages/canary/src/components/navbar-user.tsx
index 88358246c..297229fd0 100644
--- a/packages/canary/src/components/navbar-user.tsx
+++ b/packages/canary/src/components/navbar-user.tsx
@@ -39,7 +39,7 @@ const UserBlock = ({ username, role, url, isButton = false, className }: UserBlo
       )}
     >
       {isButton && (
-        <div className="absolute -inset-2 rounded duration-100 ease-in-out group-hover:bg-background-4 group-data-[state=open]:bg-background-4" />
+        <div className="group-hover:bg-background-4 group-data-[state=open]:bg-background-4 absolute -inset-2 rounded duration-100 ease-in-out" />
       )}
       <div className="col-start-1 row-span-2">
         <Avatar className="overflow-hidden rounded-md" size="8">
@@ -47,9 +47,9 @@ const UserBlock = ({ username, role, url, isButton = false, className }: UserBlo
           <AvatarFallback>{getInitials(username)}</AvatarFallback>
         </Avatar>
       </div>
-      <p className="col-start-2 row-start-1 text-13 font-medium leading-none text-foreground-1">{username}</p>
+      <p className="text-13 text-foreground-1 col-start-2 row-start-1 font-medium leading-none">{username}</p>
       {!!role && (
-        <p className="col-start-2 row-start-2 mt-0.5 text-13 font-normal leading-none text-foreground-4">{role}</p>
+        <p className="text-13 text-foreground-4 col-start-2 row-start-2 mt-0.5 font-normal leading-none">{role}</p>
       )}
     </Tag>
   )
@@ -70,7 +70,7 @@ const Root: React.FC<{
       </DropdownMenuTrigger>
       {menuItems && (
         <DropdownMenuContent
-          className="ml-3 w-[230px] bg-background-1"
+          className="bg-background-1 ml-3 w-[230px]"
           align="start"
           sideOffset={-40}
           alignOffset={187}
diff --git a/packages/canary/src/components/navbar/index.tsx b/packages/canary/src/components/navbar/index.tsx
index f5d89d94c..6c62abe71 100644
--- a/packages/canary/src/components/navbar/index.tsx
+++ b/packages/canary/src/components/navbar/index.tsx
@@ -124,9 +124,9 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
         />
         <div className="z-10 col-start-1 row-span-full mt-px flex items-center">
           {icon ? (
-            <div className="sub-menu-icon-bg relative flex size-8 place-content-center place-items-center rounded border border-borders-1 bg-background-2">
+            <div className="sub-menu-icon-bg border-borders-1 bg-background-2 relative flex size-8 place-content-center place-items-center rounded border">
               <Icon
-                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground-3"
+                className="text-foreground-3 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
                 name="sub-menu-ellipse"
                 size={18}
               />
@@ -148,7 +148,7 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
             {text}
           </Text>
           {!!description && (
-            <Text className="z-10 w-full truncate leading-4 text-foreground-4 duration-0 ease-in-out" size={1} truncate>
+            <Text className="text-foreground-4 z-10 w-full truncate leading-4 duration-0 ease-in-out" size={1} truncate>
               {description}
             </Text>
           )}
@@ -193,7 +193,7 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
 
 function Footer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sticky bottom-0 z-20 grid h-[72px] items-center border-t border-borders-5 px-4">{children}</div>
+    <div className="border-borders-5 sticky bottom-0 z-20 grid h-[72px] items-center border-t px-4">{children}</div>
   )
 }
 
diff --git a/packages/canary/src/components/navigation-menu.tsx b/packages/canary/src/components/navigation-menu.tsx
index b8de9bddc..bea94f816 100644
--- a/packages/canary/src/components/navigation-menu.tsx
+++ b/packages/canary/src/components/navigation-menu.tsx
@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+  'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50'
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -102,7 +102,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
diff --git a/packages/canary/src/components/node-group.tsx b/packages/canary/src/components/node-group.tsx
index 20d951a7e..47a35b33c 100644
--- a/packages/canary/src/components/node-group.tsx
+++ b/packages/canary/src/components/node-group.tsx
@@ -37,7 +37,7 @@ function Icon({
         )}
       >
         {simpleNodeIcon ? (
-          <div className="size-[4px] rounded-[1px] bg-primary shadow-sm shadow-primary/10" />
+          <div className="bg-primary shadow-primary/10 size-[4px] rounded-[1px] shadow-sm" />
         ) : (
           <>{children}</>
         )}
diff --git a/packages/canary/src/components/progress.tsx b/packages/canary/src/components/progress.tsx
index c05e04878..13a287459 100644
--- a/packages/canary/src/components/progress.tsx
+++ b/packages/canary/src/components/progress.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 const progressVariants = cva('', {
   variants: {
     variant: {
-      default: 'relative w-full overflow-hidden bg-primary/20',
+      default: 'bg-primary/20 relative w-full overflow-hidden',
       divergence: 'relative w-full overflow-hidden bg-transparent'
     },
     size: {
diff --git a/packages/canary/src/components/radio-group.tsx b/packages/canary/src/components/radio-group.tsx
index fdd1ae277..ccd5e842c 100644
--- a/packages/canary/src/components/radio-group.tsx
+++ b/packages/canary/src/components/radio-group.tsx
@@ -26,7 +26,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-primary" />
+        <CheckIcon className="fill-primary size-3.5" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/packages/canary/src/components/resizable.tsx b/packages/canary/src/components/resizable.tsx
index 79f4f5e58..349623cdc 100644
--- a/packages/canary/src/components/resizable.tsx
+++ b/packages/canary/src/components/resizable.tsx
@@ -27,7 +27,7 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
         <DragHandleDots2Icon className="size-2.5" />
       </div>
     )}
diff --git a/packages/canary/src/components/resource-box.tsx b/packages/canary/src/components/resource-box.tsx
index dae973ff2..bcf11cc79 100644
--- a/packages/canary/src/components/resource-box.tsx
+++ b/packages/canary/src/components/resource-box.tsx
@@ -2,7 +2,7 @@ import { Icon, type IconProps } from './icon'
 
 function Root({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-[233px] flex-col gap-5 rounded-md border bg-muted/25 px-5 py-3 pb-5 pr-4">{children}</div>
+    <div className="bg-muted/25 flex h-[233px] flex-col gap-5 rounded-md border px-5 py-3 pb-5 pr-4">{children}</div>
   )
 }
 
diff --git a/packages/canary/src/components/scroll-area.tsx b/packages/canary/src/components/scroll-area.tsx
index 7ac4ecba1..434c23cc5 100644
--- a/packages/canary/src/components/scroll-area.tsx
+++ b/packages/canary/src/components/scroll-area.tsx
@@ -32,7 +32,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-background-9" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-background-9 relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/packages/canary/src/components/search-box.tsx b/packages/canary/src/components/search-box.tsx
index 1c393ef69..7a5457871 100644
--- a/packages/canary/src/components/search-box.tsx
+++ b/packages/canary/src/components/search-box.tsx
@@ -112,10 +112,10 @@ const Root = forwardRef<HTMLInputElement, SearchBoxProps>(
     return (
       <div className={cn('relative', width === 'full' ? 'w-full' : 'w-96', className)}>
         {hasSearchIcon && (
-          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-icons-1" />
+          <Icon name="search" size={12} className="text-icons-1 absolute left-2.5 top-1/2 -translate-y-1/2" />
         )}
         {hasShortcut && !!shortcutLetter && (
-          <div className="absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border bg-background-3 px-1 text-foreground-2 duration-100 ease-in-out">
+          <div className="bg-background-3 text-foreground-2 absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border px-1 duration-100 ease-in-out">
             <Icon name="apple-shortcut" size={12} />
             <Text size={0} className="text-inherit">
               {shortcutLetter}
diff --git a/packages/canary/src/components/sheet.tsx b/packages/canary/src/components/sheet.tsx
index 1b9beed4d..d1fe2e8dd 100644
--- a/packages/canary/src/components/sheet.tsx
+++ b/packages/canary/src/components/sheet.tsx
@@ -46,16 +46,16 @@ const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Ove
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
         bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
         left: 'inset-y-0 left-0 h-full w-3/4 !animate-none border-r sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
       }
     },
     defaultVariants: {
diff --git a/packages/canary/src/components/slider.tsx b/packages/canary/src/components/slider.tsx
index 8db4481d9..906c1cbdd 100644
--- a/packages/canary/src/components/slider.tsx
+++ b/packages/canary/src/components/slider.tsx
@@ -12,10 +12,10 @@ const Slider = React.forwardRef<
     className={cn('relative flex w-full touch-none select-none items-center', className)}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/packages/canary/src/components/table.tsx b/packages/canary/src/components/table.tsx
index 31a668e72..f6bbd9b9e 100644
--- a/packages/canary/src/components/table.tsx
+++ b/packages/canary/src/components/table.tsx
@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom ',
       asStackedList:
-        'rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-primary/[0.02]'
+        '[&_thead]:bg-primary/[0.02] rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4'
     }
   },
   defaultVariants: {
diff --git a/packages/canary/src/components/tabs.tsx b/packages/canary/src/components/tabs.tsx
index 24be69e3d..d6faf2a64 100644
--- a/packages/canary/src/components/tabs.tsx
+++ b/packages/canary/src/components/tabs.tsx
@@ -5,12 +5,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '../lib/utils'
 
-const tabsListVariants = cva('inline-flex items-center text-muted-foreground', {
+const tabsListVariants = cva('text-muted-foreground inline-flex items-center', {
   variants: {
     variant: {
-      default: 'h-9 justify-center rounded-lg bg-muted p-1',
+      default: 'bg-muted h-9 justify-center rounded-lg p-1',
       underline: 'h-11 justify-center gap-4',
-      navigation: 'h-[44px] w-full justify-start gap-6 border-b border-border-background px-8',
+      navigation: 'border-border-background h-[44px] w-full justify-start gap-6 border-b px-8',
       // TODO: Refactor - merge tabnav and branch variants
       // tabnav is used in existing components and has conflicting styles
       // Future steps:
@@ -18,7 +18,7 @@ const tabsListVariants = cva('inline-flex items-center text-muted-foreground', {
       // 2. Create a unified variant based on branch
       // 3. Update existing components
       tabnav: 'h-[36px] w-full justify-start gap-0',
-      branch: 'flex w-full border-b border-borders-4 px-3'
+      branch: 'border-borders-4 flex w-full border-b px-3'
     }
   },
   defaultVariants: {
@@ -27,20 +27,20 @@ const tabsListVariants = cva('inline-flex items-center text-muted-foreground', {
 })
 
 const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         default:
-          'rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+          'data-[state=active]:bg-background data-[state=active]:text-foreground rounded-md data-[state=active]:shadow',
         underline:
-          'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary data-[state=active]:text-primary',
+          'data-[state=active]:border-primary data-[state=active]:text-primary m-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal',
         navigation:
-          'm-0 h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal text-tertiary-background duration-150 ease-in-out hover:text-primary data-[state=active]:border-tertiary-background data-[state=active]:text-primary',
+          'text-tertiary-background hover:text-primary data-[state=active]:border-tertiary-background data-[state=active]:text-primary m-0 h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal duration-150 ease-in-out',
         tabnav:
-          'm-0 h-[36px] items-center gap-2 rounded-t-md bg-background px-4 text-sm font-normal text-tertiary-background duration-150 ease-in-out tabnav-inactive hover:text-primary data-[state=active]:text-primary data-[state=active]:tabnav-active [&svg]:data-[state=active]:text-primary',
+          'bg-background text-tertiary-background tabnav-inactive hover:text-primary data-[state=active]:text-primary data-[state=active]:tabnav-active [&svg]:data-[state=active]:text-primary m-0 h-[36px] items-center gap-2 rounded-t-md px-4 text-sm font-normal duration-150 ease-in-out',
         branch:
-          '-mb-px h-[34px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-4 data-[state=active]:text-foreground-1'
+          'text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-4 data-[state=active]:text-foreground-1 -mb-px h-[34px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal'
       }
     },
     defaultVariants: {
@@ -50,7 +50,7 @@ const tabsTriggerVariants = cva(
 )
 
 const tabsContentVariants = cva(
-  'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  'ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
   {
     variants: {
       variant: {
@@ -82,9 +82,9 @@ const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsP
         {variant === 'tabnav' ? (
           <div className="relative grid w-full grid-flow-col grid-cols-[auto_1fr] items-end">
             {children}
-            <div className="h-[36px] border-b border-border-background" />
-            <div className="absolute right-full h-[36px] w-[9999px] border-b border-border-background" />
-            <div className="absolute left-full h-[36px] w-[9999px] border-b border-border-background" />
+            <div className="border-border-background h-[36px] border-b" />
+            <div className="border-border-background absolute right-full h-[36px] w-[9999px] border-b" />
+            <div className="border-border-background absolute left-full h-[36px] w-[9999px] border-b" />
           </div>
         ) : (
           children
diff --git a/packages/canary/src/components/toast.tsx b/packages/canary/src/components/toast.tsx
index aeced4539..097c6eaa7 100644
--- a/packages/canary/src/components/toast.tsx
+++ b/packages/canary/src/components/toast.tsx
@@ -23,12 +23,12 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none',
   {
     variants: {
       variant: {
-        default: 'border bg-background text-foreground',
-        destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground'
+        default: 'bg-background text-foreground border',
+        destructive: 'destructive border-destructive bg-destructive text-destructive-foreground group'
       }
     },
     defaultVariants: {
diff --git a/packages/canary/src/components/toggle.tsx b/packages/canary/src/components/toggle.tsx
index 669955a1e..fa2029fa2 100644
--- a/packages/canary/src/components/toggle.tsx
+++ b/packages/canary/src/components/toggle.tsx
@@ -6,12 +6,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../lib/utils'
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         default: 'rounded-md bg-transparent',
-        outline: 'rounded-md border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+        outline: 'border-input hover:bg-accent hover:text-accent-foreground rounded-md border bg-transparent shadow-sm',
         compact: ''
       },
       size: {
diff --git a/packages/canary/src/components/top-bar.tsx b/packages/canary/src/components/top-bar.tsx
index 30793be62..6b8c66bd9 100644
--- a/packages/canary/src/components/top-bar.tsx
+++ b/packages/canary/src/components/top-bar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 function Root({ children }: { children: React.ReactNode }) {
   return (
-    <div className="font-regular grid h-[55px] w-full grid-cols-[1fr_auto] items-center gap-6 border-b border-border-background px-8 text-sm">
+    <div className="font-regular border-border-background grid h-[55px] w-full grid-cols-[1fr_auto] items-center gap-6 border-b px-8 text-sm">
       {children}
     </div>
   )
diff --git a/packages/canary/src/components/treeview.tsx b/packages/canary/src/components/treeview.tsx
index 1e64971b2..936161fdb 100644
--- a/packages/canary/src/components/treeview.tsx
+++ b/packages/canary/src/components/treeview.tsx
@@ -29,7 +29,7 @@ type ExecutionDetail = {
 const getStatusIcon = (status: Status): React.ReactElement => {
   switch (status) {
     case Status.IN_PROGRESS:
-      return <CanaryIcon size={16} name="running" className="animate-spin text-warning" />
+      return <CanaryIcon size={16} name="running" className="text-warning animate-spin" />
     case Status.SUCCESS:
       return <CanaryIcon name="success" size={16} />
     case Status.FAILED:
@@ -246,7 +246,7 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
             <span className="text-muted-foreground">{duration ?? '--'}</span>
           </div>
         </AccordionPrimitive.Trigger>
-        <AccordionPrimitive.Content className="relative h-full overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+        <AccordionPrimitive.Content className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm">
           {element && indicator && <TreeIndicator aria-hidden="true" />}
           <AccordionPrimitive.Root
             dir={direction}