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( + +
+ + ); + 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);