clean global css and use standard convention using utility classes to style components

Author: pettinarip

src/styles/global.css

@@ -213,17 +213,4 @@
   samp {
     @apply font-monospace text-base leading-base;
   }
-}
-
-@layer components {
-  .accordion-trigger {
-    @apply flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast;
-  }
-  .accordion-content {
-    @apply overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down;
-  }
-
-  .accordion-indicator {
-    @apply size-[1em] shrink-0 text-2xl transition-transform duration-200;
-  }
-}
+}

tailwind/ui/accordion.tsx

@@ -10,7 +10,11 @@ const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={className} {...props} />
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={className}
+    {...props}
+  />
 ))
 AccordionItem.displayName = "AccordionItem"
 
@@ -21,11 +25,14 @@ const AccordionTrigger = React.forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
-      className={cn("accordion-trigger", className)}
+      className={cn(
+        "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
+        className
+      )}
       {...props}
     >
       {children}
-      <MdChevronRight className="accordion-indicator" />
+      <MdChevronRight className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -37,7 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={"accordion-content"}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn("p-2 md:p-4", className)}>{children}</div>
@@ -46,4 +53,4 @@ const AccordionContent = React.forwardRef<
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
+export { Accordion, AccordionContent,AccordionItem, AccordionTrigger }