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

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

@@ -20,7 +20,7 @@ const kebab = (name: string) =>
     .map((n) => n[0].toUpperCase() + n.slice(1))
     .join('')
 
-// vars.less的所有文件夹， 类似  [ 'action-menu/vars.less',  'alert/vars.less',.........]
+// 1、vars.less的所有文件夹， 类似  [ 'action-menu/vars.less',  'alert/vars.less',.........]
 fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
   .map((file) => file.split('/')[0]) // 取出组件名
   .filter((name) => fs.existsSync($smb(name))) // 过滤掉不存在在 smb-theme.js的
@@ -41,6 +41,14 @@ fg.sync(['**/vars.less'], { cwd: srcFold, ignore: ignoreFolds })
       exceptions.push({ name, reason: '替换组件变量，写入2个文件时出错！' + error.toString() })
     }
   })
+
+// 2、 替换 base/basic-var.less 与 theme/smb-theme/index.js 中的变量
+// const varsFile = fs.readFileSync(path.join(srcFold, 'base/basic-var.less'), 'utf8')
+// const smbThemeJsObj = await import('file://' + path.join(srcFold, 'theme/smb-theme/index.js'))
+// const smbJs = Object.values(smbThemeJsObj)[0]
+
+// processComponent('base', varsFile, smbJs, true)
+
 console.log('/////执行完毕/////')
 console.table(exceptions)
 
@@ -53,7 +61,7 @@ interface QueryInfo {
   varsLost: boolean
 }
 // 处理一个组件的交换
-function processComponent(name: string, varsFile: string, smbJs: any) {
+function processComponent(name: string, varsFile: string, smbJs: any, isBase = false) {
   const smbKeys = Object.keys(smbJs)
   // 记录所有替换信息
   const result: QueryInfo[] = []
@@ -65,7 +73,7 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
 
     if (start === -1) {
       info.varsLost = true
-      exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到' })
+      exceptions.push({ name, reason: 'smb-theme中定义的变量错误， vars.less中找不到:' + key })
       return
     }
 
@@ -83,16 +91,27 @@ function processComponent(name: string, varsFile: string, smbJs: any) {
     const end = varsFile.substring(info.varsEnd)
     varsFile = `${start} ${info.smbValue}${end}`
   })
-  fs.writeFileSync($vars(name), varsFile)
+
+  fs.writeFileSync(isBase ? path.join(srcFold, 'base/basic-var.less') : $vars(name), varsFile)
 
   // 3、 根据result, 生成old-theme.js
   const oldObj = result.reduce((pre, curr) => {
     pre[curr.key] = curr.varsValue
     return pre
   }, {})
 
-  fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
+  if (!isBase) {
+    fs.writeFileSync($old(name), `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`)
+  } else {
+    // old-theme.js 似乎不太能用
+    fs.writeFileSync(
+      path.join(srcFold, 'base/old-theme.js'),
+      `export const tiny${kebab(name)}OldTheme = ${JSON.stringify(oldObj, null, 2)}`
+    )
+  }
 
   // 4、 删除smb-theme.js
-  fs.rmSync($smb(name))
+  if (!isBase) {
+    fs.rmSync($smb(name))
+  }
 }

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

@@ -0,0 +1,12 @@
+export const tinyActionMenuOldTheme = {
+  'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
+  'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-link, #526ecc)',
+  'ti-action-menu-item-svg-margin-top': 'var(--ti-common-space-0, 0px)',
+  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover, #344899)',
+  'ti-action-menu-item-line-width': 'var(--ti-common-space-1)',
+  'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-line-dividing, #dfe1e6)',
+  'ti-action-menu-more-icon-height': '1em',
+  'ti-action-menu-more-icon-width': '1em',
+  'ti-action-menu-hover-text-decoratio': 'none',
+  'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)'
+}

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

@@ -14,11 +14,11 @@
   // 按钮文本字重
   --ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
   // 按钮文本装饰
-  --ti-action-menu-hover-text-decoratio: none;
+  --ti-action-menu-hover-text-decoratio: underline;
   // 更多...图标的宽度
-  --ti-action-menu-more-icon-width: 1em;
+  --ti-action-menu-more-icon-width: var(--ti-common-size-4x);
   // 更多...图标的高度
-  --ti-action-menu-more-icon-height: 1em;
+  --ti-action-menu-more-icon-height: var(--ti-common-size-4x);
   // 更多...图标的右边外边距
   --ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
   // 下拉触发源文本颜色
@@ -28,13 +28,13 @@
   // 下拉触发源文本字号
   --ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
   // 分割线颜色
-  --ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
+  --ti-action-menu-item-line-bg-color: var(--ti-common-color-transparent);
   // 分割线宽度
-  --ti-action-menu-item-line-width: var(--ti-common-space-1);
+  --ti-action-menu-item-line-width: var(--ti-common-space-0);
   // 下拉菜单项悬浮背景色
   --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
   // 下拉菜单项文本悬浮色
-  --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
+  --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link);
   // 下拉菜单项图标悬浮色
   --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
   // 下拉菜单项顶部内边距
