refactor(breadcrumb): [breadcrumb] refactor breadcrumb theme vars (#2209

) * refactor(breadcrumb): [breadcrumb] refactor breadcrumb theme vars * test(e2e): update breadcrumb e2e test
opentiny · Sep 29, 2024 · 520b427 · 520b427
1 parent 3119f97
commit 520b427
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 50 deletions.
diff --git a/examples/sites/demos/pc/app/breadcrumb/base.spec.ts b/examples/sites/demos/pc/app/breadcrumb/base.spec.ts
@@ -12,11 +12,11 @@ test('Breadcrumb 基础用法', async ({ page }) => {
   // 面包屑导航、导航项出现,当前页导航加粗
   await expect(breadcrumb).toBeVisible()
   await expect(breadcrumbItem).toHaveCount(3)
-  await expect(currentItem.last().locator('.is-link')).toHaveCSS('font-weight', '700')
+  await expect(currentItem.last().locator('.is-link')).toHaveCSS('font-weight', '600')
 
   // 分隔符
   await expect(separator).toHaveCount(3)
-  await expect(separator.first()).toHaveText(/>/)
+  await expect(separator.first()).toHaveText(/\//)
   await expect(separator.last()).toBeHidden()
 
   // 点击导航项

diff --git a/examples/sites/demos/pc/app/breadcrumb/options.spec.ts b/examples/sites/demos/pc/app/breadcrumb/options.spec.ts
@@ -12,11 +12,11 @@ test('Breadcrumb options配置', async ({ page }) => {
   // 面包屑导航、导航项出现,当前页导航加粗
   await expect(breadcrumb).toBeVisible()
   await expect(breadcrumbItem).toHaveCount(3)
-  await expect(currentItem.last().getByRole('link')).toHaveCSS('font-weight', '700')
+  await expect(currentItem.last().getByRole('link')).toHaveCSS('font-weight', '600')
 
   // 分隔符
   await expect(separator).toHaveCount(3)
-  await expect(separator.first()).toHaveText(/>/)
+  await expect(separator.first()).toHaveText(/\//)
   await expect(separator.last()).toBeHidden()
 
   // 点击导航项

diff --git a/examples/sites/demos/pc/app/breadcrumb/size.spec.ts b/examples/sites/demos/pc/app/breadcrumb/size.spec.ts
@@ -13,14 +13,14 @@ test('Breadcrumb 尺寸设置', async ({ page }) => {
   // 面包屑导航、导航项出现,当前页导航加粗
   await expect(breadcrumb).toBeVisible()
   await expect(breadcrumbItem).toHaveCount(3)
-  await expect(currentItem.last().locator('.is-link')).toHaveCSS('font-weight', '700')
+  await expect(currentItem.last().locator('.is-link')).toHaveCSS('font-weight', '600')
 
   // 尺寸
   await expect(breadcrumbItemMedium).toBeVisible()
 
   // 分隔符
   await expect(separator).toHaveCount(3)
-  await expect(separator.first()).toHaveText(/>/)
+  await expect(separator.first()).toHaveText(/\//)
   await expect(separator.last()).toBeHidden()
 
   // 点击导航项

diff --git a/packages/theme/src/breadcrumb/index.less b/packages/theme/src/breadcrumb/index.less
@@ -17,11 +17,10 @@
 @breadcrumb-prefix-cls: ~'@{css-prefix}breadcrumb';
 
 .@{breadcrumb-prefix-cls} {
-  .component-css-vars-breadcrumb();
+  .inject-Breadcrumb-vars();
 
-  font-size: var(--ti-breadcrumb-font-size);
-  line-height: var(--ti-breadcrumb-text-line-height);
-  font-family: var(--ti-breadcrumb-font-family);
+  font-size: var(--tv-Breadcrumb-font-size);
+  line-height: var(--tv-Breadcrumb-text-line-height);
   .clearfix();
 
   & &__item {
@@ -31,13 +30,11 @@
 
     &:last-child {
       .@{breadcrumb-prefix-cls}__inner {
-        font-weight: var(--ti-breadcrumb-text-font-weight);
-        color: var(--ti-breadcrumb-selected-text-color);
+        font-weight: var(--tv-Breadcrumb-text-font-weight);
         text-decoration: none;
 
         a {
           cursor: text;
-          color: var(--ti-breadcrumb-selected-text-color);
           text-decoration: none;
         }
       }
@@ -50,54 +47,49 @@
   }
 
   & &__item--medium {
-    font-size: 14px;
+    font-size: 16px;
   }
 
   & &__inner {
     vertical-align: middle;
 
     &,
     & a {
-      color: var(--ti-breadcrumb-text-color);
+      color: var(--tv-Breadcrumb-text-color);
     }
 
     &:hover {
-      color: var(--ti-breadcrumb-hover-text-color);
-      text-decoration: var(--ti-breadcrumb-hover-text-decoration);
+      text-decoration: underline;
 
       & a:hover {
         cursor: pointer;
-        color: var(--ti-breadcrumb-hover-text-color);
-        text-decoration: var(--ti-breadcrumb-hover-text-decoration);
+        text-decoration: underline;
       }
     }
   }
 
   & &__separator {
-    font-family: var(--ti-breadcrumb-font-family);
-    color: var(--ti-breadcrumb-separator-text-color);
-    margin: var(--ti-breadcrumb-separator-margin-vertical) var(--ti-breadcrumb-separator-margin-horizontal);
+    font-family: var(--tv-Breadcrumb-font-family);
+    color: var(--tv-Breadcrumb-separator-icon-color);
+    margin: var(--tv-Breadcrumb-separator-margin-y) var(--tv-Breadcrumb-separator-margin-x);
     vertical-align: middle;
     text-align: center;
-    width: var(--ti-breadcrumb-separator-width);
+    width: var(--tv-Breadcrumb-separator-width);
   }
 
   & &__separator-cls {
-    font-size: var(--ti-breadcrumb-font-size);
-    fill: var(--ti-breadcrumb-separator-text-color);
-    margin: var(--ti-breadcrumb-separator-margin-vertical) var(--ti-breadcrumb-separator-margin-horizontal);
+    font-size: var(--tv-Breadcrumb-font-size);
+    fill: var(--tv-Breadcrumb-separator-icon-color);
+    margin: var(--tv-Breadcrumb-separator-margin-y) var(--tv-Breadcrumb-separator-margin-x);
     vertical-align: middle;
   }
 
   & &__item:last-child:hover {
     cursor: text;
     text-decoration: none;
-    .@{breadcrumb-prefix-cls}__inner {
-      color: var(--ti-breadcrumb-selected-hover-text-color);
-    }
+
     a {
       cursor: text;
-      color: var(--ti-breadcrumb-selected-hover-text-color);
       text-decoration: none;
     }
   }

diff --git a/packages/theme/src/breadcrumb/vars.less b/packages/theme/src/breadcrumb/vars.less
@@ -10,31 +10,21 @@
 *
 */
 
-.component-css-vars-breadcrumb() {
+.inject-Breadcrumb-vars() {
   // 字号
-  --ti-breadcrumb-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Breadcrumb-font-size: var(--tv-font-size-md);
   // 文本行高
-  --ti-breadcrumb-text-line-height: 22px;
+  --tv-Breadcrumb-text-line-height: var(--tv-line-height-number);
   // 文本色
-  --ti-breadcrumb-text-color: #191919;
-  // 字族
-  --ti-breadcrumb-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
+  --tv-Breadcrumb-text-color: var(--tv-color-text);
   // 分隔符填充色
-  --ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder, #808080);
+  --tv-Breadcrumb-separator-icon-color: var(--tv-color-icon);
   // 分割箭头宽度
-  --ti-breadcrumb-separator-width: var(--ti-common-size-4x, 16px);
-  // 分隔图标的垂直外边距
-  --ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0, 0px);
+  --tv-Breadcrumb-separator-width: 16px;
   // 分隔图标的水平外边距
-  --ti-breadcrumb-separator-margin-horizontal: var(--ti-common-space-base, 4px);
-  // 悬浮文本色
-  --ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal, #191919);
-  // 悬浮文本下划线
-  --ti-breadcrumb-hover-text-decoration: underline;
+  --tv-Breadcrumb-separator-margin-x: 4px;
+  // 分隔图标的垂直外边距
+  --tv-Breadcrumb-separator-margin-y: 0;
   // 当前节点字重
-  --ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7, bold);
-  // 当前节点文本色
-  --ti-breadcrumb-selected-text-color: var(--ti-common-color-text-primary, #191919);
-  // 当前节点悬浮文本色
-  --ti-breadcrumb-selected-hover-text-color: var(--ti-breadcrumb-selected-text-color);
+  --tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold);
 }