ant-design/components/theme/interface/seeds.ts

280 lines
10 KiB
TypeScript
Raw Normal View History

import type { PresetColorType } from './presetColors';
// ======================================================================
// == Seed Token ==
// ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface SeedToken extends PresetColorType {
// ---------- Color ---------- //
/**
* @nameZH
* @nameEN Brand Color
* @desc
* @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
*/
colorPrimary: string;
/**
* @nameZH
* @nameEN Success Color
* @desc Token ResultProgress 使
* @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
*/
colorSuccess: string;
/**
* @nameZH
* @nameEN Warning Color
* @desc Token Notification Alert等警告类组件或 Input 使
* @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
*/
colorWarning: string;
/**
* @nameZH
* @nameEN Error Color
* @desc Token Result
* @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
*/
colorError: string;
/**
* @nameZH
* @nameEN Info Color
* @desc Token Alert Tag Progress
* @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
*/
colorInfo: string;
/**
* @nameZH
* @nameEN Seed Text Color
2023-02-17 18:27:35 +08:00
* @desc v5 使 Seed Token
* @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
*/
colorTextBase: string;
/**
* @nameZH
* @nameEN Seed Background Color
2023-02-17 18:27:35 +08:00
* @desc v5 使 Seed Token
* @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
*/
colorBgBase: string;
/**
* @nameZH
* @nameEN Hyperlink color
* @desc
* @descEN Control the color of hyperlink.
*/
colorLink: string;
// ---------- Font ---------- //
/**
* @nameZH
* @nameEN Font family for default text
* @desc Ant Design 使
2023-03-23 17:17:28 +08:00
* @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
*/
fontFamily: string;
/**
* @nameZH
* @nameEN Font family for code text
* @desc Typography codepre kbd
2023-03-23 17:17:28 +08:00
* @descEN Code font, used for code, pre and kbd elements in Typography
*/
fontFamilyCode: string;
/**
* @nameZH
* @nameEN Default Font Size
* @desc 使广
* @descEN The most widely used font size in the design system, from which the text gradient will be derived.
* @default 14
*/
fontSize: number;
// ---------- Line ---------- //
/**
* @nameZH 线
* @nameEN Base Line Width
* @desc 线
* @descEN Border width of base components
*/
lineWidth: number;
/**
* @nameZH 线
* @nameEN Line Style
* @desc 线线
* @descEN Border style of base components
*/
lineType: string;
// ---------- BorderRadius ---------- //
/**
* @nameZH
* @nameEN Base Border Radius
* @descEN Border radius of base components
* @desc
*/
borderRadius: number;
// ---------- Size ---------- //
/**
* @nameZH
* @nameEN Size Change Unit
* @desc Ant Design 4 便
* @descEN The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step
* @default 4
*/
sizeUnit: number;
/**
* @nameZH
* @nameEN Size Base Step
* @desc V5 2
* @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
* @default 4
*/
sizeStep: number;
/**
* @nameZH
2023-03-27 15:33:22 +08:00
* @desc
* @descEN The size of the component arrow
*/
sizePopupArrow: number;
/**
* @nameZH
* @nameEN Base Control Height
* @desc Ant Design
* @descEN The height of the basic controls such as buttons and input boxes in Ant Design
* @default 32
*/
controlHeight: number;
// ---------- zIndex ---------- //
/**
* @nameZH zIndex
* @nameEN Base zIndex
* @desc Z Z BackTop Affix
* @descEN The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.
*
* @default 0
*/
zIndexBase: number;
/**
* @nameZH zIndex
* @nameEN popup base zIndex
* @desc Z Z FloatButton AffixModal
* @descEN Base zIndex of component like FloatButton, Affix which can be cover by large popup
* @default 1000
*/
zIndexPopupBase: number;
// ---------- Opacity ---------- //
/**
* @nameZH
* @nameEN Define default Image opacity. Useful when in dark-like theme
*/
opacityImage: number;
// ---------- motion ---------- //
// TODO: 缺一个懂 motion 的人来收敛 Motion 相关的 Token
/**
* @nameZH
* @nameEN Animation Duration Unit
* @desc
* @descEN The unit of animation duration change
* @default 100ms
*/
motionUnit: number;
/**
* @nameZH
* @nameEN Animation Base Duration.
*/
motionBase: number;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseOutCirc: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseInOutCirc: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseInOut: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseOutBack: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseInBack: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseInQuint: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseOutQuint: string;
/**
* @desc
* @descEN Preset motion curve.
*/
motionEaseOut: string;
// ---------- Style ---------- //
/**
* @nameZH 线
* @nameEN Wireframe Style
* @desc 线使 V4
2023-03-27 15:33:22 +08:00
* @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
* @default false
*/
wireframe: boolean;
/**
* @nameZH
* @nameEN Motion Style
* @desc `false`
* @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
* @default false
*/
motion: boolean;
}