fix(design): boxShadow and boxShadowSecondary for static token and le…

…ss token should be correct
oceanbase · Apr 11, 2024 · 943509b · 943509b
1 parent f3f6181
commit 943509b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/packages/design/src/config-provider/__tests__/static-function.test.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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);