2023-05-12 14:43:48 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
2023-05-14 11:47:01 +08:00
|
|
|
import genColorBlockStyle from './color-block';
|
2023-05-12 14:43:48 +08:00
|
|
|
import genInputStyle from './input';
|
2023-05-14 11:47:01 +08:00
|
|
|
import genPickerStyle from './picker';
|
2023-05-12 14:43:48 +08:00
|
|
|
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,
|
|
|
|
});
|
|
|
|
|
2023-05-30 12:50:04 +08:00
|
|
|
const genRtlStyle = (token: ColorPickerToken): CSSObject => {
|
|
|
|
const { componentCls } = token;
|
|
|
|
return {
|
|
|
|
'&-rtl': {
|
|
|
|
[`${componentCls}-presets-color`]: {
|
|
|
|
'&::after': {
|
|
|
|
direction: 'ltr',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[`${componentCls}-clear`]: {
|
|
|
|
'&::after': {
|
|
|
|
direction: 'ltr',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-06-29 11:46:11 +08:00
|
|
|
const genClearStyle = (
|
|
|
|
token: ColorPickerToken,
|
|
|
|
size: number,
|
|
|
|
extraStyle?: CSSObject,
|
|
|
|
): CSSObject => {
|
2023-05-12 14:43:48 +08:00
|
|
|
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',
|
2023-06-29 11:46:11 +08:00
|
|
|
...extraStyle,
|
2023-05-12 14:43:48 +08:00
|
|
|
'&::after': {
|
|
|
|
content: '""',
|
|
|
|
position: 'absolute',
|
|
|
|
insetInlineEnd: lineWidth,
|
|
|
|
top: 0,
|
|
|
|
display: 'block',
|
|
|
|
width: 40, // maximum
|
|
|
|
height: 2, // fixed
|
|
|
|
transformOrigin: 'right',
|
|
|
|
transform: 'rotate(-45deg)',
|
|
|
|
backgroundColor: red6,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-07-12 10:15:04 +08:00
|
|
|
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,
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2023-06-21 11:30:09 +08:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2023-05-12 14:43:48 +08:00
|
|
|
const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
|
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
colorPickerWidth,
|
|
|
|
colorPrimary,
|
|
|
|
motionDurationMid,
|
|
|
|
colorBgElevated,
|
|
|
|
colorTextDisabled,
|
2023-06-19 19:29:39 +08:00
|
|
|
colorText,
|
2023-05-12 14:43:48 +08:00
|
|
|
colorBgContainerDisabled,
|
|
|
|
borderRadius,
|
|
|
|
marginXS,
|
|
|
|
marginSM,
|
|
|
|
controlHeight,
|
|
|
|
controlHeightSM,
|
|
|
|
colorBgTextActive,
|
|
|
|
colorPickerPresetColorSize,
|
2023-06-29 11:46:11 +08:00
|
|
|
colorPickerPreviewSize,
|
2023-05-12 14:43:48 +08:00
|
|
|
lineWidth,
|
|
|
|
colorBorder,
|
2023-06-19 19:29:39 +08:00
|
|
|
paddingXXS,
|
2023-06-21 11:30:09 +08:00
|
|
|
fontSize,
|
2023-05-12 14:43:48 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
[componentCls]: {
|
2023-06-29 11:46:11 +08:00
|
|
|
[`${componentCls}-inner-content`]: {
|
2023-05-12 14:43:48 +08:00
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
width: colorPickerWidth,
|
|
|
|
|
2023-06-29 11:46:11 +08:00
|
|
|
'&-divider': {
|
|
|
|
margin: `${marginSM}px 0 ${marginXS}px`,
|
2023-05-12 14:43:48 +08:00
|
|
|
},
|
2023-06-29 11:46:11 +08:00
|
|
|
[`${componentCls}-panel`]: {
|
|
|
|
...genPickerStyle(token),
|
|
|
|
},
|
|
|
|
...genColorBlockStyle(token, colorPickerPreviewSize),
|
2023-05-12 14:43:48 +08:00
|
|
|
...genInputStyle(token),
|
|
|
|
...genPresetsStyle(token),
|
2023-06-29 11:46:11 +08:00
|
|
|
...genClearStyle(token, colorPickerPresetColorSize, {
|
|
|
|
marginInlineStart: 'auto',
|
|
|
|
marginBottom: marginXS,
|
|
|
|
}),
|
2023-05-12 14:43:48 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&-trigger': {
|
2023-06-19 19:29:39 +08:00
|
|
|
minWidth: controlHeight,
|
2023-05-12 14:43:48 +08:00
|
|
|
height: controlHeight,
|
|
|
|
borderRadius,
|
|
|
|
border: `${lineWidth}px solid ${colorBorder}`,
|
|
|
|
cursor: 'pointer',
|
2023-06-19 19:29:39 +08:00
|
|
|
display: 'inline-flex',
|
2023-05-12 14:43:48 +08:00
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
transition: `all ${motionDurationMid}`,
|
|
|
|
background: colorBgElevated,
|
2023-06-19 19:29:39 +08:00
|
|
|
padding: paddingXXS - lineWidth,
|
|
|
|
[`${componentCls}-trigger-text`]: {
|
|
|
|
marginInlineStart: marginXS,
|
|
|
|
marginInlineEnd: marginXS - (paddingXXS - lineWidth),
|
2023-06-21 11:30:09 +08:00
|
|
|
fontSize,
|
2023-06-19 19:29:39 +08:00
|
|
|
color: colorText,
|
|
|
|
},
|
2023-05-12 14:43:48 +08:00
|
|
|
'&-active': {
|
|
|
|
...genActiveStyle(token),
|
|
|
|
borderColor: colorPrimary,
|
|
|
|
},
|
|
|
|
'&:hover': {
|
|
|
|
borderColor: colorPrimary,
|
|
|
|
},
|
|
|
|
'&-disabled': {
|
|
|
|
color: colorTextDisabled,
|
|
|
|
background: colorBgContainerDisabled,
|
|
|
|
cursor: 'not-allowed',
|
|
|
|
'&:hover': {
|
|
|
|
borderColor: colorBgTextActive,
|
|
|
|
},
|
2023-06-19 19:29:39 +08:00
|
|
|
[`${componentCls}-trigger-text`]: {
|
|
|
|
color: colorTextDisabled,
|
|
|
|
},
|
2023-05-12 14:43:48 +08:00
|
|
|
},
|
|
|
|
...genClearStyle(token, controlHeightSM),
|
|
|
|
...genColorBlockStyle(token, controlHeightSM),
|
2023-07-12 10:15:04 +08:00
|
|
|
...genStatusStyle(token),
|
2023-06-21 11:30:09 +08:00
|
|
|
...genSizeStyle(token),
|
2023-05-12 14:43:48 +08:00
|
|
|
},
|
2023-05-30 12:50:04 +08:00
|
|
|
...genRtlStyle(token),
|
2023-05-12 14:43:48 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
export default genComponentStyleHook('ColorPicker', (token) => {
|
|
|
|
const { colorTextQuaternary, marginSM } = token;
|
|
|
|
|
|
|
|
const colorPickerSliderHeight = 8;
|
|
|
|
|
2023-05-14 11:47:01 +08:00
|
|
|
const colorPickerToken = mergeToken<ColorPickerToken>(token, {
|
2023-05-12 14:43:48 +08:00
|
|
|
colorPickerWidth: 234,
|
|
|
|
colorPickerHandlerSize: 16,
|
|
|
|
colorPickerHandlerSizeSM: 12,
|
|
|
|
colorPickerAlphaInputWidth: 44,
|
|
|
|
colorPickerInputNumberHandleWidth: 16,
|
|
|
|
colorPickerPresetColorSize: 18,
|
|
|
|
colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`,
|
|
|
|
colorPickerSliderHeight,
|
|
|
|
colorPickerPreviewSize: colorPickerSliderHeight * 2 + marginSM,
|
|
|
|
});
|
|
|
|
|
2023-05-14 11:47:01 +08:00
|
|
|
return [genColorPickerStyle(colorPickerToken)];
|
2023-05-12 14:43:48 +08:00
|
|
|
});
|