Skip to content

Commit ecc4f7d

Browse files
shenjunjianshenjunjian
authored
Manually replace the variable values in basic-vars.less and smb-theme.js. (#2102)
* fix(theme-swap): swap vars * fix(theme): fix * fix(theme): fix
1 parent 8b79fd2 commit ecc4f7d

File tree

293 files changed

+4299
-3603
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

293 files changed

+4299
-3603
lines changed

‎internals/automate/src/theme-swap/index.ts

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const kebab = (name: string) =>
2020
.map((n) => n[0].toUpperCase() + n.slice(1))
2121
.join('')
2222

23-
// vars.less的所有文件夹， 类似 [ 'action-menu/vars.less', 'alert/vars.less',.........]
23+
// 1、vars.less的所有文件夹， 类似 [ 'action-menu/vars.less', 'alert/vars.less',.........]
2424
fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
2525
.map((file) => file.split('/')[0]) // 取出组件名
2626
.filter((name) => fs.existsSync($smb(name))) // 过滤掉不存在在 smb-theme.js的
@@ -41,6 +41,14 @@ fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
4141
exceptions.push({ name, reason: '替换组件变量，写入2个文件时出错！' + error.toString() })
4242
}
4343
})
44+
45+
// 2、 替换 base/basic-var.less 与 theme/smb-theme/index.js 中的变量
46+
// const varsFile = fs.readFileSync(path.join(srcFold, 'base/basic-var.less'), 'utf8')
47+
// const smbThemeJsObj = await import('file://' + path.join(srcFold, 'theme/smb-theme/index.js'))
48+
// const smbJs = Object.values(smbThemeJsObj)[0]
49+
50+
// processComponent('base', varsFile, smbJs, true)
51+
4452
console.log('/////执行完毕/////')
4553
console.table(exceptions)
4654

@@ -53,7 +61,7 @@ interface QueryInfo {
5361
varsLost: boolean
5462
}
5563
// 处理一个组件的交换
56-
function processComponent(name: string, varsFile: string, smbJs: any) {
64+
function processComponent(name: string, varsFile: string, smbJs: any, isBase = false) {
5765
const smbKeys = Object.keys(smbJs)
5866
// 记录所有替换信息
5967
const result: QueryInfo[] = []
@@ -65,7 +73,7 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
6573

6674
if (start === -1) {
6775
info.varsLost = true
68-
exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到' })
76+
exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到:' + key })
6977
return
7078
}
7179

@@ -83,16 +91,27 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
8391
const end = varsFile.substring(info.varsEnd)
8492
varsFile = `${start} ${info.smbValue}${end}`
8593
})
86-
fs.writeFileSync($vars(name), varsFile)
94+
95+
fs.writeFileSync(isBase ? path.join(srcFold, 'base/basic-var.less') : $vars(name), varsFile)
8796

8897
// 3、 根据result, 生成old-theme.js
8998
const oldObj = result.reduce((pre, curr) => {
9099
pre[curr.key] = curr.varsValue
91100
return pre
92101
}, {})
93102

94-
fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
103+
if (!isBase) {
104+
fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
105+
} else {
106+
// old-theme.js 似乎不太能用
107+
fs.writeFileSync(
108+
path.join(srcFold, 'base/old-theme.js'),
109+
`export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`
110+
)
111+
}
95112

96113
// 4、 删除smb-theme.js
97-
fs.rmSync($smb(name))
114+
if (!isBase) {
115+
fs.rmSync($smb(name))
116+
}
98117
}

‎packages/theme/src/action-menu/old-theme.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const tinyActionMenuOldTheme = {
2+
'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
3+
'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-link, #526ecc)',
4+
'ti-action-menu-item-svg-margin-top': 'var(--ti-common-space-0, 0px)',
5+
'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
6+
'ti-action-menu-item-line-width': 'var(--ti-common-space-1)',
7+
'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
8+
'ti-action-menu-more-icon-height': '1em',
9+
'ti-action-menu-more-icon-width': '1em',
10+
'ti-action-menu-hover-text-decoratio': 'none',
11+
'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)'
12+
}

