@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
343 lines (342 loc) • 11.2 kB
TypeScript
export interface ColorNeutralMapToken {
/**
* @nameZH 一级文本色
* @desc 最深的文本色。为了符合W3C标准,默认的文本颜色使用了该色,同时这个颜色也是最深的中性色。
*/
colorText: string;
/**
* @nameZH 二级文本色
* @desc 作为第二梯度的文本色,一般用在不那么需要强化文本颜色的场景,例如 Label 文本、Menu 的文本选中态等场景。
*/
colorTextSecondary: string;
/**
* @nameZH 三级文本色
* @desc 第三级文本色一般用于描述性文本,例如表单的中的补充说明文本、列表的描述性文本等场景。
*/
colorTextTertiary: string;
/**
* @nameZH 四级文本色
* @desc 第四级文本色是最浅的文本色,例如表单的输入提示文本、禁用色文本等。
*/
colorTextQuaternary: string;
/**
* @nameZH 一级边框色
* @nameEN Default Border Color
* @desc 默认使用的边框颜色, 用于分割不同的元素,例如:表单的分割线、卡片的分割线等。
* @descEN Default border color, used to separate different elements, such as: form separator, card separator, etc.
*/
colorBorder: string;
/**
* @nameZH 二级边框色
* @nameEN Secondary Border Color
* @desc 比默认使用的边框色要浅一级,此颜色和 colorSplit 的颜色一致。使用的是实色。
* @descEN Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.
*/
colorBorderSecondary: string;
/**
* @nameZH 一级填充色
* @desc 最深的填充色,用于拉开与二、三级填充色的区分度,目前只用在 Slider 的 hover 效果。
*/
colorFill: string;
/**
* @nameZH 二级填充色
* @desc 二级填充色可以较为明显地勾勒出元素形体,如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态,如 Table 等。
*/
colorFillSecondary: string;
/**
* @nameZH 三级填充色
* @desc 三级填充色用于勾勒出元素形体的场景,如 Slider、Segmented 等。如无强调需求的情况下,建议使用三级填色作为默认填色。
*/
colorFillTertiary: string;
/**
* @nameZH 四级填充色
* @desc 最弱一级的填充色,适用于不易引起注意的色块,例如斑马纹、区分边界的色块等。
*/
colorFillQuaternary: string;
/**
* @nameZH 布局背景色
* @desc 该色用于页面整体布局的背景色,只有需要在页面中处于 B1 的视觉层级时才会使用该 token,其他用法都是错误的
*/
colorBgLayout: string;
/**
* @nameZH 组件容器背景色
* @desc 组件的容器背景色,例如:默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
*/
colorBgContainer: string;
/**
* @nameZH 浮层容器背景色
* @desc 浮层容器背景色,在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如:模态框、弹出框、菜单等。
*/
colorBgElevated: string;
/**
* @nameZH 引起注意的背景色
* @desc 该色用于引起用户强烈关注注意的背景色,目前只用在 Tooltip 的背景色上。
*/
colorBgSpotlight: string;
}
/**
* 品牌色梯度变量
*/
interface ColorPrimaryMapToken {
/**
* @nameZH 品牌主色
* @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一,用于产品的主色调、主按钮、主图标、主文本等 */
colorPrimary: string;
/**
* @nameZH 主色浅色背景色
* @nameEN Light Background Color of Primary Color
* @desc 主色浅色背景颜色,一般用于视觉层级较弱的选中状态。
* @descEN Light background color of primary color, usually used for weak visual level selection state.
*/
colorPrimaryBg: string;
/**
* @nameZH 主色浅色背景悬浮态
* @desc 与主色浅色背景颜色相对应的悬浮态颜色。
*/
colorPrimaryBgHover: string;
/**
* @nameZH 主色描边色
* @desc 主色梯度下的描边用色,用在 Slider 组件的描边上
*/
colorPrimaryBorder: string;
/**
* @nameZH 主色描边色悬浮态
* @desc 主色梯度下的描边用色的悬浮态,Slider 、Button 等组件的描边 Hover 时会使用
*/
colorPrimaryBorderHover: string;
/**
* @nameZH 主色悬浮态
* @desc 主色梯度下的悬浮态,使用频率很高
*/
colorPrimaryHover: string;
/**
* @nameZH 主色激活态
* @desc 主色梯度下的深色激活态
*/
colorPrimaryActive: string;
/**
* @nameZH 主色文本悬浮态
* @desc 主色梯度下的文本悬浮态
*/
colorPrimaryTextHover: string;
/**
* @nameZH 主色文本
* @desc 主色梯度下的文本颜色
*/
colorPrimaryText: string;
/**
* @nameZH 主色文本
* @desc 主色梯度下的文本激活态
*/
colorPrimaryTextActive: string;
}
interface ColorSuccessMapToken {
/**
* @nameZH 成功色的浅色背景颜色
* @nameEN Light Background Color of Success Color
* @desc 成功色的浅色背景颜色,用于 Tag 和 Alert 的成功态背景色
* @descEN Light background color of success color, used for Tag and Alert success state background color
*/
colorSuccessBg: string;
/**
* @nameZH 成功色的浅色背景色悬浮态
* @nameEN Hover State Color of Light Success Background
* @desc 成功色浅色背景颜色,一般用于视觉层级较弱的选中状态,不过 antd 目前没有使用到该 token
* @descEN Light background color of success color, but antd does not use this token currently
*/
colorSuccessBgHover: string;
/**
* @nameZH 成功色的描边色
* @desc 成功色的描边色,用于 Tag 和 Alert 的成功态描边色
*/
colorSuccessBorder: string;
/**
* @nameZH 成功色的描边色悬浮态
* @desc 成功色的描边色悬浮态
*/
colorSuccessBorderHover: string;
/**
* @nameZH 成功色的深色悬浮态
* @desc 成功色的深色悬浮态
*/
colorSuccessHover: string;
/**
* @nameZH 成功色
* @desc 默认的成功色,如 Result、Progress 等组件中都有使用该颜色
*/
colorSuccess: string;
/**
* @nameZH 成功色的深色激活态
* @desc 成功色的深色激活态
*/
colorSuccessActive: string;
/**
* @nameZH 成功色的文本悬浮态
* @desc 成功色的文本悬浮态
*/
colorSuccessTextHover: string;
/**
* @nameZH 成功色的文本默认态
* @desc 成功色的文本默认态
*/
colorSuccessText: string;
/**
* @nameZH 成功色的文本激活态
* @desc 成功色的文本激活态
*/
colorSuccessTextActive: string;
}
interface ColorWarningMapToken {
/**
* @nameZH 警戒色的浅色背景颜色
*/
colorWarningBg: string;
/**
* @nameZH 警戒色的浅色背景色悬浮态
* @desc 警戒色的浅色背景色悬浮态
*/
colorWarningBgHover: string;
/**
* @nameZH 警戒色的描边色
* @desc 警戒色的描边色
*/
colorWarningBorder: string;
/**
* @nameZH 警戒色的描边色悬浮态
* @desc 警戒色的描边色悬浮态
*/
colorWarningBorderHover: string;
/**
* @nameZH 警戒色的深色悬浮态
* @desc 警戒色的深色悬浮态
*/
colorWarningHover: string;
/**
* @nameZH 警戒色
* @desc 最常用的警戒色,例如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该颜色
*/
colorWarning: string;
/**
* @nameZH 警戒色的深色激活态
* @desc 警戒色的深色激活态
*/
colorWarningActive: string;
/**
* @nameZH 警戒色的文本悬浮态
* @desc 警戒色的文本悬浮态
*/
colorWarningTextHover: string;
/**
* @nameZH 警戒色的文本默认态
* @desc 警戒色的文本默认态
*/
colorWarningText: string;
/**
* @nameZH 警戒色的文本激活态
* @desc 警戒色的文本激活态
*/
colorWarningTextActive: string;
}
interface ColorInfoMapToken {
/**
* @nameZH 信息色的浅色背景颜色
* @desc 信息色的浅色背景颜色
*/
colorInfoBg: string;
/**
* @nameZH 信息色的浅色背景色悬浮态
* @desc 信息色的浅色背景色悬浮态
*/
colorInfoBgHover: string;
/**
* @nameZH 信息色的描边色
*/
colorInfoBorder: string;
/**
* @nameZH 信息色的描边色悬浮态
*/
colorInfoBorderHover: string;
/**
* @nameZH 信息色的深色悬浮态
*/
colorInfoHover: string;
/**
* @nameZH 信息色
*/
colorInfo: string;
/**
* @nameZH 信息色的深色激活态
*/
colorInfoActive: string;
/**
* @nameZH 信息色的文本悬浮态
*/
colorInfoTextHover: string;
/**
* @nameZH 信息色的文本默认态
*/
colorInfoText: string;
/**
* @nameZH 信息色的文本激活态
*/
colorInfoTextActive: string;
}
interface ColorErrorMapToken {
/**
* @nameZH 错误色的浅色背景颜色
*/
colorErrorBg: string;
/**
* @nameZH 错误色的浅色背景色悬浮态
*/
colorErrorBgHover: string;
/**
* @nameZH 错误色的描边色
*/
colorErrorBorder: string;
/**
* @nameZH 错误色的描边色悬浮态
*/
colorErrorBorderHover: string;
/**
* @nameZH 错误色的深色悬浮态
*/
colorErrorHover: string;
/**
* @nameZH 错误色
*/
colorError: string;
/**
* @nameZH 错误色的深色激活态
*/
colorErrorActive: string;
/**
* @nameZH 错误色的文本悬浮态
*/
colorErrorTextHover: string;
/**
* @nameZH 错误色的文本默认态
*/
colorErrorText: string;
/**
* @nameZH 错误色的文本激活态
*/
colorErrorTextActive: string;
}
export interface ColorMapToken extends ColorNeutralMapToken, ColorPrimaryMapToken, ColorSuccessMapToken, ColorWarningMapToken, ColorErrorMapToken, ColorInfoMapToken {
/**
* @nameZH 纯白色
* @desc 不随主题变化的纯白色
* @descEN Pure white color don't changed by theme
* @default #FFFFFF
*/
colorWhite: string;
/**
* @nameZH 浮层的背景蒙层颜色
* @nameEN Background color of the mask
* @desc 浮层的背景蒙层颜色,用于遮罩浮层下面的内容,Modal、Drawer 等组件的蒙层使用的是该 token
* @descEN The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token
*/
colorBgMask: string;
}
export {};