refactor: add shadow-brutal class & remove unused cn utility

Author: Josem1801

js/react/lib/components/dropdown-tree/dropdown-tree.subject.tsx

@@ -3,7 +3,6 @@ import { ArrowDown } from "@/icons";
 import { Badge } from "../badge";
 import { Level } from "../level";
 import { TopicElement } from "./dropdown-tree.types";
-import { cn } from "@/utils/tw-merge";
 import { Radio } from "../radio";
 
 type SubjectProps = PropsWithChildren &
@@ -17,7 +16,7 @@ export const DropdownTreeSubject = ({
   ...rest
 }: SubjectProps) => {
   return (
-    <details className={cn(["rustlanges-dropdown-tree-subject"])}>
+    <details className="rustlanges-dropdown-tree-subject">
       <summary>
         <Badge type="text" variant={state} />
         <Level as="span" variant={level} />

js/react/showcase/styles.css

@@ -4,7 +4,3 @@
 html {
   background: var(--color-gray-300);
 }
-
-@utility shadow-brutal {
-  box-shadow: 2px 2px 0px #000;
-}

styles/components/button.css

@@ -49,7 +49,7 @@
   }
 
   .rustlanges-button--icon {
-    @apply p-0! size-10 aspect-square rounded-full border;
+    @apply p-0! aspect-square size-10 rounded-full border;
     @apply bg-light border-black text-black;
 
     @variant hover {

styles/components/dropdown-tree-end.css

@@ -1,7 +1,6 @@
 @layer component {
   .dropdown-tree-end {
-    box-shadow: 2px 2px 0px 0px #000000;
-    @apply grid h-fit w-full rounded-xl border border-black px-4 py-2.5 text-left;
+    @apply shadow-brutal grid h-fit w-full rounded-xl border border-black px-4 py-2.5 text-left;
     @apply bg-secondary-50 text-neutral-950;
     @apply dark:bg-secondary-950 dark:text-neutral-50;
 

styles/components/dropdown-tree-start.css

@@ -22,16 +22,13 @@
   }
 
   .rustlanges-dropdown-tree-start--extended {
-    box-shadow: 2px 2px 0px 0px #000000;
-    box-sizing: content-box;
-    @apply rounded-xl border border-black;
+    @apply shadow-brutal rounded-xl border border-black;
     @apply dark:bg-secondary-950 bg-secondary-50;
   }
 
   .rustlanges-dropdown-tree-start--default {
     & > summary {
-      box-shadow: 2px 2px 0px 0px #000000;
-      @apply mb-4 gap-4 rounded-2xl border border-black;
+      @apply shadow-brutal mb-4 gap-4 rounded-2xl border border-black;
       @apply dark:bg-secondary-950 bg-secondary-50;
     }
 

styles/components/dropdown-tree-subject.css

@@ -1,7 +1,6 @@
 @layer component {
   .rustlanges-dropdown-tree-subject {
-    box-shadow: 2px 2px 0px 0px #000000;
-    @apply relative ml-6 flex items-center rounded-xl border border-black;
+    @apply shadow-brutal relative ml-6 flex items-center rounded-xl border border-black;
     @apply bg-light;
     @apply dark:bg-dark;
 

styles/utilities/shadow.css

@@ -4,3 +4,7 @@
     box-shadow: 2px 2px 0 0 --value(--color- *);
   }
 }
+
+@utility shadow-brutal {
+  box-shadow: 2px 2px 0 0 #000000;
+}