Skip to content

chore(theme): update theme variables and automatically generated files #3194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 26, 2025
Merged

chore(theme): update theme variables and automatically generated files #3194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/modules.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2819,6 +2819,7 @@
"type": "component",
"exclude": false,
"mode": [
"mobile-first",
"pc"
]
},
Expand Down Expand Up @@ -2893,6 +2894,11 @@
"type": "template",
"exclude": false
},
"UserMobileFirst": {
"path": "vue/src/user/src/mobile-first.vue",
"type": "template",
"exclude": false
},
"UserPc": {
"path": "vue/src/user/src/pc.vue",
"type": "template",
Expand Down
1 change: 1 addition & 0 deletions packages/theme-saas/src/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@
@import './popeditor/index.less';
@import './poplist/index.less';
@import './popover/index.less';
@import './popup/index.less';
@import './progress/index.less';
@import './qr-code/index.less';
@import './quarter-panel/index.less';
Expand Down
23 changes: 12 additions & 11 deletions packages/theme/build/mapVar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,42 +98,43 @@ export const mapVar = {
/** 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-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-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-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-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-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-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-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-white': 'var(--tv-base-color-common-1)', // #fff 深彩色背景文本色：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-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-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 文字链接 **/
Expand Down Expand Up @@ -298,7 +299,7 @@ export const mapVar = {
'--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-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页签激活色
Expand Down Expand Up @@ -472,8 +473,8 @@ export const mapVar = {
/** 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-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)', // 页面卡片、滑块、顶部导航
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/build/release.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default {
cssStr = fs.readFileSync(path.resolve(root, 'dist/dark-theme-index.css'), 'utf8')

// 2.3、把 :root.dark 替换为 :root
cssStr = cssStr.replace(':root.dark', ':root')
cssStr = cssStr.replace(':root.dark', ':root').replace(':host.dark', ':host')

jsStr = jsStr.replace('#CSS#', cssStr)
fs.writeFileSync(path.resolve(root, 'src/dark-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
Expand Down
Loading
Loading