mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
// 用于 color.md 中的颜色对比
|
|
import React from 'react';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
import { Flex, theme } from 'antd';
|
|
import { createStyles } from 'antd-style';
|
|
import tokenMeta from 'antd/es/version/token-meta.json';
|
|
import classNames from 'classnames';
|
|
|
|
import useLocale from '../../../hooks/useLocale';
|
|
|
|
const useStyle = createStyles(({ token, css }) => {
|
|
const height = token.controlHeightLG;
|
|
const dotSize = height / 5;
|
|
|
|
return {
|
|
container: css`
|
|
background: #fff;
|
|
border-radius: ${token.borderRadiusLG}px;
|
|
overflow: hidden;
|
|
`,
|
|
|
|
row: css`
|
|
display: flex;
|
|
align-items: center;
|
|
`,
|
|
|
|
col: css`
|
|
flex: 1 1 33%;
|
|
height: ${height}px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(0, 0, 0, 0.88);
|
|
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
`,
|
|
|
|
colDark: css`
|
|
background: #000;
|
|
color: #fff;
|
|
`,
|
|
|
|
dot: css`
|
|
border-radius: 100%;
|
|
width: ${dotSize}px;
|
|
height: ${dotSize}px;
|
|
background: #000;
|
|
box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.25);
|
|
`,
|
|
|
|
dotColor: css`
|
|
width: ${token.fontSize * 6}px;
|
|
white-space: nowrap;
|
|
`,
|
|
};
|
|
});
|
|
|
|
function color2Rgba(color: string) {
|
|
return `#${new TinyColor(color).toHex8().toUpperCase()}`;
|
|
}
|
|
|
|
interface ColorCircleProps {
|
|
color?: string;
|
|
}
|
|
|
|
const ColorCircle: React.FC<ColorCircleProps> = ({ color }) => {
|
|
const { styles } = useStyle();
|
|
return (
|
|
<Flex align="center" gap={4}>
|
|
<div className={styles.dot} style={{ background: color }} />
|
|
<div className={styles.dotColor}>{color}</div>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export interface TokenCompareProps {
|
|
tokenNames?: string;
|
|
}
|
|
|
|
const TokenCompare: React.FC<TokenCompareProps> = (props) => {
|
|
const { tokenNames = '' } = props;
|
|
const [, lang] = useLocale();
|
|
const { styles } = useStyle();
|
|
|
|
const tokenList = React.useMemo(() => {
|
|
const list = tokenNames.split('|');
|
|
|
|
const lightTokens = theme.getDesignToken();
|
|
const darkTokens = theme.getDesignToken({ algorithm: theme.darkAlgorithm });
|
|
|
|
return list.map((tokenName) => {
|
|
const meta = tokenMeta.global[tokenName];
|
|
const name = lang === 'cn' ? meta.name : meta.nameEn;
|
|
|
|
return {
|
|
name: name.replace('颜色', '').replace('色', '').replace('Color', '').trim(),
|
|
light: color2Rgba(lightTokens[tokenName]),
|
|
dark: color2Rgba(darkTokens[tokenName]),
|
|
};
|
|
});
|
|
}, [tokenNames]);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{tokenList.map((data) => (
|
|
<div key={data.name} className={styles.row}>
|
|
<div className={styles.col}>{data.name}</div>
|
|
<div className={styles.col}>
|
|
<ColorCircle color={data.light} />
|
|
</div>
|
|
<div className={classNames(styles.col, styles.colDark)}>
|
|
<ColorCircle color={data.dark} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TokenCompare;
|