Browse Source

chore: update deps

vben 10 months ago
parent
commit
11a36ef03f
32 changed files with 326 additions and 273 deletions
  1. 4 0
      .vscode/settings.json
  2. 1 1
      apps/antd-view/package.json
  3. 2 2
      internal/lint-configs/commitlint-config/package.json
  4. 2 2
      internal/lint-configs/eslint-config/package.json
  5. 2 1
      internal/tailwind-config/package.json
  6. 11 2
      internal/tailwind-config/src/index.ts
  7. 22 0
      internal/tailwind-config/src/plugins.ts
  8. 2 2
      package.json
  9. 1 17
      packages/@vben-core/shared/design-tokens/src/dark/index.scss
  10. 1 11
      packages/@vben-core/shared/design-tokens/src/default/index.scss
  11. 10 13
      packages/@vben-core/shared/design/src/scss/common/base.scss
  12. 0 4
      packages/@vben-core/shared/design/src/scss/index.scss
  13. 2 8
      packages/@vben-core/shared/design/src/tailwind.css
  14. 1 1
      packages/@vben-core/uikit/layout-ui/package.json
  15. 6 24
      packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue
  16. 2 22
      packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue
  17. 10 49
      packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
  18. 1 1
      packages/@vben-core/uikit/menu-ui/package.json
  19. 2 2
      packages/@vben-core/uikit/shadcn-ui/package.json
  20. 2 2
      packages/business/common-ui/package.json
  21. 1 1
      packages/business/common-ui/src/fallback/fallback.vue
  22. 10 8
      packages/business/layouts/src/authentication/authentication.vue
  23. 1 1
      packages/business/layouts/src/authentication/toolbar.vue
  24. 1 1
      packages/preference/package.json
  25. 2 2
      packages/preference/src/preference.ts
  26. 0 0
      packages/styles/src/common/entry.scss
  27. 2 1
      packages/styles/src/common/nprogress.css
  28. 4 0
      packages/styles/src/index.scss
  29. 1 0
      packages/styles/src/index.ts
  30. 6 0
      packages/styles/src/tokens/dark.scss
  31. 9 0
      packages/styles/src/tokens/light.scss
  32. 205 95
      pnpm-lock.yaml

+ 4 - 0
.vscode/settings.json

@@ -155,6 +155,10 @@
     "json5"
   ],
 
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+
   "github.copilot.enable": {
     "*": true,
     "markdown": true,

+ 1 - 1
apps/antd-view/package.json

@@ -33,7 +33,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",

+ 2 - 2
internal/lint-configs/commitlint-config/package.json

@@ -34,7 +34,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@vben/node-utils": "workspace:*",
-    "cz-git": "^1.9.1",
-    "czg": "^1.9.1"
+    "cz-git": "^1.9.2",
+    "czg": "^1.9.2"
   }
 }

+ 2 - 2
internal/lint-configs/eslint-config/package.json

@@ -35,8 +35,8 @@
   "devDependencies": {
     "@eslint/js": "^9.3.0",
     "@types/eslint": "^8.56.10",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

+ 2 - 1
internal/tailwind-config/package.json

@@ -45,9 +45,10 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.213",
+    "@iconify/json": "^2.2.214",
     "@iconify/tailwind": "^1.1.1",
     "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
     "cssnano": "^7.0.1",
     "postcss": "^8.4.38",

+ 11 - 2
internal/tailwind-config/src/index.ts

@@ -4,8 +4,11 @@ import path from 'node:path';
 
 import { addDynamicIconSelectors } from '@iconify/tailwind';
 import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from '@tailwindcss/typography';
 import { fs, getPackagesSync } from '@vben/node-utils';
 import animate from 'tailwindcss-animate';
+
+import { plugins } from './plugins';
 // import defaultTheme from 'tailwindcss/defaultTheme';
 
 const { packages } = getPackagesSync();
@@ -27,7 +30,13 @@ export default {
     ),
   ],
   darkMode: 'class',
