From 943509bba45885a13af0266de8e320387b55e5e5 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 11 Apr 2024 17:05:44 +0800
Subject: [PATCH] fix(design): boxShadow and boxShadowSecondary for static
 token and less token should be correct

---
 .../__tests__/static-function.test.tsx          | 15 +++++++++++++++
 packages/design/src/static-function/index.tsx   |  6 +++++-
 packages/design/src/theme/style/compact.less    | 12 ++----------
 packages/design/src/theme/style/default.less    | 12 ++----------
 plugin-theme-less.ts                            | 17 +++++++++++++++--
 5 files changed, 39 insertions(+), 23 deletions(-)
 create mode 100644 packages/design/src/config-provider/__tests__/static-function.test.tsx

diff --git a/packages/design/src/config-provider/__tests__/static-function.test.tsx b/packages/design/src/config-provider/__tests__/static-function.test.tsx
new file mode 100644
index 000000000..e3aa1718f
--- /dev/null
+++ b/packages/design/src/config-provider/__tests__/static-function.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfigProvider, token } from '@oceanbase/design';
+import defaultTheme from '../../theme/default';
+
+describe('ConfigProvider static function', () => {
+  it('token', () => {
+    render(
+      <ConfigProvider>
+        <div />
+      </ConfigProvider>
+    );
+    expect(token.boxShadow).toBe(defaultTheme.token.boxShadow);
+  });
+});
diff --git a/packages/design/src/static-function/index.tsx b/packages/design/src/static-function/index.tsx
index a4c569aae..056745c84 100644
--- a/packages/design/src/static-function/index.tsx
+++ b/packages/design/src/static-function/index.tsx
@@ -18,7 +18,11 @@ const { defaultAlgorithm, defaultSeed, useToken } = theme;
 const mapToken = {
   ...defaultAlgorithm(defaultSeed),
   ...defaultTheme.token,
-  override: {},
+  // 需要覆盖部分 Alias Token 的值
+  override: {
+    boxShadow: defaultTheme.token.boxShadow,
+    boxShadowSecondary: defaultTheme.token.boxShadow,
+  },
 };
 let token = formatToken(mapToken);
 
diff --git a/packages/design/src/theme/style/compact.less b/packages/design/src/theme/style/compact.less
index 6d0d4f7ea..b7e45a357 100644
--- a/packages/design/src/theme/style/compact.less
+++ b/packages/design/src/theme/style/compact.less
@@ -409,16 +409,8 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
-@boxShadowSecondary: 
-      0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05)
-    ;
-@boxShadow: 
-      0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05)
-    ;
+@boxShadowSecondary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f8fafe;
diff --git a/packages/design/src/theme/style/default.less b/packages/design/src/theme/style/default.less
index ff29f4cd5..dcf5a5d0e 100644
--- a/packages/design/src/theme/style/default.less
+++ b/packages/design/src/theme/style/default.less
@@ -409,16 +409,8 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
-@boxShadowSecondary: 
-      0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05)
-    ;
-@boxShadow: 
-      0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05)
-    ;
+@boxShadowSecondary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f8fafe;
diff --git a/plugin-theme-less.ts b/plugin-theme-less.ts
index 486d2b21c..9a173bc72 100644
--- a/plugin-theme-less.ts
+++ b/plugin-theme-less.ts
@@ -17,14 +17,18 @@ export default (api: IApi) => {
       {
         theme: 'default',
         algorithm: defaultAlgorithm,
+        token: defaultTheme.token,
       },
       {
         theme: 'dark',
         algorithm: darkAlgorithm,
+        token: darkTheme.token,
       },
       {
         theme: 'compact',
         algorithm: compactAlgorithm,
+        // 使用 defaultTheme token
+        token: defaultTheme.token,
       },
     ];
 
@@ -33,13 +37,13 @@ export default (api: IApi) => {
         item.theme === 'dark'
           ? {
               // 对于暗色主题，优先级: 算法生成的 Token > 自定义 token
-              ...darkTheme.token,
+              ...item.token,
               ...item.algorithm(defaultSeed),
             }
           : {
               // 对于非暗色主题，优先级: 自定义 token > 算法生成的 Token
               ...item.algorithm(defaultSeed),
-              ...defaultTheme.token,
+              ...item.token,
             };
       mapToken = {
         ...mapToken,
@@ -48,6 +52,15 @@ export default (api: IApi) => {
         green: mapToken.colorSuccess,
         yellow: mapToken.colorWarning,
         red: mapToken.colorError,
+        // override token
+        override:
+          item.theme === 'dark'
+            ? {}
+            : // 对于非暗色主题，需要覆盖部分 Alias Token 的值
+              {
+                boxShadow: item.token.boxShadow,
+                boxShadowSecondary: item.token.boxShadow,
+              },
       };
       const aliasToken = formatToken(mapToken);