fix: use dynamic theming for Accordion component

src/core/Accordion/Accordion.stories.tsx

@@ -6,7 +6,9 @@ import { accordionThemes } from "./types";
 const loremText =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque congue risus id lobortis. Vivamus blandit dolor at ultricies cursus. Phasellus pharetra nunc erat, quis porttitor mauris faucibus in. Donec feugiat dapibus orci et blandit. Duis eleifend accumsan est nec euismod. Proin imperdiet malesuada lacus, a aliquam eros aliquet nec. Sed eu dolor finibus, sodales nisl a, egestas mi. In semper interdum lacinia. Duis malesuada diam quis purus blandit, sit amet imperdiet neque accumsan. Morbi viverra vitae risus ut pellentesque. Praesent ac blandit augue. Aliquam purus lectus, lacinia in semper vitae, dictum eu felis. Donec vel pulvinar eros, id facilisis neque. Aenean odio arcu, accumsan vel est in, lobortis rhoncus ligula. Pellentesque sit amet odio velit.";
 
-const lorem = <p className="mb-16">{loremText}</p>;
+const lorem = (
+  <p className="mb-16 text-neutral-1300 dark:text-neutral-000">{loremText}</p>
+);
 
 const textarea = (
   <textarea
@@ -53,12 +55,11 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => (
     {accordionThemes
       .filter((theme) => !theme.toLowerCase().includes("static"))
       .map((theme) => (
-        <div
-          key={theme}
-          className={`p-16 rounded-lg ${theme.includes("dark") ? "bg-neutral-1300" : ""}`}
-        >
+        <div key={theme} className={"p-16 rounded-lg"}>
           <p
-            className={`ui-text-p3 mb-16 text-center font-mono ${theme.includes("dark") ? "text-neutral-000" : ""}`}
+            className={
+              "ui-text-p3 mb-16 text-center text-neutral-1300 dark:text-neutral-000 font-mono"
+            }
           >
             {theme}
           </p>
@@ -208,7 +209,7 @@ export const StaticAndFullyOpen = {
     docs: {
       description: {
         story:
-          "Setting `fullyOpen` on options will set all sections to be open by default. This is useful for static themes (usable with the `static` and `darkStatic` theme values).",
+          "Setting `fullyOpen` on options will set all sections to be open by default. This is useful for static themes (usable with the `static` theme).",
       },
     },
   },

src/core/Accordion/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { IconName, IconSize } from "../Icon/types";
-import { ColorClass } from "../styles/colors/types";
+import { ColorThemeSet } from "../styles/colors/types";
 
 /**
  * Represents the data structure for an Accordion component.
@@ -39,14 +39,7 @@ export type AccordionIcons = {
   };
 };
 
-export const accordionThemes = [
-  "dark",
-  "light",
-  "transparent",
-  "darkTransparent",
-  "static",
-  "darkStatic",
-] as const;
+export const accordionThemes = ["default", "transparent", "static"] as const;
 
 export type AccordionTheme = (typeof accordionThemes)[number];
 
@@ -57,32 +50,32 @@ export type AccordionThemeColors = {
   /**
    * Background color class for the accordion.
    */
-  bg: ColorClass;
+  bg: ColorThemeSet;
 
   /**
    * Background color when the accordion item is hovered.
    */
-  hoverBg: string;
+  hoverBg: ColorThemeSet;
 
   /**
    * Text color class for the accordion.
    */
-  text: ColorClass;
+  text: ColorThemeSet;
 
   /**
    * Color class for the toggle icon of the accordion.
    */
-  toggleIconColor: ColorClass;
+  toggleIconColor: ColorThemeSet;
 
   /**
    * Optional background color class for selectable accordion items.
    */
-  selectableBg?: ColorClass;
+  selectableBg?: ColorThemeSet;
 
   /**
    * Optional text color class for selectable accordion items.
    */
-  selectableText?: ColorClass;
+  selectableText?: ColorThemeSet;
 
   /**
    * Optional border color for the accordion.

src/core/Accordion/utils.ts

@@ -1,56 +1,33 @@
 import { AccordionTheme, AccordionThemeColors } from "./types";
 
 export const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {
-  dark: {
-    bg: "bg-neutral-1200",
-    hoverBg: "hover:bg-neutral-1100",
-    text: "text-white",
-    toggleIconColor: "text-orange-600",
-    selectableBg: "bg-neutral-300",
-    selectableText: "text-neutral-1300",
-  },
-  light: {
-    bg: "bg-neutral-200",
-    hoverBg: "hover:bg-neutral-300",
-    text: "text-neutral-1300",
-    toggleIconColor: "text-neutral-1000",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-white",
+  default: {
+    bg: "bg-neutral-200 dark:bg-neutral-1100",
+    hoverBg: "hover:bg-neutral-300 dark:hover:bg-neutral-1100",
+    text: "text-neutral-1300 dark:text-white",
+    toggleIconColor: "text-neutral-1000 dark:text-orange-600",
+    selectableBg: "bg-neutral-1200 dark:bg-neutral-300",
+    selectableText: "text-neutral-000 dark:text-neutral-1300",
   },
   transparent: {
-    bg: "bg-transparent",
-    hoverBg: "hover:bg-transparent",
-    text: "text-neutral-1000",
-    toggleIconColor: "text-dark-grey",
-    border: "border-neutral-500 border-b last:border-none",
-  },
-  darkTransparent: {
-    bg: "bg-transparent",
-    hoverBg: "hover:bg-transparent",
-    text: "text-neutral-000",
-    toggleIconColor: "text-orange-600",
-    border: "border-neutral-900 border-b last:border-none",
+    bg: "bg-transparent dark:bg-transparent",
+    hoverBg: "hover:bg-transparent dark:hover:bg-transparent",
+    text: "text-neutral-1000 dark:text-neutral-000",
+    toggleIconColor: "text-dark-grey dark:text-orange-600",
+    border:
+      "border-neutral-500 border-b last:border-none dark:border-neutral-900",
   },
   static: {
-    bg: "bg-neutral-200",
-    hoverBg: "hover:bg-neutral-200",
-    text: "text-neutral-1300",
-    toggleIconColor: "text-neutral-200",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-white",
-  },
-  darkStatic: {
-    bg: "bg-neutral-1200",
-    hoverBg: "hover:bg-neutral-1200",
-    text: "text-white",
-    toggleIconColor: "text-neutral-1200",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-neutral-1300",
+    bg: "bg-neutral-200 dark:bg-neutral-1200",
+    hoverBg: "hover:bg-neutral-200 dark:hover:bg-neutral-1200",
+    text: "text-neutral-1300 dark:text-white",
+    toggleIconColor: "text-neutral-200 dark:text-neutral-1200",
+    selectableBg: "bg-neutral-1200 dark:bg-neutral-1200",
+    selectableText: "text-white dark:text-neutral-1300",
   },
 };
 
 export const isNonTransparentTheme = (theme: AccordionTheme) =>
-  !["transparent", "darkTransparent"].includes(theme);
+  theme !== "transparent";
 
-export const isStaticTheme = (theme: AccordionTheme) =>
-  ["static", "darkStatic"].includes(theme);
+export const isStaticTheme = (theme: AccordionTheme) => theme === "static";