@aplus-frontend/ui

import { ActionToken } from '../ap-action/style'; import { Recordable, RecursivePartial } from '../type'; import { CSSInterpolation, CSSObject } from '@emotion/serialize'; import { CheckCardToken } from '../check-card/style'; import { ApFormToken } from '../ap-form/style/token'; import { ApListToken } from '../ap-list/style'; import { ScrollbarToken } from '../scroll-bar/style'; import { MaskToken } from '../mask/style'; import { SplitterToken } from '../splitter/style'; import { ProCardToken } from '../ap-pro-card/style/token'; import { AgGridToken } from '../ag-grid/style'; import { BatchInputGroupToken } from '../business/batch-input-group/style'; import { ApRadioGroupToken } from '../business/ap-radio-group/style'; import { ApGridToken } from '../ap-grid/style'; import { TokenUtil } from '../utils/cssinjs/TokenUtil'; import { LoadingBarToken } from '../loading-bar/style'; import { HighlightToken } from '../highlight/style'; import { SearchFormToken } from '../ap-form/style/search-form'; import { ApUploadToken } from '../business/ap-upload/style/token'; import { ApUploadSingleToken } from '../business/ap-upload-file/ap-upload-single/style'; import { ApAttachmentToken } from '../business/ap-attachment/style'; import { ApLabelToken } from '../business/ap-label/style'; import { ApSelectLayoutToken } from '../business/ap-select-layout/style'; import { ApTableModalToken } from '../business/ap-table-modal/style'; import { ApSummaryToken } from '../business/ap-summary/style'; import { AppendixToken } from '../business/ap-appendix/style/token'; import { ApProductInfoToken } from '../business/ap-product-info/style'; import { ApViewToken } from '../business/ap-view/style'; export type FontToken = { /** * 最大号字体 */ fontSizeXXL: number; /** * 超大号字体 */ fontSizeXL: number; /** * 大号字体 */ fontSizeLG: number; /** * 中等尺寸字体 */ fontSize: number; /** * 小尺寸字体 */ fontSizeSM: number; /** * 大型文本行高 */ lineHeightLG: number; /** * 基础行高 */ lineHeight: number; /** * 小型文本行高 */ lineHeightSM: number; }; export type ColorToken = { /** * 基础边框色 */ borderColorBase: string; /** * 基础hover色 */ hoverColorBase: string; /** * 基础active色 */ activeColorBase: string; /** * 主色 */ colorPrimary: string; /** * 主色禁用色 */ colorPrimaryDisabled: string; /** * 链接色 */ colorLink: string; /** * 链接色-hover */ colorLinkHover: string; /** * 链接色-禁用 */ colorLinkDisabled: string; /** * 成功色 */ colorSuccess: string; /** * 成功色-禁用 */ colorSuccessDisabled: string; /** * 失败色 */ colorError: string; /** * 失败色-禁用 */ colorErrorDisabled: string; /** * 警告色 */ colorWarn: string; /** * 警告色-禁用 */ colorWarnDisabled: string; /** * 一级文本色 */ textColor1: string; /** * 二级文本色 */ textColor2: string; /** * 三级文本色 */ textColor3: string; /** * 四级文本色 */ textColor4: string; /** * 一级背景色 */ colorBg1: string; /** * 二级背景色 */ colorBg2: string; /** * 三级背景色 */ colorBg3: string; /** * 背景禁用色 */ colorBgDisabled: string; /** * 布局背景色 */ colorBgLayout: string; /** * 控件背景色（一般同主系，但是更浅，适用块选中效果） */ colorBgControl: string; /** * 表格表头背景色 */ tableHeaderBg: string; }; export type HeightToken = { /** * 最小尺寸间距 */ spaceXXS: number; /** * 极小尺寸间距 */ spaceXS: number; /** * 小尺寸间距 */ spaceSM: number; /** * 标准尺寸间距 */ space: number; /** * 较大尺寸间距 */ spaceMD: number; /** * 大尺寸间距 */ spaceLG: number; /** * 极大尺寸间距 */ spaceXL: number; /** * 最大尺寸间距 */ spaceXXL: number; }; export type MotionToken = { /** * 动画持续时间-快速，适用于小型元素 */ motionDurationFast: string; /** * 动画持续时间-中等，适用于中型元素 */ motionDurationMid: string; /** * 动画持续时间-慢速，适用于大型元素 */ motionDurationSlow: string; }; /** 基础token */ export type BaseToken = FontToken & ColorToken & HeightToken & MotionToken & { /** * 最小尺寸圆角 */ borderRadiusXS: number; /** * 小尺寸圆角 */ borderRadiusSM: number; /** * 标准尺寸圆角 */ borderRadius: number; /** * 滚动条滑块颜色 */ scrollbarThumbColorBase: string; /** * hover时滚动条滑块颜色 */ scrollbarThumbColorHover: string; /** * hover时滚动条滑轨颜色 */ scrollbarTrackColorHover: string; /** * 基础线宽 */ lineWidth: number; /** * 线条样式 */ lineType: string; /** * 多行文本显示时指定显示的最大行数 */ lineClamp: number; /** * 控件高度 */ controlHeight: number; }; /** 组件token */ export type ComponentsToken = { ApAction: ActionToken; CheckCard: CheckCardToken; ApForm: ApFormToken; SearchForm: SearchFormToken; ApList: ApListToken; Scrollbar: ScrollbarToken; Mask: MaskToken; Splitter: SplitterToken; ProCard: ProCardToken; StatisticsCard: ProCardToken; AgGrid: AgGridToken; BatchInputGroup: BatchInputGroupToken; ApRadioGroup: ApRadioGroupToken; ApGrid: ApGridToken; LoadingBar: LoadingBarToken; Highlight: HighlightToken; ApUpload: ApUploadToken; ApUploadSingle: ApUploadSingleToken; ApAttachment: ApAttachmentToken; ApLabel: ApLabelToken; ApSelectLayout: ApSelectLayoutToken; ApTableModal: ApTableModalToken; ApSummary: ApSummaryToken; ApAppendix: AppendixToken; ApProductInfo: ApProductInfoToken; ApView: ApViewToken; }; /** 全量token */ export type FullToken = BaseToken & { components: ComponentsToken; }; /** 上下文token（基础token+部分组件token） */ export type ContextToken = BaseToken & RecursivePartial<{ components: ComponentsToken; }>; export type TokenWithComponentCls<Token> = Token & { componentCls: string; namespace: string; }; export type TokenWithUtil<Token> = TokenWithComponentCls<Token> & { calc: (cssVar: any) => InstanceType<typeof TokenUtil>; }; export type CssVarToken<Token = Recordable> = { [key in keyof Token]: Token[key] | string; }; export type GenStyleFunc<Token = object> = (token: TokenWithUtil<Token & BaseToken>) => CSSInterpolation; export type StyleMixin<Token = object> = (token: TokenWithUtil<Token & BaseToken>) => CSSObject; export type GenStyleCallback<Token> = (calc: TokenWithUtil<Token>, rawToken: TokenWithComponentCls<Token>) => CSSInterpolation[];