Skip to content

Commit c046f6e

Browse files
QDyanbingthinkasany
QDyanbing
and
thinkasany
authored
fix: adapt shadow tokens for dark theme (ant-design#57511)
* fix: support dark theme shadow tokens * test: update dropdown and menu demo snapshots * fix: avoid exposing shadowColor in theme tokens * refactor(theme): move shadowColor into neutral color tokens * refactor(theme): derive colorShadow from GenerateNeutralColorMap * refactor(theme): remove shadowColor pass-through from genColorMapToken * fix(theme): soften dark shadow color alpha --------- Co-authored-by: thinkasany <480968828@qq.com>
1 parent 9702dbb commit c046f6e

8 files changed

Lines changed: 70 additions & 33 deletions

File tree

‎components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2143,9 +2143,9 @@ Array [
21432143
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
21442144
>
21452145
<div
2146-
style="background-color: rgb(255, 255, 255); border-radius: 8px; box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
2147-
0 3px 6px -4px rgba(0, 0, 0, 0.12),
2148-
0 9px 28px 8px rgba(0, 0, 0, 0.05);"
2146+
style="background-color: rgb(255, 255, 255); border-radius: 8px; box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08),
2147+
0 3px 6px -4px rgba(0,0,0,0.12),
2148+
0 9px 28px 8px rgba(0,0,0,0.05);"
21492149
>
21502150
<ul
21512151
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-test-id ant-dropdown-css-var css-var-test-id ant-dropdown-menu-css-var"

‎components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2624,7 +2624,7 @@ Array [
26242624
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
26252625
>
26262626
<div
2627-
class="acss-kuniwg ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-medium ant-flex-vertical"
2627+
class="acss-1bjei0t ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-medium ant-flex-vertical"
26282628
>
26292629
<h3
26302630
class="ant-typography acss-1s688k3 css-var-test-id"

‎components/theme/__tests__/token.test.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,23 @@ describe('Theme', () => {
315315
});
316316
});
317317

318+
it('shadow tokens should adapt to dark theme', () => {
319+
const { token } = getHookToken();
320+
const { token: darkToken } = getHookToken({
321+
algorithm: [theme.darkAlgorithm],
322+
});
323+
const { token: darkCustomTextBaseToken } = getHookToken({
324+
algorithm: [theme.darkAlgorithm],
325+
token: { colorTextBase: '#ff0000' },
326+
});
327+
328+
expect(token.boxShadow).toMatch(/rgba\(0,\s*0,\s*0,\s*0\.08\)/);
329+
expect(token.boxShadowCard).toMatch(/rgba\(0,\s*0,\s*0,\s*0\.16\)/);
330+
expect(darkToken.boxShadow).toMatch(/rgba\(255,\s*255,\s*255,\s*0\.016\)/);
331+
expect(darkToken.boxShadowCard).toMatch(/rgba\(255,\s*255,\s*255,\s*0\.032\)/);
332+
expect(darkCustomTextBaseToken.boxShadowCard).toMatch(/rgba\(255,\s*255,\s*255,\s*0\.032\)/);
333+
});
334+
318335
it('component token should support algorithm', () => {
319336
const Demo: React.FC<{ algorithm?: boolean | typeof theme.darkAlgorithm }> = (props) => {
320337
const { algorithm } = props;

‎components/theme/interface/maps/colors.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ export interface ColorNeutralMapToken {
99
*/
1010
colorBgBase: string;
1111

12+
/**
13+
* @internal
14+
*/
15+
colorShadow: string;
16+
1217
// ---------- Text ---------- //
1318

1419
/**

‎components/theme/themes/ColorMap.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ export interface ColorMap {
1414
}
1515

1616
export type GenerateColorMap = (baseColor: string) => ColorMap;
17+
1718
export type GenerateNeutralColorMap = (
1819
bgBaseColor: string,
1920
textBaseColor: string,
21+
shadowColor?: string,
2022
) => ColorNeutralMapToken;

‎components/theme/themes/dark/colors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,16 @@ export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
2222
export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
2323
bgBaseColor: string,
2424
textBaseColor: string,
25+
shadowColor?: string,
2526
) => {
2627
const colorBgBase = bgBaseColor || '#000';
2728
const colorTextBase = textBaseColor || '#fff';
29+
const colorShadow = shadowColor || 'rgba(255, 255, 255, 0.2)';
2830

2931
return {
3032
colorBgBase,
3133
colorTextBase,
34+
colorShadow,
3235

3336
colorText: getAlphaColor(colorTextBase, 0.85),
3437
colorTextSecondary: getAlphaColor(colorTextBase, 0.65),

‎components/theme/themes/default/colors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,16 @@ export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
2222
export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
2323
bgBaseColor: string,
2424
textBaseColor: string,
25+
shadowColor?: string,
2526
) => {
2627
const colorBgBase = bgBaseColor || '#fff';
2728
const colorTextBase = textBaseColor || '#000';
29+
const colorShadow = shadowColor || '#000';
2830

2931
return {
3032
colorBgBase,
3133
colorTextBase,
34+
colorShadow,
3235

3336
colorText: getAlphaColor(colorTextBase, 0.88),
3437
colorTextSecondary: getAlphaColor(colorTextBase, 0.65),

‎components/theme/util/alias.ts‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
2424
...restToken,
2525
...overrideTokens,
2626
};
27+
const shadowBaseColor = new FastColor(mergedToken.colorShadow);
28+
const shadowBaseAlpha = shadowBaseColor.a;
29+
const getShadowColor = (alpha: number) =>
30+
shadowBaseColor
31+
.clone()
32+
.setA(shadowBaseAlpha * alpha)
33+
.toRgbString();
2734

2835
const screenXS = 480;
2936
const screenSM = 576;
@@ -133,19 +140,19 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
133140
marginXXL: mergedToken.sizeXXL,
134141

135142
boxShadow: `
136-
0 6px 16px 0 rgba(0, 0, 0, 0.08),
137-
0 3px 6px -4px rgba(0, 0, 0, 0.12),
138-
0 9px 28px 8px rgba(0, 0, 0, 0.05)
143+
0 6px 16px 0 ${getShadowColor(0.08)},
144+
0 3px 6px -4px ${getShadowColor(0.12)},
145+
0 9px 28px 8px ${getShadowColor(0.05)}
139146
`,
140147
boxShadowSecondary: `
141-
0 6px 16px 0 rgba(0, 0, 0, 0.08),
142-
0 3px 6px -4px rgba(0, 0, 0, 0.12),
143-
0 9px 28px 8px rgba(0, 0, 0, 0.05)
148+
0 6px 16px 0 ${getShadowColor(0.08)},
149+
0 3px 6px -4px ${getShadowColor(0.12)},
150+
0 9px 28px 8px ${getShadowColor(0.05)}
144151
`,
145152
boxShadowTertiary: `
146-
0 1px 2px 0 rgba(0, 0, 0, 0.03),
147-
0 1px 6px -1px rgba(0, 0, 0, 0.02),
148-
0 2px 4px 0 rgba(0, 0, 0, 0.02)
153+
0 1px 2px 0 ${getShadowColor(0.03)},
154+
0 1px 6px -1px ${getShadowColor(0.02)},
155+
0 2px 4px 0 ${getShadowColor(0.02)}
149156
`,
150157

151158
screenXS,
@@ -169,36 +176,36 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
169176
screenXXXL,
170177
screenXXXLMin: screenXXXL,
171178

172-
boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
179+
boxShadowPopoverArrow: `2px 2px 5px ${getShadowColor(0.05)}`,
173180
boxShadowCard: `
174-
0 1px 2px -2px ${new FastColor('rgba(0, 0, 0, 0.16)').toRgbString()},
175-
0 3px 6px 0 ${new FastColor('rgba(0, 0, 0, 0.12)').toRgbString()},
176-
0 5px 12px 4px ${new FastColor('rgba(0, 0, 0, 0.09)').toRgbString()}
181+
0 1px 2px -2px ${getShadowColor(0.16)},
182+
0 3px 6px 0 ${getShadowColor(0.12)},
183+
0 5px 12px 4px ${getShadowColor(0.09)}
177184
`,
178185
boxShadowDrawerRight: `
179-
-6px 0 16px 0 rgba(0, 0, 0, 0.08),
180-
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
181-
-9px 0 28px 8px rgba(0, 0, 0, 0.05)
186+
-6px 0 16px 0 ${getShadowColor(0.08)},
187+
-3px 0 6px -4px ${getShadowColor(0.12)},
188+
-9px 0 28px 8px ${getShadowColor(0.05)}
182189
`,
183190
boxShadowDrawerLeft: `
184-
6px 0 16px 0 rgba(0, 0, 0, 0.08),
185-
3px 0 6px -4px rgba(0, 0, 0, 0.12),
186-
9px 0 28px 8px rgba(0, 0, 0, 0.05)
191+
6px 0 16px 0 ${getShadowColor(0.08)},
192+
3px 0 6px -4px ${getShadowColor(0.12)},
193+
9px 0 28px 8px ${getShadowColor(0.05)}
187194
`,
188195
boxShadowDrawerUp: `
189-
0 6px 16px 0 rgba(0, 0, 0, 0.08),
190-
0 3px 6px -4px rgba(0, 0, 0, 0.12),
191-
0 9px 28px 8px rgba(0, 0, 0, 0.05)
196+
0 6px 16px 0 ${getShadowColor(0.08)},
197+
0 3px 6px -4px ${getShadowColor(0.12)},
198+
0 9px 28px 8px ${getShadowColor(0.05)}
192199
`,
193200
boxShadowDrawerDown: `
194-
0 -6px 16px 0 rgba(0, 0, 0, 0.08),
195-
0 -3px 6px -4px rgba(0, 0, 0, 0.12),
196-
0 -9px 28px 8px rgba(0, 0, 0, 0.05)
201+
0 -6px 16px 0 ${getShadowColor(0.08)},
202+
0 -3px 6px -4px ${getShadowColor(0.12)},
203+
0 -9px 28px 8px ${getShadowColor(0.05)}
197204
`,
198-
boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
199-
boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
200-
boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
201-
boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
205+
boxShadowTabsOverflowLeft: `inset 10px 0 8px -8px ${getShadowColor(0.08)}`,
206+
boxShadowTabsOverflowRight: `inset -10px 0 8px -8px ${getShadowColor(0.08)}`,
207+
boxShadowTabsOverflowTop: `inset 0 10px 8px -8px ${getShadowColor(0.08)}`,
208+
boxShadowTabsOverflowBottom: `inset 0 -10px 8px -8px ${getShadowColor(0.08)}`,
202209

203210
// Override AliasToken
204211
...overrideTokens,

0 commit comments

Comments
 (0)