‎packages/theme/src/action-menu/smb-theme.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/theme/src/action-menu/vars.less

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
// 按钮文本字重
1515
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
1616
// 按钮文本装饰
17-
--ti-action-menu-hover-text-decoratio: none;
17+
--ti-action-menu-hover-text-decoratio: underline;
1818
// 更多...图标的宽度
19-
--ti-action-menu-more-icon-width: 1em;
19+
--ti-action-menu-more-icon-width: var(--ti-common-size-4x);
2020
// 更多...图标的高度
21-
--ti-action-menu-more-icon-height: 1em;
21+
--ti-action-menu-more-icon-height: var(--ti-common-size-4x);
2222
// 更多...图标的右边外边距
2323
--ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
2424
// 下拉触发源文本颜色
@@ -28,13 +28,13 @@
2828
// 下拉触发源文本字号
2929
--ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
3030
// 分割线颜色
31-
--ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
31+
--ti-action-menu-item-line-bg-color: var(--ti-common-color-transparent);
3232
// 分割线宽度
33-
--ti-action-menu-item-line-width: var(--ti-common-space-1);
33+
--ti-action-menu-item-line-width: var(--ti-common-space-0);
3434
// 下拉菜单项悬浮背景色
3535
--ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
3636
// 下拉菜单项文本悬浮色
37-
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
37+
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
3838
// 下拉菜单项图标悬浮色
3939
--ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
4040
// 下拉菜单项顶部内边距
@@ -46,15 +46,15 @@
4646
// 下拉菜单项右侧内边距
4747
--ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
4848
// 下拉菜单项图标顶部内边距
49-
--ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px);
49+
--ti-action-menu-item-svg-margin-top: 0;
5050
// 下拉菜单项图标右侧内边距
5151
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
5252
// 下拉菜单项图标底部部内边距
5353
--ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0, 0px);
5454
// 下拉菜单项图标左侧内边距
5555
--ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
5656
// 下拉菜单卡片模式字体颜色
57-
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-link, #526ecc);
57+
--ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary);
5858
// 下拉菜单卡片模式字体颜色
59-
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
59+
--ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary);
6060
}

‎packages/theme/src/alert/old-theme.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export const tinyAlertOldTheme = {
2+
'ti-alert-title-margin-top': 'var(--ti-common-space-0)',
3+
'ti-alert-info-close-hover-icon-color': 'var(--ti-alert-info-icon-color)',
4+
'ti-alert-info-close-icon-color': 'var(--ti-alert-info-icon-color)',
5+
'ti-alert-success-close-hover-icon-color': 'var(--ti-alert-success-icon-color)',
6+
'ti-alert-success-close-icon-color': 'var(--ti-alert-success-icon-color)',
7+
'ti-alert-error-close-hover-icon-color': 'var(--ti-alert-error-icon-color)',
8+
'ti-alert-error-close-icon-color': 'var(--ti-alert-error-icon-color)',
9+
'ti-alert-warning-close-hover-icon-color': 'var(--ti-alert-warning-icon-color)',
10+
'ti-alert-warning-close-icon-color': 'var(--ti-alert-warning-icon-color)',
11+
'ti-alert-large-content-padding-left': 'var(--ti-common-space-4x, 16px)',
12+
'ti-alert-large-icon-margin-top': 'calc(var(--ti-common-space-base, 4px) - 2px)',
13+
'ti-alert-large-padding-right': 'calc(var(--ti-common-space-base, 4px) * 10.5)',
14+
'ti-alert-large-padding-bottom': 'var(--ti-common-space-3x, 12px)',
15+
'ti-alert-large-padding-top': 'calc(var(--ti-common-space-base, 4px) * 3.5)',
16+
'ti-alert-normal-margin-vertical': 'var(--ti-common-space-2x, 8px)',
17+
'ti-alert-normal-padding-bottom': 'var(--ti-common-space-3x, 12px)',
18+
'ti-alert-normal-padding-right': 'var(--ti-common-space-4x, 16px)',
19+
'ti-alert-normal-padding-top': 'var(--ti-common-space-3x, 12px)',
20+
'ti-alert-description-margin-bottom': 'var(--ti-common-space-base, 4px)',
21+
'ti-alert-description-margin-top': 'var(--ti-common-space-base, 4px)',
22+
'ti-alert-icon-margin-top': 'var(--ti-common-space-1, 1px)',
23+
'ti-alert-title-font-size': 'var(--ti-common-font-size-1, 14px)',
24+
'ti-alert-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
25+
'ti-alert-close-font-size': 'var(--ti-common-font-size-base, 12px)',
26+
'ti-alert-close-position-top': 'var(--ti-common-space-4x, 16px)',
27+
'ti-alert-border-weight': 'var(--ti-common-border-weight-normal, 1px)'
28+
}

