vlite3 1.3.7 → 1.3.9

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Dropdown/Dropdown.vue.d.ts

@@ -60,7 +60,10 @@ declare function __VLS_template(): {
         header?(_: {}): any;
         footer?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        dropdownWrapper: HTMLDivElement;
+        focusTrapAfter: HTMLSpanElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -116,7 +119,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     showSelectedIcon: boolean;
     doubleConfirmation: boolean;
     isNested: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    dropdownWrapper: HTMLDivElement;
+    focusTrapAfter: HTMLSpanElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/Dropdown/Dropdown.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as le, ref as i, computed as f, inject as ne, onMounted as oe, onUnmounted as ae, watch as M, provide as L, reactive as ie, toRefs as se, openBlock as V, createElementBlock as de, normalizeStyle as re, createVNode as P, unref as u, withCtx as m, createBlock as ue, normalizeClass as ce, createSlots as fe, renderSlot as v, normalizeProps as R, guardReactiveProps as W, createCommentVNode as me } from "vue";
-import ve from "v-tooltip-lite";
+import { defineComponent as ae, ref as a, computed as f, inject as ie, onMounted as se, onUnmounted as re, watch as x, provide as L, reactive as de, toRefs as ue, openBlock as R, createElementBlock as ce, normalizeStyle as fe, createVNode as N, unref as u, withCtx as m, createBlock as me, normalizeClass as ve, createSlots as he, renderSlot as v, normalizeProps as z, guardReactiveProps as j, createCommentVNode as ye, createElementVNode as ge } from "vue";
+import be from "v-tooltip-lite";
 import "v-tooltip-lite/style.css";
