maxjhandsome
/
tiny-vue
forked from opentiny/tiny-vue
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
tiny-vue/packages/theme/src/base/vars.less

521 lines
37 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* prettier-ignore */
:root,
:host {
/* 1.1品牌色 */
/* 品牌主色 */
--tv-base-color-brand: #191919; // 主色黑/链接颜色
--tv-base-color-brand-1: #f0f7ff;
--tv-base-color-brand-2: #deecff; // 日期选择悬浮背景色 /提示-背景色
--tv-base-color-brand-3: #b3d6ff; // 浅背景-悬浮色，开关组件“开”禁用背景色
--tv-base-color-brand-4: #7eb7fc;
--tv-base-color-brand-5: #4191fa;
--tv-base-color-brand-6: #1476ff; // 辅助色， 文字按钮色、文字按钮悬浮色 /单选框选中悬浮/聚焦/激活小圆点填充色和边框色
--tv-base-color-brand-7: #0f5ed4;
--tv-base-color-brand-8: #0845a6;
--tv-base-color-brand-9: #022e7a;
--tv-base-color-brand-10: #001a4a;
--tv-base-color-brand-11: #3d6899;
--tv-base-color-brand-12: #7fa6d4;
--tv-base-color-brand-13: #b6d4f2;
/* 1.2 中立色 */
/* 公用灰色系，用于文本、图标、线条、背景色 */
--tv-base-color-common-1: #ffffff; // 顶部导航背景色、 顶部导航下拉背景色/次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
--tv-base-color-common-2: #fafafa; // 新区域组件-悬浮背景色
--tv-base-color-common-3: #f5f5f5; // 通用背景-页面背景色/ 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
--tv-base-color-common-4: #f0f0f0; // 白色背景分割线 /禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
--tv-base-color-common-5: #e6e6e6; // 灰色标签背景色/轮播箭头悬浮色
--tv-base-color-common-6: #dbdbdb; // 开关组件“关”禁用背景色/ 禁用描边/ 灰色背景分割线
--tv-base-color-common-7: #c2c2c2; // 选块悬浮色/页签禁用文字色/边框色（如下拉、输入框）/文字禁用/禁用图标
--tv-base-color-common-8: #808080; // 弱化信息、说明文字
--tv-base-color-common-9: #595959; // 次要信息/图标默认/主色悬浮色、链接悬浮色/主要按钮-hover/Focus背景色
--tv-base-color-common-10: #333333;
--tv-base-color-common-11: #191919; // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标/主要按钮-背景色
--tv-base-color-common-12: #000000;
/* 1.4 功能色 */
--tv-base-color-success-1: #edf7df;
--tv-base-color-success-2: #daf2bb;
--tv-base-color-success-3: #b9e683; // 成功-按钮active、hover 颜色
--tv-base-color-success-4: #9edb58;
--tv-base-color-success-5: #7dcc29;
--tv-base-color-success-6: #5cb300; // 成功-背景色/ 图标色/文本色 /进度条当前进度背景色
--tv-base-color-success-7: #4b9902;
--tv-base-color-success-8: #3c8001;
--tv-base-color-success-9: #2e6600;
--tv-base-color-success-10: #1f4700;
--tv-base-color-success-11: #628c38;
--tv-base-color-success-12: #a2c777;
--tv-base-color-success-13: #d2e6b8;
--tv-base-color-success-14: #e6f2d5; // 成功-背景色/边框色 （这个不在规范色阶中）
--tv-base-color-error-1: #fff1f0; //
--tv-base-color-error-2: #fce2e0; // 错误-边框色 /背景色 /错误校验背景色,设计稿用了这个#FCE3E1，但不在色阶中
--tv-base-color-error-3: #faa7a3; // 错误-图标色、校验边框色/、悬浮菜单背景色
--tv-base-color-error-4: #fa8682; //
--tv-base-color-error-5: #f76360;
--tv-base-color-error-6: #f23030; // 错误-文本色/交易金额色 / 紧急告警色
--tv-base-color-error-7: #bf0a1c;
--tv-base-color-error-8: #a3171c;
--tv-base-color-error-9: #78080e;
--tv-base-color-error-10: #4d0005;
--tv-base-color-error-11: #a64242;
--tv-base-color-error-12: #f2c5c2;
--tv-base-color-error-13: #fce3e1; // 错误-背景色/错误校验背景色 （这个不在规范色阶中）
--tv-base-color-warn-1: #fff4e8;
--tv-base-color-warn-2: #ffebd1; // 告警-背景色/边框色（浅）
--tv-base-color-warn-3: #fcd5a4;
--tv-base-color-warn-4: #fcbc72;
--tv-base-color-warn-5: #ff9a2e;
--tv-base-color-warn-6: #ff8800; // 告警-图标色/深色背景 /重要告警色
--tv-base-color-warn-7: #d96900; // 优惠折扣功能色 ti-color-discount
--tv-base-color-warn-8: #a64d00;
--tv-base-color-warn-9: #733400;
--tv-base-color-warn-10: #4d2201;
--tv-base-color-warn-11: #9e6d3f;
--tv-base-color-warn-12: #d6a981;
--tv-base-color-warn-13: #f2d8c2;
--tv-base-color-warn-secondary-1: #ffb700; // 次要告警色 黄色系
--tv-base-color-info-1: #f0f7ff;
--tv-base-color-info-2: #deecff; // 提示-背景色 / 边框色
--tv-base-color-info-3: #b3d6ff; // 开关组件“开”禁用背景色
--tv-base-color-info-4: #7eb7fc;
--tv-base-color-info-5: #4191fa;
--tv-base-color-info-6: #1476ff; // 提示-图标色 / 文本色
--tv-base-color-info-7: #0f5ed4;
--tv-base-color-info-8: #0845a6;
--tv-base-color-info-9: #022e7a;
--tv-base-color-info-10: #001a4a;
--tv-base-color-info-11: #3d6899;
--tv-base-color-info-12: #7fa6d4;
--tv-base-color-info-13: #b6d4f2;
/** 2. 公共色 **/
/** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、Tooltip、Badge、-错误校验等场景 **/
--tv-color-success-text: var(--tv-base-color-success-6); // #5cb300 成功-文本色 tag的light、plain类型
--tv-color-success-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色）
--tv-color-success-bg: var(--tv-base-color-success-6); //#5cb300 成功-背景色(深) tag的dark类型/tooltip/badge
--tv-color-success-bg-light: var(--tv-base-color-success-14); // #e6f2d5 成功-背景色(浅) alert/tag的light类型
--tv-color-success-bg-1: var(--tv-base-color-success-14); // #e6f2d5 tag的light类型
--tv-color-success-border: var(--tv-base-color-success-6); // #5cb300 成功-边框色(深) tooltip/badge/tag的dark、plain类型
--tv-color-success-border-light: var(--tv-base-color-success-14); // #e6f2d5 成功-边框色（浅） alert/tag的light类型
--tv-color-success-border-1: var(--tv-base-color-success-14); // #e6f2d5 tag的light类型
--tv-color-success-icon: var(--tv-base-color-success-6); // #5cb300 成功-图标色
--tv-color-error-text: var(--tv-base-color-error-6); // #f23030 #f23030 错误-文本色/交易金额色/错误校验/tag的light、plain类型
--tv-color-error-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色）
--tv-color-error-bg: var(--tv-base-color-error-6); // #f23030 #f23030 错误-背景色(深) tag的dark类型/tooltip/badge
--tv-color-error-bg-1: var(--tv-base-color-error-13); // #fce3e1 tag的light类型
--tv-color-error-bg-light: var(--tv-base-color-error-13); // #fce3e1 错误-背景色(浅):错误校验背景色/alert/tag的light类型
--tv-color-error-border: var(--tv-base-color-error-6); // #f23030 #f23030 错误-边框色(深) tooltip/badge/tag的dark、plain类型/错误校验边框色
--tv-color-error-border-light: var(--tv-base-color-error-13); // #fce3e1 错误-边框色（浅） alert/tag的light类型
--tv-color-error-border-1: var(--tv-base-color-error-13); // #fce3e1 tag的light类型
--tv-color-error-icon: var(--tv-base-color-error-6); // #f23030 #f23030 错误-图标色
--tv-color-warn-text: var(--tv-base-color-warn-6); // #ff8800 告警-文本色 tag的light、plain类型
--tv-color-warn-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色）
--tv-color-warn-bg: var(--tv-base-color-warn-6); // #ff8800 告警-背景色(深) tag的dark类型/tooltip/badge
--tv-color-warn-bg-light: var(--tv-base-color-warn-2); // #ffebd1 告警-背景色(浅) alert/tag的light类型
--tv-color-warn-bg-1: var(--tv-base-color-warn-2); // #ffebd1 tag的light类型
--tv-color-warn-border: var(--tv-base-color-warn-6); // #ff8800 告警-边框色(深) tooltip/badge/tag的dark、plain类型
--tv-color-warn-border-light: var(--tv-base-color-warn-2); // #ffebd1 告警-边框色（浅） alert/tag的light类型
--tv-color-warn-border-1: var(--tv-base-color-warn-2); // #ffebd1 tag的light类型
--tv-color-warn-icon: var(--tv-base-color-warn-6); // #ff8800 告警-图标色
--tv-color-info-text: var(--tv-base-color-info-6); // #1476ff 信息-文本色 tag的light、plain类型
--tv-color-info-text-primary: var(--tv-base-color-common-11); // #191919 常规一级文本色（非主题色） tag的dark类型/tooltip/badge
--tv-color-info-text-1: var(--tv-base-color-info-6); // #1476ff
--tv-color-info-bg: var(--tv-base-color-info-6); // #1476ff 信息-背景色(深) alert/tag的light类型
--tv-color-info-bg-1: var(--tv-base-color-info-2); // #deecff
--tv-color-info-bg-light: var(--tv-base-color-info-2); // #deecff 信息-背景色(浅) alert/tag的light类型
--tv-color-info-border: var(--tv-base-color-info-6); // #1476ff 信息-边框色(深) tooltip/badge/tag的dark、plain类型
--tv-color-info-border-light: var(--tv-base-color-info-2); // #deecff 信息-边框色（浅） alert/tag的light类型
--tv-color-info-border-1: var(--tv-base-color-info-2); // #deecff tag的light类型
--tv-color-info-icon: var(--tv-base-color-info-6); // #1476ff 信息-图标色
/** 2.3 交互类型颜色---- Button组件、Link 文字链接 **/
/* 主要-primary */
--tv-color-act-primary-text: var(--tv-base-color-brand); // #191919 主要文本色-1（品牌色）： 朴素/幽灵/纯文本/链接
--tv-color-act-primary-text-hover: var(--tv-base-color-brand); // #191919 主要hover文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-primary-text-active: var(--tv-base-color-brand); // #191919 主要active文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-primary-text-inverse-tint: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色） 基本按钮
--tv-color-act-primary-text-inverse-tint-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色） 基本按钮
--tv-color-act-primary-text-inverse-tint-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色） 基本按钮
--tv-color-act-primary-plain-text-hover: var(--tv-base-color-brand); // #191919 朴素悬浮文本色
--tv-color-act-primary-bg: var(--tv-base-color-brand); // #191919 主要背景色-1（品牌色）: 基本按钮
--tv-color-act-primary-bg-hover: var(--tv-base-color-common-9); // #595959 主要hover背景色-1 基本按钮
--tv-color-act-primary-bg-active: var(--tv-base-color-common-9); // #595959 主要active背景色-1 基本按钮
--tv-color-act-primary-bg-white: var(--tv-base-color-common-1); // #fff 主要背景色-2（白）：朴素
--tv-color-act-primary-bg-white-hover: var(--tv-base-color-common-1); // #fff 主要hover背景色-2（白色）： 朴素
--tv-color-act-primary-bg-white-active: var(--tv-base-color-common-1); // 主要active背景色-2（白色）： 朴素
--tv-color-act-primary-border: var(--tv-base-color-brand); // #191919 主要边框色-1 基本按钮
--tv-color-act-primary-border-hover: var(--tv-base-color-common-9); // #595959 主要hover边框色-1 基本按钮
--tv-color-act-primary-border-active: var(--tv-base-color-common-9); // #595959 主要active边框色-1 基本按钮
--tv-color-act-primary-border-light: var(--tv-base-color-common-9); // #595959 边框色-2 幽灵/朴素
--tv-color-act-primary-border-light-hover: var(--tv-base-color-common-1); // #fff 边框色-2.1 朴素hover
--tv-color-act-primary-border-light-active: var(--tv-base-color-common-1); // #fff 边框色-2.1 朴素active
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 边框色-2.2 幽灵hover
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 边框色-2.2 幽灵active
/* 成功-success */
--tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-success-text-active: var(--tv-base-color-success-6); // #5cb300 成功active文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-success-text-white: var(--tv-base-color-common-1); // #fff 成功文本色-2（白色）：基本按钮
--tv-color-act-success-text-white-hover: var(--tv-base-color-common-1); // #fff 成功hover文本色-2（白色） 基本按钮
--tv-color-act-success-text-white-active: var(--tv-base-color-common-1); // #fff 成功active文本色-2（白色） 基本按钮
--tv-color-act-success-plain-text-hover: var(--tv-base-color-success-6); // #5cb300 朴素悬浮文本色
--tv-color-act-success-bg: var(--tv-base-color-success-6); // #5cb300 成功背景色-1（品牌色）：基本按钮
--tv-color-act-success-bg-hover: var(--tv-base-color-success-5); // #7dcc29 成功hover背景色-1 基本按钮
--tv-color-act-success-bg-active: var(--tv-base-color-success-5); // #7dcc29 成功active背景色-1 基本按钮
--tv-color-act-success-bg-light: var(--tv-base-color-success-1); // #edf7df 成功背景色-1（品牌色）：朴素
--tv-color-act-success-bg-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover背景色-1 朴素
--tv-color-act-success-bg-light-active: var(--tv-base-color-success-1); // #edf7df 成功active背景色-1 朴素
--tv-color-act-success-border: var(--tv-base-color-success-6); // #5cb300 成功边框色-1：基本按钮/幽灵按钮
--tv-color-act-success-border-hover: var(--tv-base-color-success-5); // #7dcc29 成功hover边框色-1.1 基本按钮
--tv-color-act-success-border-active: var(--tv-base-color-success-5); // #7dcc29 成功active边框色-1.1 基本按钮
--tv-color-act-success-border-hover-1: var(--tv-base-color-success-2); // #daf2bb 成功hover边框色-1.2 幽灵按钮
--tv-color-act-success-border-active-1: var(--tv-base-color-success-2); // #daf2bb 成功active边框色-1.2 幽灵按钮
--tv-color-act-success-border-light: var(--tv-base-color-success-2); // #daf2bb 成功边框色-2:朴素按钮
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色 朴素按钮
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色 朴素按钮
/* 告警-warning */
--tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800 告警hover文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-warning-text-active: var(--tv-base-color-warn-6); // #ff8800 告警active文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-warning-text-white: var(--tv-base-color-common-1); // #fff 告警文本色-2（白色）：基本按钮
--tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // #fff 告警hover文本色-2（白色） 基本按钮
--tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // #fff 告警active文本色-2（白色） 基本按钮
--tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800 朴素悬浮文本色
--tv-color-act-warning-bg: var(--tv-base-color-warn-6); // #ff8800 告警背景色-1（告警主色）：基本按钮
--tv-color-act-warning-bg-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover背景色-1 基本按钮
--tv-color-act-warning-bg-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active背景色-1 基本按钮
--tv-color-act-warning-bg-light: var(--tv-base-color-warn-1); // #fff4e8 告警背景色-1（告警主色衍生色）：朴素按钮
--tv-color-act-warning-bg-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover背景色-1 朴素按钮
--tv-color-act-warning-bg-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active背景色-1 朴素按钮
--tv-color-act-warning-border: var(--tv-base-color-warn-6); // #ff8800 告警边框色-1：基本按钮/幽灵按钮
--tv-color-act-warning-border-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover边框色-1.1 基本按钮
--tv-color-act-warning-border-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active边框色-1.1 基本按钮
--tv-color-act-warning-border-hover-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵hover边框色-1.2 幽灵按钮
--tv-color-act-warning-border-active-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵active边框色-1.2 幽灵按钮
--tv-color-act-warning-border-light: var(--tv-base-color-warn-2); //#ffebd1 告警边框色-2：朴素按钮
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色 朴素按钮
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色 朴素按钮
/* 危险-danger */
--tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
--tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030 #f23030 危险hover文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-danger-text-active: var(--tv-base-color-error-6); // #f23030 #f23030 危险active文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-danger-text-white: var(--tv-base-color-common-1); // #fff 危险文本色-2（白色）：基本按钮
--tv-color-act-danger-text-white-hover: var(--tv-base-color-common-1); // #fff 危险hover文本色-2（白色） 基本按钮
--tv-color-act-danger-text-white-active: var(--tv-base-color-common-1); // #fff 危险active文本色-2（白色） 基本按钮
--tv-color-act-danger-plain-text-hover: var(--tv-base-color-error-6); // #f23030 朴素按钮
--tv-color-act-danger-bg: var(--tv-base-color-error-6); // #f23030 #f23030 危险背景色-1（成功主色）：基本按钮
--tv-color-act-danger-bg-hover: var(--tv-base-color-error-5); // #f76360 危险hover背景色-1 基本按钮
--tv-color-act-danger-bg-active: var(--tv-base-color-error-5); // #f76360 危险active背景色-1 基本按钮
--tv-color-act-danger-bg-light: var(--tv-base-color-error-1); // #fff1f0 危险背景色-2（成功主色衍生色）：朴素按钮
--tv-color-act-danger-bg-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover背景色-1 朴素按钮
--tv-color-act-danger-bg-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active背景色-1 朴素按钮
--tv-color-act-danger-border: var(--tv-base-color-error-6); // #f23030 #f23030 危险边框色-1：基本按钮/幽灵按钮
--tv-color-act-danger-border-hover: var(--tv-base-color-error-5); // #f76360 危险hover边框色-1.1 基本按钮
--tv-color-act-danger-border-active: var(--tv-base-color-error-5); // #f76360 危险active边框色-1.1 基本按钮
--tv-color-act-danger-border-hover-1: var(--tv-base-color-error-2); // #fce2e0 危险hover边框色-1.2 幽灵按钮
--tv-color-act-danger-border-active-1: var(--tv-base-color-error-2); // #fce2e0 危险active边框色-1.2 幽灵按钮
--tv-color-act-danger-border-light: var(--tv-base-color-error-2); // #fce2e0 危险边框色-2: 朴素按钮
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover边框色 朴素按钮
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active边框色 朴素按钮
/* 信息-info */
--tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
--tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-info-text-active: var(--tv-base-color-info-6); // #1476ff 信息active文本色-1 朴素/幽灵/纯文本/链接
--tv-color-act-info-text-white: var(--tv-base-color-common-1); // #fff 信息文本色-2（白色）：基本按钮
--tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // #fff 信息hover文本色-2（白色） 基本按钮
--tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // #fff 信息active文本色-2（白色） 基本按钮
--tv-color-act-info-plain-text-hover: var(--tv-base-color-info-6); // #1476ff 朴素按钮
--tv-color-act-info-bg: var(--tv-base-color-info-6); // #1476ff 信息背景色-1（信息主色）：基本按钮
--tv-color-act-info-bg-hover: var(--tv-base-color-info-5); // #4191fa 信息hover背景色-1 基本按钮
--tv-color-act-info-bg-active: var(--tv-base-color-info-5); // #4191fa 信息active背景色-1 基本按钮
--tv-color-act-info-bg-light: var(--tv-base-color-info-1); // #f0f7ff 信息背景色-1（信息主色衍生色）：朴素按钮
--tv-color-act-info-bg-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover背景色-1 朴素按钮
--tv-color-act-info-bg-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active背景色-1 朴素按钮
--tv-color-act-info-border: var(--tv-base-color-info-6); // #1476ff 信息边框色-1：基本按钮/幽灵按钮
--tv-color-act-info-border-hover: var(--tv-base-color-info-5); // #4191fa 信息hover边框色-1.1 基本按钮
--tv-color-act-info-border-active: var(--tv-base-color-info-5); // #4191fa 信息active边框色-1.1 基本按钮
--tv-color-act-info-border-hover-1: var(--tv-base-color-info-2); // #deecff 信息hover边框色-1.2：幽灵按钮
--tv-color-act-info-border-active-1: var(--tv-base-color-info-2); // #deecff 信息active边框色-1.2 幽灵按钮
--tv-color-act-info-border-light: var(--tv-base-color-info-2); // #deecff 信息边框色-2：朴素按钮
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色 朴素按钮
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色 朴素按钮
/** 2.4 文本色 **/
--tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色:重要信息/标题颜色/输入类文本颜色/导航栏文字图标/顶部导航/一级tab/tip场景文本色
--tv-color-text-secondary: var(--tv-base-color-common-9); // #595959 二级文本色-次要信息：卡片式tab页签文本色（深色tab)
--tv-color-text-weaken: var(--tv-base-color-common-8); // #808080 三级文本色-弱化信息、说明文字
--tv-color-text-placeholder: var(--tv-base-color-common-8); // #808080 占位文本色
--tv-color-text-disabled: var(--tv-base-color-common-7); // #c2c2c2 禁用文本色
--tv-color-text-active: var(--tv-base-color-brand-6); // #1476ff 选中文本色 / 文本高亮色（搜索关键字高亮）
--tv-color-text-important: var(--tv-base-color-common-11); // #191919 重要文本色-文本_金额
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
--tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色
--tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919 朴素次要按钮文本悬浮色
// -- 暗色新增 --
--tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮
--tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
--tv-color-text-inverse-black: var(--tv-base-color-common-11); // #191919 tooltip的light文字
--tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色
--tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff tree选中文本色
--tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色
--tv-color-text-inverse-active: var(--tv-base-color-common-1); // #fff buttonGrounp激活色
--tv-color-text-hover: var(--tv-base-color-common-11); // #191919 片式tab页签悬浮文本色/深色背景卡片式链接悬浮色
--tv-color-text-link-1: var(--tv-base-color-common-11); // #191919 面包屑/主要链接
--tv-color-text-link-1-hover: var(--tv-base-color-common-11); // #191919 面包屑/主要链接悬浮色
/** 2.5 图标色 **/
--tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
--tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色 级联/下拉多级选中图标色
--tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2 图标禁用色
--tv-color-icon-checked-disabled: var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
--tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
// -- 暗色新增 --
--tv-color-icon-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
--tv-color-icon-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：按钮下拉线头
/** 2.6 背景色 **/
/* 2.6.1 常态 */
--tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色/下拉搜索的背景、折叠面板背景色/滑块背景色
--tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色/穿梭框头部背景
--tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
--tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2：灰色标签背景色/进度条灰色背景
--tv-color-bg-header: var(--tv-base-color-common-3); // #f5f5f5 表头背景色
--tv-color-bg-mask: rgba(0, 0, 0, 20%); // 全局加载蒙层/抽屉弹窗蒙层
--tv-color-bg-mask-block: rgba(255, 255, 255, 70%); // 模块加载蒙层
--tv-color-bg-dark: var(--tv-base-color-brand); // #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色
/* 2.6.2 禁用 */
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
--tv-color-bg-disabled-control-checked: var(--tv-base-color-common-6); // #dbdbdb 控件选中状态下的禁用背景色:选块已选禁用
--tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-6); // #dbdbdb 深色背景禁用色:开关组件“关”禁用背景色
--tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); // #b3d6ff 深色背景禁用色，单、复选框禁用背景色/开关组件“开”禁用背景色
/* 2.6.3 悬浮 */
--tv-color-bg-hover: var(--tv-base-color-common-3); // #f5f5f5 浅背景-悬浮色 一级tab页签背景-悬浮色 /分页hover背景颜色/表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-hover-primary: var(--tv-base-color-common-9); // #595959 主色背景悬浮：step悬浮
--tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色:次要按钮
--tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff 选块悬浮态背景色
--tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
--tv-color-bg-hover-dark: var(--tv-base-color-common-11); // #191919 深色背景悬浮色
/* 2.6.4 active/选中 */
--tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色
--tv-color-bg-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中背景色、开关“开”的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
--tv-color-bg-active-primary: var(--tv-base-color-brand); // #191919 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
--tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
--tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
--tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
--tv-color-bg-active-dark: var(--tv-base-color-common-3); // #f5f5f5 深色背景悬浮色
// -- 暗色新增 --
--tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip背景色
--tv-color-bg-3: var(--tv-base-color-common-1); // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/modal,dialogbox背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
--tv-color-bg-4: var(--tv-base-color-common-7); // #c2c2c2 时间线实心圆点
--tv-color-bg-progressbar: var(--tv-base-color-success-6); // #5cb300 step当前进度背景色 （考虑去掉，成功主色替代）
--tv-color-bg-active-emphasize-1: var(--tv-base-color-common-1); // #fff 下拉选中背景色、tab二级选中背景色
--tv-color-bg-container-hover: var(--tv-base-color-common-1); // #fff 卡片选中悬浮背景色（区块背景）
--tv-color-bg-hover-3: var(--tv-base-color-brand-2); // #deecff 日期悬浮
--tv-color-bg-hover-4: var(--tv-base-color-common-1); // #ffffff 表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-active-primary-1: var(--tv-base-color-common-9); // #595959 主要按钮悬浮
--tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色
--tv-color-bg-active-control-1: var(--tv-base-color-common-6); // #dbdbdb radio 选中禁用色
--tv-color-bg-5: var(--tv-base-color-common-5); // #e6e6e6 轮播指示器背景色
--tv-color-bg-5-active: var(--tv-base-color-common-9); // #595959 轮播指示器激活背景色
--tv-color-bg-inverse-tint-1: var(--tv-base-color-common-1); // #fff 图片工具栏背景色
--tv-color-bg-disabled-control: var(--tv-base-color-common-7); // #c2c2c2 滑块高亮部分禁用色
--tv-color-bg-inverse-disabled: var(--tv-base-color-common-1); // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999）
/** 2.7 边框色/分割线颜色 **/
/* 2.7.1 边框 */
--tv-color-border: var(--tv-base-color-common-7); // #c2c2c2 线条-正常色
--tv-color-border-hover: var(--tv-base-color-brand); // #191919 线条悬浮色
--tv-color-border-active: var(--tv-base-color-brand); // #191919 线条active色
--tv-color-border-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中的边框色
--tv-color-border-disabled: var(--tv-base-color-common-6); // #dbdbdb 线条禁用色
--tv-color-border-secondary: var(--tv-base-color-common-9); // #595959 线条-次要色：次要按钮边框默认色
--tv-color-border-ghost: var(--tv-base-color-common-8); // #808080
--tv-color-border-ghost-active: var(--tv-base-color-common-6); // #dbdbdb
/* 2.7.2 分割线 */
--tv-color-border-divider: var(--tv-base-color-common-4); // #f0f0f0 分割线1（较长分割线场景）
--tv-color-border-divider-short: var(--tv-base-color-common-6); // #dbdbdb 分割线2（较短分割线场景）
// -- 暗色新增 --
--tv-color-border-secondary-hover: var(--tv-base-color-common-7); // #c2c2c2 次要按钮边框悬浮色
--tv-color-border-container: var(--tv-base-color-common-4); // #f0f0f0 卡片选择默认边框
--tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框
--tv-color-border-container-active: var(--tv-base-color-brand-6); // #1476ff 卡片选择选中边框
--tv-color-border-inverse-tint: var(--tv-base-color-common-1); // #fff tag边框
--tv-color-border-1: var(--tv-base-color-common-6); // #dbdbdb 滑块圆圈描边
/** 3. 字体变量 **/
/* 3.1 字体家族 -- 【组件内不要指定】 */
--tv-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; // 默认中文
--tv-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文
/* 3.2 字号 */
--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-font-size-default: var(--tv-font-size-md);
--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 行高 */
--tv-line-height-number: 1.5;
/* 3.4 字重 */
--tv-font-weight-thin: 200;
--tv-font-weight-regular: 400; // 默认值：nomal
--tv-font-weight-bold: 600;
/** 4. 圆角变量 **/
--tv-border-radius-xs: 2px;
--tv-border-radius-sm: 4px;
--tv-border-radius-md: 6px; // 默认
--tv-border-radius-lg: 8px;
--tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。
--tv-border-radius-brand: var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景
/** 5. 边框 **/
--tv-border-width: 1px;
/** 6. 间距变量 space ----margin、padding、top、 left 、 right、bottom **/
--tv-space-base: 4px;
--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);
--tv-space-xxl: calc(var(--tv-space-base) * 6); // 内容块之间的间距
--tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
--tv-space-table-x: 4px; // 表格单元格水平间距基准
--tv-space-table-y: 4px; // 表格单元格垂直间距基准
/** 7. 尺寸变量 size **/
/** 尺寸系数 calc */
--tv-size-base: 4px;
/** 7.1 表单类组件的 height */
--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 尺寸
/** 7.2 图标大小 width, height **/
--tv-icon-size: 16px;
/** 8. 阴影变量 box-shadow **/
--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-shadow-cell-left: -5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影
--tv-shadow-cell-right: 5px 0 5px 0 rgba(0, 0, 0, 0.10); // 表格固定列阴影
--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-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-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-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);
/** 9. 滚动条变量 **/
--tv-size-scrollbar-width: 8px; // 滚动条宽度
--tv-size-scrollbar-height: 8px; // 滚动条高度
--tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角
--tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // #dbdbdb 滑块背景色
--tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
--tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
--tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色
}
Reference in New Issue View Git Blame Copy Permalink