mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

feat: radius token algorithm (#37341)

Browse Source 
* feat: radius token

* test: add test case

* feat: linear after 16

* test: more test case
This commit is contained in:
MadCcc 2022-09-01 20:09:32 +08:00 committed by GitHub
parent 9a056e2118
commit 46a861afff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/theme/__tests__/token.test.tsx
View File

@ -1,5 +1,6 @@
import { Theme } from '@ant-design/cssinjs';
import * as React from 'react';
import genRadius from '../themes/shared/genRadius';
import { render, renderHook } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import theme from '../export';
@ -46,4 +47,27 @@ describe('Theme', () => {
}),
);
});
describe('radius should be computed as expected', () => {
const radiusGroup = {
0: { radiusBase: 0, radiusLG: 0, radiusSM: 0, radiusXS: 0, radiusOuter: 0 },
2: { radiusBase: 2, radiusLG: 2, radiusSM: 2, radiusXS: 1, radiusOuter: 2 },
4: { radiusBase: 4, radiusLG: 4, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
5: { radiusBase: 5, radiusLG: 6, radiusSM: 4, radiusXS: 1, radiusOuter: 4 },
6: { radiusBase: 6, radiusLG: 8, radiusSM: 4, radiusXS: 2, radiusOuter: 4 },
7: { radiusBase: 7, radiusLG: 9, radiusSM: 5, radiusXS: 2, radiusOuter: 4 },
8: { radiusBase: 8, radiusLG: 10, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
10: { radiusBase: 10, radiusLG: 12, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
12: { radiusBase: 12, radiusLG: 14, radiusSM: 6, radiusXS: 2, radiusOuter: 6 },
14: { radiusBase: 14, radiusLG: 16, radiusSM: 7, radiusXS: 2, radiusOuter: 6 },
16: { radiusBase: 16, radiusLG: 16, radiusSM: 8, radiusXS: 2, radiusOuter: 6 },
20: { radiusBase: 20, radiusLG: 20, radiusSM: 10, radiusXS: 2, radiusOuter: 6 },
};
Object.entries(radiusGroup).forEach(([base, result]) => {
it(`base ${base}`, () => {
expect(genRadius(Number(base))).toMatchObject(result);
});
});
});
});

6
components/theme/themes/shared/genCommonMapToken.ts
View File

@ -1,5 +1,6 @@
import type { CommonMapToken, SeedToken } from '../../interface';
import genFontSizes from './genFontSizes';
import genRadius from './genRadius';
export default function genCommonMapToken(token: SeedToken): CommonMapToken {
const {
@ -44,10 +45,7 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
lineWidthBold: lineWidth + 1,
// radius
radiusXS: radiusBase / 3,
radiusSM: (radiusBase * 2) / 3,
radiusLG: (radiusBase * 4) / 3,
radiusOuter: (radiusBase * 4) / 3,
...genRadius(radiusBase),
// control
controlHeightSM: controlHeight * 0.75,

56
components/theme/themes/shared/genRadius.ts Normal file
View File

@ -0,0 +1,56 @@
import type { MapToken } from '../../interface';
const genRadius = (
radiusBase: number,
): Pick<MapToken, 'radiusXS' | 'radiusSM' | 'radiusLG' | 'radiusBase' | 'radiusOuter'> => {
let radiusLG = radiusBase;
let radiusSM = radiusBase;
let radiusXS = radiusBase;
let radiusOuter = radiusBase;
// radiusLG
if (radiusBase < 6 && radiusBase >= 5) {
radiusLG = radiusBase + 1;
} else if (radiusBase < 16 && radiusBase >= 6) {
radiusLG = radiusBase + 2;
} else if (radiusBase >= 16) {
radiusLG = radiusBase;
}
// radiusSM
if (radiusBase < 7 && radiusBase >= 5) {
radiusSM = 4;
} else if (radiusBase < 8 && radiusBase >= 7) {
radiusSM = 5;
} else if (radiusBase < 14 && radiusBase >= 8) {
radiusSM = 6;
} else if (radiusBase < 16 && radiusBase >= 14) {
radiusSM = 7;
} else if (radiusBase >= 16) {
radiusSM = radiusBase / 2;
}
// radiusXS
if (radiusBase < 6 && radiusBase >= 2) {
radiusXS = 1;
} else if (radiusBase >= 6) {
radiusXS = 2;
}
// radiusOuter
if (radiusBase > 4 && radiusBase < 8) {
radiusOuter = 4;
} else if (radiusBase >= 8) {
radiusOuter = 6;
}
return {
radiusBase,
radiusXS,
radiusSM,
radiusLG,
radiusOuter,
};
};
export default genRadius;

6
components/theme/themes/v4/dark.ts
View File

@ -60,12 +60,6 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
return {
...mergedMapToken,
// Radius
radiusLG: token.radiusBase,
radiusSM: token.radiusBase,
radiusXS: token.radiusBase,
radiusOuter: 5,
// Colors
...genColorMapToken(token, {
generateColorPalettes,

6
components/theme/themes/v4/default.ts
View File

@ -60,12 +60,6 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
return {
...mergedMapToken,
// Radius
radiusLG: token.radiusBase,
radiusSM: token.radiusBase,
radiusXS: token.radiusBase,
radiusOuter: 5,
// Colors
...genColorMapToken(token, {
generateColorPalettes,

11
components/tooltip/style/index.tsx
View File

@ -21,6 +21,7 @@ interface TooltipToken extends FullToken<'Tooltip'> {
tooltipColor: string;
tooltipBg: string;
tooltipBorderRadius: number;
tooltipRadiusOuter: number;
}
const generatorTooltipPresetColor: GenerateStyle<TooltipToken, CSSObject> = token => {
@ -52,6 +53,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
boxShadowSecondary,
paddingSM,
paddingXS,
tooltipRadiusOuter,
} = token;
return [
@ -99,9 +101,9 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
},
// Arrow Style
getArrowStyle(
mergeToken(token, {
radiusOuter: 5,
getArrowStyle<TooltipToken>(
mergeToken<TooltipToken>(token, {
radiusOuter: tooltipRadiusOuter,
}),
'var(--antd-arrow-background-color)',
'',
@ -128,7 +130,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
return [];
}
const { radiusBase, colorTextLightSolid, colorBgDefault } = token;
const { radiusBase, colorTextLightSolid, colorBgDefault, radiusOuter } = token;
const TooltipToken = mergeToken<TooltipToken>(token, {
// default variables
@ -136,6 +138,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
tooltipColor: colorTextLightSolid,
tooltipBorderRadius: radiusBase,
tooltipBg: colorBgDefault,
tooltipRadiusOuter: radiusOuter > 4 ? 4 : radiusOuter,
});
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];