ant-design/components/color-picker/style/picker.ts
红果汁 a0d8fcb23a
fix: ColorPicker UI in Dark Mode (#42827)
* fix: fix ui in dark mode

* test: add test case
2023-06-05 16:23:03 +08:00

78 lines
2.1 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/internal';
import genColorBlockStyle, { getTransBg } from './color-block';
import type { ColorPickerToken } from './index';
const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
const {
componentCls,
controlHeightLG,
borderRadiusSM,
colorPickerInsetShadow,
marginSM,
colorBgElevated,
colorFillSecondary,
lineWidthBold,
colorPickerHandlerSize,
colorPickerHandlerSizeSM,
colorPickerSliderHeight,
colorPickerPreviewSize,
} = token;
return {
[`${componentCls}-select`]: {
[`${componentCls}-palette`]: {
minHeight: controlHeightLG * 4,
overflow: 'hidden',
borderRadius: borderRadiusSM,
},
[`${componentCls}-saturation`]: {
position: 'absolute',
borderRadius: 'inherit',
boxShadow: colorPickerInsetShadow,
inset: 0,
},
marginBottom: marginSM,
},
[`${componentCls}-handler`]: {
width: colorPickerHandlerSize,
height: colorPickerHandlerSize,
border: `${lineWidthBold}px solid ${colorBgElevated}`,
position: 'relative',
borderRadius: '50%',
cursor: 'pointer',
boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
'&-sm': {
width: colorPickerHandlerSizeSM,
height: colorPickerHandlerSizeSM,
},
},
[`${componentCls}-slider`]: {
borderRadius: colorPickerSliderHeight / 2,
[`${componentCls}-palette`]: {
height: colorPickerSliderHeight,
},
[`${componentCls}-gradient`]: {
borderRadius: colorPickerSliderHeight / 2,
boxShadow: colorPickerInsetShadow,
},
'&-alpha': getTransBg(`${colorPickerSliderHeight}px`, token.colorFillSecondary),
marginBottom: marginSM,
},
[`${componentCls}-slider-container`]: {
display: 'flex',
gap: marginSM,
[`${componentCls}-slider-group`]: {
flex: 1,
},
},
...genColorBlockStyle(token, colorPickerPreviewSize),
};
};
export default genPickerStyle;