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

package/dist/{chunk-IYCTMZYP.mjs → chunk-6DB4E4EI.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: {
@@ -198,7 +191,7 @@ var tabs = tv({
       variant: ["solid", "bordered", "light"],
       color: "default",
       class: {
-        cursor: ["bg-background", "dark:bg-default", "border border-default-100 dark:border-none"],
+        cursor: ["bg-content1", "border border-boundary"],
         tabContent: "group-data-[selected=true]:text-default-foreground"
       }
     },

package/dist/{chunk-YNGJCDQN.mjs → chunk-7ZE4XJWS.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/accordion.ts
 import { tv } from "tailwind-variants";
 var accordion = tv({
@@ -5,7 +9,7 @@ var accordion = tv({
   variants: {
     variant: {
       light: "",
-      shadow: "px-4 shadow-lg rounded-xl bg-background dark:bg-content1 border border-default-100",
+      shadow: "px-4 shadow-lg rounded-xl bg-content1 border border-boundary",
       bordered: "px-4 border border-divider rounded-lg",
       splitted: "group is-splitted flex flex-col gap-2"
     },
@@ -24,29 +28,23 @@ var accordionItem = tv({
       "border-divider",
       "[&:not(:last-of-type)]:border-b",
       "group-[.is-splitted]:px-4",
-      "group-[.is-splitted]:bg-background",
-      "dark:group-[.is-splitted]:bg-content1",
+      "group-[.is-splitted]:bg-content1",
       "group-[.is-splitted]:shadow-lg",
       "group-[.is-splitted]:rounded-lg",
       "group-[.is-splitted]:border",
-      "group-[.is-splitted]:border-default-100"
+      "group-[.is-splitted]:border-boundary"
     ],
     heading: "",
     trigger: [
       "flex py-4 w-full h-full gap-3 outline-none items-center tap-highlight-transparent",
       "data-[pressed=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
     ],
     startContent: "flex-shrink-0",
     indicator: "text-default-400",
     titleWrapper: "flex-1 flex flex-col text-left",
     title: "text-foreground text-lg",
-    subtitle: "text-sm text-default-500 font-normal",
+    subtitle: "text-sm text-foreground-500 font-normal",
     content: "py-2"
   },
   variants: {

package/dist/{chunk-U54UQOTS.mjs → chunk-ACERSXMK.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: [
@@ -18,13 +14,13 @@ var table = tv({
       "justify-between",
       "gap-4",
       "border",
-      "border-default-100",
+      "border-boundary",
       "overflow-auto"
     ],
     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-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-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-RB7R7Z3Y.mjs → chunk-BWO5RTQF.mjs}

@@ -14,14 +14,21 @@ var base = {
       DEFAULT: "#ffffff"
     },
     foreground: {
+      ...twColors.zinc,
       DEFAULT: "#11181C"
     },
     divider: {
       DEFAULT: "rgba(17, 17, 17, 0.15)"
     },
+    boundary: {
+      DEFAULT: twColors.zinc[100]
+    },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
     content1: {
-      DEFAULT: twColors.zinc[50],
-      foreground: twColors.zinc[900]
+      DEFAULT: "#ffffff",
+      foreground: "#11181C"
     },
     content2: {
       DEFAULT: twColors.zinc[100],
@@ -41,11 +48,18 @@ var base = {
       DEFAULT: "#000000"
     },
     foreground: {
+      ...swapColorValues(twColors.zinc),
       DEFAULT: "#ECEDEE"
     },
+    focus: {
+      DEFAULT: commonColors.blue[500]
+    },
     divider: {
       DEFAULT: "rgba(255, 255, 255, 0.15)"
     },
+    boundary: {
+      DEFAULT: twColors.zinc[800]
+    },
     content1: {
       DEFAULT: twColors.zinc[900],
       foreground: twColors.zinc[50]
@@ -64,7 +78,7 @@ var base = {
     }
   }
 };
-var semanticColorsLight = {
+var brandColorsLight = {
   ...base.light,
   default: {
     ...twColors.zinc,
@@ -83,7 +97,7 @@ var semanticColorsLight = {
   },
   success: {
     ...commonColors.green,
-    foreground: commonColors.green[800],
+    foreground: commonColors.green[900],
     DEFAULT: commonColors.green[500]
   },
   warning: {
@@ -97,7 +111,7 @@ var semanticColorsLight = {
     DEFAULT: commonColors.red[500]
   }
 };
-var semanticColorsDark = {
+var brandColorsDark = {
   ...base.dark,
   default: {
     ...swapColorValues(twColors.zinc),
@@ -131,12 +145,12 @@ var semanticColorsDark = {
   }
 };
 var semanticColors = {
-  light: semanticColorsLight,
-  dark: semanticColorsDark
+  light: brandColorsLight,
+  dark: brandColorsDark
 };
 
 export {
-  semanticColorsLight,
-  semanticColorsDark,
+  brandColorsLight,
+  brandColorsDark,
   semanticColors
 };

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-CM2DL3M6.mjs}

@@ -1,18 +1,18 @@
 import {
   utilities
-} from "./chunk-OQGOVMIP.mjs";
+} from "./chunk-UNQJ7BRW.mjs";
+import {
+  animations
+} from "./chunk-DMASP6FA.mjs";
 import {
   baseStyles
-} from "./chunk-TSW7CNKY.mjs";
+} from "./chunk-G2ZSNGR5.mjs";
 import {
   semanticColors
-} from "./chunk-RB7R7Z3Y.mjs";
+} from "./chunk-BWO5RTQF.mjs";
 import {
   removeDefaultKeys
 } from "./chunk-37PIXVP4.mjs";
-import {
-  animations
-} from "./chunk-DMASP6FA.mjs";
 import {
   commonColors
 } from "./chunk-5LKRUH3Q.mjs";

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-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-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-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-IN5LCODJ.mjs → chunk-P455YPME.mjs}

@@ -1,3 +1,7 @@
+import {
+  dataFocusVisibleClasses
+} from "./chunk-G2ZSNGR5.mjs";
+
 // src/components/card.ts
 import { tv } from "tailwind-variants";
 var card = tv({
@@ -11,15 +15,9 @@ var card = tv({
       "outline-none",
       "text-foreground",
       "box-border",
-      "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"
+      "bg-content1",
+      "border border-boundary",
+      ...dataFocusVisibleClasses
     ],
     header: [
       "flex",

package/dist/{chunk-SEWAA5ZW.mjs → chunk-QJZSBDVH.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"],
@@ -72,7 +70,7 @@ var popover = tv({
     },
     color: {
       default: {
-        base: "bg-background dark:bg-content1 border border-default-100"
+        base: "bg-content1 border border-boundary"
       },
       foreground: {
         base: colorVariants.solid.foreground