-  plugins: [animate, formsPlugin, addDynamicIconSelectors()],
+  plugins: [
+    ...plugins,
+    animate,
+    formsPlugin,
+    typographyPlugin,
+    addDynamicIconSelectors(),
+  ],
   prefix: '',
   safelist: ['dark'],
   theme: {
@@ -59,7 +68,7 @@ export default {
           hover: 'hsl(var(--color-accent-hover))',
         },
         background: 'hsl(var(--color-background) / <alpha-value>)',
-        body: 'hsl(var(--color-body) / <alpha-value>)',
+        // body: 'hsl(var(--color-body) / <alpha-value>)',
         border: 'hsl(var(--color-border))',
         card: {
           DEFAULT: 'hsl(var(--color-card))',

+ 22 - 0
internal/tailwind-config/src/plugins.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'tailwindcss';
+
+import plugin from 'tailwindcss/plugin';
+
+const flexCenterStyles = {
+  'align-items': 'center',
+  display: 'flex',
+  'justify-content': 'center',
+};
+
+const plugins = [
+  plugin(({ addUtilities }) => {
+    addUtilities({
+      '.flex-center': flexCenterStyles,
+      '.flex-col-center': {
+        ...flexCenterStyles,
+      },
+    });
+  }),
+] as unknown as Config['plugins'][];
+
+export { plugins };

+ 2 - 2
package.json

@@ -61,7 +61,7 @@
     "cross-env": "^7.0.3",
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "rimraf": "^5.0.7",
     "taze": "^0.13.8",
     "turbo": "^1.13.3",
@@ -75,7 +75,7 @@
     "node": ">=18.7.0",
     "pnpm": ">=8.5.0"
   },
-  "packageManager": "pnpm@9.1.2",
+  "packageManager": "pnpm@9.1.3",
   "pnpm": {
     "overrides": {
       "@ctrl/tinycolor": "4.1.0",

+ 1 - 17
packages/@vben-core/shared/design-tokens/src/dark/index.scss

@@ -3,7 +3,7 @@
 
   /* --color-background: 240 6% 18%; */
   // --color-body: 220deg 13.04% 8%;
-  --color-body: 220deg 13.04% 8%;
+  // --color-body: hsl(240deg 11% 4%);
   --color-background: 220deg 13.04% 8%;
 
   /* --color-background: 219 42% 11%; */
@@ -76,20 +76,4 @@
 
   /* 基本圆角大小 */
   --radius-base: 0.5rem;
-
-  /* ======================================== */
-
-  /* =============component & UI============= */
-
-  /* ======================================== */
-
-  /* --color-login-background: 219 42% 11%; */
-
-  /* 图标颜色 */
-
-  /* authentication */
-  --color-authentication-from: hsl(240deg 11% 6%);
-  --color-authentication-to: hsl(240deg 11% 6%);
-
-  color-scheme: dark;
 }

+ 1 - 11
packages/@vben-core/shared/design-tokens/src/default/index.scss

@@ -1,13 +1,9 @@
 /* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
-    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
-
   /* 基础背景颜色颜色 */
 
   /* --color-background: 210deg 25% 96.86%; */
-  --color-body: 210deg 25% 96.86%;
+  // --color-main: 210deg 25% 96.86%;
   --color-background: 0 0 100%;
   // --color-darken-background: 220deg 13.04% 8%;
 
@@ -86,8 +82,6 @@
 
   /* ======================================== */
 
-  /* --color-login-background: 0 0 100%; */
-
   /* menu */
   --color-menu-dark: 225deg 12% 13%;
   --color-menu-dark-darken: 223deg 11% 10%;
@@ -96,8 +90,4 @@
   --color-menu: 0deg 0% 100%;
   --color-menu-darken: 0deg 0% 95%;
   // --color-menu-opened: 0deg 0% 100%;
-
-  /* authentication */
-  --color-authentication-from: hsl(231deg 61% 44%);
-  --color-authentication-to: hsl(218deg 70% 42%);
 }

+ 10 - 13
packages/@vben-core/shared/design/src/scss/common/base.scss

@@ -10,29 +10,26 @@ html {
 *,
 ::after,
 ::before {
+  @apply border-border;
+
   box-sizing: border-box;
-  border-color: hsl(var(--color-border));
   border-style: solid;
   border-width: 0;
 }
 
-body.invert {
-  filter: invert(100%);
+body.invert-mode {
+  @apply invert;
 }
 
-body.grayscale {
-  --tw-grayscale: grayscale(100%);
-
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
-    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
-    var(--tw-sepia) var(--tw-drop-shadow);
+body.grayscale-mode {
+  @apply grayscale;
 }
 
 html {
-  font-size: var(--font-size-base);
+  @apply text-foreground bg-background;
+
+  // font-size: 62.5%;
   font-variation-settings: normal;
-  color: hsl(var(--color-foreground));
-  background-color: hsl(var(--color-background));
   text-size-adjust: 100%;
   font-synthesis-weight: none;
   scroll-behavior: smooth;
@@ -73,7 +70,7 @@ html.dark::view-transition-new(root) {
 
 input::placeholder,
 textarea::placeholder {
-  color: hsl(var(--color-input-placeholder)) !important;
+  // color: hsl(var(--color-input-placeholder)) !important;
   opacity: 1;
 }
 

+ 0 - 4
packages/@vben-core/shared/design/src/scss/index.scss

@@ -1,8 +1,4 @@
 /** css 样式重置 */
 @import 'modern-normalize/modern-normalize.css';
-
-/** 元素进入动画 */
-@import './common/entry';
 @import './common/base';
 @import './transition';
-@import './nprogress';

+ 2 - 8
packages/@vben-core/shared/design/src/tailwind.css

@@ -1,21 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   html {
     @apply font-sans;
   }
 }
+
 @layer components {
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
-  .flex-col-center {
-    @apply flex flex-col items-center justify-center;
-  }
   .outline-box {
-    @apply outline-border relative  cursor-pointer rounded-md p-1 outline outline-1;
-
     &:after {
       @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[''];
     }

+ 1 - 1
packages/@vben-core/uikit/layout-ui/package.json

@@ -46,7 +46,7 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "vue": "3.4.27"
   }
 }

+ 6 - 24
packages/@vben-core/uikit/layout-ui/src/components/layout-header.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { IcRoundMenu } from '@vben-core/iconify';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
-import { useNamespace } from '@vben-core/toolkit';
 
 import type { CSSProperties } from 'vue';
 
@@ -82,8 +81,6 @@ const emit = defineEmits<{ openMenu: []; toggleMenu: [] }>();
 
 const slots = useSlots();
 
-const { b, e } = useNamespace('header');
-
 const style = computed((): CSSProperties => {
   const { backgroundColor, fullWidth, height, show } = props;
   const right = !show || !fullWidth ? undefined : 0;
@@ -113,13 +110,16 @@ function handleOpenMenu() {
 </script>
 
 <template>
-  <header :class="b()" :style="style">
+  <header
+    :style="style"
+    class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
+  >
     <div v-if="slots.logo" :style="logoStyle">
       <slot name="logo"></slot>
     </div>
     <VbenIconButton
       v-if="showToggleBtn"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
       @click="handleToggleMenu"
     >
       <IcRoundMenu class="size-5" />
@@ -127,7 +127,7 @@ function handleOpenMenu() {
 
     <VbenIconButton
       v-if="isMobile"
-      :class="e('toggle-btn')"
+      class="my-0 ml-2 mr-1 rounded"
       @click="handleOpenMenu"
     >
       <IcRoundMenu class="size-5" />
@@ -136,21 +136,3 @@ function handleOpenMenu() {
     <slot></slot>
   </header>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('header') {
-  top: 0;
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-
-  @include e('toggle-btn') {
-    margin: 0 4px 0 8px;
-    border-radius: 4px;
-  }
-}
-</style>

+ 2 - 22
packages/@vben-core/uikit/layout-ui/src/components/layout-tabs.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';
 
 import { computed } from 'vue';
@@ -25,8 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
   height: 30,
 });
 
-const { b, e } = useNamespace('tabs');
-
 const hiddenStyle = computed((): CSSProperties => {
   const { height } = props;
   return {
@@ -45,26 +41,10 @@ const style = computed((): CSSProperties => {
 </script>
 
 <template>
-  <section :class="b()" :style="style">
+  <section :style="style" class="border-border flex w-full border-b">
     <slot></slot>
-    <div :class="e('toolbar')">
+    <div class="flex items-center">
       <slot name="toolbar"></slot>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('tabs') {
-  display: flex;
-  width: 100%;
-  border-bottom: 1px solid hsl(var(--color-border));
-  // transition: all 0.2s;
-
-  @include e('toolbar') {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

+ 10 - 49
packages/@vben-core/uikit/layout-ui/src/vben-layout.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useNamespace } from '@vben-core/toolkit';
-
 import type { CSSProperties } from 'vue';
 
 import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
@@ -60,7 +58,6 @@ const sideExtraCollapse = defineModel<boolean>('sideExtraCollapse');
 const sideExpandOnHover = defineModel<boolean>('sideExpandOnHover');
 const sideVisible = defineModel<boolean>('sideVisible', { default: true });
 
-const { b, e, is } = useNamespace('layout');
 const {
   arrivedState,
   directions,
@@ -453,7 +450,7 @@ function handleOpenMenu() {
 </script>
 
 <template>
-  <div :class="[b(), is(realLayout, true)]">
+  <div class="relative flex min-h-full w-full">
     <slot name="preference"></slot>
     <slot name="back-top"></slot>
     <LayoutSide
@@ -496,8 +493,13 @@ function handleOpenMenu() {
       </template>
     </LayoutSide>
 
-    <div :class="e('main')">
-      <div :style="headerWrapperStyle" :class="e('header-wrapper')">
+    <div
+      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
+    >
+      <div
+        :style="headerWrapperStyle"
+        class="overflow-hidden transition-all duration-200 ease-in-out"
+      >
         <LayoutHeader
           v-if="headerVisible"
           :full-width="!isSideMode"
@@ -529,7 +531,7 @@ function handleOpenMenu() {
 
       <!-- </div> -->
       <LayoutContent
-        :class="e('content')"
+        class="transition-[margin-top] duration-300 ease-in"
         :style="contentStyle"
         :content-compact="contentCompact"
         :content-compact-width="contentCompactWidth"
@@ -555,50 +557,9 @@ function handleOpenMenu() {
     </div>
     <div
       v-if="maskVisible"
-      :class="e('mask')"
+      class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
       :style="maskStyle"
       @click="handleClickMask"
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import '@vben-core/design/global';
-
-@include b('layout') {
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: 100%;
-
-  @include e('main') {
-    display: flex;
-    flex: auto;
-    flex: 1;
-    flex-direction: column;
-    overflow-x: hidden;
-    background-color: hsl(var(--color-body));
-    border-left: 1px solid hsl(var(--color-border));
-    transition: all 0.3s ease;
-  }
-
-  @include e('content') {
-    transition: margin-top 0.3s ease;
-  }
-
-  @include e('header-wrapper') {
-    overflow: hidden;
-    transition: all 0.25s ease-in-out;
-  }
-
-  @include e('mask') {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 40%);
-    transition: background-color 0.2s;
-  }
-}
-</style>

+ 1 - 1
packages/@vben-core/uikit/menu-ui/package.json

@@ -46,7 +46,7 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "vue": "3.4.27"
   }
 }

+ 2 - 2
packages/@vben-core/uikit/shadcn-ui/package.json

@@ -45,10 +45,10 @@
     "@vben-core/iconify": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
-    "radix-vue": "^1.8.1",
+    "radix-vue": "^1.8.2",
     "tailwind-merge": "^2.3.0",
     "vue": "3.4.27",
     "vue-sonner": "^1.1.2"

+ 2 - 2
packages/business/common-ui/package.json

@@ -50,8 +50,8 @@
     "@vben-core/toolkit": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vben/preference": "workspace:*",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
+    "@vueuse/integrations": "^10.10.0",
     "qrcode": "^1.5.3",
     "vue": "3.4.27",
     "vue-router": "^4.3.2"

+ 1 - 1
packages/business/common-ui/src/fallback/fallback.vue

@@ -59,7 +59,7 @@ function back() {
 
 <template>
   <div
-    class="-enter-x flex h-screen w-full flex-col items-center justify-center"
+    class="animate-in zoom-in-50 flex h-screen w-full flex-col items-center justify-center duration-300"
   >
     <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
     <FeedbackIcon v-else class="md:1/3 h-1/3 w-1/2 lg:w-1/4" />

+ 10 - 8
packages/business/layouts/src/authentication/authentication.vue

@@ -14,16 +14,18 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
 </script>
 
 <template>
-  <div class="bg-body flex min-h-full flex-1 select-none overflow-x-hidden">
+  <div
+    class="bg-background flex min-h-full flex-1 select-none overflow-x-hidden"
+  >
     <AuthenticationFromView
       v-if="authPanelLeft"
-      class="-enter-x min-h-full w-2/5"
+      class="min-h-full w-2/5"
       transition-name="slide-left"
     />
 
     <div class="absolute left-0 top-0 z-10 flex flex-1">
       <div
-        class="-enter-x text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
         :class="
           authPanelLeft || authPanelCenter
             ? 'lg:text-foreground'
@@ -43,17 +45,17 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
     </div>
     <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
       <div
-        class="absolute inset-0 h-full w-full bg-gradient-to-r from-[var(--color-authentication-from)] to-[var(--color-authentication-to)]"
+        class="absolute inset-0 h-full w-full bg-[var(--color-authentication)]"
       >
         <div class="flex-center mr-20 flex h-full flex-col">
           <SloganIcon
             :alt="preference.appName"
             class="animate-float h-64 w-2/5"
           />
-          <div class="-enter-x text-1xl mt-6 font-sans text-white lg:text-2xl">
+          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
             {{ $t('authentication.layout-title') }}
           </div>
-          <div class="-enter-x dark:text-muted-foreground mt-2 text-white/60">
+          <div class="dark:text-muted-foreground mt-2 text-white/60">
             {{ $t('authentication.layout-desc') }}
           </div>
         </div>
@@ -61,7 +63,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
     </div>
     <div
       v-if="authPanelCenter"
-      class="flex-center w-full dark:bg-[var(--color-authentication-to)]"
+      class="flex-center w-full dark:bg-[var(--color-authentication)]"
     >
       <AuthenticationFromView
         class="enter-y md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
@@ -73,7 +75,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
     </div>
     <AuthenticationFromView
       v-if="authPanelRight"
-      class="enter-x min-h-full w-2/5 flex-1"
+      class="min-h-full w-2/5 flex-1"
     />
   </div>
 </template>

+ 1 - 1
packages/business/layouts/src/authentication/toolbar.vue

@@ -12,7 +12,7 @@ defineOptions({
 </script>
 <template>
   <div
-    class="flex-center bg-background absolute right-2 top-4 rounded-3xl px-3 py-1 dark:bg-[var(--color-authentication-to)]"
+    class="flex-center bg-background absolute right-2 top-4 rounded-3xl px-3 py-1 dark:bg-[var(--color-authentication)]"
   >
     <div class="hidden md:flex">
       <AuthenticationColorToggle />

+ 1 - 1
packages/preference/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.10.0",
     "vue": "3.4.27"
   }
 }

+ 2 - 2
packages/preference/src/preference.ts

@@ -110,8 +110,8 @@ function updateTheme(preference: Preference) {
 function updateColorMode(preference: Preference) {
   const { colorGrayMode, colorWeakMode } = preference;
   const body = document.body;
-  const COLOR_WEAK = 'invert';
-  const COLOR_GRAY = 'grayscale';
+  const COLOR_WEAK = 'invert-mode';
+  const COLOR_GRAY = 'grayscale-mode';
   colorWeakMode
     ? body.classList.add(COLOR_WEAK)
     : body.classList.remove(COLOR_WEAK);

+ 0 - 0
packages/@vben-core/shared/design/src/scss/common/entry.scss → packages/styles/src/common/entry.scss


+ 2 - 1
packages/@vben-core/shared/design/src/scss/nprogress.scss → packages/styles/src/common/nprogress.css

@@ -4,13 +4,14 @@
 }
 
 #nprogress .bar {
+  @apply bg-primary;
+
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1031;
   width: 100%;
   height: 2px;
-  background: hsl(var(--color-primary));
 }
 
 /* Fancy blur effect */

+ 4 - 0
packages/styles/src/index.scss

@@ -0,0 +1,4 @@
+@import './tokens/light';
+@import './tokens/dark';
+@import './common/nprogress.css';
+// @import './common/entry';

+ 1 - 0
packages/styles/src/index.ts

@@ -1,3 +1,4 @@
+import './index.scss';
 import '@vben-core/design/tailwind';
 
 import '@vben-core/design';

+ 6 - 0
packages/styles/src/tokens/dark.scss

@@ -0,0 +1,6 @@
+:root.dark {
+  /* authentication */
+  --color-authentication: hsl(240deg 11% 2%);
+
+  color-scheme: dark;
+}

+ 9 - 0
packages/styles/src/tokens/light.scss

@@ -0,0 +1,9 @@
+/* https://gavin-yyc.github.io/colorconvert/ */
+:root {
+  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /* authentication */
+  --color-authentication: hsl(231deg 61% 44%);
+}

+ 205 - 95
pnpm-lock.yaml

@@ -65,8 +65,8 @@ importers:
         specifier: ^3.0.1
         version: 3.0.1
       jsdom:
-        specifier: ^24.0.0
-        version: 24.0.0
+        specifier: ^24.1.0
+        version: 24.1.0
       rimraf:
         specifier: ^5.0.7
         version: 5.0.7
@@ -87,7 +87,7 @@ importers:
         version: 5.2.11(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)
       vitest:
         specifier: ^2.0.0-beta.3
-        version: 2.0.0-beta.3(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0)
+        version: 2.0.0-beta.3(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0)
       vue-tsc:
         specifier: ^2.0.19
         version: 2.0.19(typescript@5.4.5)
@@ -128,8 +128,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       ant-design-vue:
         specifier: ^4.2.1
         version: 4.2.1(vue@3.4.27(typescript@5.4.5))
@@ -162,11 +162,11 @@ importers:
         specifier: workspace:*
         version: link:../../node-utils
       cz-git:
-        specifier: ^1.9.1
-        version: 1.9.1
+        specifier: ^1.9.2
+        version: 1.9.2
       czg:
-        specifier: ^1.9.1
-        version: 1.9.1
+        specifier: ^1.9.2
+        version: 1.9.2
 
   internal/lint-configs/eslint-config:
     dependencies:
@@ -181,11 +181,11 @@ importers:
         specifier: ^8.56.10
         version: 8.56.10
       '@typescript-eslint/eslint-plugin':
-        specifier: ^7.10.0
-        version: 7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+        specifier: ^7.11.0
+        version: 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
       '@typescript-eslint/parser':
-        specifier: ^7.10.0
-        version: 7.10.0(eslint@8.57.0)(typescript@5.4.5)
+        specifier: ^7.11.0
+        version: 7.11.0(eslint@8.57.0)(typescript@5.4.5)
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -197,7 +197,7 @@ importers:
         version: 3.2.0(eslint@8.57.0)
       eslint-plugin-i:
         specifier: ^2.29.1
-        version: 2.29.1(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
+        version: 2.29.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
       eslint-plugin-jsdoc:
         specifier: ^48.2.6
         version: 48.2.6(eslint@8.57.0)
@@ -224,10 +224,10 @@ importers:
         version: 53.0.0(eslint@8.57.0)
       eslint-plugin-unused-imports:
         specifier: ^4.0.0
-        version: 4.0.0(@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
+        version: 4.0.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
       eslint-plugin-vitest:
         specifier: ^0.5.4
-        version: 0.5.4(@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0))
+        version: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0))
       eslint-plugin-vue:
         specifier: ^9.26.0
         version: 9.26.0(eslint@8.57.0)
@@ -332,14 +332,17 @@ importers:
   internal/tailwind-config:
     dependencies:
       '@iconify/json':
-        specifier: ^2.2.213
-        version: 2.2.213
+        specifier: ^2.2.214
+        version: 2.2.214
       '@iconify/tailwind':
         specifier: ^1.1.1
         version: 1.1.1
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.7(tailwindcss@3.4.3)
+      '@tailwindcss/typography':
+        specifier: ^0.5.13
+        version: 0.5.13(tailwindcss@3.4.3)
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
@@ -508,8 +511,8 @@ importers:
         specifier: workspace:*
         version: link:../../shared/typings
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -532,8 +535,8 @@ importers:
         specifier: workspace:*
         version: link:../../shared/typings
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -553,8 +556,8 @@ importers:
         specifier: workspace:*
         version: link:../../shared/typings
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -562,8 +565,8 @@ importers:
         specifier: 2.1.1
         version: 2.1.1
       radix-vue:
-        specifier: ^1.8.1
-        version: 1.8.1(vue@3.4.27(typescript@5.4.5))
+        specifier: ^1.8.2
+        version: 1.8.2(vue@3.4.27(typescript@5.4.5))
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.3.0
@@ -616,11 +619,11 @@ importers:
         specifier: workspace:*
         version: link:../../preference
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/integrations':
-        specifier: ^10.9.0
-        version: 10.9.0(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(qrcode@1.5.3)(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(qrcode@1.5.3)(vue@3.4.27(typescript@5.4.5))
       qrcode:
         specifier: ^1.5.3
         version: 1.5.3
@@ -722,8 +725,8 @@ importers:
         specifier: workspace:*
         version: link:../@vben-core/shared/typings
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -1810,8 +1813,8 @@ packages:
   '@humanwhocodes/object-schema@2.0.3':
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
 
-  '@iconify/json@2.2.213':
-    resolution: {integrity: sha512-5tcEn+ZDoWlBXmlJidYjMsJyFXhXuVscbg7PRpaon86GqrDlwW/cl8mR682C06Oq4AfeypmfVI18YTnczwdqxA==}
+  '@iconify/json@2.2.214':
+    resolution: {integrity: sha512-EVdAczIPBz1gcXVSHrEe0vBl6x4lcG7Dw95tO0o/h2SPTXKigEvV1cufe8yFFNuBHKqv/n1XTwqCZX0ontKTtw==}
 
   '@iconify/tailwind@1.1.1':
     resolution: {integrity: sha512-4mmA//qjZigv7D4KlqcVSYTqfRIJzyts2/lSCAJfCL0rVMIE76+ifJnaE5jxCo1+nYGBF8FsFo0qFOs+sX4EnA==}
@@ -2187,6 +2190,11 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
 
+  '@tailwindcss/typography@0.5.13':
+    resolution: {integrity: sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   '@tanstack/virtual-core@3.5.0':
     resolution: {integrity: sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==}
 
@@ -2284,8 +2292,8 @@ packages:
   '@types/which@3.0.3':
     resolution: {integrity: sha512-2C1+XoY0huExTbs8MQv1DuS5FS86+SEjdM9F/+GS61gg5Hqbtj8ZiDSx8MfWcyei907fIPbfPGCOrNUTnVHY1g==}
 
-  '@typescript-eslint/eslint-plugin@7.10.0':
-    resolution: {integrity: sha512-PzCr+a/KAef5ZawX7nbyNwBDtM1HdLIT53aSA2DDlxmxMngZ43O8SIePOeX8H5S+FHXeI6t97mTt/dDdzY4Fyw==}
+  '@typescript-eslint/eslint-plugin@7.11.0':
+    resolution: {integrity: sha512-P+qEahbgeHW4JQ/87FuItjBj8O3MYv5gELDzr8QaQ7fsll1gSMTYb6j87MYyxwf3DtD7uGFB9ShwgmCJB5KmaQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^7.0.0
@@ -2295,8 +2303,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@7.10.0':
-    resolution: {integrity: sha512-2EjZMA0LUW5V5tGQiaa2Gys+nKdfrn2xiTIBLR4fxmPmVSvgPcKNW+AE/ln9k0A4zDUti0J/GZXMDupQoI+e1w==}
+  '@typescript-eslint/parser@7.11.0':
+    resolution: {integrity: sha512-yimw99teuaXVWsBcPO1Ais02kwJ1jmNA1KxE7ng0aT7ndr1pT1wqj0OJnsYVGKKlc4QJai86l/025L6z8CljOg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -2309,8 +2317,12 @@ packages:
     resolution: {integrity: sha512-7L01/K8W/VGl7noe2mgH0K7BE29Sq6KAbVmxurj8GGaPDZXPr8EEQ2seOeAS+mEV9DnzxBQB6ax6qQQ5C6P4xg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/type-utils@7.10.0':
-    resolution: {integrity: sha512-D7tS4WDkJWrVkuzgm90qYw9RdgBcrWmbbRkrLA4d7Pg3w0ttVGDsvYGV19SH8gPR5L7OtcN5J1hTtyenO9xE9g==}
+  '@typescript-eslint/scope-manager@7.11.0':
+    resolution: {integrity: sha512-27tGdVEiutD4POirLZX4YzT180vevUURJl4wJGmm6TrQoiYwuxTIY98PBp6L2oN+JQxzE0URvYlzJaBHIekXAw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/type-utils@7.11.0':
+    resolution: {integrity: sha512-WmppUEgYy+y1NTseNMJ6mCFxt03/7jTOy08bcg7bxJJdsM4nuhnchyBbE8vryveaJUf62noH7LodPSo5Z0WUCg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -2323,6 +2335,10 @@ packages:
     resolution: {integrity: sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
+  '@typescript-eslint/types@7.11.0':
+    resolution: {integrity: sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
   '@typescript-eslint/typescript-estree@7.10.0':
     resolution: {integrity: sha512-LXFnQJjL9XIcxeVfqmNj60YhatpRLt6UhdlFwAkjNc6jSUlK8zQOl1oktAP8PlWFzPQC1jny/8Bai3/HPuvN5g==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -2332,16 +2348,35 @@ packages:
       typescript:
         optional: true
 
+  '@typescript-eslint/typescript-estree@7.11.0':
+    resolution: {integrity: sha512-cxkhZ2C/iyi3/6U9EPc5y+a6csqHItndvN/CzbNXTNrsC3/ASoYQZEt9uMaEp+xFNjasqQyszp5TumAVKKvJeQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@typescript-eslint/utils@7.10.0':
     resolution: {integrity: sha512-olzif1Fuo8R8m/qKkzJqT7qwy16CzPRWBvERS0uvyc+DHd8AKbO4Jb7kpAvVzMmZm8TrHnI7hvjN4I05zow+tg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
 
+  '@typescript-eslint/utils@7.11.0':
+    resolution: {integrity: sha512-xlAWwPleNRHwF37AhrZurOxA1wyXowW4PqVXZVUNCLjB48CqdPJoJWkrpH2nij9Q3Lb7rtWindtoXwxjxlKKCA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+
   '@typescript-eslint/visitor-keys@7.10.0':
     resolution: {integrity: sha512-9ntIVgsi6gg6FIq9xjEO4VQJvwOqA3jaBFQJ/6TK5AvEup2+cECI6Fh7QiBxmfMHXU0V0J4RyPeOU1VDNzl9cg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
+  '@typescript-eslint/visitor-keys@7.11.0':
+    resolution: {integrity: sha512-7syYk4MzjxTEk0g/w3iqtgxnFQspDJfn6QKD36xMuuhTzjcxY7F8EmBLnALjVyaOF1/bVocu3bS/2/F7rXrveQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -2485,11 +2520,11 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vueuse/core@10.9.0':
-    resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
+  '@vueuse/core@10.10.0':
+    resolution: {integrity: sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==}
 
-  '@vueuse/integrations@10.9.0':
-    resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
+  '@vueuse/integrations@10.10.0':
+    resolution: {integrity: sha512-vHGeK7X6mkdkpcm1eE9t3Cpm21pNVfZRwrjwwbrEs9XftnSgszF4831G2rei8Dt9cIYJIfFV+iyx/29muimJPQ==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -2529,8 +2564,11 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/metadata@10.9.0':
-    resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
+  '@vueuse/metadata@10.10.0':
+    resolution: {integrity: sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==}
+
+  '@vueuse/shared@10.10.0':
+    resolution: {integrity: sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==}
 
   '@vueuse/shared@10.9.0':
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
@@ -3211,12 +3249,12 @@ packages:
     resolution: {integrity: sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==}
     engines: {node: '>= 0.1.90'}
 
-  cz-git@1.9.1:
-    resolution: {integrity: sha512-GK3EI5R7GApS8u+g9QPvy/50z0NiG7ijc1NASxZaDnQn0ARzr73MjZb3Lt4cZQvKJBd8GrfvOWqHgwMQQ/OlaA==}
+  cz-git@1.9.2:
+    resolution: {integrity: sha512-HqwSIZBl/Vtlq56wsHuQHhQ0CF7rABEvhvbSAaGViLeM5YucLu5o+U2XLow1Y2bwIAfAIKZHfgg9fxP7P3XU3Q==}
     engines: {node: '>=v12.20.0'}
 
-  czg@1.9.1:
-    resolution: {integrity: sha512-0+vLv7QkoY+YNpGrPjyw6SPqvaOlqQsNJqSI3SC2oh5jNDjMrw2VEWBUg/8j/GZWmn1zCR2ssA8yAG9WK7A5sA==}
+  czg@1.9.2:
+    resolution: {integrity: sha512-uPSKTIsAhZp1Tu7DRO7K68qPixVFyheRKlOGhuKXo2wdlpcE0hoCmTQAwsUTerKtjcFRnhRTpJ5j0bC6SOj01Q==}
     engines: {node: '>=v12.20.0'}
     hasBin: true
 
@@ -4534,8 +4572,8 @@ packages:
     resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
     engines: {node: '>=12.0.0'}
 
-  jsdom@24.0.0:
-    resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==}
+  jsdom@24.1.0:
+    resolution: {integrity: sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==}
     engines: {node: '>=18'}
     peerDependencies:
       canvas: ^2.11.2
@@ -4684,6 +4722,9 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
   lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
 
@@ -5703,6 +5744,10 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -5886,8 +5931,8 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
-  radix-vue@1.8.1:
-    resolution: {integrity: sha512-DFyUt2vc/89tpSHiJvv7Qb/Qs8zVxq2g7q4kuuDV46fmDmSC3mnV3hdSAYruU7k/KvoDpS3sd99kLGRtuG63Rw==}
+  radix-vue@1.8.2:
+    resolution: {integrity: sha512-ey6jG1rPAD/521PsXGrNkjztvh7PRw6Wwbk7LsHjsKqRoy/S4k58ryzmQ0tmoNOiUALfX92+MOnd5F3ONmuZ/w==}
     peerDependencies:
       vue: 3.4.27
 
@@ -6075,6 +6120,9 @@ packages:
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
+  rrweb-cssom@0.7.0:
+    resolution: {integrity: sha512-KlSv0pm9kgQSRxXEMgtivPJ4h826YHsuob8pSHcfSZsSXGtvpEAie8S0AnXuObEJ7nhikOb4ahwxDm0H2yW17g==}
+
   run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -8334,7 +8382,7 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@iconify/json@2.2.213':
+  '@iconify/json@2.2.214':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -8758,6 +8806,14 @@ snapshots:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.4.3
 
+  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.3)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.3
+
   '@tanstack/virtual-core@3.5.0': {}
 
   '@tanstack/vue-virtual@3.5.0(vue@3.4.27(typescript@5.4.5))':
@@ -8843,14 +8899,14 @@ snapshots:
 
   '@types/which@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.10.0
-      '@typescript-eslint/type-utils': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.10.0
+      '@typescript-eslint/parser': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/scope-manager': 7.11.0
+      '@typescript-eslint/type-utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.11.0
       eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -8861,12 +8917,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.10.0
-      '@typescript-eslint/types': 7.10.0
-      '@typescript-eslint/typescript-estree': 7.10.0(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.10.0
+      '@typescript-eslint/scope-manager': 7.11.0
+      '@typescript-eslint/types': 7.11.0
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.11.0
       debug: 4.3.4
       eslint: 8.57.0
     optionalDependencies:
@@ -8879,10 +8935,15 @@ snapshots:
       '@typescript-eslint/types': 7.10.0
       '@typescript-eslint/visitor-keys': 7.10.0
 
-  '@typescript-eslint/type-utils@7.10.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/scope-manager@7.11.0':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.10.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/types': 7.11.0
+      '@typescript-eslint/visitor-keys': 7.11.0
+
+  '@typescript-eslint/type-utils@7.11.0(eslint@8.57.0)(typescript@5.4.5)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
       debug: 4.3.4
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.4.5)
@@ -8893,6 +8954,8 @@ snapshots:
 
   '@typescript-eslint/types@7.10.0': {}
 
+  '@typescript-eslint/types@7.11.0': {}
+
   '@typescript-eslint/typescript-estree@7.10.0(typescript@5.4.5)':
     dependencies:
       '@typescript-eslint/types': 7.10.0
@@ -8908,6 +8971,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@7.11.0(typescript@5.4.5)':
+    dependencies:
+      '@typescript-eslint/types': 7.11.0
+      '@typescript-eslint/visitor-keys': 7.11.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.4
+      semver: 7.6.2
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+    optionalDependencies:
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@7.10.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
@@ -8919,11 +8997,27 @@ snapshots:
       - supports-color
       - typescript
 
+  '@typescript-eslint/utils@7.11.0(eslint@8.57.0)(typescript@5.4.5)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@typescript-eslint/scope-manager': 7.11.0
+      '@typescript-eslint/types': 7.11.0
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5)
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@typescript-eslint/visitor-keys@7.10.0':
     dependencies:
       '@typescript-eslint/types': 7.10.0
       eslint-visitor-keys: 3.4.3
 
+  '@typescript-eslint/visitor-keys@7.11.0':
+    dependencies:
+      '@typescript-eslint/types': 7.11.0
+      eslint-visitor-keys: 3.4.3
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
@@ -9170,20 +9264,20 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.0.19
 
-  '@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.5))':
+  '@vueuse/core@10.10.0(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/metadata': 10.10.0
+      '@vueuse/shared': 10.10.0(vue@3.4.27(typescript@5.4.5))
       vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.9.0(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(qrcode@1.5.3)(vue@3.4.27(typescript@5.4.5))':
+  '@vueuse/integrations@10.10.0(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(qrcode@1.5.3)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.5))
-      '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/shared': 10.10.0(vue@3.4.27(typescript@5.4.5))
       vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
     optionalDependencies:
       async-validator: 4.2.5
@@ -9194,7 +9288,14 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/metadata@10.9.0': {}
+  '@vueuse/metadata@10.10.0': {}
+
+  '@vueuse/shared@10.10.0(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
 
   '@vueuse/shared@10.9.0(vue@3.4.27(typescript@5.4.5))':
     dependencies:
@@ -9966,9 +10067,9 @@ snapshots:
       csv-stringify: 5.6.5
       stream-transform: 2.1.3
 
-  cz-git@1.9.1: {}
+  cz-git@1.9.2: {}
 
-  czg@1.9.1: {}
+  czg@1.9.2: {}
 
   dargs@8.1.0: {}
 
@@ -10405,11 +10506,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
@@ -10433,13 +10534,13 @@ snapshots:
       eslint: 8.57.0
       ignore: 5.3.1
 
-  eslint-plugin-i@2.29.1(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0):
+  eslint-plugin-i@2.29.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0):
     dependencies:
       debug: 4.3.4
       doctrine: 3.0.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
       get-tsconfig: 4.7.5
       is-glob: 4.0.3
       minimatch: 3.1.2
@@ -10544,20 +10645,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unused-imports@4.0.0(@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0):
+  eslint-plugin-unused-imports@4.0.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
       eslint-rule-composer: 0.3.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0)):
     dependencies:
       '@typescript-eslint/utils': 7.10.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.10.0(@typescript-eslint/parser@7.10.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
-      vitest: 1.6.0(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0)
+      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+      vitest: 1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -11439,7 +11540,7 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.0.0: {}
 
-  jsdom@24.0.0:
+  jsdom@24.1.0:
     dependencies:
       cssstyle: 4.0.1
       data-urls: 5.0.0
@@ -11451,7 +11552,7 @@ snapshots:
       is-potential-custom-element-name: 1.0.1
       nwsapi: 2.2.10
       parse5: 7.1.2
-      rrweb-cssom: 0.6.0
+      rrweb-cssom: 0.7.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
       tough-cookie: 4.1.4
@@ -11606,6 +11707,8 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
+  lodash.castarray@4.4.0: {}
+
   lodash.get@4.4.2: {}
 
   lodash.isequal@4.5.0: {}
@@ -12605,6 +12708,11 @@ snapshots:
       postcss: 8.4.38
       postcss-selector-parser: 6.1.0
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -12724,14 +12832,14 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
-  radix-vue@1.8.1(vue@3.4.27(typescript@5.4.5)):
+  radix-vue@1.8.2(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       '@floating-ui/dom': 1.6.5
       '@floating-ui/vue': 1.0.6(vue@3.4.27(typescript@5.4.5))
       '@internationalized/date': 3.5.4
       '@internationalized/number': 3.5.3
       '@tanstack/vue-virtual': 3.5.0(vue@3.4.27(typescript@5.4.5))
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.5))
       aria-hidden: 1.2.4
       defu: 6.1.4
@@ -12931,6 +13039,8 @@ snapshots:
 
   rrweb-cssom@0.6.0: {}
 
+  rrweb-cssom@0.7.0: {}
+
   run-applescript@7.0.0: {}
 
   run-parallel@1.2.0:
@@ -13979,7 +14089,7 @@ snapshots:
       sass: 1.77.2
       terser: 5.31.0
 
-  vitest@1.6.0(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0):
+  vitest@1.6.0(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0):
     dependencies:
       '@vitest/expect': 1.6.0
       '@vitest/runner': 1.6.0
@@ -14003,7 +14113,7 @@ snapshots:
       why-is-node-running: 2.2.2
     optionalDependencies:
       '@types/node': 20.12.12
-      jsdom: 24.0.0
+      jsdom: 24.1.0
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -14014,7 +14124,7 @@ snapshots:
       - terser
     optional: true
 
-  vitest@2.0.0-beta.3(@types/node@20.12.12)(jsdom@24.0.0)(sass@1.77.2)(terser@5.31.0):
+  vitest@2.0.0-beta.3(@types/node@20.12.12)(jsdom@24.1.0)(sass@1.77.2)(terser@5.31.0):
     dependencies:
       '@vitest/expect': 2.0.0-beta.3
       '@vitest/runner': 2.0.0-beta.3
@@ -14035,7 +14145,7 @@ snapshots:
       why-is-node-running: 2.2.2
     optionalDependencies:
       '@types/node': 20.12.12
-      jsdom: 24.0.0
+      jsdom: 24.1.0
     transitivePeerDependencies:
       - less
       - lightningcss