From 12278ef297d1878a7cd7e273f542a2e0c87b3048 Mon Sep 17 00:00:00 2001 From: saller Date: Mon, 8 Jan 2024 12:47:51 +0800 Subject: [PATCH] fix(comp:head): modify header bar style (#1781) --- packages/components/header/docs/Theme.zh.md | 32 ++++++------ packages/components/header/style/index.less | 10 ++-- packages/components/header/theme/dark.css | 4 +- packages/components/header/theme/default.css | 4 +- packages/components/header/theme/default.ts | 4 +- packages/components/header/theme/tokens.ts | 53 ++++++++++++++++++++ 6 files changed, 84 insertions(+), 23 deletions(-) diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md index 206d0d11f..38e53b6f8 100644 --- a/packages/components/header/docs/Theme.zh.md +++ b/packages/components/header/docs/Theme.zh.md @@ -1,17 +1,19 @@ | 名称 | 描述 | 类型 | default | dark | |---|---|---|---|---| -| `barBgColor` | | `string` | `#1c6eff` | `#4083E8` | -| `barWidth` | | `number` | `4` | `4` | -| `heightLg` | | `number` | `48` | `48` | -| `heightMd` | | `number` | `48` | `48` | -| `heightSm` | | `number` | `40` | `40` | -| `heightXl` | | `number` | `56` | `56` | -| `prefixColor` | | `string` | `#2f3540` | `#F4F8FF` | -| `prefixColorActive` | | `string` | `#1c6eff` | `#4083E8` | -| `prefixColorDisabled` | | `string` | `#bec3cc` | `#687080` | -| `prefixColorHover` | | `string` | `#1c6eff` | `#4083E8` | -| `subTitleFontSize` | | `number` | `14` | `14` | -| `suffixColor` | | `string` | `#5e6573` | `#A1A7B3` | -| `suffixColorActive` | | `string` | `#0d51d9` | `#6AA6F4` | -| `suffixColorDisabled` | | `string` | `#bec3cc` | `#687080` | -| `suffixColorHover` | | `string` | `#1c6eff` | `#4083E8` | +| `barBgColor` | 竖条颜色 | `string` | `#1c6eff` | `#4083E8` | +| `barBorderRadius` | 竖条圆角尺寸 | `number` | `0` | `0` | +| `barMarginRight` | 竖条距离文字的宽度 | `number` | `6` | `6` | +| `barWidth` | 竖条宽度 | `number` | `2` | `2` | +| `heightLg` | lg 尺寸高度 | `number` | `48` | `48` | +| `heightMd` | md 尺寸高度 | `number` | `48` | `48` | +| `heightSm` | sm 尺寸高度 | `number` | `40` | `40` | +| `heightXl` | xl 尺寸高度 | `number` | `56` | `56` | +| `prefixColor` | 前缀文字颜色 | `string` | `#2f3540` | `#F4F8FF` | +| `prefixColorActive` | 前缀文字激活颜色 | `string` | `#1c6eff` | `#4083E8` | +| `prefixColorDisabled` | 前缀文字禁用颜色 | `string` | `#bec3cc` | `#687080` | +| `prefixColorHover` | 前缀文字悬浮颜色 | `string` | `#1c6eff` | `#4083E8` | +| `subTitleFontSize` | 副标题字体大小 | `number` | `14` | `14` | +| `suffixColor` | 后缀文字颜色 | `string` | `#5e6573` | `#A1A7B3` | +| `suffixColorActive` | 后缀文字激活颜色 | `string` | `#0d51d9` | `#6AA6F4` | +| `suffixColorDisabled` | 后缀文字禁用颜色 | `string` | `#bec3cc` | `#687080` | +| `suffixColorHover` | 后缀文字悬浮颜色 | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less index 54f5aa383..79c3bada5 100644 --- a/packages/components/header/style/index.less +++ b/packages/components/header/style/index.less @@ -130,7 +130,7 @@ } &-with-bar { - padding-left: calc(var(--ix-header-bar-width) * 2); + padding-left: calc(var(--ix-header-bar-width) + var(--ix-header-bar-margin-right)); &::before { position: absolute; @@ -139,7 +139,7 @@ bottom: 0; width: var(--ix-header-bar-width); background-color: var(--ix-header-bar-bg-color); - border-radius: calc(var(--ix-header-bar-width) / 2); + border-radius: var(--ix-header-bar-border-radius); content: ''; } } @@ -153,7 +153,7 @@ } .header-size(@height, @font-size, @padding) { - @line-height: calc(@font-size + var(--ix-line-height-gutter)); + @bar-height: calc(@font-size + 2px); .reset-font-size(@font-size); @@ -161,8 +161,8 @@ &.@{header-prefix}-with-bar { &::before { - margin-top: calc((@height - @line-height) / 2); - height: @line-height; + margin-top: calc((@height - @bar-height) / 2); + height: @bar-height; } } diff --git a/packages/components/header/theme/dark.css b/packages/components/header/theme/dark.css index 355a240fd..c5fd3e4b7 100644 --- a/packages/components/header/theme/dark.css +++ b/packages/components/header/theme/dark.css @@ -4,8 +4,10 @@ --ix-header-height-md: 48px; --ix-header-height-lg: 48px; --ix-header-height-xl: 56px; - --ix-header-bar-width: 4px; + --ix-header-bar-width: 2px; --ix-header-bar-bg-color: #4083e8; + --ix-header-bar-border-radius: 0; + --ix-header-bar-margin-right: 6px; --ix-header-prefix-color: #f4f8ff; --ix-header-prefix-color-hover: #4083e8; --ix-header-prefix-color-active: #4083e8; diff --git a/packages/components/header/theme/default.css b/packages/components/header/theme/default.css index 18be3b074..d13652616 100644 --- a/packages/components/header/theme/default.css +++ b/packages/components/header/theme/default.css @@ -4,8 +4,10 @@ --ix-header-height-md: 48px; --ix-header-height-lg: 48px; --ix-header-height-xl: 56px; - --ix-header-bar-width: 4px; + --ix-header-bar-width: 2px; --ix-header-bar-bg-color: #1c6eff; + --ix-header-bar-border-radius: 0; + --ix-header-bar-margin-right: 6px; --ix-header-prefix-color: #2f3540; --ix-header-prefix-color-hover: #1c6eff; --ix-header-prefix-color-active: #1c6eff; diff --git a/packages/components/header/theme/default.ts b/packages/components/header/theme/default.ts index 93fa1e5ce..9bd6db358 100644 --- a/packages/components/header/theme/default.ts +++ b/packages/components/header/theme/default.ts @@ -28,8 +28,10 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo heightLg: heightXl, heightXl: height2xl, - barWidth: 4, + barWidth: 2, barBgColor: colorPrimary, + barBorderRadius: 0, + barMarginRight: 6, prefixColor: colorText, prefixColorHover: colorPrimaryText, diff --git a/packages/components/header/theme/tokens.ts b/packages/components/header/theme/tokens.ts index d7e9dc2b1..5f93d5646 100644 --- a/packages/components/header/theme/tokens.ts +++ b/packages/components/header/theme/tokens.ts @@ -6,23 +6,76 @@ */ export interface HeaderThemeTokens { + /** + * @desc sm 尺寸高度 + */ heightSm: number + /** + * @desc md 尺寸高度 + */ heightMd: number + /** + * @desc lg 尺寸高度 + */ heightLg: number + /** + * @desc xl 尺寸高度 + */ heightXl: number + /** + * @desc 竖条宽度 + */ barWidth: number + /** + * @desc 竖条圆角尺寸 + */ + barBorderRadius: number + /** + * @desc 竖条距离文字的宽度 + */ + barMarginRight: number + /** + * @desc 竖条颜色 + */ barBgColor: string + /** + * @desc 前缀文字颜色 + */ prefixColor: string + /** + * @desc 前缀文字悬浮颜色 + */ prefixColorHover: string + /** + * @desc 前缀文字激活颜色 + */ prefixColorActive: string + /** + * @desc 前缀文字禁用颜色 + */ prefixColorDisabled: string + /** + * @desc 后缀文字颜色 + */ suffixColor: string + /** + * @desc 后缀文字悬浮颜色 + */ suffixColorHover: string + /** + * @desc 后缀文字激活颜色 + */ suffixColorActive: string + /** + * @desc 后缀文字禁用颜色 + */ suffixColorDisabled: string + /** + * @desc 副标题字体大小 + */ subTitleFontSize: number }