ant-design/components/select/style/token.ts
二货爱吃白萝卜 fe314589ed
refactor: New Picker interactive (#46685)
* chore: init

* chore: link picker

* chore: move files

* chore: update style

* chore: update types

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: fix test case

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: clesn up useless types

* chore: update types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: fix types

* chore: update style

* chore: clean up

* chore: update types

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* fix: format

* chore: update deps

* chore: feature merge master (#46794)

* fix: Fix typo s/Notificaiton/Notification/ (#46775)

* docs: supplement form preserve field description (#46788)

close https://github.com/ant-design/ant-design/issues/46773

* docs: tweak changelog drawer width in small screen (#46791)

* docs: Update compatible-style.zh-CN.md (#46790)

Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com>
Co-authored-by: Shunze Chen <qianlonwork@outlook.com>
Co-authored-by: afc163 <afc163@gmail.com>

* chore: update locale size

* chore: lock dumi

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: bump version

* test: update snapshot

* test: update snapshot

* chore: bump version

* chore: update limit

* test: update snapshot

* docs: update 7 days sample

* chore: rm useless style

* chore: clean up style

* docs: add buddihist era demo

* refactor: interface

* chore: add multiple types

* docs: add demo

* chore: init style

* chore: init style

* chore: fill style

* chore: fill style

* chore: style

* chore: size of it

* chore: size style

* docs: add align demo

* docs: needConfirm

* chore: fix showWeek style

* test: update snapshot

* chore: fix ts

* chore: fix ts

* chore: fix ts

* chore: fix ts

* fix: week style

* docs: update dayjs note

* fix: style missing

* chore: fix footer extra style missing

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot

---------

Signed-off-by: afc163 <afc163@gmail.com>
Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com>
Co-authored-by: Shunze Chen <qianlonwork@outlook.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
2024-01-15 15:41:40 +08:00

162 lines
4.2 KiB
TypeScript

import type { CSSProperties } from 'react';
import type { FullToken, GetDefaultToken } from 'antd/es/theme/util/genComponentStyleHook';
export interface MultipleSelectorToken {
/**
* @desc 多选标签背景色
* @descEN Background color of multiple tag
*/
multipleItemBg: string;
/**
* @desc 多选标签边框色
* @descEN Border color of multiple tag
*/
multipleItemBorderColor: string;
/**
* @desc 多选标签高度
* @descEN Height of multiple tag
*/
multipleItemHeight: number;
/**
* @desc 大号多选标签高度
* @descEN Height of multiple tag with large size
*/
multipleItemHeightLG: number;
/**
* @desc 多选框禁用背景
* @descEN Background color of multiple selector when disabled
*/
multipleSelectorBgDisabled: string;
/**
* @desc 多选标签禁用文本颜色
* @descEN Text color of multiple tag when disabled
*/
multipleItemColorDisabled: string;
/**
* @desc 多选标签禁用边框色
* @descEN Border color of multiple tag when disabled
*/
multipleItemBorderColorDisabled: string;
/**
* @internal
*/
}
export interface ComponentToken extends MultipleSelectorToken {
/**
* @desc 下拉菜单 z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
/**
* @desc 选项选中时文本颜色
* @descEN Text color when option is selected
*/
optionSelectedColor: string;
/**
* @desc 选项选中时文本字重
* @descEN Font weight when option is selected
*/
optionSelectedFontWeight: CSSProperties['fontWeight'];
/**
* @desc 选项选中时背景色
* @descEN Background color when option is selected
*/
optionSelectedBg: string;
/**
* @desc 选项激活态时背景色
* @descEN Background color when option is active
*/
optionActiveBg: string;
/**
* @desc 选项内间距
* @descEN Padding of option
*/
optionPadding: CSSProperties['padding'];
/**
* @desc 选项字体大小
* @descEN Font size of option
*/
optionFontSize: number;
/**
* @desc 选项行高
* @descEN Line height of option
*/
optionLineHeight: CSSProperties['lineHeight'];
/**
* @desc 选项高度
* @descEN Height of option
*/
optionHeight: number;
/**
* @desc 选框背景色
* @descEN Background color of selector
*/
selectorBg: string;
/**
* @desc 清空按钮背景色
* @descEN Background color of clear button
*/
clearBg: string;
/**
* @desc 单选大号回填项高度
* @descEN Height of single selected item with large size
*/
singleItemHeightLG: number;
showArrowPaddingInlineEnd: number;
}
export interface SelectorToken {
inputPaddingHorizontalBase: number | string;
multipleSelectItemHeight: number;
selectHeight: number;
}
export interface SelectToken extends FullToken<'Select'>, SelectorToken {
rootPrefixCls: string;
}
export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
const {
fontSize,
lineHeight,
controlHeight,
controlPaddingHorizontal,
zIndexPopupBase,
colorText,
fontWeightStrong,
controlItemBgActive,
controlItemBgHover,
colorBgContainer,
colorFillSecondary,
controlHeightLG,
controlHeightSM,
colorBgContainerDisabled,
colorTextDisabled,
} = token;
return {
zIndexPopup: zIndexPopupBase + 50,
optionSelectedColor: colorText,
optionSelectedFontWeight: fontWeightStrong,
optionSelectedBg: controlItemBgActive,
optionActiveBg: controlItemBgHover,
optionPadding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
optionFontSize: fontSize,
optionLineHeight: lineHeight,
optionHeight: controlHeight,
selectorBg: colorBgContainer,
clearBg: colorBgContainer,
singleItemHeightLG: controlHeightLG,
multipleItemBg: colorFillSecondary,
multipleItemBorderColor: 'transparent',
multipleItemHeight: controlHeightSM,
multipleItemHeightLG: controlHeight,
multipleSelectorBgDisabled: colorBgContainerDisabled,
multipleItemColorDisabled: colorTextDisabled,
multipleItemBorderColorDisabled: 'transparent',
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
};
};