‎packages/theme/src/alert/smb-theme.js

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎packages/theme/src/alert/vars.less

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@
2323
'Microsoft JhengHei'
2424
);
2525
// 边框厚度(new)
26-
--ti-alert-border-weight: var(--ti-common-border-weight-normal, 1px);
26+
--ti-alert-border-weight: var(--ti-common-size-0);
2727
// 描述字号
2828
--ti-alert-description-font-size: var(--ti-common-font-size-base, 12px);
2929
// 默认关闭图标固定定位顶部距离(hide)
30-
--ti-alert-close-position-top: var(--ti-common-space-4x, 16px);
30+
--ti-alert-close-position-top: var(--ti-common-space-3x);
3131
// 默认关闭图标字号
32-
--ti-alert-close-font-size: var(--ti-common-font-size-base, 12px);
32+
--ti-alert-close-font-size: var(--ti-common-font-size-2);
3333
// 自定义关闭文字字号
3434
--ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px);
3535
// 组件圆角
36-
--ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
36+
--ti-alert-border-radius: var(--ti-common-border-radius-4);
3737
// 标题文本色
3838
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
3939
// success类型标题文本色
@@ -47,9 +47,9 @@
4747
// simple类型标题文本色
4848
--ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
4949
// 标题字号
50-
--ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
50+
--ti-alert-title-font-size: var(--ti-common-font-size-2);
5151
// 标题图标顶部外边距
52-
--ti-alert-icon-margin-top: var(--ti-common-space-1, 1px);
52+
--ti-alert-icon-margin-top: calc(var(--ti-common-space-6) / 2);
5353
// 标题图标字号
5454
--ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
5555
// 描述内容行高
@@ -59,41 +59,41 @@
5959
// 描述内容水平内边距
6060
--ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
6161
// 描述内容提示内容顶部外边距
62-
--ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
62+
--ti-alert-description-margin-top: var(--ti-common-space-base);
6363
// 描述内容提示内容底部外边距
64-
--ti-alert-description-margin-bottom: var(--ti-common-space-base, 4px);
64+
--ti-alert-description-margin-bottom: var(--ti-common-space-0);
6565
// 描述默认文本色
6666
--ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
6767
// 默认顶部内边距
68-
--ti-alert-normal-padding-top: var(--ti-common-space-3x, 12px);
68+
--ti-alert-normal-padding-top: calc(var(--ti-common-space-2x) + 1.5px);
6969
// 默认右内边距
70-
--ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
70+
--ti-alert-normal-padding-right: var(--ti-common-space-4x);
7171
// 默认底部内边距
72-
--ti-alert-normal-padding-bottom: var(--ti-common-space-3x, 12px);
72+
--ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x) + 1.5px);
7373
// 默认左内边距
7474
--ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
7575
// 默认垂直外边距
76-
--ti-alert-normal-margin-vertical: var(--ti-common-space-2x, 8px);
76+
--ti-alert-normal-margin-vertical: var(--ti-common-space-4x);
7777
// 默认水平外边距
7878
--ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
7979
// large尺寸顶部内边距
80-
--ti-alert-large-padding-top: calc(var(--ti-common-space-base, 4px) * 3.5);
80+
--ti-alert-large-padding-top: var(--ti-common-space-4x);
8181
// large尺寸底部内边距
82-
--ti-alert-large-padding-bottom: var(--ti-common-space-3x, 12px);
82+
--ti-alert-large-padding-bottom: var(--ti-common-space-4x);
8383
// large尺寸左内边距
8484
--ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
8585
// large尺寸右内边距
86-
--ti-alert-large-padding-right: calc(var(--ti-common-space-base, 4px) * 10.5);
86+
--ti-alert-large-padding-right: var(--ti-common-space-4x);
8787
// large尺寸操作文本色
8888
--ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc);
8989
// large尺寸操作字号
9090
--ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px);
9191
// large尺寸图标字号
9292
--ti-alert-large-icon-font-size: var(--ti-common-font-size-5, 24px);
9393
// large尺寸图标顶部外边距
94-
--ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base, 4px) - 2px);
94+
--ti-alert-large-icon-margin-top: var(--ti-common-space-0);
9595
// large尺寸描述内容左内边距
96-
--ti-alert-large-content-padding-left: var(--ti-common-space-4x, 16px);
96+
--ti-alert-large-content-padding-left: var(--ti-common-space-2x);
9797
// 大尺寸关闭图标字号
9898
--ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
9999

