diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less index 5fb2138f13..8c26cd03ad 100644 --- a/packages/theme/src/base/vars.less +++ b/packages/theme/src/base/vars.less @@ -107,45 +107,45 @@ * 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用 **/ - --tv-common-color-success-text: var(--tv-base-color-success-6); // 成功-文本色 - --tv-common-color-success-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 - --tv-common-color-success-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 - --tv-common-color-success-bg: var(--tv-base-color-success-6); // 成功-背景色(深) - --tv-common-color-success-bg-light: var(--tv-base-color-success-14); // 成功-背景色(浅) - --tv-common-color-success-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） - --tv-common-color-success-border: var(--tv-base-color-success-6); // 成功-边框色(深) - --tv-common-color-success-border-light: var(--tv-base-color-success-14); // 成功-边框色（浅） - --tv-common-color-success-icon: var(--tv-base-color-success-6); // 成功-图标色 - - --tv-common-color-error-text: var(--tv-base-color-error-6); // 错误-文本色/交易金额色 - --tv-common-color-error-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 - --tv-common-color-error-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 - --tv-common-color-error-bg: var(--tv-base-color-error-6); // 错误-背景色(深) - --tv-common-color-error-bg-light: var(--tv-base-color-error-13); // 错误-背景色(浅)/错误校验背景色 - --tv-common-color-error-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） - --tv-common-color-error-border: var(--tv-base-color-error-6); // 错误-边框色(深) - --tv-common-color-error-border-light: var(--tv-base-color-error-13); // 错误-边框色（浅） - --tv-common-color-error-icon: var(--tv-base-color-error-6); // 错误-图标色 - - --tv-common-color-warn-text: var(--tv-base-color-warn-6); // 告警-文本色 - --tv-common-color-warn-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 - --tv-common-color-warn-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 - --tv-common-color-warn-bg: var(--tv-base-color-warn-6); // 告警-背景色(深) - --tv-common-color-warn-bg-light: var(--tv-base-color-warn-2); // 告警-背景色(浅) - --tv-common-color-warn-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） - --tv-common-color-warn-border: var(--tv-base-color-warn-6); // 告警-边框色(深) - --tv-common-color-warn-border-light: var(--tv-base-color-warn-2); // 告警-边框色（浅） - --tv-common-color-warn-icon: var(--tv-base-color-warn-6); // 告警-图标色 - - --tv-common-color-info-text: var(--tv-base-color-info-6); // 告警-文本色 - --tv-common-color-info-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 - --tv-common-color-info-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 - --tv-common-color-info-bg: var(--tv-base-color-info-6); // 告警-背景色(深) - --tv-common-color-info-bg-light: var(--tv-base-color-info-2); // 告警-背景色(浅) - --tv-common-color-info-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） - --tv-common-color-info-border: var(--tv-base-color-info-6); // 告警-边框色(深) - --tv-common-color-info-border-light: var(--tv-base-color-info-2); // 告警-边框色（浅） - --tv-common-color-info-icon: var(--tv-base-color-info-6); // 告警-图标色 + --tv-color-success-text: var(--tv-base-color-success-6); // 成功-文本色 + --tv-color-success-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 + --tv-color-success-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 + --tv-color-success-bg: var(--tv-base-color-success-6); // 成功-背景色(深) + --tv-color-success-bg-light: var(--tv-base-color-success-14); // 成功-背景色(浅) + --tv-color-success-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） + --tv-color-success-border: var(--tv-base-color-success-6); // 成功-边框色(深) + --tv-color-success-border-light: var(--tv-base-color-success-14); // 成功-边框色（浅） + --tv-color-success-icon: var(--tv-base-color-success-6); // 成功-图标色 + + --tv-color-error-text: var(--tv-base-color-error-6); // 错误-文本色/交易金额色 + --tv-color-error-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 + --tv-color-error-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 + --tv-color-error-bg: var(--tv-base-color-error-6); // 错误-背景色(深) + --tv-color-error-bg-light: var(--tv-base-color-error-13); // 错误-背景色(浅)/错误校验背景色 + --tv-color-error-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） + --tv-color-error-border: var(--tv-base-color-error-6); // 错误-边框色(深) + --tv-color-error-border-light: var(--tv-base-color-error-13); // 错误-边框色（浅） + --tv-color-error-icon: var(--tv-base-color-error-6); // 错误-图标色 + + --tv-color-warn-text: var(--tv-base-color-warn-6); // 告警-文本色 + --tv-color-warn-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 + --tv-color-warn-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 + --tv-color-warn-bg: var(--tv-base-color-warn-6); // 告警-背景色(深) + --tv-color-warn-bg-light: var(--tv-base-color-warn-2); // 告警-背景色(浅) + --tv-color-warn-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） + --tv-color-warn-border: var(--tv-base-color-warn-6); // 告警-边框色(深) + --tv-color-warn-border-light: var(--tv-base-color-warn-2); // 告警-边框色（浅） + --tv-color-warn-icon: var(--tv-base-color-warn-6); // 告警-图标色 + + --tv-color-info-text: var(--tv-base-color-info-6); // 告警-文本色 + --tv-color-info-text-primary: var(--tv-base-color-common-11); // 白色背景一级文本色 + --tv-color-info-text-white: var(--tv-base-color-common-1); // 深彩色背景时为白色文本色 + --tv-color-info-bg: var(--tv-base-color-info-6); // 告警-背景色(深) + --tv-color-info-bg-light: var(--tv-base-color-info-2); // 告警-背景色(浅) + --tv-color-info-bg-white: var(--tv-base-color-common-1); // 白色背景色 （tag 是白色还是透明？） + --tv-color-info-border: var(--tv-base-color-info-6); // 告警-边框色(深) + --tv-color-info-border-light: var(--tv-base-color-info-2); // 告警-边框色（浅） + --tv-color-info-icon: var(--tv-base-color-info-6); // 告警-图标色 /** * 2.3 交互类型颜色 @@ -156,175 +156,175 @@ /* 主要-primary */ // 主要文本色-1（品牌色）： 朴素/幽灵/纯文本/链接 - --tv-common-color-interact-primary-text: var(--tv-base-color-brand); - --tv-common-color-interact-primary-text-hover: var(--tv-base-color-brand); // 主要hover文本色-1 - --tv-common-color-interact-primary-text-active: var(--tv-base-color-brand); // 主要active文本色-1 + --tv-color-act-primary-text: var(--tv-base-color-brand); + --tv-color-act-primary-text-hover: var(--tv-base-color-brand); // 主要hover文本色-1 + --tv-color-act-primary-text-active: var(--tv-base-color-brand); // 主要active文本色-1 - --tv-common-color-interact-primary-text-white: var(--tv-base-color-common-1); // 主要文本色-2（白色） - --tv-common-color-interact-primary-text-white-hover: var(--tv-base-color-common-1); // 主要hover文本色-2（白色） - --tv-common-color-interact-primary-text-white-active: var(--tv-base-color-common-1); // 主要active文本色-2（白色） + --tv-color-act-primary-text-white: var(--tv-base-color-common-1); // 主要文本色-2（白色） + --tv-color-act-primary-text-white-hover: var(--tv-base-color-common-1); // 主要hover文本色-2（白色） + --tv-color-act-primary-text-white-active: var(--tv-base-color-common-1); // 主要active文本色-2（白色） - --tv-common-color-interact-primary-bg: var(--tv-base-color-brand); // 主要背景色-1（品牌色）: 默认 - --tv-common-color-interact-primary-bg-hover: var(--tv-base-color-common-9); // 主要hover背景色-1 - --tv-common-color-interact-primary-bg-active: var(--tv-base-color-common-9); // 主要active背景色-1 + --tv-color-act-primary-bg: var(--tv-base-color-brand); // 主要背景色-1（品牌色）: 默认 + --tv-color-act-primary-bg-hover: var(--tv-base-color-common-9); // 主要hover背景色-1 + --tv-color-act-primary-bg-active: var(--tv-base-color-common-9); // 主要active背景色-1 - --tv-common-color-interact-primary-bg-white: var(--tv-base-color-common-1); // 主要背景色-2（白）：朴素 - --tv-common-color-interact-primary-bg-white-hover: var(--tv-base-color-common-1); // 主要hover背景色-2（白色）： 朴素 + --tv-color-act-primary-bg-white: var(--tv-base-color-common-1); // 主要背景色-2（白）：朴素 + --tv-color-act-primary-bg-white-hover: var(--tv-base-color-common-1); // 主要hover背景色-2（白色）： 朴素 // 主要active背景色-2（白色）： 朴素 - --tv-common-color-interact-primary-bg-white-active: var(--tv-base-color-common-1); + --tv-color-act-primary-bg-white-active: var(--tv-base-color-common-1); - --tv-common-color-interact-primary-border: var(--tv-base-color-brand); // 主要边框色-1 默认 - --tv-common-color-interact-primary-border-hover: var(--tv-base-color-common-9); // 主要hover边框色-1 - --tv-common-color-interact-primary-border-active: var(--tv-base-color-common-9); // 主要active边框色-1 + --tv-color-act-primary-border: var(--tv-base-color-brand); // 主要边框色-1 默认 + --tv-color-act-primary-border-hover: var(--tv-base-color-common-9); // 主要hover边框色-1 + --tv-color-act-primary-border-active: var(--tv-base-color-common-9); // 主要active边框色-1 - --tv-common-color-interact-primary-border-light: var(--tv-base-color-common-9); // 幽灵/朴素 边框色-2 - --tv-common-color-interact-primary-border-light-hover: var(--tv-base-color-common-1); // 朴素hover边框色-2.1 - --tv-common-color-interact-primary-border-light-active: var(--tv-base-color-common-1); // 朴素active边框色-2.1 - --tv-common-color-interact-primary-border-light-hover-1: var(--tv-base-color-common-7); // 幽灵hover边框色-2.2 - --tv-common-color-interact-primary-border-light-active-1: var(--tv-base-color-common-7); // 幽灵active边框色-2.2 + --tv-color-act-primary-border-light: var(--tv-base-color-common-9); // 幽灵/朴素 边框色-2 + --tv-color-act-primary-border-light-hover: var(--tv-base-color-common-1); // 朴素hover边框色-2.1 + --tv-color-act-primary-border-light-active: var(--tv-base-color-common-1); // 朴素active边框色-2.1 + --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // 幽灵hover边框色-2.2 + --tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // 幽灵active边框色-2.2 /* 成功-success */ // 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接 - --tv-common-color-interact-success-text: var(--tv-base-color-success-6); - --tv-common-color-interact-success-text-hover: var(--tv-base-color-success-6); // 成功hover文本色-1 - --tv-common-color-interact-success-text-active: var(--tv-base-color-success-6); // 成功active文本色-1 + --tv-color-act-success-text: var(--tv-base-color-success-6); + --tv-color-act-success-text-hover: var(--tv-base-color-success-6); // 成功hover文本色-1 + --tv-color-act-success-text-active: var(--tv-base-color-success-6); // 成功active文本色-1 - --tv-common-color-interact-success-text-white: var(--tv-base-color-common-1); // 成功文本色-2（白色）：默认 - --tv-common-color-interact-success-text-white-hover: var(--tv-base-color-common-1); // 成功hover文本色-2（白色） - --tv-common-color-interact-success-text-white-active: var(--tv-base-color-common-1); // 成功active文本色-2（白色） + --tv-color-act-success-text-white: var(--tv-base-color-common-1); // 成功文本色-2（白色）：默认 + --tv-color-act-success-text-white-hover: var(--tv-base-color-common-1); // 成功hover文本色-2（白色） + --tv-color-act-success-text-white-active: var(--tv-base-color-common-1); // 成功active文本色-2（白色） - --tv-common-color-interact-success-bg: var(--tv-base-color-success-6); // 成功背景色-1（品牌色）：默认 - --tv-common-color-interact-success-bg-hover: var(--tv-base-color-success-5); // 成功hover背景色-1 - --tv-common-color-interact-success-bg-active: var(--tv-base-color-success-5); // 成功active背景色-1 + --tv-color-act-success-bg: var(--tv-base-color-success-6); // 成功背景色-1（品牌色）：默认 + --tv-color-act-success-bg-hover: var(--tv-base-color-success-5); // 成功hover背景色-1 + --tv-color-act-success-bg-active: var(--tv-base-color-success-5); // 成功active背景色-1 - --tv-common-color-interact-success-bg-light: var(--tv-base-color-success-1); // 成功背景色-1（品牌色）：朴素 - --tv-common-color-interact-success-bg-light-hover: var(--tv-base-color-success-1); // 成功hover背景色-1 - --tv-common-color-interact-success-bg-light-active: var(--tv-base-color-success-1); // 成功active背景色-1 + --tv-color-act-success-bg-light: var(--tv-base-color-success-1); // 成功背景色-1（品牌色）：朴素 + --tv-color-act-success-bg-light-hover: var(--tv-base-color-success-1); // 成功hover背景色-1 + --tv-color-act-success-bg-light-active: var(--tv-base-color-success-1); // 成功active背景色-1 - --tv-common-color-interact-success-border: var(--tv-base-color-success-6); // 成功边框色-1：默认 / 幽灵 - --tv-common-color-interact-success-border-hover: var(--tv-base-color-success-5); // 成功hover边框色-1.1 - --tv-common-color-interact-success-border-active: var(--tv-base-color-success-5); // 成功active边框色-1.1 - --tv-common-color-interact-success-border-hover-1: var(--tv-base-color-success-2); // 成功hover边框色-1.2 - --tv-common-color-interact-success-border-active-1: var(--tv-base-color-success-2); // 成功active边框色-1.2 + --tv-color-act-success-border: var(--tv-base-color-success-6); // 成功边框色-1：默认 / 幽灵 + --tv-color-act-success-border-hover: var(--tv-base-color-success-5); // 成功hover边框色-1.1 + --tv-color-act-success-border-active: var(--tv-base-color-success-5); // 成功active边框色-1.1 + --tv-color-act-success-border-hover-1: var(--tv-base-color-success-2); // 成功hover边框色-1.2 + --tv-color-act-success-border-active-1: var(--tv-base-color-success-2); // 成功active边框色-1.2 - --tv-common-color-interact-success-border-light: var(--tv-base-color-success-2); // 成功边框色-2:朴素 - --tv-common-color-interact-success-border-light-hover: var(--tv-base-color-success-1); // 成功hover边框色 - --tv-common-color-interact-success-border-light-active: var(--tv-base-color-success-1); // 成功active边框色 + --tv-color-act-success-border-light: var(--tv-base-color-success-2); // 成功边框色-2:朴素 + --tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // 成功hover边框色 + --tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // 成功active边框色 /* 告警-warning */ // 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接 - --tv-common-color-interact-warning-text: var(--tv-base-color-warning-6); - --tv-common-color-interact-warning-text-hover: var(--tv-base-color-warning-6); // 告警hover文本色-1 - --tv-common-color-interact-warning-text-active: var(--tv-base-color-warning-6); // 告警active文本色-1 + --tv-color-act-warning-text: var(--tv-base-color-warning-6); + --tv-color-act-warning-text-hover: var(--tv-base-color-warning-6); // 告警hover文本色-1 + --tv-color-act-warning-text-active: var(--tv-base-color-warning-6); // 告警active文本色-1 - --tv-common-color-interact-warning-text-white: var(--tv-base-color-common-1); // 告警文本色-2（白色）：默认 - --tv-common-color-interact-warning-text-white-hover: var(--tv-base-color-common-1); // 告警hover文本色-2（白色） - --tv-common-color-interact-warning-text-white-active: var(--tv-base-color-common-1); // 告警active文本色-2（白色） + --tv-color-act-warning-text-white: var(--tv-base-color-common-1); // 告警文本色-2（白色）：默认 + --tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // 告警hover文本色-2（白色） + --tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // 告警active文本色-2（白色） - --tv-common-color-interact-warning-bg: var(--tv-base-color-warning-6); // 告警背景色-1（告警主色）：默认 - --tv-common-color-interact-warning-bg-hover: var(--tv-base-color-warning-5); // 告警hover背景色-1 - --tv-common-color-interact-warning-bg-active: var(--tv-base-color-warning-5); // 告警active背景色-1 + --tv-color-act-warning-bg: var(--tv-base-color-warning-6); // 告警背景色-1（告警主色）：默认 + --tv-color-act-warning-bg-hover: var(--tv-base-color-warning-5); // 告警hover背景色-1 + --tv-color-act-warning-bg-active: var(--tv-base-color-warning-5); // 告警active背景色-1 - --tv-common-color-interact-warning-bg-light: var(--tv-base-color-warning-1); // 告警背景色-1（告警主色衍生色）：朴素 - --tv-common-color-interact-warning-bg-light-hover: var(--tv-base-color-warning-1); // 告警hover背景色-1 - --tv-common-color-interact-warning-bg-light-active: var(--tv-base-color-warning-1); // 告警active背景色-1 + --tv-color-act-warning-bg-light: var(--tv-base-color-warning-1); // 告警背景色-1（告警主色衍生色）：朴素 + --tv-color-act-warning-bg-light-hover: var(--tv-base-color-warning-1); // 告警hover背景色-1 + --tv-color-act-warning-bg-light-active: var(--tv-base-color-warning-1); // 告警active背景色-1 - --tv-common-color-interact-warning-border: var(--tv-base-color-warning-6); // 告警边框色-1：默认 / 幽灵 - --tv-common-color-interact-warning-border-hover: var(--tv-base-color-warning-5); // 告警hover边框色-1.1 - --tv-common-color-interact-warning-border-active: var(--tv-base-color-warning-5); // 告警active边框色-1.1 - --tv-common-color-interact-warning-border-hover-1: var(--tv-base-color-warning-2); // 告警幽灵hover边框色-1.2 - --tv-common-color-interact-warning-border-active-1: var(--tv-base-color-warning-2); // 告警幽灵active边框色-1.2 + --tv-color-act-warning-border: var(--tv-base-color-warning-6); // 告警边框色-1：默认 / 幽灵 + --tv-color-act-warning-border-hover: var(--tv-base-color-warning-5); // 告警hover边框色-1.1 + --tv-color-act-warning-border-active: var(--tv-base-color-warning-5); // 告警active边框色-1.1 + --tv-color-act-warning-border-hover-1: var(--tv-base-color-warning-2); // 告警幽灵hover边框色-1.2 + --tv-color-act-warning-border-active-1: var(--tv-base-color-warning-2); // 告警幽灵active边框色-1.2 - --tv-common-color-interact-warning-border-light: var(--tv-base-color-warning-2); // 告警边框色-2：朴素 - --tv-common-color-interact-warning-border-light-hover: var(--tv-base-color-warning-1); // 告警hover边框色 - --tv-common-color-interact-warning-border-light-active: var(--tv-base-color-warning-1); // 告警active边框色 + --tv-color-act-warning-border-light: var(--tv-base-color-warning-2); // 告警边框色-2：朴素 + --tv-color-act-warning-border-light-hover: var(--tv-base-color-warning-1); // 告警hover边框色 + --tv-color-act-warning-border-light-active: var(--tv-base-color-warning-1); // 告警active边框色 /* 危险-danger */ // 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接 - --tv-common-color-interact-danger-text: var(--tv-base-color-error-6); - --tv-common-color-interact-danger-text-hover: var(--tv-base-color-error-6); // 危险hover文本色-1 - --tv-common-color-interact-danger-text-active: var(--tv-base-color-error-6); // 危险active文本色-1 + --tv-color-act-danger-text: var(--tv-base-color-error-6); + --tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // 危险hover文本色-1 + --tv-color-act-danger-text-active: var(--tv-base-color-error-6); // 危险active文本色-1 - --tv-common-color-interact-danger-text-white: var(--tv-base-color-common-1); // 危险文本色-2（白色）：默认 - --tv-common-color-interact-danger-text-white-hover: var(--tv-base-color-common-1); // 危险hover文本色-2（白色） - --tv-common-color-interact-danger-text-white-active: var(--tv-base-color-common-1); // 危险active文本色-2（白色） + --tv-color-act-danger-text-white: var(--tv-base-color-common-1); // 危险文本色-2（白色）：默认 + --tv-color-act-danger-text-white-hover: var(--tv-base-color-common-1); // 危险hover文本色-2（白色） + --tv-color-act-danger-text-white-active: var(--tv-base-color-common-1); // 危险active文本色-2（白色） - --tv-common-color-interact-danger-bg: var(--tv-base-color-error-6); // 危险背景色-1（成功主色）：默认 - --tv-common-color-interact-danger-bg-hover: var(--tv-base-color-error-5); // 危险hover背景色-1 - --tv-common-color-interact-danger-bg-active: var(--tv-base-color-error-5); // 危险active背景色-1 + --tv-color-act-danger-bg: var(--tv-base-color-error-6); // 危险背景色-1（成功主色）：默认 + --tv-color-act-danger-bg-hover: var(--tv-base-color-error-5); // 危险hover背景色-1 + --tv-color-act-danger-bg-active: var(--tv-base-color-error-5); // 危险active背景色-1 - --tv-common-color-interact-danger-bg-light: var(--tv-base-color-error-1); // 危险背景色-2（成功主色衍生色）：朴素 - --tv-common-color-interact-danger-bg-light-hover: var(--tv-base-color-error-1); // 危险hover背景色-1 - --tv-common-color-interact-danger-bg-light-active: var(--tv-base-color-error-1); // 危险active背景色-1 + --tv-color-act-danger-bg-light: var(--tv-base-color-error-1); // 危险背景色-2（成功主色衍生色）：朴素 + --tv-color-act-danger-bg-light-hover: var(--tv-base-color-error-1); // 危险hover背景色-1 + --tv-color-act-danger-bg-light-active: var(--tv-base-color-error-1); // 危险active背景色-1 - --tv-common-color-interact-danger-border: var(--tv-base-color-error-6); // 危险边框色-1：默认 / 幽灵 - --tv-common-color-interact-danger-border-hover: var(--tv-base-color-error-5); // 危险hover边框色-1.1 - --tv-common-color-interact-danger-border-active: var(--tv-base-color-error-5); // 危险active边框色-1.1 - --tv-common-color-interact-danger-border-hover-1: var(--tv-base-color-error-2); // 危险hover边框色-1.2 - --tv-common-color-interact-danger-border-active-1: var(--tv-base-color-error-2); // 危险active边框色-1.2 + --tv-color-act-danger-border: var(--tv-base-color-error-6); // 危险边框色-1：默认 / 幽灵 + --tv-color-act-danger-border-hover: var(--tv-base-color-error-5); // 危险hover边框色-1.1 + --tv-color-act-danger-border-active: var(--tv-base-color-error-5); // 危险active边框色-1.1 + --tv-color-act-danger-border-hover-1: var(--tv-base-color-error-2); // 危险hover边框色-1.2 + --tv-color-act-danger-border-active-1: var(--tv-base-color-error-2); // 危险active边框色-1.2 - --tv-common-color-interact-danger-border-light: var(--tv-base-color-error-2); // 危险边框色-2：朴素 - --tv-common-color-interact-danger-border-light-hover: var(--tv-base-color-error-1); // 危险hover边框色 - --tv-common-color-interact-danger-border-light-active: var(--tv-base-color-error-1); // 危险active边框色 + --tv-color-act-danger-border-light: var(--tv-base-color-error-2); // 危险边框色-2：朴素 + --tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // 危险hover边框色 + --tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // 危险active边框色 /* 信息-info */ - --tv-common-color-interact-info-text: var(--tv-base-color-info-6); // 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接 - --tv-common-color-interact-info-text-hover: var(--tv-base-color-info-6); // 信息hover文本色-1 - --tv-common-color-interact-info-text-active: var(--tv-base-color-info-6); // 信息active文本色-1 + --tv-color-act-info-text: var(--tv-base-color-info-6); // 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接 + --tv-color-act-info-text-hover: var(--tv-base-color-info-6); // 信息hover文本色-1 + --tv-color-act-info-text-active: var(--tv-base-color-info-6); // 信息active文本色-1 - --tv-common-color-interact-info-text-white: var(--tv-base-color-common-1); // 信息文本色-2（白色）：默认 - --tv-common-color-interact-info-text-white-hover: var(--tv-base-color-common-1); // 信息hover文本色-2（白色） - --tv-common-color-interact-info-text-white-active: var(--tv-base-color-common-1); // 信息active文本色-2（白色） + --tv-color-act-info-text-white: var(--tv-base-color-common-1); // 信息文本色-2（白色）：默认 + --tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // 信息hover文本色-2（白色） + --tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // 信息active文本色-2（白色） - --tv-common-color-interact-info-bg: var(--tv-base-color-info-6); // 信息背景色-1（信息主色）：默认 - --tv-common-color-interact-info-bg-hover: var(--tv-base-color-info-5); // 信息hover背景色-1 - --tv-common-color-interact-info-bg-active: var(--tv-base-color-info-5); // 信息active背景色-1 + --tv-color-act-info-bg: var(--tv-base-color-info-6); // 信息背景色-1（信息主色）：默认 + --tv-color-act-info-bg-hover: var(--tv-base-color-info-5); // 信息hover背景色-1 + --tv-color-act-info-bg-active: var(--tv-base-color-info-5); // 信息active背景色-1 - --tv-common-color-interact-info-bg-light: var(--tv-base-color-info-1); // 信息背景色-1（信息主色衍生色）：朴素 - --tv-common-color-interact-info-bg-light-hover: var(--tv-base-color-info-1); // 信息hover背景色-1 - --tv-common-color-interact-info-bg-light-active: var(--tv-base-color-info-1); // 信息active背景色-1 + --tv-color-act-info-bg-light: var(--tv-base-color-info-1); // 信息背景色-1（信息主色衍生色）：朴素 + --tv-color-act-info-bg-light-hover: var(--tv-base-color-info-1); // 信息hover背景色-1 + --tv-color-act-info-bg-light-active: var(--tv-base-color-info-1); // 信息active背景色-1 - --tv-common-color-interact-info-border: var(--tv-base-color-info-6); // 信息边框色-1：默认 / 幽灵 - --tv-common-color-interact-info-border-hover: var(--tv-base-color-info-5); // 信息hover边框色-1.1 - --tv-common-color-interact-info-border-active: var(--tv-base-color-info-5); // 信息active边框色-1.1 - --tv-common-color-interact-info-border-hover-1: var(--tv-base-color-info-2); // 信息hover边框色-1.2：幽灵 - --tv-common-color-interact-info-border-active-1: var(--tv-base-color-info-2); // 信息active边框色-1.2 + --tv-color-act-info-border: var(--tv-base-color-info-6); // 信息边框色-1：默认 / 幽灵 + --tv-color-act-info-border-hover: var(--tv-base-color-info-5); // 信息hover边框色-1.1 + --tv-color-act-info-border-active: var(--tv-base-color-info-5); // 信息active边框色-1.1 + --tv-color-act-info-border-hover-1: var(--tv-base-color-info-2); // 信息hover边框色-1.2：幽灵 + --tv-color-act-info-border-active-1: var(--tv-base-color-info-2); // 信息active边框色-1.2 - --tv-common-color-interact-info-border-light: var(--tv-base-color-info-2); // 信息边框色-2：朴素 - --tv-common-color-interact-info-border-light-hover: var(--tv-base-color-info-1); // 信息hover边框色 - --tv-common-color-interact-info-border-light-active: var(--tv-base-color-info-1); // 信息active边框色 + --tv-color-act-info-border-light: var(--tv-base-color-info-2); // 信息边框色-2：朴素 + --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // 信息hover边框色 + --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // 信息active边框色 /** * 2.4 文本色 **/ // 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标 - --tv-common-color-text: var(--tv-base-color-common-11); - --tv-common-color-text-secondary: var(--tv-base-color-common-9); // 二级文本色-次要信息 - --tv-common-color-text-weaken: var(--tv-base-color-common-8); // 三级文本色-弱化信息、说明文字 - --tv-common-color-text-placeholder: var(--tv-base-color-common-8); // 占位文本色 - --tv-common-color-text-disabled: var(--tv-base-color-common-7); // 禁用文本色 - --tv-common-color-text-active: var(--tv-base-color-brand-6); // 选中文本色 / 文本高亮色（搜索关键字高亮） - --tv-common-color-text-important: var(--tv-base-color-common); // 重要文本色-文本_金额 - --tv-common-color-text-white: var(--tv-base-color-common-1); // 深色背景上-文本色 - --tv-common-color-text-link: var(--tv-base-color-brand-6); // 链接色 - --tv-common-color-text-link-hover: var(--tv-base-color-brand-6); // 链接悬浮色 + --tv-color-text: var(--tv-base-color-common-11); + --tv-color-text-secondary: var(--tv-base-color-common-9); // 二级文本色-次要信息 + --tv-color-text-weaken: var(--tv-base-color-common-8); // 三级文本色-弱化信息、说明文字 + --tv-color-text-placeholder: var(--tv-base-color-common-8); // 占位文本色 + --tv-color-text-disabled: var(--tv-base-color-common-7); // 禁用文本色 + --tv-color-text-active: var(--tv-base-color-brand-6); // 选中文本色 / 文本高亮色（搜索关键字高亮） + --tv-color-text-important: var(--tv-base-color-common); // 重要文本色-文本_金额 + --tv-color-text-white: var(--tv-base-color-common-1); // 深色背景上-文本色 + --tv-color-text-link: var(--tv-base-color-brand-6); // 链接色 + --tv-color-text-link-hover: var(--tv-base-color-brand-6); // 链接悬浮色 /** * 2.5 图标色 **/ - --tv-common-color-icon: var(--tv-base-color-common-8); // 默认图标色 - --tv-common-color-icon-hover: var(--tv-base-color-common-11); // 图标悬浮色 - --tv-common-color-icon-active: var(--tv-base-color-common-11); // 图标激活色 - --tv-common-color-icon-disabled: var(--tv-base-color-common-7); // 图标禁用色 - --tv-common-color-icon-white: var(--tv-base-color-common-1); // 深色背景白色图标 - --tv-common-color-icon-link: var(--tv-base-color-brand-6); // 链接图标色 + --tv-color-icon: var(--tv-base-color-common-8); // 默认图标色 + --tv-color-icon-hover: var(--tv-base-color-common-11); // 图标悬浮色 + --tv-color-icon-active: var(--tv-base-color-common-11); // 图标激活色 + --tv-color-icon-disabled: var(--tv-base-color-common-7); // 图标禁用色 + --tv-color-icon-white: var(--tv-base-color-common-1); // 深色背景白色图标 + --tv-color-icon-link: var(--tv-base-color-brand-6); // 链接图标色 // 次要警告图标色 / 评分组件rate-图标色/状态图标-异常 - --tv-common-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); + --tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); /** * 2.6 背景色 @@ -333,46 +333,46 @@ /* 2.6.1 常态 */ // 通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色 - --tv-common-color-bg: var(--tv-base-color-common-3); - --tv-common-color-bg-primary: var(--tv-base-color-brand); // 主要背景色（品牌色）：slider/step/流程图 - --tv-common-color-bg-secondary: var(--tv-base-color-common-1); // 次要背景色（白色）：// 输入框背景/默认按钮背景 - --tv-common-color-bg-control: var(--tv-base-color-common-7); // 单选/复选/开关/滑块默认背景色 - --tv-common-color-bg-control-unactive: var(--tv-base-color-common-7); // 开关组件-关闭状态-背景色 + --tv-color-bg: var(--tv-base-color-common-3); + --tv-color-bg-primary: var(--tv-base-color-brand); // 主要背景色（品牌色）：slider/step/流程图 + --tv-color-bg-secondary: var(--tv-base-color-common-1); // 次要背景色（白色）：// 输入框背景/默认按钮背景 + --tv-color-bg-control: var(--tv-base-color-common-7); // 单选/复选/开关/滑块默认背景色 + --tv-color-bg-control-unactive: var(--tv-base-color-common-7); // 开关组件-关闭状态-背景色 - --tv-common-color-bg-gray-1: var(--tv-base-color-common-2); // 灰色背景-1：灰色卡片背景色/折叠面板/表格下展背景色 - --tv-common-color-bg-gray-2: var(--tv-base-color-common-5); // 灰色背景-2灰色标签背景色 - --tv-common-color-bg-header: var(--tv-base-color-common-4); // 表头背景色(如果只有表格使用，就转成组件级变量） + --tv-color-bg-gray-1: var(--tv-base-color-common-2); // 灰色背景-1：灰色卡片背景色/折叠面板/表格下展背景色 + --tv-color-bg-gray-2: var(--tv-base-color-common-5); // 灰色背景-2灰色标签背景色 + --tv-color-bg-header: var(--tv-base-color-common-4); // 表头背景色(如果只有表格使用，就转成组件级变量） /* 2.6.2 禁用 */ - --tv-common-color-bg-disabled: var(--tv-base-color-common-4); // 禁用背景色 - --tv-common-color-bg-disabled-control-unactive: var(--tv-base-color-common-6); + --tv-color-bg-disabled: var(--tv-base-color-common-4); // 禁用背景色 + --tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-6); // 深色背景禁用色，开关组件“关”禁用背景色 - --tv-common-color-bg-disabled-control-active: var(--tv-base-color-brand-3); + --tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); /* 2.6.3 悬浮 */ // 浅背景-悬浮色，开关组件“开”禁用背景色 - --tv-common-color-bg-hover: var(--tv-base-color-common-3); + --tv-color-bg-hover: var(--tv-base-color-common-3); // 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮 - --tv-common-color-bg-hover-primary: var(--tv-base-color-common-9); // 主要背景色悬浮色 - --tv-common-color-bg-hover-secondary: var(--tv-base-color-common-1); + --tv-color-bg-hover-primary: var(--tv-base-color-common-9); // 主要背景色悬浮色 // 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色 - --tv-common-color-bg-hover-1: var(--tv-base-color-brand-2); // 浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色 - --tv-common-color-bg-hover-3: var(--tv-base-color-common-5); // 轮播箭头背景悬浮色 - --tv-common-color-bg-hover-4: var(--tv-base-color-brand-1); // 悬浮背景色 + --tv-color-bg-hover-secondary: var(--tv-base-color-common-1); + --tv-color-bg-hover-1: var(--tv-base-color-brand-2); // 浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色 + --tv-color-bg-hover-3: var(--tv-base-color-common-5); // 轮播箭头背景悬浮色 + --tv-color-bg-hover-4: var(--tv-base-color-brand-1); // 悬浮背景色 /* 2.6.4 active/选中 */ - --tv-common-color-bg-active: var(--tv-base-color-common-3); // 分页选中背景色/左侧导航选中背景色 + --tv-color-bg-active: var(--tv-base-color-common-3); // 分页选中背景色/左侧导航选中背景色 // 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色 - --tv-common-color-bg-active-control: var(--tv-base-color-brand-6); + --tv-color-bg-active-control: var(--tv-base-color-brand-6); // 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色 - --tv-common-color-bg-active-primary: var(--tv-base-color-brand); + --tv-color-bg-active-primary: var(--tv-base-color-brand); // 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色 - --tv-common-color-bg-active-secondary: var(--tv-base-color-common-1); - --tv-common-color-bg-active-emphasize: var(--tv-base-color-brand-2); // 时间选择选中背景色 - --tv-common-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // 表格选中背景色 + --tv-color-bg-active-secondary: var(--tv-base-color-common-1); + --tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // 时间选择选中背景色 + --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // 表格选中背景色 /** * 2.7 边框色/分割线颜色 @@ -380,84 +380,84 @@ **/ // 边框 - --tv-common-color-border: var(--tv-base-color-common-7); // 线条-正常色 - --tv-common-color-border-hover: var(--tv-base-color-brand); // 线条悬浮色 - --tv-common-color-border-active: var(--tv-base-color-brand); // 线条active色 - --tv-common-color-border-disabled: var(--tv-base-color-common-6); // 线条禁用色 - --tv-common-color-border-secondary: var(--tv-base-color-common-9); // 线条-次要色：次要按钮边框默认色 + --tv-color-border: var(--tv-base-color-common-7); // 线条-正常色 + --tv-color-border-hover: var(--tv-base-color-brand); // 线条悬浮色 + --tv-color-border-active: var(--tv-base-color-brand); // 线条active色 + --tv-color-border-disabled: var(--tv-base-color-common-6); // 线条禁用色 + --tv-color-border-secondary: var(--tv-base-color-common-9); // 线条-次要色：次要按钮边框默认色 // 分割线 - --tv-common-color-border-divider: var(--tv-base-color-common-4); // 分割线1（较长分割线场景） - --tv-common-color-border-divider-short: var(--tv-base-color-common-6); // 分割线2（较短分割线场景） + --tv-color-border-divider: var(--tv-base-color-common-4); // 分割线1（较长分割线场景） + --tv-color-border-divider-short: var(--tv-base-color-common-6); // 分割线2（较短分割线场景） /** * 3. 字体变量 **/ /* 3.1 字体家族 */ - --tv-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', + --tv-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; // 默认中文 - --tv-common-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文 + --tv-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文 /* 3.2 字号 */ - --tv-common-font-size-sm: 12px; // 辅助文本 - --tv-common-font-size-md: 14px; // 正文，默认字体尺寸 - --tv-common-font-size-lg: 16px; - --tv-common-font-size-x1: 18px; - --tv-common-font-size-xx1: 20px; + --tv-font-size-sm: 12px; // 辅助文本 + --tv-font-size-md: 14px; // 正文，默认字体尺寸 + --tv-font-size-lg: 16px; + --tv-font-size-xl: 18px; + --tv-font-size-xxl: 20px; - --tv-common-font-size-heading-xs: 16px; // 卡片标题 - --tv-common-font-size-heading-sm: 18px; // 页面标题 - --tv-common-font-size-heading-md: 20px; // 弹窗标题、数字 - --tv-common-font-size-heading-lg: 24px; // 数字、面额 - --tv-common-font-size-heading-xl: 32px; // 数字、面额 + --tv-font-size-heading-xs: 16px; // 卡片标题 + --tv-font-size-heading-sm: 18px; // 页面标题 + --tv-font-size-heading-md: 20px; // 弹窗标题、数字 + --tv-font-size-heading-lg: 24px; // 数字、面额 + --tv-font-size-heading-xl: 32px; // 数字、面额 /** * 3.3 行高 * TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一 */ - --tv-common-line-height-number: 1.5; + --tv-line-height-number: 1.5; /* 3.4 字重 */ - --tv-common-font-weight-thin: 200; - --tv-common-font-weight-regular: 400; - --tv-common-font-weight-medium: 600; + --tv-font-weight-thin: 200; + --tv-font-weight-regular: 400; + --tv-font-weight-medium: 600; /** * 4. 圆角变量 **/ - --tv-common-border-radius-sm: 4px; - --tv-common-border-radius-md: 6px; // 默认圆角 - --tv-common-border-radius-lg: 8px; - --tv-common-border-radius-round: 50%; + --tv-border-radius-sm: 4px; + --tv-border-radius-md: 6px; // 默认圆角 + --tv-border-radius-lg: 8px; + --tv-border-radius-round: 50%; /** * 5. 阴影变量 **/ - --tv-common-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影 - --tv-common-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 + --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影 + --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影 - --tv-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层 - --tv-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航 - --tv-common-shadow-1-left: -1px 0 4px 0 rgba(0, 0, 0, 0.08); - --tv-common-shadow-1-right: 1px 0 4px 0 rgba(0, 0, 0, 0.08); // 手风琴（leftmenu） + --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层 + --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航 + --tv-shadow-1-left: -1px 0 4px 0 rgba(0, 0, 0, 0.08); + --tv-shadow-1-right: 1px 0 4px 0 rgba(0, 0, 0, 0.08); // 手风琴（leftmenu） - --tv-common-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16); - --tv-common-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // tips提示、扩展视图 - --tv-common-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16); - --tv-common-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16); + --tv-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16); + --tv-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // tips提示、扩展视图 + --tv-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16); + --tv-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16); - --tv-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08); - --tv-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 卡片hover/选中、下拉面板 - --tv-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08); - --tv-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08); + --tv-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08); + --tv-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 卡片hover/选中、下拉面板 + --tv-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08); + --tv-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08); - --tv-common-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16); - --tv-common-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 弹窗、气泡确认框 - --tv-common-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉 - --tv-common-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16); + --tv-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16); + --tv-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 弹窗、气泡确认框 + --tv-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉 + --tv-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16); /** * 6. 边框 / 线变量 @@ -465,7 +465,7 @@ **/ /* 6.1 线粗细 */ - --tv-common-border-weight: 1px; + --tv-border-weight: 1px; /** * 7. 间距变量 @@ -473,13 +473,13 @@ **/ /* 7.1 基准间距 */ - --tv-common-space-base: 4px; + --tv-space-base: 4px; - --tv-common-space-xs: 2px; - --tv-common-space-sm: var(--tv-common-space-base); - --tv-common-space-md: calc(var(--tv-common-space-base) * 2); - --tv-common-space-lg: calc(var(--tv-common-space-base) * 3); - --tv-common-space-xl: calc(var(--tv-common-space-base) * 4); + --tv-space-xs: 2px; + --tv-space-sm: var(--tv-space-base); + --tv-space-md: calc(var(--tv-space-base) * 2); + --tv-space-lg: calc(var(--tv-space-base) * 3); + --tv-space-xl: calc(var(--tv-space-base) * 4); /** * 8. 尺寸变量 @@ -487,25 +487,24 @@ **/ /* 8.1 基准尺寸 */ - --tv-common-size-base: 4px; + --tv-size-base: 4px; /* 8.4 高 */ - --tv-common-size-height-xs: 24px; // mini 尺寸 - --tv-common-size-height-sm: 28px; // small 尺寸 - --tv-common-size-height-md: 32px; // medium 尺寸 - 默认 - --tv-common-size-height-lg: 40px; // large 尺寸 - --tv-common-size-height-xl: 48px; // xLarge 尺寸 + --tv-size-height-xs: 24px; // mini 尺寸 + --tv-size-height-sm: 28px; // small 尺寸 + --tv-size-height-md: 32px; // medium 尺寸 - 默认 + --tv-size-height-lg: 40px; // large 尺寸 + --tv-size-height-xl: 48px; // xLarge 尺寸 /** * 9. 滚动条变量 **/ - --tv-common-size-scrollbar-width: 8px; // 滚动条宽度 - --tv-common-size-scrollbar-height: 80px; // 滚动条高度 - --tv-common-border-radius-scrollbar-thumb: 4px; // 滑块圆角 - --tv-common-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // 滑块背景色 - --tv-common-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // 滑块hover背景色 - --tv-common-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // 滑块active背景色 - --tv-common-color-bg-scrollbar-track: var(--tv-base-color-common-1); // 轨道背景色 + --tv-size-scrollbar-width: 8px; // 滚动条宽度 + --tv-size-scrollbar-height: 80px; // 滚动条高度 + --tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角 + --tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // 滑块背景色 + --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // 滑块hover背景色 + --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // 滑块active背景色 + --tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // 轨道背景色 } - \ No newline at end of file diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less index 3f2abba7cb..ea9e718eee 100644 --- a/packages/theme/src/input/index.less +++ b/packages/theme/src/input/index.less @@ -23,24 +23,24 @@ .component-css-vars-input(); position: relative; - font-size: var(--ti-input-font-size); + font-size: var(--tv-Input-font-size); display: inline-table; width: 100%; &.is-exceed &__suffix &__count { - color: var(--ti-input-exceed-text-color); + color: var(--tv-Input-exceed-text-color); &-text-length { - color: var(--ti-input-exceed-text-color); + color: var(--tv-Input-exceed-text-color); } } &.is-disabled &__inner { cursor: not-allowed; - border: 1px solid var(--ti-input-disabled-border-color); - color: var(--ti-input-disabled-text-color); - background: var(--ti-input-disabled-bg-color); - .placeholder(@color: var(--ti-input-placeholder-text-color)); + border: 1px solid var(--tv-Input-disabled-border-color); + color: var(--tv-Input-disabled-text-color); + background: var(--tv-Input-disabled-bg-color); + .placeholder(@color: var(--tv-Input-placeholder-text-color)); &.@{input-prefix-cls}__mask { font-family: serif; @@ -54,7 +54,7 @@ &.@{css-prefix}svg { &, &:hover { - fill: var(--ti-input-disabled-text-color); + fill: var(--tv-Input-disabled-text-color); } } } @@ -64,29 +64,29 @@ .@{css-prefix}svg { &, &:hover { - fill: var(--ti-input-disabled-text-color); + fill: var(--tv-Input-disabled-text-color); } } } &.is-exceed &__inner { - border-color: var(--ti-input-exceed-text-color); + border-color: var(--tv-Input-exceed-text-color); } &:hover { .@{input-prefix-cls}__inner:not(:disabled) { - border-color: var(--ti-input-hover-border-color); + border-color: var(--tv-Input-hover-border-color); } } & &__clear { - font-size: var(--ti-input-icon-font-size); + font-size: var(--tv-Input-icon-font-size); cursor: pointer; transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - fill: var(--ti-input-icon-color); + fill: var(--tv-Input-icon-color); &:hover { - fill: var(--ti-input-icon-color-hover); + fill: var(--tv-Input-icon-color-hover); } } @@ -96,47 +96,47 @@ right: -1px; display: inline-flex; align-items: center; - color: var(--ti-input-count-font-color); - font-size: var(--ti-input-count-font-size); + color: var(--tv-Input-count-font-color); + font-size: var(--tv-Input-count-font-size); .@{input-prefix-cls}__count-inner { white-space: nowrap; - background: var(--ti-input-bg-color); + background: var(--tv-Input-bg-color); line-height: initial; display: inline-block; } &-text-length { - color: var(--ti-input-text-color); + color: var(--tv-Input-text-color); } } &__inner { width: 100%; - border: 1px solid var(--ti-input-border-color); - border-radius: var(--ti-input-border-radius); - color: var(--ti-input-text-color); - background: var(--ti-input-bg-color); - font-size: var(--ti-input-font-size); - height: var(--ti-input-height); - line-height: var(--ti-input-height); - padding: var(--ti-input-padding-vertical) var(--ti-input-padding-horizontal); + border: 1px solid var(--tv-Input-border-color); + border-radius: var(--tv-Input-border-radius); + color: var(--tv-Input-text-color); + background: var(--tv-Input-bg-color); + font-size: var(--tv-Input-font-size); + height: var(--tv-Input-height); + line-height: var(--tv-Input-height); + padding: var(--tv-Input-padding-x) var(--tv-Input-padding-y); outline: 0; display: inline-block; box-sizing: border-box; appearance: none; transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - .placeholder(@color: var(--ti-input-placeholder-text-color)); + .placeholder(@color: var(--tv-Input-placeholder-text-color)); &:hover, &:focus, &:active { outline: 0; - border-color: var(--ti-input-hover-border-color); + border-color: var(--tv-Input-hover-border-color); } &:focus ~ .@{input-prefix-cls}__suffix svg { - fill: var(--ti-input-focus-icon-color); + fill: var(--tv-Input-focus-icon-color); } &::-ms-clear { @@ -149,27 +149,27 @@ &__prefix, &__suffix { position: absolute; - top: var(--ti-input-suffix-top); + top: var(--tv-Input-suffix-top); transform: translateY(-50%); transition: all 0.3s; text-align: center; - color: var(--ti-input-border-color); + color: var(--tv-Input-border-color); display: flex; align-items: center; svg { - fill: var(--ti-input-suffix-icon-color); + fill: var(--tv-Input-suffix-icon-color); } } &.is-active &__inner, &__inner:focus { - border-color: var(--ti-input-active-border-color); + border-color: var(--tv-Input-active-border-color); outline: 0; } &__suffix { - right: var(--ti-input-suffix-right); + right: var(--tv-Input-suffix-right); transition: all 0.3s; pointer-events: none; @@ -180,20 +180,20 @@ &__suffix-inner { pointer-events: all; - font-size: var(--ti-common-font-size-1); + font-size: var(--tv-common-font-size-1); display: flex; justify-content: flex-start; align-items: center; &:hover svg { - fill: var(--ti-input-focus-icon-color); + fill: var(--tv-Input-focus-icon-color); } } &__prefix { left: 12px; transition: all 0.3s; - font-size: var(--ti-input-icon-font-size); + font-size: var(--tv-Input-icon-font-size); & > div { display: flex; @@ -201,16 +201,16 @@ } &__icon { - line-height: var(--ti-input-height); + line-height: var(--tv-Input-height); text-align: center; transition: all 0.3s; - font-size: var(--ti-input-icon-font-size); - fill: var(--ti-input-icon-color); - width: var(--ti-input-suffix-icon-width); - height: var(--ti-input-suffix-icon-height); + font-size: var(--tv-Input-icon-font-size); + fill: var(--tv-Input-icon-color); + width: var(--tv-Input-suffix-icon-width); + height: var(--tv-Input-suffix-icon-height); &:hover { - fill: var(--ti-input-icon-active-border-color); + fill: var(--tv-Input-icon-active-border-color); } &:after { @@ -227,13 +227,13 @@ } &-suffix &__inner { - padding-right: var(--ti-input-suffix-padding-right); - padding-left: var(--ti-input-suffix-padding-left); + padding-right: var(--tv-Input-suffix-padding-right); + padding-left: var(--tv-Input-suffix-padding-left); } &-prefix &__inner { - padding-left: var(--ti-input-prefix-padding-left); - padding-right: var(--ti-input-prefix-padding-right); + padding-left: var(--tv-Input-prefix-padding-left); + padding-right: var(--tv-Input-prefix-padding-right); } &-word-limit &__inner { @@ -247,23 +247,23 @@ } &-medium { - .input-size(var(--ti-input-medium-height)); + .input-size(var(--tv-Input-medium-height)); .@{input-prefix-cls}__suffix { - top: var(--ti-input-suffix-top-medium); + top: var(--tv-Input-suffix-top-medium); } } &-small { - .input-size(var(--ti-input-small-height)); + .input-size(var(--tv-Input-small-height)); .@{input-prefix-cls}__suffix { - top: var(--ti-input-suffix-top-small); + top: var(--tv-Input-suffix-top-small); } } &-mini { - .input-size(var(--ti-input-mini-height)); + .input-size(var(--tv-Input-mini-height)); .@{input-prefix-cls}__suffix { - top: var(--ti-input-suffix-top-mini); + top: var(--tv-Input-suffix-top-mini); } } @@ -287,7 +287,7 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - line-height: var(--ti-input-display-content-line-height); + line-height: var(--tv-Input-display-content-line-height); } &__mask { @@ -342,10 +342,10 @@ &__append, &__prepend { - background-color: var(--ti-input-disabled-bg-color); - color: var(--ti-input-placeholder-text-color); - border: 1px solid var(--ti-input-border-color); - border-radius: var(--ti-input-border-radius); + background-color: var(--tv-Input-disabled-bg-color); + color: var(--tv-Input-placeholder-text-color); + border: 1px solid var(--tv-Input-border-color); + border-radius: var(--tv-Input-border-radius); padding: 0 20px; width: 1px; vertical-align: middle; diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less index 60f6898c76..ac43280306 100644 --- a/packages/theme/src/input/vars.less +++ b/packages/theme/src/input/vars.less @@ -11,77 +11,77 @@ .component-css-vars-input() { // 输入框文本颜色 - --ti-input-text-color: var(--tv-common-color-text); + --tv-Input-text-color: var(--tv-color-text); // 输入框背景颜色 - --ti-input-bg-color: var(--tv-common-color-bg-secondary); + --tv-Input-bg-color: var(--tv-color-bg-secondary); // 输入框字体大小 - --ti-input-font-size: var(--tv-common-font-size-md); + --tv-Input-font-size: var(--tv-font-size-md); // 输入框计数器字体大小 - --ti-input-count-font-size: var(--tv-common-font-size-sm); - // 输入框高度 - --ti-input-height: var(--tv-common-size-height-md); + --tv-Input-count-font-size: var(--tv-font-size-sm); + // 输入框高度v + --tv-Input-height: var(--tv-size-height-md); // 输入框边框圆角 - --ti-input-border-radius: var(--tv-common-border-radius-md); + --tv-Input-border-radius: var(--tv-border-radius-md); // 输入框边框色 - --ti-input-border-color: var(--tv-common-color-border); + --tv-Input-border-color: var(--tv-color-border); // 输入框hover时边框色 - --ti-input-hover-border-color: var(--tv-common-color-border-hover); + --tv-Input-hover-border-color: var(--tv-color-border-hover); // 输入框active时边框色 - --ti-input-active-border-color: var(--tv-common-color-border-active); + --tv-Input-active-border-color: var(--tv-color-border-active); // icon颜色 - --ti-input-icon-color: var(--tv-common-color-icon); + --tv-Input-icon-color: var(--tv-color-icon); // icon图标hover时颜色 - --ti-input-icon-color-hover: var(--tv-common-color-icon-hover); + --tv-Input-icon-color-hover: var(--tv-color-icon-hover); // 输入框聚焦时icon颜色 - --ti-input-focus-icon-color: var(--tv-common-color-icon-active); + --tv-Input-focus-icon-color: var(--tv-color-icon-active); // suffix元素的顶部高度 - --ti-input-suffix-top: 16px; + --tv-Input-suffix-top: 16px; // 中尺寸 suffix元素的顶部高度 - --ti-input-suffix-top-medium: 20px; + --tv-Input-suffix-top-medium: 20px; // 小尺寸 suffix元素的顶部高度 - --ti-input-suffix-top-small: 16px; + --tv-Input-suffix-top-small: 16px; // 迷你 suffix元素的顶部高度 - --ti-input-suffix-top-mini: 12px; + --tv-Input-suffix-top-mini: 12px; // suffix图标颜色 - --ti-input-suffix-icon-color: var(--tv-common-color-icon); + --tv-Input-suffix-icon-color: var(--tv-color-icon); // 输入框占位符文本颜色 - --ti-input-placeholder-text-color: var(--tv-common-color-text-placeholder); + --tv-Input-placeholder-text-color: var(--tv-color-text-placeholder); // 输入框disabled时的文本颜色 - --ti-input-disabled-text-color: var(--tv-common-color-text-disabled); + --tv-Input-disabled-text-color: var(--tv-color-text-disabled); // 输入框medium尺寸的高度 - --ti-input-medium-height: var(--tv-common-size-height-lg); + --tv-Input-medium-height: var(--tv-size-height-lg); // 输入框small尺寸的高度 - --ti-input-small-height: var(--tv-common-size-height-sm); + --tv-Input-small-height: var(--tv-size-height-sm); // 输入框mini尺寸的高度 - --ti-input-mini-height: var(--tv-common-size-height-xs); + --tv-Input-mini-height: var(--tv-size-height-xs); // 输入框disabled时的背景颜色 - --ti-input-disabled-bg-color: var(--tv-common-color-bg-disabled); + --tv-Input-disabled-bg-color: var(--tv-color-bg-disabled); // 输入框disabled时的边框颜色 - --ti-input-disabled-border-color: var(--tv-common-color-border-disabled); + --tv-Input-disabled-border-color: var(--tv-color-border-disabled); // 输入框exceed时的文本颜色 - --ti-input-exceed-text-color: var(--tv-common-color-error-text); + --tv-Input-exceed-text-color: var(--tv-color-error-text); // 输入框的icon图标的字体大小 - --ti-input-icon-font-size: var(--tv-common-font-size-l); + --tv-Input-icon-font-size: var(--tv-font-size-l); // 输入框计数器的颜色 - --ti-input-count-font-color: var(--tv-common-color-text-weaken); + --tv-Input-count-font-color: var(--tv-color-text-weaken); // 输入框垂直方向内边距 - --ti-input-padding-vertical: 0; + --tv-Input-padding-x: 0; // 输入框水平方向内边距 - --ti-input-padding-horizontal: 12px; + --tv-Input-padding-y: 12px; // 输入框配置suffix时的右侧内边距 - --ti-input-suffix-padding-right: 40px; + --tv-Input-suffix-padding-right: 40px; // 输入框配置suffix时的左侧内边距 - --ti-input-suffix-padding-left: 12px; + --tv-Input-suffix-padding-left: 12px; // 输入框配置prefix时的右侧外边距 - --ti-input-prefix-padding-right: 40px; + --tv-Input-prefix-padding-right: 40px; // 输入框配置prefix时的左侧外边距 - --ti-input-prefix-padding-left: 40px; + --tv-Input-prefix-padding-left: 40px; // suffix图标的右侧边距 - --ti-input-suffix-right: 12px; + --tv-Input-suffix-right: 12px; // 输入框suffix的宽度 - --ti-input-suffix-icon-width: 16px; + --tv-Input-suffix-icon-width: 16px; // 输入框suffix的高度 - --ti-input-suffix-icon-height: 16px; + --tv-Input-suffix-icon-height: 16px; // displayOnly 时文本行高 - --ti-input-display-content-line-height: var(--tv-common-line-height-number); + --tv-Input-display-content-line-height: var(--tv-line-height-number); }