perf: optimize interface color matching

2024-07-15 23:22:00 +08:00
parent b12266bb90
commit caf1fc4375
27 changed files with 270 additions and 249 deletions
--- a/packages/@core/forward/preferences/src/config.ts
+++ b/packages/@core/forward/preferences/src/config.ts
@@ -79,7 +79,7 @@ const defaultPreferences: Preferences = {
  theme: {
    builtinType: 'default',
    colorDestructive: 'hsl(348 100% 61%)',
-    colorPrimary: 'hsl(245 82% 67%)',
+    colorPrimary: 'hsl(231 98% 65%)',
    colorSuccess: 'hsl(144 57% 58%)',
    colorWarning: 'hsl(42 84% 61%)',
    mode: 'dark',
--- a/packages/@core/forward/preferences/src/constants.ts
+++ b/packages/@core/forward/preferences/src/constants.ts
@@ -31,11 +31,11 @@ const SUPPORT_LANGUAGES: Language[] = [

 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
  {
-    color: 'hsl(245 82% 67%)',
+    color: 'hsl(231 98% 65%)',
    type: 'default',
  },
  {
-    color: 'hsl(231 98% 65%)',
+    color: 'hsl(245 82% 67%)',
    type: 'violet',
  },
  {
--- a/packages/@core/forward/preferences/src/preferences.test.ts
+++ b/packages/@core/forward/preferences/src/preferences.test.ts
@@ -25,7 +25,7 @@ describe('preferences', () => {
  });

  it('initPreferences should initialize preferences with overrides and namespace', async () => {
-    const overrides = { theme: { colorPrimary: 'hsl(245 82% 67%)' } };
+    const overrides = { theme: { colorPrimary: 'hsl(231 98% 65%)' } };
    const namespace = 'testNamespace';

    await preferenceManager.initPreferences({ namespace, overrides });
--- a/packages/@core/shared/design/src/design-tokens/dark/index.css
+++ b/packages/@core/shared/design/src/design-tokens/dark/index.css
@@ -2,17 +2,20 @@
 :root.dark[data-theme='custom'],
 :root.dark[data-theme='default'] {
  /* Default background color of <body />...etc */
-  --background: 220deg 13.04% 8%;
+  --background: 222.34deg 10.43% 12.27%;
+
+  /* 主体区域背景色 */
+  --background-content: 220deg 13.06% 9%;
  --foreground: 220 13% 91%;

  /* Background color for <Card /> */
-  --card: 222.86deg 8.43% 16.27%;
+  --card: 222.34deg 10.43% 12.27%;

  /* --card: 222.2 84% 4.9%; */
  --card-foreground: 210 40% 98%;

  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
-  --popover: 222.86deg 8.43% 16.27%;
+  --popover: 222.82deg 8.43% 16.27%;
  --popover-foreground: 210 40% 98%;

  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
@@ -53,7 +56,7 @@
  --heavy-foreground: var(--accent-foreground);

  /* Default border color */
-  --border: 0deg 0% 100% / 10%;
+  --border: 215 27.9% 16.9%;

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input: 0deg 0% 100% / 10%;
@@ -63,20 +66,25 @@
  /* Used for focus ring */
  --ring: 222.2 84% 4.9%;

+  /* 基本圆角大小 */
+  --radius: 0.5rem;
+
+  /* ============= Custom ============= */
+
  /* 遮罩颜色 */
  --overlay: 0deg 0% 0% / 40%;

  /* 基本文字大小 */
  --font-size-base: 16px;

-  /* 基本圆角大小 */
-  --radius: 0.5rem;
+  /* 主体内容背景色 */
+  --content: 240 11% 96%;
+
+  /* 登录背景色 */
+  --authentication: 220deg 13.06% 3.04%;

  /* =============component & UI============= */

-  /* authentication */
-  --authentication: 240deg 11% 2%;
-
  color-scheme: dark;
 }

--- a/packages/@core/shared/design/src/design-tokens/default/index.css
+++ b/packages/@core/shared/design/src/design-tokens/default/index.css
@@ -5,7 +5,10 @@
    'Segoe UI Symbol';

  /* Default background color of <body />...etc */
-  --background: 0 0% 100%;
+  --background: 0 0 100%;
+
+  /* 主体区域背景色 */
+  --background-content: 210 11.11% 96.47%;
  --foreground: 210 6% 21%;

  /* Background color for <Card /> */
@@ -55,7 +58,7 @@
  --heavy-foreground: var(--accent-foreground);

  /* Default border color */
-  --border: 240 6% 90%;
+  --border: 240 5.9% 90%;

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input: 240deg 5.88% 90%;
@@ -65,14 +68,22 @@
  /* Used for focus ring */
  --ring: 222.2 84% 4.9%;

+  /* Border radius for card, input and buttons */
+  --radius: 0.5rem;
+
+  /* ============= custom ============= */
+
  /* 遮罩颜色 */
  --overlay: 0deg 0% 0% / 40%;

  /* 基本文字大小 */
  --font-size-base: 16px;

-  /* Border radius for card, input and buttons */
-  --radius: 0.5rem;
+  /* 主体内容背景色 */
+  --content: 240 11% 96%;
+
+  /* 登录背景色 */
+  --authentication: 231deg 61% 44%;

  /* 用于浅色主题下一些暗色主题的颜色 */
  --dark-foreground: 220 13% 91%;
@@ -82,23 +93,20 @@

  /* =============component & UI============= */

-  /* authentication */
-  --authentication: 231deg 61% 44%;
-
  /* menu */
  --menu: 0deg 0% 100%;
-  --menu-darken: 0deg 0% 95%;
+  --menu-deep: 0deg 0% 95%;

  /* menu-dark */
-  --menu-dark: 225deg 12% 13%;
-  --menu-dark-darken: 223deg 11% 10%;
+  --menu-dark: 222.34deg 10.43% 12.27%;
+  --menu-dark-deep: 223deg 11% 10%;

  accent-color: var(--primary);
  color-scheme: light;
 }

 :root[data-theme='violet'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
@@ -119,7 +127,7 @@
 }

 :root[data-theme='pink'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
@@ -140,7 +148,7 @@
 }

 :root[data-theme='rose'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
@@ -161,7 +169,7 @@
 }

 :root[data-theme='sky-blue'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
@@ -182,7 +190,7 @@
 }

 :root[data-theme='deep-blue'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
@@ -203,7 +211,7 @@
 }

 :root[data-theme='green'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
@@ -224,7 +232,7 @@
 }

 :root[data-theme='deep-green'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
@@ -245,7 +253,7 @@
 }

 :root[data-theme='orange'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
@@ -266,7 +274,7 @@
 }

 :root[data-theme='yellow'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
@@ -287,7 +295,7 @@
 }

 :root[data-theme='zinc'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
@@ -308,7 +316,7 @@
 }

 :root[data-theme='neutral'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
@@ -329,7 +337,7 @@
 }

 :root[data-theme='slate'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
@@ -350,7 +358,7 @@
 }

 :root[data-theme='gray'] {
-  --background: 0 0% 100%;
+  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
--- a/packages/@core/shared/toolkit/package.json
+++ b/packages/@core/shared/toolkit/package.json
@@ -36,14 +36,14 @@
    }
  },
  "dependencies": {
-    "@ant-design/colors": "^7.1.0",
    "@ctrl/tinycolor": "^4.1.0",
    "@vue/shared": "^3.4.31",
    "clsx": "^2.1.1",
    "defu": "^6.1.4",
    "lodash.clonedeep": "^4.5.0",
    "nprogress": "^0.2.0",
-    "tailwind-merge": "^2.4.0"
+    "tailwind-merge": "^2.4.0",
+    "theme-colors": "^0.1.0"
  },
  "devDependencies": {
    "@types/lodash.clonedeep": "^4.5.9",
--- a/packages/@core/shared/toolkit/src/colorful/generator.ts
+++ b/packages/@core/shared/toolkit/src/colorful/generator.ts
@@ -1,35 +1,34 @@
-import { generate } from '@ant-design/colors';
+import { TinyColor } from '@ctrl/tinycolor';
+import { getColors } from 'theme-colors';

 import { convertToHslCssVar } from './convert';

-export * from '@ant-design/colors';
-
-interface Opts {
-  backgroundColor?: string;
-  theme?: 'dark' | 'default';
-}
-
 interface ColorItem {
  alias?: string;
  color: string;
  name: string;
 }

-function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
+function generatorColorVariables(colorItems: ColorItem[]) {
  const colorVariables: Record<string, string> = {};

  colorItems.forEach(({ alias, color, name }) => {
    if (color) {
-      const colors = generate(color, opts);
-      let mainColor = colors[5];
-      colors.forEach((colorValue, colorIndex) => {
+      const colorsMap = getColors(new TinyColor(color).toHexString());
+      let mainColor = colorsMap['500'];
+
+      const colorKeys = Object.keys(colorsMap);
+
+      colorKeys.forEach((key) => {
+        const colorValue = colorsMap[key];
+
        const hslColor = convertToHslCssVar(colorValue);
-        colorVariables[`--${name}-${colorIndex + 1}00`] = hslColor;
+        colorVariables[`--${name}-${key}`] = hslColor;
        if (alias) {
-          colorVariables[`--${alias}-${colorIndex + 1}00`] = hslColor;
+          colorVariables[`--${alias}-${key}`] = hslColor;
        }

-        if (colorIndex === 5) {
+        if (key === '500') {
          mainColor = hslColor;
        }
      });
@@ -38,7 +37,6 @@ function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
      }
    }
  });
-
  return colorVariables;
 }

--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -99,7 +99,7 @@ onMounted(() => {
 </script>

 <template>
-  <main ref="contentElement" :style="style">
+  <main ref="contentElement" :style="style" class="bg-background-content">
    <slot></slot>
  </main>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
 import { computed } from 'vue';

 interface Props {
-  /**
-   * 背景颜色
-   */
-  backgroundColor?: string;
  /**
   * 是否固定在顶部
   * @default true
@@ -35,7 +31,6 @@ interface Props {
 }

 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--background))',
  fixed: true,
  height: 32,
  show: true,
@@ -44,9 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
 });

 const style = computed((): CSSProperties => {
-  const { backgroundColor, fixed, height, show, width, zIndex } = props;
+  const { fixed, height, show, width, zIndex } = props;
  return {
-    backgroundColor,
    height: `${height}px`,
    marginBottom: show ? '0' : `-${height}px`,
    position: fixed ? 'fixed' : 'static',
@@ -57,7 +51,10 @@ const style = computed((): CSSProperties => {
 </script>

 <template>
-  <footer :style="style" class="bottom-0 w-full transition-all duration-200">
+  <footer
+    :style="style"
+    class="bg-background-content bottom-0 w-full transition-all duration-200"
+  >
    <slot></slot>
  </footer>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -6,11 +6,6 @@ import { IcRoundMenu } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';

 interface Props {
-  /**
-   * 背景颜色
-   */
-  backgroundColor?: string;
-
  /**
   * 横屏
   * @default false
@@ -60,8 +55,6 @@ interface Props {
 }

 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--background))',
-  // fixed: true,
  height: 60,
  isMixedNav: false,
  show: true,
@@ -76,12 +69,11 @@ const emit = defineEmits<{ openMenu: []; toggleSidebar: [] }>();
 const slots = useSlots();

 const style = computed((): CSSProperties => {
-  const { backgroundColor, fullWidth, height, show } = props;
+  const { fullWidth, height, show } = props;
  const right = !show || !fullWidth ? undefined : 0;

  return {
    // ...(props.isMixedNav ? { left: 0, position: `fixed` } : {}),
-    backgroundColor,
    height: `${height}px`,
    marginTop: show ? 0 : `-${height}px`,
    right,
@@ -106,7 +98,7 @@ function handleToggleMenu() {
 <template>
  <header
    :style="style"
-    class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
+    class="border-border bg-background top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
  >
    <div v-if="slots.logo" :style="logoStyle">
      <slot name="logo"></slot>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -255,7 +255,7 @@ function handleMouseleave() {
  ></div>
  <aside
    :style="style"
-    class="fixed left-0 top-0 h-full transition-all duration-200"
+    class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -3,10 +3,6 @@ import type { CSSProperties } from 'vue';
 import { computed } from 'vue';

 interface Props {
-  /**
-   * 背景颜色
-   */
-  backgroundColor?: string;
  /**
   * 高度
   * @default 30
@@ -15,29 +11,23 @@ interface Props {
 }

 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--background))',
  fixed: true,
  height: 30,
 });

-const hiddenStyle = computed((): CSSProperties => {
+const style = computed((): CSSProperties => {
  const { height } = props;
  return {
    height: `${height}px`,
  };
 });
-
-const style = computed((): CSSProperties => {
-  const { backgroundColor } = props;
-  return {
-    ...hiddenStyle.value,
-    backgroundColor,
-  };
-});
 </script>

 <template>
-  <section :style="style" class="border-border flex w-full">
+  <section
+    :style="style"
+    class="border-border bg-background flex w-full border-b"
+  >
    <slot></slot>
  </section>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -45,7 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
  sidebarTheme: 'dark',
  sidebarWidth: 180,
  tabbarEnable: true,
-  tabbarHeight: 36,
+  tabbarHeight: 38,
  zIndex: 200,
 });

@@ -211,11 +211,11 @@ const sidebarFace = computed(() => {

  if (isDark) {
    backgroundColor = isSidebarMixedNav.value
-      ? 'hsl(var(--menu-dark-darken))'
+      ? 'hsl(var(--menu-dark-deep))'
      : 'hsl(var(--menu-dark))';
  } else {
    backgroundColor = isSidebarMixedNav.value
-      ? 'hsl(var(--menu-darken))'
+      ? 'hsl(var(--menu-deep))'
      : 'hsl(var(--menu))';
  }

--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenu.vue
@@ -3,7 +3,9 @@ import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';

 import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';

-const props = defineProps<ContextMenuRootProps>();
+const props = withDefaults(defineProps<ContextMenuRootProps>(), {
+  modal: false,
+});
 const emits = defineEmits<ContextMenuRootEmits>();

 const forwarded = useForwardPropsEmits(props, emits);
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -6,7 +6,9 @@ import {
  useForwardPropsEmits,
 } from 'radix-vue';

-const props = defineProps<DropdownMenuRootProps>();
+const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
+  modal: false,
+});
 const emits = defineEmits<DropdownMenuRootEmits>();

 const forwarded = useForwardPropsEmits(props, emits);
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -94,10 +94,7 @@ function handleUnpinTab(tab: TabConfig) {
 </script>

 <template>
-  <div
-    :style="style"
-    class="tabs-chrome bg-accent size-full flex-1 overflow-hidden pt-1"
-  >
+  <div :style="style" class="tabs-chrome size-full flex-1 overflow-hidden pt-1">
    <!-- footer -> 4px -->
    <div
      ref="contentRef"
@@ -130,7 +127,7 @@ function handleUnpinTab(tab: TabConfig) {
              <!-- divider -->
              <div
                v-if="i !== 0"
-                class="tabs-chrome__divider bg-accent absolute left-[var(--gap)] top-1/2 z-0 h-5 w-[1px] translate-y-[-50%]"
+                class="tabs-chrome__divider bg-foreground/80 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
              ></div>
              <!-- background -->
              <div
@@ -157,24 +154,27 @@ function handleUnpinTab(tab: TabConfig) {

              <!-- extra -->
              <div
-                class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
+                class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%]"
              >
+                <!-- <div
+                class="tabs-chrome__extra absolute right-[calc(var(--gap)*2)] top-1/2 z-[3] size-4 translate-y-[-50%] opacity-0 transition-opacity group-hover:opacity-100"
+              > -->
                <!-- close-icon -->
                <IcRoundClose
                  v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
-                  class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
+                  class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3 cursor-pointer rounded-full transition-all"
                  @click.stop="handleClose(tab.key)"
                />
                <MdiPin
                  v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                  class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
+                  class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                  @click.stop="handleUnpinTab(tab)"
                />
              </div>

              <!-- tab-item-main -->
              <div
-                class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] duration-150 group-hover:pr-3"
+                class="tabs-chrome__item-main group-[.is-active]:text-primary text-accent-foreground absolute left-0 right-0 z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 duration-150 group-hover:pr-3 group-[.is-active]:font-semibold"
              >
                <VbenIcon
                  v-if="showIcon"
@@ -200,7 +200,7 @@ function handleUnpinTab(tab: TabConfig) {
 </template>

 <style scoped>
-html.dark {
+/* html.dark {
  .tabs-chrome {
    .is-active {
      .tabs-chrome__item-main {
@@ -208,7 +208,7 @@ html.dark {
      }
    }
  }
-}
+} */

 .tabs-chrome {
  .dragging {
@@ -235,12 +235,12 @@ html.dark {

      .tabs-chrome__background {
        &-content {
-          @apply bg-accent;
+          @apply bg-heavy;
        }

        &-before,
        &-after {
-          @apply fill-accent;
+          @apply fill-heavy;
        }
      }
    }
@@ -252,12 +252,12 @@ html.dark {
        @apply opacity-100;

        &-content {
-          @apply bg-background;
+          @apply bg-background-content;
        }

        &-before,
        &-after {
-          @apply fill-background;
+          @apply fill-background-content;
        }
      }
    }
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -29,7 +29,8 @@ const typeWithClass = computed(() => {
      content: `h-full  after:content-['']  after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100`,
    },
    card: {
-      content: 'h-[90%] rounded-md mr-1',
+      content:
+        'h-[calc(100%-6px)] rounded-md mr-2 border-border [&.is-active]:border-primary border transition-all',
    },
    plain: {
      content: 'h-full',
@@ -64,7 +65,7 @@ function handleUnpinTab(tab: TabConfig) {
 </script>

 <template>
-  <div class="bg-accent h-full flex-1 overflow-hidden">
+  <div class="h-full flex-1 overflow-hidden">
    <VbenScrollbar class="h-full" horizontal>
      <div
        :class="contentClass"
@@ -76,7 +77,7 @@ function handleUnpinTab(tab: TabConfig) {
            :key="tab.key"
            :class="[
              {
-                'tabs-item is-active bg-background': tab.key === active,
+                'tabs-item is-active bg-background-content': tab.key === active,
                dragable: !tab.affixTab,
              },
              typeWithClass.content,
@@ -94,26 +95,29 @@ function handleUnpinTab(tab: TabConfig) {
              <div class="relative flex size-full items-center">
                <!-- extra -->
                <div
-                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
+                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
                >
+                  <!-- <div
+                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
+                > -->
                  <!-- close-icon -->
                  <IcRoundClose
                    v-show="
                      !tab.affixTab && tabsView.length > 1 && tab.closable
                    "
-                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground size-3 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
                    @click.stop="handleClose(tab.key)"
                  />
                  <MdiPin
                    v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
-                    class="hover:bg-accent hover:stroke-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
+                    class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                    @click.stop="handleUnpinTab(tab)"
                  />
                </div>

                <!-- tab-item-main -->
                <div
-                  class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-3 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
+                  class="tabs-item__main group-[.is-active]:text-primary text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
                >
                  <!-- <div
                  class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
@@ -139,7 +143,7 @@ function handleUnpinTab(tab: TabConfig) {
 </template>

 <style scoped>
-html.dark {
+/* html.dark {
  .tabs-item {
    &.is-active {
      .tabs-item__main {
@@ -147,5 +151,5 @@ html.dark {
      }
    }
  }
-}
+} */
 </style>
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
 <template>
  <VbenDropdownMenu :menus="menus" :modal="false">
    <div
-      class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
+      class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-1.5 text-lg font-semibold"
    >
      <IcRoundKeyboardArrowDown class="size-5" />
    </div>
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
@@ -10,7 +10,7 @@ function toggleScreen() {

 <template>
  <div
-    class="flex-center hover:bg-muted bg-accent hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
+    class="flex-center hover:bg-muted hover:text-foreground text-muted-foreground border-border h-full cursor-pointer border-l px-2 text-lg font-semibold"
    @click="toggleScreen"
  >
    <IcTwotoneFitScreen v-if="screen" />