antd
Version:
An enterprise-class UI design language and React components implementation
379 lines (378 loc) • 14.5 kB
TypeScript
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 declare const PresetColors: readonly ["blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"];
type PresetColorKey = typeof PresetColors[number];
export type PresetColorType = Record<PresetColorKey, string>;
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<ComponentTokenMap[key]> & Partial<AliasToken>;
};
/** Final token which contains the components level override */
export type GlobalToken = AliasToken & ComponentTokenMap;
export interface SeedToken extends PresetColorType {
colorPrimary: string;
colorSuccess: string;
colorWarning: string;
colorError: string;
colorInfo: string;
colorTextBase: string;
/** Base component background color. Will derivative container background color with this */
colorBgBase: string;
fontFamily: string;
fontSize: number;
/** Border width of base components */
lineWidth: number;
lineType: string;
motionUnit: number;
motionBase: number;
motionEaseOutCirc: string;
motionEaseInOutCirc: string;
motionEaseInOut: string;
motionEaseOutBack: string;
motionEaseInBack: string;
motionEaseInQuint: string;
motionEaseOutQuint: string;
motionEaseOut: string;
borderRadius: number;
sizeUnit: number;
sizeStep: number;
sizePopupArrow: number;
controlHeight: number;
/** Base zIndex of component like BackTop, Affix which can be cover by large popup */
zIndexBase: number;
/** Base popup component zIndex */
zIndexPopupBase: number;
/** Define default Image opacity. Useful when in dark-like theme */
opacityImage: number;
wireframe: boolean;
}
export interface NeutralColorMapToken {
colorTextBase: string;
colorBgBase: string;
colorText: string;
colorTextSecondary: string;
colorTextTertiary: string;
colorTextQuaternary: string;
colorFill: string;
colorFillSecondary: string;
colorFillTertiary: string;
colorFillQuaternary: string;
colorBgContainer: string;
colorBgElevated: string;
colorBgLayout: string;
colorBgSpotlight: string;
colorBorder: string;
colorBorderSecondary: string;
}
export interface ColorMapToken extends NeutralColorMapToken {
colorPrimaryBg: string;
colorPrimaryBgHover: string;
colorPrimaryBorder: string;
colorPrimaryBorderHover: string;
colorPrimaryHover: string;
colorPrimary: string;
colorPrimaryActive: string;
colorPrimaryTextHover: string;
colorPrimaryText: string;
colorPrimaryTextActive: string;
colorSuccessBg: string;
colorSuccessBgHover: string;
colorSuccessBorder: string;
colorSuccessBorderHover: string;
colorSuccessHover: string;
colorSuccess: string;
colorSuccessActive: string;
colorSuccessTextHover: string;
colorSuccessText: string;
colorSuccessTextActive: string;
colorWarningBg: string;
colorWarningBgHover: string;
colorWarningBorder: string;
colorWarningBorderHover: string;
colorWarningHover: string;
colorWarning: string;
colorWarningActive: string;
colorWarningTextHover: string;
colorWarningText: string;
colorWarningTextActive: string;
colorErrorBg: string;
colorErrorBgHover: string;
colorErrorBorder: string;
colorErrorBorderHover: string;
colorErrorHover: string;
colorError: string;
colorErrorActive: string;
colorErrorTextHover: string;
colorErrorText: string;
colorErrorTextActive: string;
colorInfoBg: string;
colorInfoBgHover: string;
colorInfoBorder: string;
colorInfoBorderHover: string;
colorInfoHover: string;
colorInfo: string;
colorInfoActive: string;
colorInfoTextHover: string;
colorInfoText: string;
colorInfoTextActive: string;
colorBgMask: string;
colorWhite: string;
}
export interface SizeMapToken {
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 {
/** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number;
controlHeightSM: number;
controlHeightLG: number;
}
export interface CommonMapToken {
fontSizes: number[];
lineHeights: number[];
lineWidthBold: number;
motionDurationFast: string;
motionDurationMid: string;
motionDurationSlow: string;
borderRadiusXS: number;
borderRadiusSM: number;
borderRadiusLG: number;
borderRadiusOuter: number;
}
export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, SizeMapToken, HeightMapToken, CommonMapToken {
}
export interface AliasToken extends MapToken {
colorFillContentHover: string;
colorFillAlter: string;
colorBgContainerDisabled: string;
colorFillContent: string;
colorBorderBg: string;
colorSplit: string;
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;
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: number;
lineHeightLG: number;
lineHeightSM: number;
lineHeightHeading1: number;
lineHeightHeading2: number;
lineHeightHeading3: number;
lineHeightHeading4: number;
lineHeightHeading5: number;
controlOutlineWidth: number;
controlItemBgHover: string;
controlItemBgActive: string;
controlItemBgActiveHover: string;
controlInteractiveSize: number;
controlItemBgActiveDisabled: string;
paddingXXS: number;
paddingXS: number;
paddingSM: number;
padding: number;
paddingMD: number;
paddingLG: number;
paddingXL: number;
paddingContentHorizontalLG: number;
paddingContentHorizontal: number;
paddingContentHorizontalSM: number;
paddingContentVerticalLG: number;
paddingContentVertical: number;
paddingContentVerticalSM: number;
marginXXS: number;
marginXS: number;
marginSM: number;
margin: number;
marginMD: number;
marginLG: number;
marginXL: number;
marginXXL: number;
opacityLoading: number;
boxShadow: string;
boxShadowSecondary: string;
linkDecoration: React.CSSProperties['textDecoration'];
linkHoverDecoration: React.CSSProperties['textDecoration'];
linkFocusDecoration: React.CSSProperties['textDecoration'];
controlPaddingHorizontal: number;
controlPaddingHorizontalSM: number;
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;
boxShadowPopoverArrow: string;
boxShadowCard: string;
boxShadowDrawerRight: string;
boxShadowDrawerLeft: string;
boxShadowDrawerUp: string;
boxShadowDrawerDown: string;
boxShadowTabsOverflowLeft: string;
boxShadowTabsOverflowRight: string;
boxShadowTabsOverflowTop: string;
boxShadowTabsOverflowBottom: string;
}
export {};