@@ -46,15 +46,15 @@
   // 下拉菜单项右侧内边距
   --ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
   // 下拉菜单项图标顶部内边距
-  --ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px);
+  --ti-action-menu-item-svg-margin-top: 0;
   // 下拉菜单项图标右侧内边距
   --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
   // 下拉菜单项图标底部部内边距
   --ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0, 0px);
   // 下拉菜单项图标左侧内边距
   --ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px);
   // 下拉菜单卡片模式字体颜色
-  --ti-action-menu-item-card-text-color: var(--ti-common-color-text-link, #526ecc);
+  --ti-action-menu-item-card-text-color: var(--ti-common-color-text-primary);
   // 下拉菜单卡片模式字体颜色
-  --ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
+  --ti-action-menu-item-card-hover-text-color: var(--ti-common-color-text-primary);
 }

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

@@ -0,0 +1,28 @@
+export const tinyAlertOldTheme = {
+  'ti-alert-title-margin-top': 'var(--ti-common-space-0)',
+  'ti-alert-info-close-hover-icon-color': 'var(--ti-alert-info-icon-color)',
+  'ti-alert-info-close-icon-color': 'var(--ti-alert-info-icon-color)',
+  'ti-alert-success-close-hover-icon-color': 'var(--ti-alert-success-icon-color)',
+  'ti-alert-success-close-icon-color': 'var(--ti-alert-success-icon-color)',
+  'ti-alert-error-close-hover-icon-color': 'var(--ti-alert-error-icon-color)',
+  'ti-alert-error-close-icon-color': 'var(--ti-alert-error-icon-color)',
+  'ti-alert-warning-close-hover-icon-color': 'var(--ti-alert-warning-icon-color)',
+  'ti-alert-warning-close-icon-color': 'var(--ti-alert-warning-icon-color)',
+  'ti-alert-large-content-padding-left': 'var(--ti-common-space-4x, 16px)',
+  'ti-alert-large-icon-margin-top': 'calc(var(--ti-common-space-base, 4px) - 2px)',
+  'ti-alert-large-padding-right': 'calc(var(--ti-common-space-base, 4px) * 10.5)',
+  'ti-alert-large-padding-bottom': 'var(--ti-common-space-3x, 12px)',
+  'ti-alert-large-padding-top': 'calc(var(--ti-common-space-base, 4px) * 3.5)',
+  'ti-alert-normal-margin-vertical': 'var(--ti-common-space-2x, 8px)',
+  'ti-alert-normal-padding-bottom': 'var(--ti-common-space-3x, 12px)',
+  'ti-alert-normal-padding-right': 'var(--ti-common-space-4x, 16px)',
+  'ti-alert-normal-padding-top': 'var(--ti-common-space-3x, 12px)',
+  'ti-alert-description-margin-bottom': 'var(--ti-common-space-base, 4px)',
+  'ti-alert-description-margin-top': 'var(--ti-common-space-base, 4px)',
+  'ti-alert-icon-margin-top': 'var(--ti-common-space-1, 1px)',
+  'ti-alert-title-font-size': 'var(--ti-common-font-size-1, 14px)',
+  'ti-alert-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
+  'ti-alert-close-font-size': 'var(--ti-common-font-size-base, 12px)',
+  'ti-alert-close-position-top': 'var(--ti-common-space-4x, 16px)',
+  'ti-alert-border-weight': 'var(--ti-common-border-weight-normal, 1px)'
+}

packages/theme/src/alert/vars.less

@@ -23,17 +23,17 @@
     'Microsoft JhengHei'
   );
   // 边框厚度(new)
-  --ti-alert-border-weight: var(--ti-common-border-weight-normal, 1px);
+  --ti-alert-border-weight: var(--ti-common-size-0);
   // 描述字号
   --ti-alert-description-font-size: var(--ti-common-font-size-base, 12px);
   // 默认关闭图标固定定位顶部距离(hide)
-  --ti-alert-close-position-top: var(--ti-common-space-4x, 16px);
+  --ti-alert-close-position-top: var(--ti-common-space-3x);
   // 默认关闭图标字号
-  --ti-alert-close-font-size: var(--ti-common-font-size-base, 12px);
+  --ti-alert-close-font-size: var(--ti-common-font-size-2);
   // 自定义关闭文字字号
   --ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px);
   // 组件圆角
-  --ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
+  --ti-alert-border-radius: var(--ti-common-border-radius-4);
   // 标题文本色
   --ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
   // success类型标题文本色
@@ -47,9 +47,9 @@
   // simple类型标题文本色
   --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
   // 标题字号
-  --ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
+  --ti-alert-title-font-size: var(--ti-common-font-size-2);
   // 标题图标顶部外边距
-  --ti-alert-icon-margin-top: var(--ti-common-space-1, 1px);
+  --ti-alert-icon-margin-top: calc(var(--ti-common-space-6) / 2);
   // 标题图标字号
   --ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
   // 描述内容行高
@@ -59,41 +59,41 @@
   // 描述内容水平内边距
   --ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px);
   // 描述内容提示内容顶部外边距
