diff --git a/packages/theme/build/buildVarToObj.js b/packages/theme/build/buildVarToObj.js new file mode 100644 index 000000000..86730f6d1 --- /dev/null +++ b/packages/theme/build/buildVarToObj.js @@ -0,0 +1,13 @@ +import fs from 'node:fs' + +export default () => { + let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'}) + + varsString = varsString.replace(':root', 'export const mapVar =') + .replaceAll(' --tv', ' "--tv') + .replaceAll(': ', ':') + .replaceAll(':', '": "') + .replaceAll(';', '",') + + fs.writeFileSync('./mapVar.js', varsString) +} diff --git a/packages/theme/build/gulp-dist.js b/packages/theme/build/gulp-dist.js index cc4afc13e..266225a64 100644 --- a/packages/theme/build/gulp-dist.js +++ b/packages/theme/build/gulp-dist.js @@ -9,6 +9,11 @@ import svgInline from 'gulp-svg-inline' import prefixer from 'gulp-autoprefixer' import fg from 'fast-glob' import fs from 'node:fs' +import buildVarToObj from './buildVarToObj.js' +import writeDefaultValue from './writeDefaultValue.js' + +buildVarToObj() +writeDefaultValue() const source = '../src' const dist = '../dist' diff --git a/packages/theme/build/mapVar.js b/packages/theme/build/mapVar.js new file mode 100644 index 000000000..acae3a97d --- /dev/null +++ b/packages/theme/build/mapVar.js @@ -0,0 +1,518 @@ +/* prettier-ignore */ +export const mapVar = { + /* 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-text-white": "var(--tv-base-color-common-1)", // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge + "--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-white": "var(--tv-base-color-common-1)", // #fff 常规背景色（非主题色） 确认是否去掉？ + "--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-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-text-white": "var(--tv-base-color-common-1)", // #fff 深彩色背景文本色： tag的dark类型/tooltip/badge + "--tv-color-error-bg": "var(--tv-base-color-error-6)", // #f23030 #f23030 错误-背景色(深) tag的dark类型/tooltip/badge + "--tv-color-error-bg-light": "var(--tv-base-color-error-13)", // #fce3e1 错误-背景色(浅)": "错误校验背景色/alert/tag的light类型 + "--tv-color-error-bg-white": "var(--tv-base-color-common-1)", // #fff 常规背景色（非主题色） + "--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-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-text-white": "var(--tv-base-color-common-1)", // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge + "--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-white": "var(--tv-base-color-common-1)", // #fff 常规背景色（非主题色） + "--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-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-white": "var(--tv-base-color-common-1)", // #fff 深彩色背景文本色：tag的dark类型/tooltip/badge + "--tv-color-info-bg": "var(--tv-base-color-info-6)", // #1476ff 信息-背景色(深) alert/tag的light类型 + "--tv-color-info-bg-light": "var(--tv-base-color-info-2)", // #deecff 信息-背景色(浅) alert/tag的light类型 + "--tv-color-info-bg-white": "var(--tv-base-color-common-1)", // #fff 常规背景色（非主题色） + "--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-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 轨道背景色 +} diff --git a/packages/theme/build/writeDefaultValue.js b/packages/theme/build/writeDefaultValue.js new file mode 100644 index 000000000..be98dffee --- /dev/null +++ b/packages/theme/build/writeDefaultValue.js @@ -0,0 +1,85 @@ +import fs from 'node:fs' +import { mapVar } from './mapVar.js' + +const originFilePath = 'vars.less' +const originRootPath = '../src/' + +export default () => { + + // 写入文件 + const writeFile = (filePath, data) => { + fs.writeFileSync(filePath, data) + } + + const findTrueValue = (defaultValue) => { + if (defaultValue.includes('var(')) { + let subVar = defaultValue.replace(/var\((\S+)\)/g, (subOldVar, subBaseVar) => { + let subDefaultValue = mapVar[subBaseVar] + if (!subDefaultValue) { + return subOldVar + } + + return findTrueValue(subDefaultValue) + }) + + if (subVar.includes('calc(')) { + subVar = subVar.replace('calc(', '').replace(')', '').replace('px', '') + subVar = eval(subVar) + 'px' + } + + return subVar + } + return defaultValue + } + + // 读取文件 + const readFile = (fileDir) => { + const varsPath = `${originRootPath}/${fileDir}/${originFilePath}` + + const dataStr = fs.readFileSync(varsPath, {encoding: 'utf-8'}) + + const newDataStr = dataStr.replace(/var\(([\w\-]+\s?\w*)\)/g, (oldVar, baseVar1, numLine) => { + const baseVar = baseVar1.split(',')[0] + let defaultValue = mapVar[baseVar] + if (!defaultValue) { + return oldVar + } + + defaultValue = findTrueValue(defaultValue) + const newVar = oldVar.replace(baseVar1, `${baseVar}, ${defaultValue}`) + return newVar + }) + writeFile(varsPath, newDataStr) + } + + // 判断某目录下某文件是否存在 + const isFileExist = (fileDir) => { + const path = `${originRootPath}/${fileDir}/${originFilePath}` + const exist = fs.existsSync(path) + if (exist) { + readFile(fileDir) + } + } + + // 判断是文件还是目录 + const mkStat = (fileDir) => { + if(fileDir === 'base') { + return + } + const statPath = `${originRootPath}/${fileDir}` + const data = fs.statSync(statPath) + // 如果是目录 + // 则判断是否存在某文件 + if (data.isDirectory()) { + isFileExist(fileDir) + } + } + + // 读取目录 + const data = fs.readdirSync(originRootPath) + data.forEach((fileDir) => { + mkStat(fileDir) + }) + +} +