@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/composables/useTheme.d.ts

@@ -1,5 +1,9 @@
-import * as theme from '../theme/index.js';
+import * as uiTheme from '../theme/index.js';
+import type { StylerProps, StylerReturnType, StylerTheme } from '../types/index.js';
+type UITheme = typeof uiTheme;
 export declare const useTheme: () => {
-    theme: import("vue").ComputedRef<typeof theme>;
+    theme: import("vue").ComputedRef<typeof uiTheme>;
     createStyler: <V extends import("@byyuurin/ui-kit").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit").ClassValue = undefined, S extends import("@byyuurin/ui-kit").CVSlots = undefined>(theme: import("@byyuurin/ui-kit").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit").VariantProps<import("@byyuurin/ui-kit").CVReturnType<V, S, B>> & import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; } : (props?: import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; };
+    generateStyle: <T extends keyof UITheme>(name: T, props?: StylerProps<UITheme[T]>) => StylerReturnType<StylerTheme<UITheme[T]>>;
 };
+export {};

package/dist/runtime/composables/useTheme.js

@@ -2,15 +2,22 @@ import { transformUnoRules } from "@byyuurin/ui/unocss";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import { injectThemeExtension, injectUnoConfig } from "../app/injections.js";
-import * as theme from "../theme/index.js";
+import * as uiTheme from "../theme/index.js";
 import { extendTheme, prepareStyler } from "../utils/index.js";
 export const useTheme = createSharedComposable(() => {
   const themeExtension = injectThemeExtension();
   const unoConfig = injectUnoConfig();
   const mergeRules = transformUnoRules(toValue(unoConfig));
   const { createStyler } = prepareStyler(mergeRules);
+  const themeDefaults = JSON.parse(JSON.stringify(uiTheme));
+  const theme = computed(() => extendTheme(toValue(themeExtension), themeDefaults));
+  function generateStyle(name, props) {
+    const styler = createStyler(theme.value[name]);
+    return styler(props);
+  }
   return {
-    theme: computed(() => extendTheme(toValue(themeExtension), theme)),
-    createStyler
+    theme,
+    createStyler,
+    generateStyle
   };
 });

package/dist/runtime/composables/useToast.d.ts

@@ -1,24 +1,8 @@
-import type { ToastProps } from '../types/index.js';
-export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
-    id: string | number;
-    onClick?: (toast: Toast) => void;
-}
+import type { ToastState } from '../types/index.js';
 export declare const useToast: () => {
-    toasts: import("vue").Ref<{
-        [x: string]: any;
-        [x: number]: any;
-        [x: symbol]: ToastProps;
-        id: string | number;
-        onClick?: ((toast: Toast) => void) | undefined;
-    }[], Toast[] | {
-        [x: string]: any;
-        [x: number]: any;
-        [x: symbol]: ToastProps;
-        id: string | number;
-        onClick?: ((toast: Toast) => void) | undefined;
-    }[]>;
-    add: (toast: Partial<Toast>) => Toast;
-    update: (id: string | number, toast: Partial<Omit<Toast, "id">>) => void;
+    toasts: import("vue").Ref<ToastState[], ToastState[]>;
+    add: (toast: Partial<ToastState>) => ToastState;
+    update: (id: string | number, toast: Partial<Omit<ToastState, "id">>) => void;
     remove: (id: string | number) => void;
     clear: () => void;
 };

package/dist/runtime/composables/useToast.js

@@ -1,11 +1,12 @@
 import { createSharedComposable } from "@vueuse/core";
 import { nextTick, ref } from "vue";
