UNPKG

antd

Version:

An enterprise-class UI design language and React components implementation

379 lines (378 loc) 14.5 kB
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 {};