-  --ti-alert-description-margin-top: var(--ti-common-space-base, 4px);
+  --ti-alert-description-margin-top: var(--ti-common-space-base);
   // 描述内容提示内容底部外边距
-  --ti-alert-description-margin-bottom: var(--ti-common-space-base, 4px);
+  --ti-alert-description-margin-bottom: var(--ti-common-space-0);
   // 描述默认文本色
   --ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
   // 默认顶部内边距
-  --ti-alert-normal-padding-top: var(--ti-common-space-3x, 12px);
+  --ti-alert-normal-padding-top: calc(var(--ti-common-space-2x) + 1.5px);
   // 默认右内边距
-  --ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px);
+  --ti-alert-normal-padding-right: var(--ti-common-space-4x);
   // 默认底部内边距
-  --ti-alert-normal-padding-bottom: var(--ti-common-space-3x, 12px);
+  --ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x) + 1.5px);
   // 默认左内边距
   --ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px);
   // 默认垂直外边距
-  --ti-alert-normal-margin-vertical: var(--ti-common-space-2x, 8px);
+  --ti-alert-normal-margin-vertical: var(--ti-common-space-4x);
   // 默认水平外边距
   --ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px);
   // large尺寸顶部内边距
-  --ti-alert-large-padding-top: calc(var(--ti-common-space-base, 4px) * 3.5);
+  --ti-alert-large-padding-top: var(--ti-common-space-4x);
   // large尺寸底部内边距
-  --ti-alert-large-padding-bottom: var(--ti-common-space-3x, 12px);
+  --ti-alert-large-padding-bottom: var(--ti-common-space-4x);
   // large尺寸左内边距
   --ti-alert-large-padding-left: var(--ti-common-space-4x, 16px);
   // large尺寸右内边距
-  --ti-alert-large-padding-right: calc(var(--ti-common-space-base, 4px) * 10.5);
+  --ti-alert-large-padding-right: var(--ti-common-space-4x);
   // large尺寸操作文本色
   --ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc);
   // large尺寸操作字号
   --ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px);
   // large尺寸图标字号
   --ti-alert-large-icon-font-size: var(--ti-common-font-size-5, 24px);
   // large尺寸图标顶部外边距
-  --ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base, 4px) - 2px);
+  --ti-alert-large-icon-margin-top: var(--ti-common-space-0);
   // large尺寸描述内容左内边距
-  --ti-alert-large-content-padding-left: var(--ti-common-space-4x, 16px);
+  --ti-alert-large-content-padding-left: var(--ti-common-space-2x);
   // 大尺寸关闭图标字号
   --ti-alert-large-close-font-size: var(--ti-alert-close-font-size);
 
@@ -106,9 +106,9 @@
   // warning类型背景色
   --ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8);
   // warning类型关闭图标色
-  --ti-alert-warning-close-icon-color: var(--ti-alert-warning-icon-color);
+  --ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken);
   // warning类型悬浮关闭图标色
-  --ti-alert-warning-close-hover-icon-color: var(--ti-alert-warning-icon-color);
+  --ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
   // error类型边框色
   --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
   // error类型图标色
@@ -118,9 +118,9 @@
   // error类型背景色
   --ti-alert-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
   // error类型关闭图标色
-  --ti-alert-error-close-icon-color: var(--ti-alert-error-icon-color);
+  --ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken);
   // error类型悬浮关闭图标色
-  --ti-alert-error-close-hover-icon-color: var(--ti-alert-error-icon-color);
+  --ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
   // success类型边框色
   --ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc);
   // success类型图标色
@@ -130,9 +130,9 @@
   // success类型背景色
   --ti-alert-success-bg-color: var(--ti-common-color-success-bg, #edfff9);
   // success类型关闭图标色
-  --ti-alert-success-close-icon-color: var(--ti-alert-success-icon-color);
+  --ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken);
   // success类型悬浮关闭图标色
-  --ti-alert-success-close-hover-icon-color: var(--ti-alert-success-icon-color);
+  --ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
 
   // info类型边框色
   --ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa);
@@ -143,9 +143,9 @@
   // info类型背景色
   --ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff);
   // info类型关闭图标色
-  --ti-alert-info-close-icon-color: var(--ti-alert-info-icon-color);
+  --ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken);
   // info类型悬浮关闭图标色
-  --ti-alert-info-close-hover-icon-color: var(--ti-alert-info-icon-color);
+  --ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover);
 
   // simple类型边框色
   --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
@@ -160,5 +160,5 @@
   // simple类型悬浮关闭图标色
   --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
   // 标题的上边距
-  --ti-alert-title-margin-top: var(--ti-common-space-0);
+  --ti-alert-title-margin-top: var(--ti-common-size-base);
 }

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

@@ -0,0 +1,7 @@
+export const tinyAnchorOldTheme = {
+  'ti-anchor-link-active-text-color': 'var(--ti-common-color-primary-active, #7693f5)',
+  'ti-anchor-line-opacity': '0.08',
+  'ti-anchor-line-bg-color': 'var(--ti-common-color-text-primary, #252b3a)',
+  'ti-anchor-text-color': 'var(--ti-common-color-text-primary, #252b3a)',
+  'ti-anchor-width': "'auto'"
+}