ant-design/components/color-picker/style/index.ts

272 lines
7.2 KiB
TypeScript
Raw Normal View History

import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genColorBlockStyle from './color-block';
import genInputStyle from './input';
import genPickerStyle from './picker';
import genPresetsStyle from './presets';
export interface ComponentToken {}
export interface ColorPickerToken extends FullToken<'ColorPicker'> {
colorPickerWidth: number;
colorPickerInsetShadow: string;
colorPickerHandlerSize: number;
colorPickerHandlerSizeSM: number;
colorPickerSliderHeight: number;
colorPickerPreviewSize: number;
colorPickerAlphaInputWidth: number;
colorPickerInputNumberHandleWidth: number;
colorPickerPresetColorSize: number;
}
export const genActiveStyle = (token: ColorPickerToken) => ({
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
borderInlineEndWidth: token.lineWidth,
outline: 0,
});
const genRtlStyle = (token: ColorPickerToken): CSSObject => {
const { componentCls } = token;
return {
'&-rtl': {
[`${componentCls}-presets-color`]: {
'&::after': {
direction: 'ltr',
},
},
[`${componentCls}-clear`]: {
'&::after': {
direction: 'ltr',
},
},
},
};
};
const genClearStyle = (
token: ColorPickerToken,
size: number,
extraStyle?: CSSObject,
): CSSObject => {
const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;
return {
[`${componentCls}-clear`]: {
width: size,
height: size,
borderRadius: borderRadiusSM,
border: `${lineWidth}px solid ${colorSplit}`,
position: 'relative',
cursor: 'pointer',
overflow: 'hidden',
...extraStyle,
'&::after': {
content: '""',
position: 'absolute',
insetInlineEnd: lineWidth,
top: 0,
display: 'block',
width: 40, // maximum
height: 2, // fixed
transformOrigin: 'right',
transform: 'rotate(-45deg)',
backgroundColor: red6,
},
},
};
};
const genStatusStyle = (token: ColorPickerToken): CSSObject => {
const {
componentCls,
colorError,
colorWarning,
colorErrorBorderHover,
colorWarningBorderHover,
colorErrorOutline,
colorWarningOutline,
} = token;
return {
[`&${componentCls}-status-error`]: {
borderColor: colorError,
'&:hover': {
borderColor: colorErrorBorderHover,
},
[`&${componentCls}-trigger-active`]: {
...genActiveStyle(
mergeToken<ColorPickerToken>(token, {
controlOutline: colorErrorOutline,
}),
),
},
},
[`&${componentCls}-status-warning`]: {
borderColor: colorWarning,
'&:hover': {
borderColor: colorWarningBorderHover,
},
[`&${componentCls}-trigger-active`]: {
...genActiveStyle(
mergeToken<ColorPickerToken>(token, {
controlOutline: colorWarningOutline,
}),
),
},
},
};
};
const genSizeStyle = (token: ColorPickerToken): CSSObject => {
const {
componentCls,
controlHeightLG,
controlHeightSM,
controlHeight,
controlHeightXS,
borderRadius,
borderRadiusSM,
borderRadiusXS,
borderRadiusLG,
fontSizeLG,
} = token;
return {
[`&${componentCls}-lg`]: {
minWidth: controlHeightLG,
height: controlHeightLG,
borderRadius: borderRadiusLG,
[`${componentCls}-color-block`]: {
width: controlHeight,
height: controlHeight,
borderRadius,
},
[`${componentCls}-trigger-text`]: {
fontSize: fontSizeLG,
},
},
[`&${componentCls}-sm`]: {
minWidth: controlHeightSM,
height: controlHeightSM,
borderRadius: borderRadiusSM,
[`${componentCls}-color-block`]: {
width: controlHeightXS,
height: controlHeightXS,
borderRadius: borderRadiusXS,
},
},
};
};
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
const {
componentCls,
colorPickerWidth,
colorPrimary,
motionDurationMid,
colorBgElevated,
colorTextDisabled,
colorText,
colorBgContainerDisabled,
borderRadius,
marginXS,
marginSM,
controlHeight,
controlHeightSM,
colorBgTextActive,
colorPickerPresetColorSize,
colorPickerPreviewSize,
lineWidth,
colorBorder,
paddingXXS,
fontSize,
} = token;
return [
{
[componentCls]: {
[`${componentCls}-inner-content`]: {
display: 'flex',
flexDirection: 'column',
width: colorPickerWidth,
'&-divider': {
margin: `${marginSM}px 0 ${marginXS}px`,
},
[`${componentCls}-panel`]: {
...genPickerStyle(token),
},
...genColorBlockStyle(token, colorPickerPreviewSize),
...genInputStyle(token),
...genPresetsStyle(token),
...genClearStyle(token, colorPickerPresetColorSize, {
marginInlineStart: 'auto',
marginBottom: marginXS,
}),
},
'&-trigger': {
minWidth: controlHeight,
height: controlHeight,
borderRadius,
border: `${lineWidth}px solid ${colorBorder}`,
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
transition: `all ${motionDurationMid}`,
background: colorBgElevated,
padding: paddingXXS - lineWidth,
[`${componentCls}-trigger-text`]: {
marginInlineStart: marginXS,
marginInlineEnd: marginXS - (paddingXXS - lineWidth),
fontSize,
color: colorText,
},
'&-active': {
...genActiveStyle(token),
borderColor: colorPrimary,
},
'&:hover': {
borderColor: colorPrimary,
},
'&-disabled': {
color: colorTextDisabled,
background: colorBgContainerDisabled,
cursor: 'not-allowed',
'&:hover': {
borderColor: colorBgTextActive,
},
[`${componentCls}-trigger-text`]: {
color: colorTextDisabled,
},
},
...genClearStyle(token, controlHeightSM),
...genColorBlockStyle(token, controlHeightSM),
...genStatusStyle(token),
...genSizeStyle(token),
},
...genRtlStyle(token),
},
},
];
};
export default genComponentStyleHook('ColorPicker', (token) => {
const { colorTextQuaternary, marginSM } = token;
const colorPickerSliderHeight = 8;
const colorPickerToken = mergeToken<ColorPickerToken>(token, {
colorPickerWidth: 234,
colorPickerHandlerSize: 16,
colorPickerHandlerSizeSM: 12,
colorPickerAlphaInputWidth: 44,
colorPickerInputNumberHandleWidth: 16,
colorPickerPresetColorSize: 18,
colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`,
colorPickerSliderHeight,
colorPickerPreviewSize: colorPickerSliderHeight * 2 + marginSM,
});
return [genColorPickerStyle(colorPickerToken)];
});