From 476aa068d77faa1ecff903ac4fbad4a0a8f12c0e Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 25 Sep 2024 17:33:24 +0800
Subject: [PATCH] fix: stripe table style for element plus, fixed: #4501
 (#4503)

---
 apps/web-ele/src/views/demos/element/index.vue    | 15 +++++++++++++++
 internal/tailwind-config/src/index.ts             |  1 +
 .../base/design/src/design-tokens/dark/index.css  |  1 +
 .../design/src/design-tokens/default/index.css    |  1 +
 packages/effects/hooks/src/use-design-tokens.ts   |  1 +
 5 files changed, 19 insertions(+)

diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue
index dc02759ffcb..413eea9613b 100644
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -7,6 +7,7 @@ import {
   ElMessage,
   ElNotification,
   ElSpace,
+  ElTable,
 } from 'element-plus';
 
 type NotificationType = 'error' | 'info' | 'success' | 'warning';
@@ -38,6 +39,14 @@ function notify(type: NotificationType) {
     type,
   });
 }
+const tableData = [
+  { prop1: '1', prop2: 'A' },
+  { prop1: '2', prop2: 'B' },
+  { prop1: '3', prop2: 'C' },
+  { prop1: '4', prop2: 'D' },
+  { prop1: '5', prop2: 'E' },
+  { prop1: '6', prop2: 'F' },
+];
 </script>
 
 <template>
@@ -74,5 +83,11 @@ function notify(type: NotificationType) {
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
       </ElSpace>
     </ElCard>
+    <ElCard class="mb-5">
+      <ElTable :data="tableData" stripe>
+        <ElTable.TableColumn label="测试列1" prop="prop1" />
+        <ElTable.TableColumn label="测试列2" prop="prop2" />
+      </ElTable>
+    </ElCard>
   </Page>
 </template>
diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts
index 7043b8dadf0..08cfde2d171 100644
--- a/internal/tailwind-config/src/index.ts
+++ b/internal/tailwind-config/src/index.ts
@@ -29,6 +29,7 @@ const shadcnUiColors = {
     DEFAULT: 'hsl(var(--accent))',
     foreground: 'hsl(var(--accent-foreground))',
     hover: 'hsl(var(--accent-hover))',
+    lighter: 'has(val(--accent-lighter))',
   },
   background: {
     deep: 'hsl(var(--background-deep))',
diff --git a/packages/@core/base/design/src/design-tokens/dark/index.css b/packages/@core/base/design/src/design-tokens/dark/index.css
index 02394cda8f5..0e48e5f605a 100644
--- a/packages/@core/base/design/src/design-tokens/dark/index.css
+++ b/packages/@core/base/design/src/design-tokens/dark/index.css
@@ -53,6 +53,7 @@
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
   --accent: 216 5% 19%;
+  --accent-lighter: 216 5% 11%;
   --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css
index d4aa1247b71..2309e9258eb 100644
--- a/packages/@core/base/design/src/design-tokens/default/index.css
+++ b/packages/@core/base/design/src/design-tokens/default/index.css
@@ -53,6 +53,7 @@
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
   --accent: 240 5% 96%;
+  --accent-lighter: 240 0% 98%;
   --accent-hover: 200deg 10% 90%;
   --accent-foreground: 240 6% 10%;
 
diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
index a707684ade6..4f786302a1a 100644
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ b/packages/effects/hooks/src/use-design-tokens.ts
@@ -257,6 +257,7 @@ export function useElementPlusDesignTokens() {
         '--el-fill-color': getCssVariableValue('--accent'),
         '--el-fill-color-blank': background,
         '--el-fill-color-light': getCssVariableValue('--accent'),
+        '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
         '--el-text-color-primary': getCssVariableValue('--foreground'),
 
         '--el-text-color-regular': getCssVariableValue('--foreground'),