+import { useState } from "#imports";
 export const useToast = createSharedComposable(() => {
-  const toasts = ref([]);
+  const toasts = useState("toasts", () => []);
   const running = ref(false);
   const maxToasts = 5;
   const queue = [];
-  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
   async function processQueue() {
     if (running.value || queue.length === 0)
       return;
@@ -28,7 +29,7 @@ export const useToast = createSharedComposable(() => {
     return body;
   }
   function update(id, toast) {
-    const index = toasts.value.findIndex((t) => t.id === id);
+    const index = toasts.value.findIndex((toast2) => toast2.id === id);
     if (index === -1)
       return;
     toasts.value[index] = {
@@ -37,7 +38,7 @@ export const useToast = createSharedComposable(() => {
     };
   }
   function remove(id) {
-    const index = toasts.value.findIndex((t) => t.id === id);
+    const index = toasts.value.findIndex((toast) => toast.id === id);
     if (index === -1)
       return;
     toasts.value[index] = {
@@ -45,7 +46,7 @@ export const useToast = createSharedComposable(() => {
       open: false
     };
     setTimeout(() => {
-      toasts.value = toasts.value.filter((t) => t.id !== id);
+      toasts.value = toasts.value.filter((toast) => toast.id !== id);
     }, 200);
   }
   function clear() {

package/dist/runtime/index.d.ts

@@ -7,19 +7,23 @@ export { default as Badge } from './components/Badge.vue.js';
 export { default as Breadcrumb } from './components/Breadcrumb.vue.js';
 export { default as Button } from './components/Button.vue.js';
 export { default as ButtonGroup } from './components/ButtonGroup.vue.js';
+export { default as Calendar } from './components/Calendar.vue.js';
 export { default as Card } from './components/Card.vue.js';
 export { default as Carousel } from './components/Carousel.vue.js';
 export { default as Checkbox } from './components/Checkbox.vue.js';
 export { default as Chip } from './components/Chip.vue.js';
 export { default as Collapsible } from './components/Collapsible.vue.js';
 export { default as Drawer } from './components/Drawer.vue.js';
+export { default as DropdownMenu } from './components/DropdownMenu.vue.js';
+export { default as Form } from './components/Form.vue.js';
+export { default as FormItem } from './components/FormItem.vue.js';
 export { default as Input } from './components/Input.vue.js';
 export { default as InputNumber } from './components/InputNumber.vue.js';
 export { default as Kbd } from './components/Kbd.vue.js';
 export { default as Link } from './components/Link.vue.js';
 export { default as LinkBase } from './components/LinkBase.vue.js';
 export { default as Modal } from './components/Modal.vue.js';
-export { default as ModalProvider } from './components/ModalProvider.vue.js';
+export { default as OverlayProvider } from './components/OverlayProvider.vue.js';
 export { default as Pagination } from './components/Pagination.vue.js';
 export { default as PinInput } from './components/PinInput.vue.js';
 export { default as Popover } from './components/Popover.vue.js';
@@ -35,6 +39,6 @@ export { default as Table } from './components/Table.vue.js';
 export { default as Tabs } from './components/Tabs.vue.js';
 export { default as Textarea } from './components/Textarea.vue.js';
 export { default as Toast } from './components/Toast.vue.js';
-export { default as Toaster } from './components/Toaster.vue.js';
+export { default as ToastProvider } from './components/ToastProvider.vue.js';
 export { default as Tooltip } from './components/Tooltip.vue.js';
 export * from './types/index.js';

package/dist/runtime/index.js

@@ -7,19 +7,23 @@ export { default as Badge } from "./components/Badge.vue";
 export { default as Breadcrumb } from "./components/Breadcrumb.vue";
 export { default as Button } from "./components/Button.vue";
 export { default as ButtonGroup } from "./components/ButtonGroup.vue";
+export { default as Calendar } from "./components/Calendar.vue";
 export { default as Card } from "./components/Card.vue";
 export { default as Carousel } from "./components/Carousel.vue";
 export { default as Checkbox } from "./components/Checkbox.vue";
 export { default as Chip } from "./components/Chip.vue";
 export { default as Collapsible } from "./components/Collapsible.vue";
 export { default as Drawer } from "./components/Drawer.vue";
+export { default as DropdownMenu } from "./components/DropdownMenu.vue";
+export { default as Form } from "./components/Form.vue";
+export { default as FormItem } from "./components/FormItem.vue";
 export { default as Input } from "./components/Input.vue";
 export { default as InputNumber } from "./components/InputNumber.vue";
 export { default as Kbd } from "./components/Kbd.vue";
 export { default as Link } from "./components/Link.vue";
 export { default as LinkBase } from "./components/LinkBase.vue";
 export { default as Modal } from "./components/Modal.vue";
-export { default as ModalProvider } from "./components/ModalProvider.vue";
+export { default as OverlayProvider } from "./components/OverlayProvider.vue";
 export { default as Pagination } from "./components/Pagination.vue";
 export { default as PinInput } from "./components/PinInput.vue";
 export { default as Popover } from "./components/Popover.vue";
@@ -35,6 +39,6 @@ export { default as Table } from "./components/Table.vue";
 export { default as Tabs } from "./components/Tabs.vue";
 export { default as Textarea } from "./components/Textarea.vue";
 export { default as Toast } from "./components/Toast.vue";
-export { default as Toaster } from "./components/Toaster.vue";
+export { default as ToastProvider } from "./components/ToastProvider.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
 export * from "./types/index.js";

package/dist/runtime/locale/en.js

@@ -6,6 +6,12 @@ export default defineLocale({
     alert: {
       close: "Close"
     },
+    calendar: {
+      prevYear: "Previous year",
+      nextYear: "Next year",
+      prevMonth: "Previous month",
+      nextMonth: "Next month"
+    },
     carousel: {
       prev: "Prev",
       next: "Next",

package/dist/runtime/locale/zh-tw.js

@@ -6,6 +6,12 @@ export default defineLocale({
     alert: {
       close: "\u95DC\u9589"
     },
+    calendar: {
+      prevYear: "\u53BB\u5E74",
+      nextYear: "\u660E\u5E74",
+      prevMonth: "\u4E0A\u500B\u6708",
+      nextMonth: "\u4E0B\u500B\u6708"
+    },
     carousel: {
       prev: "\u4E0A\u4E00\u9801",
       next: "\u4E0B\u4E00\u9801",

package/dist/runtime/theme/accordion.js

@@ -3,16 +3,16 @@ export default ct(
   /* @unocss-include */
   {
     slots: {
-      root: "w-full color-ui-cb",
+      root: "w-full color-ui-base",
       item: "border-b last:border-b-0",
       header: "flex",
-      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-cb/80 min-w-0",
+      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-base/80 min-w-0",
       content: [
         "overflow-hidden focus:outline-none",
         "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
         "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
       ],
-      body: "text-sm pb-4 color-ui-cb/80",
+      body: "text-sm pb-4 color-ui-base/80",
       leadingIcon: "shrink-0 size-5",
       trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-all duration-200",
       label: "text-start break-words"

package/dist/runtime/theme/alert.js

@@ -18,13 +18,13 @@ export default ct(
           close: "ui-base-inverted"
         },
         "outline": {
-          root: "color-ui-content bg-ui-cx ring ring-inset ring-ui-fill/30"
+          root: "color-ui-fill bg-ui-base ring ring-inset ring-ui-fill/30"
         },
         "soft": {
-          root: "color-ui-content bg-soft-ui-fill/10"
+          root: "color-ui-fill bg-soft-ui-fill/10"
         },
         "soft-outline": {
-          root: "color-ui-content bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
+          root: "color-ui-fill bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
         }
       },
       orientation: {

package/dist/runtime/theme/app.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
         ellipsis: string;
         plus: string;
         minus: string;
+        external: string;
     };
 };
 export default _default;

package/dist/runtime/theme/app.js

@@ -13,6 +13,7 @@ export default {
     chevronDoubleRight: "i-mdi-chevron-double-right",
     ellipsis: "i-mdi-dots-horizontal",
     plus: "i-mdi-plus",
-    minus: "i-mdi-minus"
+    minus: "i-mdi-minus",
+    external: "i-mdi-arrow-top-right"
   }
 };

package/dist/runtime/theme/avatar.js

@@ -5,8 +5,8 @@ export default ct(
     slots: {
       root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-soft-ui-cb/10",
       image: "size-full rounded-inherit object-cover",
-      fallback: "leading-none color-ui-cb/60 truncate",
-      icon: "size-3/4 color-ui-cb/60 shrink-0"
+      fallback: "leading-none color-ui-base/60 truncate",
+      icon: "size-3/4 color-ui-base/60 shrink-0"
     },
     variants: {
       size: {

package/dist/runtime/theme/badge.d.ts

@@ -50,55 +50,31 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        size: {
-            xs: {
-                root: string;
-            };
-            sm: {
-                root: string;
-            };
-            md: {
-                root: string;
-            };
-            lg: {
-                root: string;
-            };
-            xl: {
-                root: string;
-            };
-        };
-        position: {
-            'top-right': {
-                base: string;
-            };
-            'bottom-right': {
-                base: string;
-            };
-            'top-left': {
-                base: string;
-            };
-            'bottom-left': {
-                base: string;
-            };
+    compoundVariants: ({
+        position: "top-right";
+        inset: false;
+        class: {
+            base: string;
         };
-        show: {
-            true: {
-                base: string;
-            };
+    } | {
+        position: "bottom-right";
+        inset: false;
+        class: {
+            base: string;
         };
-        inset: {
-            true: "";
+    } | {
+        position: "top-left";
+        inset: false;
+        class: {
+            base: string;
         };
-        standalone: {
-            false: {
-                base: string;
-            };
+    } | {
+        position: "bottom-left";
+        inset: false;
+        class: {
+            base: string;
         };
-    }, {
-        root: string;
-        base: string[];
-    }, undefined>;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/breadcrumb.d.ts

@@ -29,9 +29,9 @@ declare const _default: {
         };
     };
     compoundVariants: {
-        disabled: boolean;
-        active: boolean;
-        to: boolean;
+        disabled: false;
+        active: false;
+        to: true;
         class: {
             link: string;
         };

package/dist/runtime/theme/breadcrumb.js

@@ -6,19 +6,19 @@ export default ct(
       root: "relative min-w-0",
       list: "flex items-center gap-1.5",
       item: "flex min-w-0",
-      link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-ui-cp",
+      link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-ui-primary",
       linkLeadingIcon: "shrink-0 size-5",
       linkLabel: "truncate",
       separator: "flex",
-      separatorIcon: "shrink-0 size-5 color-ui-cb/60"
+      separatorIcon: "shrink-0 size-5 color-ui-base/60"
     },
     variants: {
       active: {
         true: {
-          link: "text-ui-cp font-semibold"
+          link: "color-ui-primary font-semibold"
         },
         false: {
-          link: "color-ui-cb/60 font-medium"
+          link: "color-ui-base/60 font-medium"
         }
       },
       disabled: {
@@ -36,7 +36,7 @@ export default ct(
         active: false,
         to: true,
         class: {
-          link: "hover:color-ui-cb/80 transition-colors"
+          link: "hover:color-ui-base/80 transition-colors"
         }
       }
     ]

package/dist/runtime/theme/button.d.ts

@@ -65,70 +65,124 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        variant: {
-            solid: {
-                base: string[];
-            };
-            outline: {
-                base: string[];
-            };
-            soft: {
-                base: string[];
-            };
-            'soft-outline': {
-                base: string[];
-            };
-            ghost: {
-                base: string[];
-            };
-            link: {
-                base: string[];
-            };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        active: {
-            true: "";
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "solid";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        leading: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "outline";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        trailing: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: ("soft" | "soft-outline")[];
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        loading: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "ghost";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        groupOrientation: {
-            horizontal: {
-                base: string;
-            };
-            vertical: {
-                base: string;
-            };
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "link";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-    }, {
-        base: string[];
-        label: string;
-        leadingIcon: string;
-        trailingIcon: string;
-    }, undefined>;
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: true;
+        class: {
+            leadingIcon: string;
+            base?: undefined;
+            label?: undefined;
+            trailingIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: false;
+        trailing: true;
+        class: {
+            trailingIcon: string;
+            base?: undefined;
+            label?: undefined;
+            leadingIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/button.js

@@ -6,7 +6,7 @@ export default ct(
     slots: {
       base: [
         "relative inline-flex items-center rounded-ui-button leading-normal transition-colors",
-        "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb/80",
+        "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-base/80",
         "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50"
       ],
       label: "color-inherit",
@@ -26,26 +26,26 @@ export default ct(
         },
         "outline": {
           base: [
-            "color-ui-fill/80 bg-ui-cx ring ring-inset ring-ui-fill/30",
+            "color-ui-fill/80 bg-ui-base ring ring-inset ring-ui-fill/30",
             "hover:bg-soft-ui-fill/5 active:bg-soft-ui-fill/10",
-            "disabled:bg-ui-cx aria-disabled:bg-ui-cx",
-            "hover:disabled:bg-ui-cx hover:aria-disabled:bg-ui-cx"
+            "disabled:bg-ui-base aria-disabled:bg-ui-base",
+            "hover:disabled:bg-ui-base hover:aria-disabled:bg-ui-base"
           ]
         },
         "soft": {
           base: [
-            "color-ui-content/80 bg-soft-ui-fill/15",
-            "hover:bg-soft-ui-fill/10 hover:color-ui-content/80 active:bg-soft-ui-fill/25 active:color-ui-content/90",
-            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-content/80 aria-disabled:color-ui-content/80",
-            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-content/80 hover:aria-disabled:color-ui-content/80"
+            "color-ui-fill/80 bg-soft-ui-fill/15",
+            "hover:bg-soft-ui-fill/10 hover:color-ui-fill/80 active:bg-soft-ui-fill/25 active:color-ui-fill/90",
+            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80",
+            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-fill/80 hover:aria-disabled:color-ui-fill/80"
           ]
         },
         "soft-outline": {
           base: [
-            "color-ui-content/80 bg-soft-ui-fill/15 ring ring-inset ring-ui-fill/30",
-            "hover:bg-soft-ui-fill/10 hover:color-ui-content/80 active:bg-soft-ui-fill/25 active:color-ui-content/90",
-            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-content/80 aria-disabled:color-ui-content/80",
-            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-content/80 hover:aria-disabled:color-ui-content/80"
+            "color-ui-fill/80 bg-soft-ui-fill/15 ring ring-inset ring-ui-fill/30",
+            "hover:bg-soft-ui-fill/10 hover:color-ui-fill/80 active:bg-soft-ui-fill/25 active:color-ui-fill/90",
+            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80",
+            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-fill/80 hover:aria-disabled:color-ui-fill/80"
           ]
         },
         "ghost": {
@@ -128,7 +128,7 @@ export default ct(
         active: true,
         variant: ["soft", "soft-outline"],
         class: {
-          base: "color-ui-content/90 bg-soft-ui-fill/25 hover:color-ui-content/90 hover:bg-soft-ui-fill/25"
+          base: "color-ui-fill/90 bg-soft-ui-fill/25 hover:color-ui-fill/90 hover:bg-soft-ui-fill/25"
         }
       },
       {