diff --git a/examples/sites/demos/pc/app/breadcrumb/base.spec.ts b/examples/sites/demos/pc/app/breadcrumb/base.spec.ts index a70f0efe10..85ed5491eb 100644 --- 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 index 225526dd8e..505ea26848 100644 --- 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 index aa20d12e50..8a71544942 100644 --- 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 index 260c4003be..943c855b30 100644 --- 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,7 +47,7 @@ } & &__item--medium { - font-size: 14px; + font-size: 16px; } & &__inner { @@ -58,46 +55,41 @@ &, & 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 index 7c4723f9f8..36fed12b76 100644 --- 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); }