@@ -106,9 +106,9 @@
106106
// warning类型背景色
107107
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
108108
// warning类型关闭图标色
109-
--ti-alert-warning-close-icon-color: var(--ti-alert-warning-icon-color);
109+
--ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken);
110110
// warning类型悬浮关闭图标色
111-
--ti-alert-warning-close-hover-icon-color: var(--ti-alert-warning-icon-color);
111+
--ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
112112
// error类型边框色
113113
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
114114
// error类型图标色
@@ -118,9 +118,9 @@
118118
// error类型背景色
119119
--ti-alert-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
120120
// error类型关闭图标色
121-
--ti-alert-error-close-icon-color: var(--ti-alert-error-icon-color);
121+
--ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken);
122122
// error类型悬浮关闭图标色
123-
--ti-alert-error-close-hover-icon-color: var(--ti-alert-error-icon-color);
123+
--ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
124124
// success类型边框色
125125
--ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc);
126126
// success类型图标色
@@ -130,9 +130,9 @@
130130
// success类型背景色
131131
--ti-alert-success-bg-color: var(--ti-common-color-success-bg, #edfff9);
132132
// success类型关闭图标色
133-
--ti-alert-success-close-icon-color: var(--ti-alert-success-icon-color);
133+
--ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken);
134134
// success类型悬浮关闭图标色
135-
--ti-alert-success-close-hover-icon-color: var(--ti-alert-success-icon-color);
135+
--ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
136136

137137
// info类型边框色
138138
--ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa);
@@ -143,9 +143,9 @@
143143
// info类型背景色
144144
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
145145
// info类型关闭图标色
146-
--ti-alert-info-close-icon-color: var(--ti-alert-info-icon-color);
146+
--ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken);
147147
// info类型悬浮关闭图标色
148-
--ti-alert-info-close-hover-icon-color: var(--ti-alert-info-icon-color);
148+
--ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
149149

150150
// simple类型边框色
151151
--ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
@@ -160,5 +160,5 @@
160160
// simple类型悬浮关闭图标色
161161
--ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
162162
// 标题的上边距
163-
--ti-alert-title-margin-top: var(--ti-common-space-0);
163+
--ti-alert-title-margin-top: var(--ti-common-size-base);
164164
}

‎packages/theme/src/anchor/old-theme.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const tinyAnchorOldTheme = {
2+
'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)',
3+
'ti-anchor-line-opacity': '0.08',
4+
'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
5+
'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
6+
'ti-anchor-width': "'auto'"
7+
}

‎packages/theme/src/anchor/smb-theme.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)