-import he from "./DropdownMenu.vue.js";
-import ye from "./DropdownTrigger.vue.js";
-import ge from "../ConfirmationModal.vue.js";
-import { useDropdownIds as be } from "./composables/useDropdownIds.js";
-import { useDropdownSelection as Ce } from "./composables/useDropdownSelection.js";
-import { useDropdownHydration as pe } from "./composables/useDropdownHydration.js";
-const xe = /* @__PURE__ */ le({
+import pe from "./DropdownMenu.vue.js";
+import Ce from "./DropdownTrigger.vue.js";
+import we from "../ConfirmationModal.vue.js";
+import { useDropdownIds as Oe } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as Se } from "./composables/useDropdownSelection.js";
+import { useDropdownHydration as $e } from "./composables/useDropdownHydration.js";
+const He = /* @__PURE__ */ ae({
   __name: "Dropdown",
   props: {
     selected: {},
@@ -52,152 +52,158 @@ const xe = /* @__PURE__ */ le({
     variant: { default: "default" }
   },
   emits: ["onSelect", "update:modelValue", "onOpen", "onClose", "update:isOpen", "load-more", "search"],
-  setup(t, { emit: z }) {
-    const l = t, h = z, b = i(!1), y = i(null), d = i({
+  setup(t, { emit: U }) {
+    const l = t, h = U, b = a(!1), y = a(null), r = a({
       title: "Confirm Selection",
       description: "Are you sure you want to select this option?",
       confirmText: "Confirm",
       cancelText: "Cancel",
       variant: "primary"
-    }), j = f(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), U = f(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), C = i(l.isOpen || !1), p = i(0), q = `dropdown-${Math.random().toString(36).substring(2, 9)}`, w = f(() => l.menuId || q), g = i([]), s = ne("dropdown-context", null), F = (e) => {
+    }), q = f(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), F = f(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), p = a(l.isOpen || !1), C = a(0), G = a(null), S = a(null), $ = () => {
+      S.value && setTimeout(() => {
+        S.value?.focus({ preventScroll: !0 });
+      }, 10);
+    }, J = `dropdown-${Math.random().toString(36).substring(2, 9)}`, I = f(() => l.menuId || J), g = a([]), s = ie("dropdown-context", null), K = (e) => {
       g.value.includes(e) || g.value.push(e), s?.registerChildId?.(e);
-    }, G = (e) => {
+    }, Q = (e) => {
       g.value = g.value.filter((o) => o !== e), s?.unregisterChildId?.(e);
     };
-    oe(() => {
-      s?.registerChildId && s.registerChildId(`#${w.value}`);
-    }), ae(() => {
-      s?.unregisterChildId && s.unregisterChildId(`#${w.value}`);
-    }), M(
+    se(() => {
+      s?.registerChildId && s.registerChildId(`#${I.value}`);
+    }), re(() => {
+      s?.unregisterChildId && s.unregisterChildId(`#${I.value}`);
+    }), x(
       () => l.isOpen,
       (e) => {
         if (e !== void 0) {
           if ((l.disabled || l.readonly) && e) return;
-          C.value = e;
+          p.value = e;
         }
       }
     );
-    const x = (e) => {
+    const A = (e) => {
       if (l.disabled || l.readonly) {
-        C.value = !1, h("update:isOpen", !1);
+        p.value = !1, h("update:isOpen", !1);
         return;
       }
-      C.value = e, h("update:isOpen", e), h(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
-    }, O = () => {
-      x(!1);
-    }, J = (e) => {
-      e ? p.value++ : p.value = Math.max(0, p.value - 1);
+      p.value = e, h("update:isOpen", e), h(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
+    }, w = () => {
+      A(!1);
+    }, X = (e) => {
+      e ? C.value++ : C.value = Math.max(0, C.value - 1);
     };
     L("dropdown-context", {
-      close: O,
+      close: w,
       onChildToggle: (e) => {
-        J(e), s?.onChildToggle?.(e);
+        X(e), s?.onChildToggle?.(e);
       },
-      registerChildId: F,
-      unregisterChildId: G
+      registerChildId: K,
+      unregisterChildId: Q
     }), L("modal-context", null);
-    const $ = f(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), S = i([]), N = i(!1), I = i(!1);
-    M(
-      $,
+    const k = f(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), O = a([]), E = a(!1), T = a(!1);
+    x(
+      k,
       (e) => {
         if (e) {
           if (l.remote) {
-            const o = [...S.value];
+            const o = [...O.value];
             e.forEach((n) => {
-              o.some((a) => a.value !== void 0 && n.value !== void 0 ? typeof a.value == "object" && a.key && n.key ? a.key === n.key && a.value[a.key] === n.value[n.key] : a.value === n.value : a.label === n.label) || o.push(n);
-            }), S.value = o;
+              o.some((i) => i.value !== void 0 && n.value !== void 0 ? typeof i.value == "object" && i.key && n.key ? i.key === n.key && i.value[i.key] === n.value[n.key] : i.value === n.value : i.label === n.label) || o.push(n);
+            }), O.value = o;
           } else
-            S.value = e;
-          !N.value && e.length > 0 && (N.value = !0, setTimeout(() => {
-            I.value = !0, E(B.value);
+            O.value = e;
+          !E.value && e.length > 0 && (E.value = !0, setTimeout(() => {
+            T.value = !0, H(M.value);
           }, 10));
         }
       },
       { immediate: !0 }
     );
     const c = f(() => {
-      const e = [...S.value], o = new Set(e.map((n) => n.value ?? n.label));
-      return k.value.forEach((n, r) => {
-        o.has(r) || (e.unshift(n), o.add(r));
+      const e = [...O.value], o = new Set(e.map((n) => n.value ?? n.label));
+      return B.value.forEach((n, d) => {
+        o.has(d) || (e.unshift(n), o.add(d));
       }), e;
-    }), { selectedBuffer: k, isHydrating: K, hydrateSelected: E } = pe({
+    }), { selectedBuffer: B, isHydrating: Y, hydrateSelected: H } = $e({
       fetchSelected: l.fetchSelected,
       getAvailableOptions: () => c.value,
-      isReady: () => I.value
-    }), { getAllRecursiveIds: Q } = be(), X = ie({
-      ...se(l),
+      isReady: () => T.value
+    }), { getAllRecursiveIds: Z } = Oe(), _ = de({
+      ...ue(l),
       options: c
-    }), { currentValue: B, selectedLabel: A, selectedIcon: H, selectOption: Y } = Ce(
-      X,
+    }), { currentValue: M, selectedLabel: V, selectedIcon: W, selectOption: ee } = Se(
+      _,
       h
-    ), Z = f(() => {
-      const e = l.ignoreClickOutside || [], o = Q(c.value);
+    ), te = f(() => {
+      const e = l.ignoreClickOutside || [], o = Z(c.value);
       return [.../* @__PURE__ */ new Set([...e, ...o, ...g.value])];
     });
-    M(
-      () => B.value,
+    x(
+      () => M.value,
       (e) => {
-        I.value && E(e);
+        T.value && H(e);
       },
       { deep: !0 }
     );
-    const _ = (e) => {
+    const le = (e) => {
       if (l.disabled || l.readonly || e.disabled) return;
-      l.doubleConfirmation || !!e.confirmation ? (y.value = e, typeof e.confirmation == "object" ? d.value = {
+      l.doubleConfirmation || !!e.confirmation ? (y.value = e, typeof e.confirmation == "object" ? r.value = {
         title: e.confirmation.title || "Confirm Selection",
         description: e.confirmation.description || "Are you sure you want to select this option?",
         confirmText: e.confirmation.confirmText || "Confirm",
         cancelText: e.confirmation.cancelText || "Cancel",
         variant: e.confirmation.variant || "primary"
-      } : d.value = {
+      } : r.value = {
         title: "Confirm Selection",
         description: `Are you sure you want to select "${e.label}"?`,
         confirmText: "Confirm",
         cancelText: "Cancel",
         variant: "primary"
-      }, b.value = !0, O()) : (D(e), l.closeOnSelect && O());
+      }, b.value = !0, w()) : (D(e), l.closeOnSelect && (w(), $()));
     }, D = (e) => {
       if (l.disabled || l.readonly || e.disabled) return;
       const o = e.value ?? e.label;
-      k.value.has(o) || k.value.set(o, e);
-      const n = Y(e);
+      B.value.has(o) || B.value.set(o, e);
+      const n = ee(e);
       if (!l.isNested) {
-        const r = e._originalOption || e, a = r.value ?? r.label;
-        (e._path || [r]).forEach((T) => {
-          typeof T.onSelect == "function" && T.onSelect({
-            value: a,
-            option: T,
+        const d = e._originalOption || e, i = d.value ?? d.label;
+        (e._path || [d]).forEach((P) => {
+          typeof P.onSelect == "function" && P.onSelect({
+            value: i,
+            option: P,
             data: c.value || [],
             values: n
           });
         });
       }
-    }, ee = () => {
-      y.value && (D(y.value), y.value = null, b.value = !1);
-    }, te = () => {
-      y.value = null, b.value = !1;
+    }, ne = () => {
+      y.value && (D(y.value), y.value = null, b.value = !1, $());
+    }, oe = () => {
+      y.value = null, b.value = !1, $();
     };
-    return (e, o) => (V(), de("div", {
+    return (e, o) => (R(), ce("div", {
       class: "relative inline-block text-left",
-      style: re({ direction: t.direction })
+      style: fe({ direction: t.direction }),
+      ref_key: "dropdownWrapper",
+      ref: G
     }, [
-      P(u(ve), {
+      N(u(be), {
         content: "",
         trigger: "click",
         arrow: !1,
         disabled: t.disabled || t.readonly,
         teleport: t.teleport,
         offset: t.offset,
-        placement: j.value,
-        isOpen: C.value,
-        keepAlive: p.value > 0,
-        menuId: w.value,
-        ignoreClickOutside: Z.value,
+        placement: q.value,
+        isOpen: p.value,
+        keepAlive: C.value > 0,
+        menuId: I.value,
+        ignoreClickOutside: te.value,
         class: "w-full",
         className: "dropdown " + (t.className || "") + (t.variant === "transparent" ? " unstyled-dropdown" : "") + (t.variant === "secondary" ? " dropdown-secondary" : ""),
         onOnShow: o[2] || (o[2] = (n) => e.$emit("onOpen")),
         onOnHide: o[3] || (o[3] = (n) => e.$emit("onClose")),
-        "onUpdate:isOpen": x,
+        "onUpdate:isOpen": A,
         triggerClass: "w-full",
         styles: {
           padding: "0",
@@ -207,14 +213,14 @@ const xe = /* @__PURE__ */ le({
         }
       }, {
         trigger: m(({ isOpen: n }) => [
-          v(e.$slots, "trigger", R(W({
-            selectedLabel: u(A),
-            selectedIcon: t.showSelectedIcon ? u(H) : void 0,
+          v(e.$slots, "trigger", z(j({
+            selectedLabel: u(V),
+            selectedIcon: t.showSelectedIcon ? u(W) : void 0,
             isOpen: n
           })), () => [
-            P(ye, {
-              "selected-label": u(A),
-              "selected-icon": t.showSelectedIcon ? u(H) : void 0,
+            N(Ce, {
+              "selected-label": u(V),
+              "selected-icon": t.showSelectedIcon ? u(W) : void 0,
               "is-open": n,
               direction: t.direction,
               disabled: t.disabled,
@@ -225,33 +231,33 @@ const xe = /* @__PURE__ */ le({
           ])
         ]),
         default: m(() => [
-          !(t.disabled || t.readonly) && ($.value.length || c.value.length || e.$slots.menu || e.$slots.item || e.$slots.default || t.remote || t.searchable) ? (V(), ue(he, {
+          !(t.disabled || t.readonly) && (k.value.length || c.value.length || e.$slots.menu || e.$slots.item || e.$slots.default || t.remote || t.searchable) ? (R(), me(pe, {
             key: 0,
-            options: $.value,
+            options: k.value,
             cachedOptions: c.value,
-            class: ce(t.className),
+            class: ve(t.className),
             emptyMessage: t.emptyMessage,
             searchEmptyMessage: t.searchEmptyMessage,
-            selected: u(B),
+            selected: u(M),
             selectedIndex: t.selectedIndex,
             maxHeight: t.maxHeight,
-            nestedPosition: U.value,
+            nestedPosition: F.value,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
             direction: t.direction,
             isCustomSlotMenu: !!e.$slots?.default || !!e.$slots?.menu,
             layout: t.layout,
             columns: t.columns,
-            loading: t.loading || u(K),
+            loading: t.loading || u(Y),
             hasMore: t.hasMore,
             searchable: t.searchable,
             remote: t.remote,
             debounceTime: t.debounceTime,
-            onSelect: _,
-            onClose: O,
+            onSelect: le,
+            onClose: w,
             onLoadMore: o[0] || (o[0] = (n) => e.$emit("load-more")),
             onSearch: o[1] || (o[1] = (n) => e.$emit("search", n))
-          }, fe({ _: 2 }, [
+          }, he({ _: 2 }, [
             e.$slots.menu || e.$slots?.default ? {
               name: "menu",
               fn: m(() => [
@@ -263,7 +269,7 @@ const xe = /* @__PURE__ */ le({
             e.$slots.item ? {
               name: "item",
               fn: m((n) => [
-                v(e.$slots, "item", R(W(n)))
+                v(e.$slots, "item", z(j(n)))
               ]),
               key: "1"
             } : void 0,
@@ -281,23 +287,30 @@ const xe = /* @__PURE__ */ le({
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["options", "cachedOptions", "class", "emptyMessage", "searchEmptyMessage", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "isCustomSlotMenu", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : me("", !0)
+          ]), 1032, ["options", "cachedOptions", "class", "emptyMessage", "searchEmptyMessage", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "isCustomSlotMenu", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : ye("", !0)
         ]),
         _: 3
       }, 8, ["disabled", "teleport", "offset", "placement", "isOpen", "keepAlive", "menuId", "ignoreClickOutside", "className", "styles"]),
-      P(ge, {
+      N(we, {
         show: b.value,
-        title: d.value.title,
-        description: d.value.description,
-        "confirm-text": d.value.confirmText,
-        "cancel-text": d.value.cancelText,
-        variant: d.value.variant,
-        onConfirm: ee,
-        onCancel: te
-      }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"])
+        title: r.value.title,
+        description: r.value.description,
+        "confirm-text": r.value.confirmText,
+        "cancel-text": r.value.cancelText,
+        variant: r.value.variant,
+        onConfirm: ne,
+        onCancel: oe
+      }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"]),
+      ge("span", {
+        ref_key: "focusTrapAfter",
+        ref: S,
+        tabindex: "-1",
+        class: "outline-none pointer-events-none absolute opacity-0 w-0 h-0",
+        "aria-hidden": "true"
+      }, null, 512)
     ], 4));
   }
 });
 export {
-  xe as default
+  He as default
 };

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import o from "./DropdownMenu.vue3.js";
+import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1742cff5"]]);

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/ThemeToggle.vue.d.ts

@@ -10,7 +10,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             toggleTheme: () => void;
-            theme: "light-mode" | "dark";
+            theme: "light" | "dark";
         }): any;
     };
     refs: {};

package/components/ThemeToggle.vue.js

@@ -12,7 +12,7 @@ const w = /* @__PURE__ */ m({
   },
   setup(t) {
     const { theme: i, toggleTheme: s } = f(), a = d(() => {
-      const n = i.value === "light-mode", l = "vlite.themeToggle.switchToDark", r = "vlite.themeToggle.switchToLight";
+      const n = i.value === "light", l = "vlite.themeToggle.switchToDark", r = "vlite.themeToggle.switchToLight";
       if (n) {
         const e = c(l);
         return e !== l ? e : "Switch to dark mode";
@@ -26,7 +26,7 @@ const w = /* @__PURE__ */ m({
       theme: o(i)
     }, () => [
       h(T, {
-        icon: o(i) === "light-mode" ? "lucide:sun" : "lucide:moon",
+        icon: o(i) === "light" ? "lucide:sun" : "lucide:moon",
         variant: t.variant || "secondary",
         rounded: t.rounded || "full",
         size: t.size,

package/composables/useTheme.d.ts

@@ -1,4 +1,4 @@
-type Theme = 'light-mode' | 'dark';
+type Theme = 'light' | 'dark';
 export declare function initializeTheme(): void;
 export declare function useTheme(): {
     theme: import('vue').Ref<Theme, Theme>;

package/composables/useTheme.js

@@ -1,33 +1,33 @@
-import { ref as i, watch as m, onMounted as a } from "vue";
-const t = i(d());
-function d() {
-  if (typeof window > "u") return "light-mode";
+import { ref as a, watch as d, onMounted as r } from "vue";
+const t = a(o());
+function o() {
+  if (typeof window > "u") return "light";
   const e = localStorage.getItem("builto-theme");
-  return e === "light-mode" || e === "dark" ? e : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light-mode";
+  return e === "light" || e === "dark" ? e : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function o(e) {
-  document.documentElement.classList.remove("light-mode", "dark"), document.documentElement.classList.add(e);
+function n(e) {
+  document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(e);
 }
-function r() {
+function l() {
   typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-    localStorage.getItem("builto-theme") || (t.value = e.matches ? "dark" : "light-mode", o(t.value));
+    localStorage.getItem("builto-theme") || (t.value = e.matches ? "dark" : "light", n(t.value));
   });
 }
 function u() {
-  t.value = d(), o(t.value), r();
+  t.value = o(), n(t.value), l();
 }
 function c() {
-  m(
+  d(
     t,
-    (n) => {
-      localStorage.setItem("builto-theme", n), o(n);
+    (i) => {
+      localStorage.setItem("builto-theme", i), n(i);
     },
     { immediate: !0 }
-  ), a(() => {
+  ), r(() => {
     document.documentElement.classList.add("bg-body");
   });
   function e() {
-    t.value = t.value === "light-mode" ? "dark" : "light-mode";
+    t.value = t.value === "light" ? "dark" : "light";
   }
   return {
     theme: t,

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -17,6 +17,7 @@
     --color-border: '';
     --color-input: '';
     --color-card: '';
+    --color-card-light: '';
     --color-secondary: '';
     --color-secondary-foreground: '';
     --color-muted: '';
@@ -292,8 +293,9 @@
 .dark .sidepanel-body,
 .dark .tooltip-container,
 .bg-card,
+.bg-card-light,
 .theme-section,
-.light-mode,
+.light,
 :root {
 
   --color-white: #ffffff;
@@ -395,7 +397,7 @@
 
 }
 
-.light-mode {
+.light {
   --color-white: #ffffff !important;
   --color-mixture-1: #ffffff !important;
   --color-mixture-2: #0c0c0c !important;
@@ -579,6 +581,16 @@
   background-color: var(--color-body) !important;
 }
 
+.dark .modal-body .bg-card-light,
+.dark .sidepanel-body .bg-card-light,
+.dark .tooltip-container .bg-card-light {
+  --color-body: #1c1c1c !important;
+  --color-white: #1c1c1c !important;
+  --color-mixture-1: #202020 !important;
+  --color-mixture-2: #ffffff !important;
+  background-color: var(--color-body) !important;
+}
+
 .dark .bg-card {
   --color-body: #141414 !important;
   --color-white: #141414 !important;
@@ -608,7 +620,8 @@
 }
 
 
-.bg-card {
+.bg-card,
+.bg-card-light {
   --color-body: #f7f7f7 !important;
   --color-white: #f7f7f7 !important;
   --color-mixture-1: #f7f7f7 !important;
@@ -617,7 +630,9 @@
   border-color: color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2));
 }
 
-.bg-card .bg-card {
+
+.bg-card .bg-card,
+.bg-card-light .bg-card-light {
   --color-body: #f1f1f1 !important;
   --color-white: #f1f1f1 !important;
   --color-mixture-1: #f1f1f1;
@@ -625,7 +640,8 @@
   background-color: #f1f1f1 !important;
 }
 
-.bg-card .bg-card .bg-card {
+.bg-card .bg-card .bg-card,
+.bg-card-light .bg-card-light .bg-card-light {
   --color-body: #e8e8e8 !important;
   --color-white: #e8e8e8 !important;
   --color-mixture-1: #e8e8e8;
@@ -633,15 +649,19 @@
   background-color: #e8e8e8 !important;
 }
 
-.dark .bg-card.light {
+.dark .bg-card-light {
   --color-body: #121212 !important;
   --color-white: #121212 !important;
+  --color-mixture-1: #1b1b1b !important;
+  --color-mixture-2: #ffffff !important;
   background-color: #121212 !important;
 }
 
-.dark .bg-card .bg-card.light {
-  --color-body: ##1a1a1a !important;
-  --color-white: ##1a1a1a !important;
+.dark .bg-card .bg-card-light {
+  --color-body: #1a1a1a !important;
+  --color-white: #1a1a1a !important;
+  --color-mixture-1: #232323 !important;
+  --color-mixture-2: #000000;
   background-color: #1a1a1a !important;
 }