import type * as React from 'react'; import type { ComponentToken as AlertComponentToken } from '../alert/style'; import type { ComponentToken as AnchorComponentToken } from '../anchor/style'; import type { ComponentToken as AvatarComponentToken } from '../avatar/style'; import type { ComponentToken as BackTopComponentToken } from '../back-top/style'; import type { ComponentToken as ButtonComponentToken } from '../button/style'; import type { ComponentToken as FloatButtonComponentToken } from '../float-button/style'; import type { ComponentToken as CalendarComponentToken } from '../calendar/style'; import type { ComponentToken as CardComponentToken } from '../card/style'; import type { ComponentToken as CarouselComponentToken } from '../carousel/style'; import type { ComponentToken as CascaderComponentToken } from '../cascader/style'; import type { ComponentToken as CheckboxComponentToken } from '../checkbox/style'; import type { ComponentToken as CollapseComponentToken } from '../collapse/style'; import type { ComponentToken as DatePickerComponentToken } from '../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../dropdown/style'; import type { ComponentToken as DrawerComponentToken } from '../drawer/style'; import type { ComponentToken as EmptyComponentToken } from '../empty/style'; import type { ComponentToken as ImageComponentToken } from '../image/style'; import type { ComponentToken as InputNumberComponentToken } from '../input-number/style'; import type { ComponentToken as LayoutComponentToken } from '../layout/style'; import type { ComponentToken as ListComponentToken } from '../list/style'; import type { ComponentToken as MentionsComponentToken } from '../mentions/style'; import type { ComponentToken as MenuComponentToken } from '../menu/style'; import type { ComponentToken as MessageComponentToken } from '../message/style'; import type { ComponentToken as ModalComponentToken } from '../modal/style'; import type { ComponentToken as NotificationComponentToken } from '../notification/style'; import type { ComponentToken as PopconfirmComponentToken } from '../popconfirm/style'; import type { ComponentToken as PopoverComponentToken } from '../popover/style'; import type { ComponentToken as ProgressComponentToken } from '../progress/style'; import type { ComponentToken as RadioComponentToken } from '../radio/style'; import type { ComponentToken as RateComponentToken } from '../rate/style'; import type { ComponentToken as ResultComponentToken } from '../result/style'; import type { ComponentToken as SegmentedComponentToken } from '../segmented/style'; import type { ComponentToken as SelectComponentToken } from '../select/style'; import type { ComponentToken as SkeletonComponentToken } from '../skeleton/style'; import type { ComponentToken as SliderComponentToken } from '../slider/style'; import type { ComponentToken as SpaceComponentToken } from '../space/style'; import type { ComponentToken as SpinComponentToken } from '../spin/style'; import type { ComponentToken as StepsComponentToken } from '../steps/style'; import type { ComponentToken as TableComponentToken } from '../table/style'; import type { ComponentToken as TabsComponentToken } from '../tabs/style'; import type { ComponentToken as TagComponentToken } from '../tag/style'; import type { ComponentToken as TimelineComponentToken } from '../timeline/style'; import type { ComponentToken as TooltipComponentToken } from '../tooltip/style'; import type { ComponentToken as TransferComponentToken } from '../transfer/style'; import type { ComponentToken as TypographyComponentToken } from '../typography/style'; import type { ComponentToken as UploadComponentToken } from '../upload/style'; import type { ComponentToken as TourComponentToken } from '../tour/style'; export const PresetColors = [ 'blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange', 'yellow', 'volcano', 'geekblue', 'lime', 'gold', ] as const; type PresetColorKey = typeof PresetColors[number]; export type PresetColorType = Record; type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; export type ColorPalettes = { [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string; }; export interface ComponentTokenMap { Affix?: {}; Alert?: AlertComponentToken; Anchor?: AnchorComponentToken; Avatar?: AvatarComponentToken; BackTop?: BackTopComponentToken; Badge?: {}; Button?: ButtonComponentToken; Breadcrumb?: {}; Card?: CardComponentToken; Carousel?: CarouselComponentToken; Cascader?: CascaderComponentToken; Checkbox?: CheckboxComponentToken; Collapse?: CollapseComponentToken; DatePicker?: DatePickerComponentToken; Descriptions?: {}; Divider?: DividerComponentToken; Drawer?: DrawerComponentToken; Dropdown?: DropdownComponentToken; Empty?: EmptyComponentToken; FloatButton?: FloatButtonComponentToken; Form?: {}; Grid?: {}; Image?: ImageComponentToken; Input?: {}; InputNumber?: InputNumberComponentToken; Layout?: LayoutComponentToken; List?: ListComponentToken; Mentions?: MentionsComponentToken; Notification?: NotificationComponentToken; Pagination?: {}; Popover?: PopoverComponentToken; Popconfirm?: PopconfirmComponentToken; Rate?: RateComponentToken; Radio?: RadioComponentToken; Result?: ResultComponentToken; Segmented?: SegmentedComponentToken; Select?: SelectComponentToken; Skeleton?: SkeletonComponentToken; Slider?: SliderComponentToken; Spin?: SpinComponentToken; Statistic?: {}; Switch?: {}; Tag?: TagComponentToken; Tree?: {}; TreeSelect?: {}; Typography?: TypographyComponentToken; Timeline?: TimelineComponentToken; Transfer?: TransferComponentToken; Tabs?: TabsComponentToken; Calendar?: CalendarComponentToken; Steps?: StepsComponentToken; Menu?: MenuComponentToken; Modal?: ModalComponentToken; Message?: MessageComponentToken; Upload?: UploadComponentToken; Tooltip?: TooltipComponentToken; Table?: TableComponentToken; Space?: SpaceComponentToken; Progress?: ProgressComponentToken; Tour?: TourComponentToken; } export type OverrideToken = { [key in keyof ComponentTokenMap]: Partial & Partial; }; /** Final token which contains the components level override */ export type GlobalToken = AliasToken & ComponentTokenMap; // ====================================================================== // == Seed Token == // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface SeedToken extends PresetColorType { /** * @desc 品牌主色 */ colorPrimary: string; /** * @desc 成功色 */ colorSuccess: string; /** * @desc 警戒色 */ colorWarning: string; /** * @desc 错误色 */ colorError: string; /** * @desc 信息色 */ colorInfo: string; /** * @desc 基础文本色 */ colorTextBase: string; /** * Base component background color. Will derivative container background color with this * @desc 基础背景色 */ colorBgBase: string; // Font /** * @desc 字体 */ fontFamily: string; /** * @desc 基础字号 */ fontSize: number; /** * Border width of base components * @desc 基础线宽 */ lineWidth: number; /** * @desc 线条样式 */ lineType: string; /** * @desc 动画时长变化单位 */ motionUnit: number; /** * @desc 动画基础时长 */ motionBase: number; /** * @desc */ motionEaseOutCirc: string; /** * @desc */ motionEaseInOutCirc: string; /** * @desc */ motionEaseInOut: string; /** * @desc */ motionEaseOutBack: string; /** * @desc */ motionEaseInBack: string; /** * @desc */ motionEaseInQuint: string; /** * @desc */ motionEaseOutQuint: string; /** * @desc */ motionEaseOut: string; // Radius /** * @desc 基础圆角 * @descEn Base border radius */ borderRadius: number; /** * @desc 尺寸变化单位 */ sizeUnit: number; /** * @desc 尺寸基础大小 */ sizeStep: number; /** * @desc 组件箭头尺寸 */ sizePopupArrow: number; // Control Base /** * @desc */ controlHeight: number; /** * @desc 基础 zIndex * @descEn Base popup component zIndex */ zIndexBase: number; /** */ /** * @desc 浮层基础 zIndex * @descEn Base zIndex of component like FloatButton, Affix which can be cover by large popup */ zIndexPopupBase: number; /** * @desc 成功色 * @descEn Define default Image opacity. Useful when in dark-like theme */ opacityImage: number; /** * @desc 线框化 */ wireframe: boolean; } export interface NeutralColorMapToken { /** * @internal */ colorTextBase: string; /** * @internal */ colorBgBase: string; /** * @desc 一级文本色 */ colorText: string; /** * @desc 二级文本色 */ colorTextSecondary: string; /** * @desc 三级文本色 */ colorTextTertiary: string; /** * @desc 四级文本色 */ colorTextQuaternary: string; /** * @desc 一级填充色 */ colorFill: string; /** * @desc 二级填充色 */ colorFillSecondary: string; /** * @desc 三级填充色 */ colorFillTertiary: string; /** * @desc 四级填充色 */ colorFillQuaternary: string; /** * @desc 组件容器背景色 */ colorBgContainer: string; /** * @desc 浮层容器背景色 */ colorBgElevated: string; /** * @desc 布局背景色 */ colorBgLayout: string; /** * @desc */ colorBgSpotlight: string; /** * @desc 一级边框色 */ colorBorder: string; /** * @desc 二级边框色 */ colorBorderSecondary: string; } export interface ColorMapToken extends NeutralColorMapToken { // Primary /** * @desc 主色的浅色背景颜色 */ colorPrimaryBg: string; // 1 /** * @desc 主色的浅色背景色悬浮态 */ colorPrimaryBgHover: string; // 2 /** * @desc 主色的描边色 */ colorPrimaryBorder: string; // 3 /** * @desc 主色的描边色悬浮态 */ colorPrimaryBorderHover: string; // 4 /** * @desc 主色的深色悬浮态 */ colorPrimaryHover: string; // 5 /** * @desc 品牌主色 */ colorPrimary: string; // 6 /** * @desc 主色的深色激活态 */ colorPrimaryActive: string; // 7 /** * @desc 主色的文本悬浮态 */ colorPrimaryTextHover: string; // 8 /** * @desc 主色的文本默认态 */ colorPrimaryText: string; // 9 /** * @desc 主色的文本激活态 */ colorPrimaryTextActive: string; // 10 /** * @desc 成功色的浅色背景颜色 */ colorSuccessBg: string; // 1 /** * @desc 成功色的浅色背景色悬浮态 */ colorSuccessBgHover: string; // 2 /** * @desc 成功色的描边色 */ colorSuccessBorder: string; // 3 /** * @desc 成功色的描边色悬浮态 */ colorSuccessBorderHover: string; // 4 /** * @desc 成功色的深色悬浮态 */ colorSuccessHover: string; // 5 /** * @desc 成功色 */ colorSuccess: string; // 6 /** * @desc 成功色的深色激活态 */ colorSuccessActive: string; // 7 /** * @desc 成功色的文本悬浮态 */ colorSuccessTextHover: string; // 8 /** * @desc 成功色的文本默认态 */ colorSuccessText: string; // 9 /** * @desc 成功色的文本激活态 */ colorSuccessTextActive: string; // 10 /** * @desc 警戒色的浅色背景颜色 */ colorWarningBg: string; // 1 /** * @desc 警戒色的浅色背景色悬浮态 */ colorWarningBgHover: string; // 2 /** * @desc 警戒色的描边色 */ colorWarningBorder: string; // 3 /** * @desc 警戒色的描边色悬浮态 */ colorWarningBorderHover: string; // 4 /** * @desc 警戒色的深色悬浮态 */ colorWarningHover: string; // 5 /** * @desc 警戒色 */ colorWarning: string; // 6 /** * @desc 警戒色的深色激活态 */ colorWarningActive: string; // 7 /** * @desc 警戒色的文本悬浮态 */ colorWarningTextHover: string; // 8 /** * @desc 警戒色的文本默认态 */ colorWarningText: string; // 9 /** * @desc 警戒色的文本激活态 */ colorWarningTextActive: string; // 10 /** * @desc 错误色的浅色背景颜色 */ colorErrorBg: string; // 1 /** * @desc 错误色的浅色背景色悬浮态 */ colorErrorBgHover: string; // 2 /** * @desc 错误色的描边色 */ colorErrorBorder: string; // 3 /** * @desc 错误色的描边色悬浮态 */ colorErrorBorderHover: string; // 4 /** * @desc 错误色的深色悬浮态 */ colorErrorHover: string; // 5 /** * @desc 错误色 */ colorError: string; // 6 /** * @desc 错误色的深色激活态 */ colorErrorActive: string; // 7 /** * @desc 错误色的文本悬浮态 */ colorErrorTextHover: string; // 8 /** * @desc 错误色的文本默认态 */ colorErrorText: string; // 9 /** * @desc 错误色的文本激活态 */ colorErrorTextActive: string; // 10 /** * @desc 信息色的浅色背景颜色 */ colorInfoBg: string; // 1 /** * @desc 信息色的浅色背景色悬浮态 */ colorInfoBgHover: string; // 2 /** * @desc 信息色的描边色 */ colorInfoBorder: string; // 3 /** * @desc 信息色的描边色悬浮态 */ colorInfoBorderHover: string; // 4 /** * @desc 信息色的深色悬浮态 */ colorInfoHover: string; // 5 /** * @desc 信息色 */ colorInfo: string; // 6 /** * @desc 信息色的深色激活态 */ colorInfoActive: string; // 7 /** * @desc 信息色的文本悬浮态 */ colorInfoTextHover: string; // 8 /** * @desc 信息色的文本默认态 */ colorInfoText: string; // 9 /** * @desc 信息色的文本激活态 */ colorInfoTextActive: string; // 10 /** * @desc 浮层的背景蒙层颜色 */ colorBgMask: string; colorWhite: string; } export interface SizeMapToken { // Size sizeXXL: number; sizeXL: number; sizeLG: number; sizeMD: number; /** Same as size by default, but could be larger in compact mode */ sizeMS: number; size: number; sizeSM: number; sizeXS: number; sizeXXS: number; } export interface HeightMapToken { // Control /** @private Only Used for control inside component like Multiple Select inner selection item */ controlHeightXS: number; controlHeightSM: number; controlHeightLG: number; } export interface CommonMapToken { // Font /** * @internal */ fontSizes: number[]; /** * @internal */ lineHeights: number[]; // Line lineWidthBold: number; // Motion motionDurationFast: string; motionDurationMid: string; motionDurationSlow: string; // Radius borderRadiusXS: number; borderRadiusSM: number; borderRadiusLG: number; borderRadiusOuter: number; } // ====================================================================== // == Map Token == // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, SizeMapToken, HeightMapToken, CommonMapToken {} // ====================================================================== // == Alias Token == // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface AliasToken extends MapToken { // Background colorFillContentHover: string; colorFillAlter: string; colorBgContainerDisabled: string; colorFillContent: string; // Border colorBorderBg: string; colorSplit: string; // Text colorTextPlaceholder: string; colorTextDisabled: string; colorTextHeading: string; colorTextLabel: string; colorTextDescription: string; colorTextLightSolid: string; colorBgTextHover: string; colorBgTextActive: string; /** Weak action. Such as `allowClear` or Alert close button */ colorIcon: string; /** Weak action hover color. Such as `allowClear` or Alert close button */ colorIconHover: string; colorLink: string; colorLinkHover: string; colorLinkActive: string; colorHighlight: string; controlOutline: string; colorWarningOutline: string; colorErrorOutline: string; // Font fontSizeSM: number; fontSize: number; fontSizeLG: number; fontSizeXL: number; /** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */ fontSizeIcon: number; fontSizeHeading1: number; fontSizeHeading2: number; fontSizeHeading3: number; fontSizeHeading4: number; fontSizeHeading5: number; /** For heading like h1, h2, h3 or option selected item */ fontWeightStrong: number; // LineHeight lineHeight: number; lineHeightLG: number; lineHeightSM: number; lineHeightHeading1: number; lineHeightHeading2: number; lineHeightHeading3: number; lineHeightHeading4: number; lineHeightHeading5: number; // Control controlOutlineWidth: number; controlItemBgHover: string; // Note. It also is a color controlItemBgActive: string; // Note. It also is a color controlItemBgActiveHover: string; // Note. It also is a color controlInteractiveSize: number; controlItemBgActiveDisabled: string; // Note. It also is a color // Padding paddingXXS: number; paddingXS: number; paddingSM: number; padding: number; paddingMD: number; paddingLG: number; paddingXL: number; // Padding Content paddingContentHorizontalLG: number; paddingContentHorizontal: number; paddingContentHorizontalSM: number; paddingContentVerticalLG: number; paddingContentVertical: number; paddingContentVerticalSM: number; // Margin marginXXS: number; marginXS: number; marginSM: number; margin: number; marginMD: number; marginLG: number; marginXL: number; marginXXL: number; // =============== Legacy: should be remove =============== opacityLoading: number; boxShadow: string; boxShadowSecondary: string; linkDecoration: React.CSSProperties['textDecoration']; linkHoverDecoration: React.CSSProperties['textDecoration']; linkFocusDecoration: React.CSSProperties['textDecoration']; controlPaddingHorizontal: number; controlPaddingHorizontalSM: number; // Media queries breakpoints screenXS: number; screenXSMin: number; screenXSMax: number; screenSM: number; screenSMMin: number; screenSMMax: number; screenMD: number; screenMDMin: number; screenMDMax: number; screenLG: number; screenLGMin: number; screenLGMax: number; screenXL: number; screenXLMin: number; screenXLMax: number; screenXXL: number; screenXXLMin: number; screenXXLMax: number; /** Used for DefaultButton, Switch which has default outline */ controlTmpOutline: string; // FIXME: component box-shadow, should be removed /** @internal */ boxShadowPopoverArrow: string; /** @internal */ boxShadowCard: string; /** @internal */ boxShadowDrawerRight: string; /** @internal */ boxShadowDrawerLeft: string; /** @internal */ boxShadowDrawerUp: string; /** @internal */ boxShadowDrawerDown: string; /** @internal */ boxShadowTabsOverflowLeft: string; /** @internal */ boxShadowTabsOverflowRight: string; /** @internal */ boxShadowTabsOverflowTop: string; /** @internal */ boxShadowTabsOverflowBottom: string; }