@nextui-org/theme 0.0.0-dev-v2-20230623023752 → 0.0.0-dev-v2-20230623225431

package/dist/{chunk-RB7R7Z3Y.mjs → chunk-33WV5XLR.mjs}

@@ -14,11 +14,15 @@ var base = {
       DEFAULT: "#ffffff"
     },
     foreground: {
+      ...twColors.zinc,
       DEFAULT: "#11181C"
     },
     divider: {
       DEFAULT: "rgba(17, 17, 17, 0.15)"
     },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
     content1: {
       DEFAULT: twColors.zinc[50],
       foreground: twColors.zinc[900]
@@ -41,8 +45,12 @@ var base = {
       DEFAULT: "#000000"
     },
     foreground: {
+      ...swapColorValues(twColors.zinc),
       DEFAULT: "#ECEDEE"
     },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
     divider: {
       DEFAULT: "rgba(255, 255, 255, 0.15)"
     },
@@ -83,7 +91,7 @@ var semanticColorsLight = {
   },
   success: {
     ...commonColors.green,
-    foreground: commonColors.green[800],
+    foreground: commonColors.green[900],
     DEFAULT: commonColors.green[500]
   },
   warning: {

package/dist/{chunk-IYCTMZYP.mjs → chunk-34DKOA3F.mjs}

@@ -1,6 +1,9 @@
 import {
   colorVariants
 } from "./chunk-CEW7YOHH.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
 
 // src/components/tabs.ts
 import { tv } from "tailwind-variants";
@@ -34,12 +37,7 @@ var tabs = tv({
       "data-[disabled=true]:cursor-not-allowed",
       "data-[disabled=true]:opacity-30",
       "data-[hover-unselected=true]:opacity-50",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
-      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
     tabContent: [
       "relative",
@@ -54,12 +52,7 @@ var tabs = tv({
       "py-3",
       "px-1",
       "outline-none",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
-      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ]
   },
   variants: {

package/dist/{chunk-A4SRDPJZ.mjs → chunk-AOWZVYD6.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/navbar.ts
 import { tv } from "tailwind-variants";
 var navbar = tv({
@@ -35,12 +39,7 @@ var navbar = tv({
       "outline-none",
       "rounded-sm",
       "tap-highlight-transparent",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
-      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
     srOnly: ["sr-only"],
     toggleIcon: [

package/dist/{chunk-IN5LCODJ.mjs → chunk-AUYFXGLC.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/card.ts
 import { tv } from "tailwind-variants";
 var card = tv({
@@ -14,12 +18,7 @@ var card = tv({
       "bg-background",
       "dark:bg-content1",
       "border border-default-100",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
-      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
     header: [
       "flex",

package/dist/{chunk-E7FRZBCH.mjs → chunk-B6FPCX5Q.mjs}

@@ -1,3 +1,7 @@
+import {
+  groupDataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/radio.ts
 import { tv } from "tailwind-variants";
 var radio = tv({
@@ -15,12 +19,7 @@ var radio = tv({
       "box-border",
       "border-default",
       "group-data-[hover-unselected=true]:bg-default-100",
-      "group-data-[focus-visible=true]:outline-none",
-      "group-data-[focus-visible=true]:ring-2",
-      "group-data-[focus-visible=true]:!ring-primary",
-      "group-data-[focus-visible=true]:ring-offset-2",
-      "group-data-[focus-visible=true]:ring-offset-background",
-      "group-data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...groupDataFocusVisibleClasses
     ],
     labelWrapper: "flex flex-col ml-1",
     control: [
@@ -34,7 +33,7 @@ var radio = tv({
       "group-data-[selected=true]:scale-100"
     ],
     label: "relative text-foreground select-none",
-    description: "relative text-default-400"
+    description: "relative text-foreground-400"
   },
   variants: {
     color: {
@@ -163,9 +162,9 @@ var radio = tv({
 var radioGroup = tv({
   slots: {
     base: "relative flex flex-col gap-2",
-    label: "relative text-default-500",
+    label: "relative text-foreground-500",
     wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row",
-    description: "text-xs text-default-400",
+    description: "text-xs text-foreground-400",
     errorMessage: "text-xs text-danger"
   }
 });

package/dist/{chunk-UKSPZOXY.mjs → chunk-C3VRXEKA.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/toggle.ts
 import { tv } from "tailwind-variants";
 var toggle = tv({
@@ -13,12 +17,7 @@ var toggle = tv({
       "overflow-hidden",
       "bg-default-200",
       "rounded-full",
-      "group-data-[focus-visible]:outline-none",
-      "group-data-[focus-visible]:ring-2",
-      "group-data-[focus-visible]:!ring-primary",
-      "group-data-[focus-visible]:ring-offset-2",
-      "group-data-[focus-visible]:ring-offset-background",
-      "group-data-[focus-visible]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
     thumb: [
       "z-10",

package/dist/{chunk-52QYM3YD.mjs → chunk-CDLGU7OD.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-OQGOVMIP.mjs";
 import {
   baseStyles
-} from "./chunk-TSW7CNKY.mjs";
+} from "./chunk-G2ZSNGR5.mjs";
 import {
   semanticColors
-} from "./chunk-RB7R7Z3Y.mjs";
+} from "./chunk-33WV5XLR.mjs";
 import {
   removeDefaultKeys
 } from "./chunk-37PIXVP4.mjs";

package/dist/{chunk-SEWAA5ZW.mjs → chunk-DJPVJIVC.mjs}

@@ -1,6 +1,9 @@
 import {
   colorVariants
 } from "./chunk-CEW7YOHH.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
 
 // src/components/popover.ts
 import { tv } from "tailwind-variants";
@@ -19,12 +22,7 @@ var popover = tv({
       "text-base",
       "outline-none",
       "box-border",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
-      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
     trigger: ["z-10"],
     backdrop: ["hidden"],

package/dist/chunk-FAR5DJOU.mjs

@@ -0,0 +1,21 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
+// src/components/user.ts
+import { tv } from "tailwind-variants";
+var user = tv({
+  slots: {
+    base: [
+      "inline-flex items-center justify-center gap-2 rounded-sm outline-none",
+      ...dataFocusVisibleClasses
+    ],
+    wrapper: "inline-flex flex-col items-start",
+    name: "text-sm text-inherit",
+    description: "text-xs text-foreground-400"
+  }
+});
+
+export {
+  user
+};

package/dist/{chunk-LBMDDCFV.mjs → chunk-FRXURFBW.mjs}

@@ -1,6 +1,6 @@
 import {
   semanticColors
-} from "./chunk-RB7R7Z3Y.mjs";
+} from "./chunk-33WV5XLR.mjs";
 import {
   commonColors
 } from "./chunk-5LKRUH3Q.mjs";

package/dist/chunk-G2ZSNGR5.mjs

@@ -0,0 +1,55 @@
+// src/utils/classes.ts
+var baseStyles = (prefix) => ({
+  color: `hsl(var(--${prefix}-foreground))`,
+  backgroundColor: `hsl(var(--${prefix}-background))`
+});
+var focusVisibleClasses = [
+  "focus:outline-0",
+  "focus-visible:ring-2",
+  "focus-visible:ring-focus",
+  "focus-visible:ring-offset-2",
+  "focus-visible:transition-shadow",
+  "focus-visible:ring-offset-background"
+];
+var dataFocusVisibleClasses = [
+  "outline-none",
+  "data-[focus-visible=true]:z-10",
+  "data-[focus-visible=true]:outline-none",
+  "data-[focus-visible=true]:ring-2",
+  "data-[focus-visible=true]:ring-focus",
+  "data-[focus-visible=true]:ring-offset-2",
+  "data-[focus-visible=true]:ring-offset-background"
+];
+var groupDataFocusVisibleClasses = [
+  "outline-none",
+  "group-data-[focus-visible=true]:z-10",
+  "group-data-[focus-visible=true]:ring-2",
+  "group-data-[focus-visible=true]:ring-focus",
+  "group-data-[focus-visible=true]:ring-offset-2",
+  "group-data-[focus-visible=true]:ring-offset-background"
+];
+var ringClasses = [
+  "outline-none",
+  "ring-2",
+  "ring-focus",
+  "ring-offset-2",
+  "ring-offset-background"
+];
+var translateCenterClasses = [
+  "absolute",
+  "top-1/2",
+  "left-1/2",
+  "-translate-x-1/2",
+  "-translate-y-1/2"
+];
+var absoluteFullClasses = ["absolute", "inset-0"];
+
+export {
+  baseStyles,
+  focusVisibleClasses,
+  dataFocusVisibleClasses,
+  groupDataFocusVisibleClasses,
+  ringClasses,
+  translateCenterClasses,
+  absoluteFullClasses
+};

package/dist/{chunk-AUOEYXLQ.mjs → chunk-JLTOTD4Y.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/modal.ts
 import { tv } from "tailwind-variants";
 var modal = tv({
@@ -41,17 +45,12 @@ var modal = tv({
       "top-1",
       "right-1",
       "p-2",
-      "text-default-500",
+      "text-foreground-500",
       "rounded-full",
       "hover:bg-default-100",
       "active:bg-default-200",
       "tap-highlight-transparent",
-      "data-[focus-visible]:outline-none",
-      "data-[focus-visible]:ring-2",
-      "data-[focus-visible]:!ring-primary",
-      "data-[focus-visible]:ring-offset-2",
-      "data-[focus-visible]:ring-offset-background",
-      "data-[focus-visible]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ]
   },
   variants: {

package/dist/{chunk-YEHFHLHQ.mjs → chunk-KECBFVJC.mjs}

@@ -1,12 +1,17 @@
+import {
+  dataFocusVisibleClasses,
+  groupDataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/input.ts
 import { tv } from "tailwind-variants";
 var input = tv({
   slots: {
     base: "group flex flex-col data-[has-elements=true]:gap-2",
-    label: "block text-sm font-medium text-default-600",
+    label: "block text-sm font-medium text-foreground-600",
     inputWrapper: "relative w-full inline-flex flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex h-full items-center w-full gap-1.5 box-border",
-    input: "w-full h-full font-normal !bg-transparent outline-none placeholder:text-default-500",
+    input: "w-full h-full font-normal !bg-transparent outline-none placeholder:text-foreground-500",
     clearButton: [
       "z-10",
       "hidden",
@@ -20,14 +25,9 @@ var input = tv({
       "cursor-pointer",
       "active:!opacity-70",
       "rounded-full",
-      "data-[focus-visible]:outline-none",
-      "data-[focus-visible]:ring-2",
-      "data-[focus-visible]:!ring-primary",
-      "data-[focus-visible]:ring-offset-2",
-      "data-[focus-visible]:ring-offset-background",
-      "data-[focus-visible]:dark:ring-offset-background-dark"
+      ...dataFocusVisibleClasses
     ],
-    description: "text-xs text-default-400",
+    description: "text-xs text-foreground-400",
     errorMessage: "text-xs text-danger"
   },
   variants: {
@@ -462,12 +462,7 @@ var input = tv({
       variant: ["flat", "faded"],
       class: {
         inputWrapper: [
-          "group-data-[focus-visible]:outline-none",
-          "group-data-[focus-visible]:ring-2",
-          "group-data-[focus-visible]:!ring-primary",
-          "group-data-[focus-visible]:ring-offset-2",
-          "group-data-[focus-visible]:ring-offset-background",
-          "group-data-[focus-visible]:dark:ring-offset-background-dark"
+          ...groupDataFocusVisibleClasses
         ]
       }
     },
@@ -540,7 +535,7 @@ var input = tv({
       class: {
         label: [
           "font-normal",
-          "text-default-500",
+          "text-foreground-500",
           "group-focus-within:font-medium",
           "group-[.is-filled]:font-medium",
           "group-focus-within:pointer-events-auto",
@@ -553,7 +548,7 @@ var input = tv({
       labelPlacement: "inside",
       class: {
         inputWrapper: "group",
-        label: ["group-focus-within:text-default-600", "group-[.is-filled]:text-default-600"]
+        label: ["group-focus-within:text-foreground-600", "group-[.is-filled]:text-foreground-600"]
       }
     },
     {

package/dist/{chunk-U54UQOTS.mjs → chunk-KPXLNSHI.mjs}

@@ -1,13 +1,9 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/table.ts
 import { tv } from "tailwind-variants";
-var focusRing = [
-  "data-[focus-visible=true]:outline-none",
-  "data-[focus-visible=true]:ring-2",
-  "data-[focus-visible=true]:ring-primary",
-  "data-[focus-visible=true]:ring-offset-2",
-  "data-[focus-visible=true]:ring-offset-background",
-  "data-[focus-visible=true]:dark:ring-offset-background-dark"
-];
 var table = tv({
   slots: {
     base: [
@@ -24,7 +20,7 @@ var table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "",
-    tr: ["group", "outline-none", ...focusRing],
+    tr: ["group", "outline-none", ...dataFocusVisibleClasses],
     th: [
       "group",
       "px-3",
@@ -32,7 +28,7 @@ var table = tv({
       "text-left",
       "align-middle",
       "bg-default-100",
-      "text-default-500",
+      "text-foreground-500",
       "text-xs",
       "font-semibold",
       "first:rounded-l-lg",
@@ -40,8 +36,8 @@ var table = tv({
       "outline-none",
       "data-[sortable=true]:transition-colors",
       "data-[sortable=true]:cursor-pointer",
-      "data-[hover=true]:text-default-400",
-      ...focusRing
+      "data-[hover=true]:text-foreground-400",
+      ...dataFocusVisibleClasses
     ],
     td: [
       "py-2",
@@ -52,14 +48,14 @@ var table = tv({
       "text-sm",
       "font-normal",
       "outline-none",
-      ...focusRing,
+      ...dataFocusVisibleClasses,
       "before:content-['']",
       "before:absolute",
       "before:-z-[1]",
       "before:inset-0",
       "before:opacity-0",
       "data-[selected=true]:before:opacity-100",
-      "group-data-[disabled=true]:text-default-300"
+      "group-data-[disabled=true]:text-foreground-300"
     ],
     tfoot: "",
     sortIcon: [
@@ -73,7 +69,7 @@ var table = tv({
       "group-data-[hover=true]:opacity-100",
       "data-[direction=ascending]:rotate-180"
     ],
-    emptyWrapper: "text-default-400 align-middle text-center h-40",
+    emptyWrapper: "text-foreground-400 align-middle text-center h-40",
     loadingWrapper: "absolute inset-0 flex items-center justify-center"
   },
   variants: {

package/dist/{chunk-C6TGDK6D.mjs → chunk-LE5M6GGI.mjs}

@@ -1,3 +1,7 @@
+import {
+  groupDataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/checkbox.ts
 import { tv } from "tailwind-variants";
 var checkbox = tv({
@@ -27,12 +31,7 @@ var checkbox = tv({
       "group-data-[selected=true]:after:opacity-100",
       "group-data-[hover=true]:before:bg-default-100",
       "group-data-[hover=true]:before:bg-default-100",
-      "group-data-[focus-visible=true]:outline-none",
-      "group-data-[focus-visible=true]:ring-2",
-      "group-data-[focus-visible=true]:!ring-primary",
-      "group-data-[focus-visible=true]:ring-offset-2",
-      "group-data-[focus-visible=true]:ring-offset-background",
-      "group-data-[focus-visible=true]:dark:ring-offset-background-dark"
+      ...groupDataFocusVisibleClasses
     ],
     icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
     label: "relative text-foreground select-none"
@@ -159,9 +158,9 @@ var checkbox = tv({
 var checkboxGroup = tv({
   slots: {
     base: "relative flex flex-col gap-2",
-    label: "relative text-default-500",
+    label: "relative text-foreground-500",
     wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row",
-    description: "text-xs text-default-400",
+    description: "text-xs text-foreground-400",
     errorMessage: "text-xs text-danger"
   }
 });

package/dist/{chunk-GBPOVFEX.mjs → chunk-LJRWR5MA.mjs}

@@ -13,7 +13,7 @@ var kbd = tv({
       "border",
       "border-default",
       "bg-default-100",
-      "text-default-600",
+      "text-foreground-600",
       "rounded-md"
     ],
     abbr: "no-underline",

package/dist/{chunk-I2CDYXU5.mjs → chunk-NIPJ5ETA.mjs}

@@ -1,6 +1,9 @@
 import {
   colorVariants
 } from "./chunk-CEW7YOHH.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
 
 // src/components/pagination.ts
 import { tv } from "tailwind-variants";
@@ -311,13 +314,7 @@ var pagination = tv({
         "items-center",
         "justify-center",
         "text-default-foreground",
-        "data-[focus-visible=true]:z-10",
-        "data-[focus-visible=true]:outline-none",
-        "data-[focus-visible=true]:ring-2",
-        "data-[focus-visible=true]:ring-primary",
-        "data-[focus-visible=true]:ring-offset-2",
-        "data-[focus-visible=true]:ring-offset-background",
-        "data-[focus-visible=true]:dark:ring-offset-background-dark",
+        ...dataFocusVisibleClasses,
         "data-[disabled=true]:text-default-300",
         "data-[disabled=true]:pointer-events-none"
       ]

package/dist/{chunk-I36TDMJB.mjs → chunk-OJDLSLMW.mjs}

@@ -1,14 +1,13 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/link.ts
 import { tv } from "tailwind-variants";
 var link = tv({
   base: [
     "relative inline-flex items-center outline-none tap-highlight-transparent",
-    "data-[focus-visible=true]:outline-none",
-    "data-[focus-visible=true]:ring-2",
-    "data-[focus-visible=true]:ring-primary",
-    "data-[focus-visible=true]:ring-offset-2",
-    "data-[focus-visible=true]:ring-offset-background",
-    "data-[focus-visible=true]:dark:ring-offset-background-dark"
+    ...dataFocusVisibleClasses
   ],
   variants: {
     size: {

package/dist/{chunk-ZSOCX2PK.mjs → chunk-S6AN5YW7.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CEW7YOHH.mjs";
 import {
   ringClasses
-} from "./chunk-TSW7CNKY.mjs";
+} from "./chunk-G2ZSNGR5.mjs";
 
 // src/components/chip.ts
 import { tv } from "tailwind-variants";

package/dist/{chunk-YIDZQ5FC.mjs → chunk-SDZJAVPQ.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/dropdown.ts
 import { tv } from "tailwind-variants";
 var dropdown = tv({
@@ -23,23 +27,19 @@ var dropdownItem = tv({
       "justify-between",
       "relative",
       "px-2",
-      "py-1",
+      "py-1.5",
       "w-full",
       "h-full",
       "box-border",
       "rounded-lg",
       "outline-none",
       "cursor-pointer",
-      "data-[focus-visible=true]:outline-none",
-      "data-[focus-visible=true]:ring-2",
-      "data-[focus-visible=true]:ring-primary",
-      "data-[focus-visible=true]:ring-offset-2",
-      "data-[focus-visible=true]:ring-offset-background",
+      ...dataFocusVisibleClasses,
       "data-[focus-visible=true]:dark:ring-offset-background-content1"
     ],
     wrapper: "w-full flex flex-col items-start justify-center",
-    title: "flex-1 text-base font-normal truncate",
-    description: ["text-sm", "w-full", "text-default-500", "group-hover:text-current"],
+    title: "flex-1 text-sm font-normal truncate",
+    description: ["text-xs", "w-full", "text-foreground-500", "group-hover:text-current"],
     selectedIcon: ["text-inherit", "w-3", "h-3", "flex-shrink-0"],
     shortcut: [
       "px-1",
@@ -89,11 +89,11 @@ var dropdownItem = tv({
           "mt-2",
           "before-content-['']",
           "before:absolute",
-          "before:-top-1",
+          "before:-top-1.5",
           "before:left-0",
           "before:right-0",
           "before:h-px",
-          "before:bg-default-200"
+          "before:bg-divider"
         ]
       }
     },
@@ -370,7 +370,8 @@ var dropdownItem = tv({
 var dropdownSection = tv({
   slots: {
     section: "relative mb-2",
-    heading: "pl-1 text-xs text-default-500"
+    heading: "pl-1 text-xs text-foreground-500",
+    group: "pt-1"
   },
   variants: {
     showDivider: {
@@ -383,7 +384,7 @@ var dropdownSection = tv({
           "before:left-0",
           "before:right-0",
           "before:h-px",
-          "before:bg-default-200"
+          "before:bg-divider"
         ]
       }
     }