From ce4308f9f728004281b33ee802d61c6b2be307b1 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 7 Oct 2024 18:29:16 -0700
Subject: [PATCH 1/2] refactor(badge): [badge] refactor badge theme vars
---
.../sites/demos/pc/app/badge/type.spec.ts | 4 +-
packages/theme/src/badge/index.less | 60 ++++++-------------
packages/theme/src/badge/vars.less | 45 ++++++++------
3 files changed, 47 insertions(+), 62 deletions(-)
diff --git a/examples/sites/demos/pc/app/badge/type.spec.ts b/examples/sites/demos/pc/app/badge/type.spec.ts
index fcada4af5c..bc117f442d 100644
--- a/examples/sites/demos/pc/app/badge/type.spec.ts
+++ b/examples/sites/demos/pc/app/badge/type.spec.ts
@@ -13,7 +13,7 @@ test('主題样式', async ({ page }) => {
const primaryBadge = badge.nth(5)
await expect(dangerBadge).toHaveClass(/tiny-badge--danger/)
- await expect(dangerBadge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+ await expect(dangerBadge).toHaveCSS('background-color', 'rgb(242, 48, 48)')
await expect(primaryBadge).toHaveClass(/tiny-badge--primary/)
await expect(primaryBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(successBadge).toHaveClass(/tiny-badge--success/)
@@ -21,5 +21,5 @@ test('主題样式', async ({ page }) => {
await expect(warningBadge).toHaveClass(/tiny-badge--warning/)
await expect(warningBadge).toHaveCSS('background-color', 'rgb(255, 136, 0)')
await expect(infoBadge).toHaveClass(/tiny-badge--info/)
- await expect(infoBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
+ await expect(infoBadge).toHaveCSS('background-color', 'rgb(20, 118, 255)')
})
diff --git a/packages/theme/src/badge/index.less b/packages/theme/src/badge/index.less
index 2039ae7283..8529722957 100644
--- a/packages/theme/src/badge/index.less
+++ b/packages/theme/src/badge/index.less
@@ -17,24 +17,23 @@
.@{badge-prefix-cls} {
&__wrapper {
- .component-css-vars-badge();
+ .inject-Badge-vars();
}
display: inline-block;
- min-width: var(--ti-badge-size);
- height: var(--ti-badge-size);
- line-height: var(--ti-badge-line-height);
- border-radius: var(--ti-badge-border-radius);
- padding: 0 4px;
- font-size: var(--ti-badge-font-size);
- font-weight: var(--ti-badge-font-weight);
- color: var(--ti-badge-text-color);
- background-color: var(--ti-badge-bg-color);
+ min-width: 16px;
+ height: 16px;
+ line-height: 16px;
+ border-radius: var(--tv-Badge-border-radius);
+ padding: 0 var(--tv-Badge-horizontal-padding);
+ font-size: var(--tv-Badge-font-size);
+ font-weight: var(--tv-Badge-font-weight);
+ color: var(--tv-Badge-text-color);
+ background-color: var(--tv-Badge-bg-color);
vertical-align: baseline;
white-space: nowrap;
text-align: center;
- margin-left: var(--ti-badge-margin-left);
- border: var(--ti-badge-border) solid #FFFFFF;
+ border: 1px solid #FFFFFF;
&:empty {
display: none;
@@ -47,39 +46,16 @@
a,
a:hover {
- color: var(--ti-badge-text-color);
+ color: var(--tv-Badge-a-text-color);
text-decoration: none;
}
- a.badge {
- &:hover,
- &:focus {
- color: var(--ti-badge-link-hover-text-color);
- text-decoration: none;
- cursor: pointer;
- }
- }
-
- a.list-group-item.active > .badge,
- .nav-pills > .active > a > .badge {
- color: var(--ti-badge-active-text-color);
- background-color: var(--ti-badge-active-bg-color);
- }
-
- .nav-pills > li > a > .badge {
- margin-left: 3px;
- }
-
- &--max {
- padding: 0 6px;
- border-radius: 10px;
- }
&--default {
width: 6px;
height: 6px;
min-width: auto;
- background-color: var(--ti-badge-bg-color);
+ background-color: var(--tv-Badge-dot-bg-color);
display: inline-block;
vertical-align: top;
padding: 0;
@@ -88,22 +64,22 @@
}
&--primary {
- background-color: var(--ti-badge-primary-bg-color);
+ background-color: var(--tv-Badge-primary-bg-color);
}
&--success {
- background-color: var(--ti-badge-success-bg-color);
+ background-color: var(--tv-Badge-success-bg-color);
}
&--warning {
- background-color: var(--ti-badge-warning-bg-color);
+ background-color: var(--tv-Badge-warning-bg-color);
}
&--danger {
- background-color: var(--ti-badge-danger-bg-color);
+ background-color: var(--tv-Badge-danger-bg-color);
}
&--info {
- background-color: var(--ti-badge-info-bg-color);
+ background-color: var(--tv-Badge-info-bg-color);
}
}
diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less
index 5af728ee94..34fbeede77 100644
--- a/packages/theme/src/badge/vars.less
+++ b/packages/theme/src/badge/vars.less
@@ -10,22 +10,31 @@
*
*/
-.component-css-vars-badge() {
- --ti-badge-size: var(--ti-common-font-size-2, 16px);
- --ti-badge-font-size: var(--ti-common-font-size-0, 12px);
- --ti-badge-line-height: calc(var(--ti-common-line-height-base, 18px) - 4px);
- --ti-badge-font-weight: var(--ti-common-font-weight-normal, 400);
- --ti-badge-border-radius: var(--ti-common-border-radius-4, 8px);
- --ti-badge-text-color: var(--ti-base-color-bg-7, #ffffff);
- --ti-badge-bg-color: var(--ti-base-color-error, #f23030);
- --ti-badge-link-hover-text-color: var(--ti-common-color-light, #ffffff);
- --ti-badge-active-text-color: var(--ti-base-color-brand-6, #191919);
- --ti-badge-active-bg-color: var(--ti-common-color-light, #ffffff);
- --ti-badge-primary-bg-color: var(--ti-base-color-brand-6, #191919);
- --ti-badge-success-bg-color: var(--ti-common-color-success-normal, #5cb300);
- --ti-badge-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800);
- --ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
- --ti-badge-info-bg-color: var(--ti-common-color-info-normal, #191919);
- --ti-badge-border: var(--ti-common-border-weight-normal, 1px);
- --ti-badge-margin-left: 0;
+.inject-Badge-vars() {
+ // 标记的圆角
+ --tv-Badge-border-radius: var(--tv-border-radius-round);
+ // 标记的内边距
+ --tv-Badge-horizontal-padding: var(--tv-space-base);
+ // 标记的尺寸
+ --tv-Badge-font-size: var(--tv-font-size-sm);
+ // 标记的字重
+ --tv-Badge-font-weight: var(--tv-font-weight-regular);
+ // 标记的文本色
+ --tv-Badge-text-color: var(--tv-color-act-primary-text-white);
+ // 标记的背景色
+ --tv-Badge-bg-color: var(--tv-color-act-danger-bg);
+ // 标记a标签的文本及悬浮文本色
+ --tv-Badge-a-text-color: var(--tv-color-act-primary-text-white);
+ // 标记的小圆点背景色
+ --tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg);
+ // 标记的主要背景色
+ --tv-Badge-primary-bg-color: var(--tv-color-bg-primary);
+ // 标记的成功背景色
+ --tv-Badge-success-bg-color: var(--tv-color-act-success-bg);
+ // 标记的警告背景色
+ --tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg);
+ // 标记的危险背景色
+ --tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg);
+ // 标记的信息背景色
+ --tv-Badge-info-bg-color: var(--tv-color-act-info-bg);
}
From 55b82293dd925e9ec7ff9fb38e3d23268b87a54c Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Wed, 9 Oct 2024 01:48:07 -0700
Subject: [PATCH 2/2] feat(badge): [badge] Optimize style
---
.../sites/demos/pc/app/link/basic-usage-composition-api.vue | 2 +-
examples/sites/demos/pc/app/link/basic-usage.vue | 2 +-
.../sites/demos/pc/app/link/custom-icon-composition-api.vue | 2 +-
examples/sites/demos/pc/app/link/custom-icon.vue | 2 +-
.../demos/pc/app/link/dynamic-disable-composition-api.vue | 2 +-
examples/sites/demos/pc/app/link/dynamic-disable.vue | 2 +-
.../demos/pc/app/link/focus-no-underline-composition-api.vue | 2 +-
examples/sites/demos/pc/app/link/focus-no-underline.vue | 2 +-
.../sites/demos/pc/app/link/link-style-composition-api.vue | 2 +-
examples/sites/demos/pc/app/link/link-style.vue | 2 +-
examples/sites/demos/pc/app/link/size-composition-api.vue | 3 +++
examples/sites/demos/pc/app/link/size.vue | 3 +++
12 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
index 7269c67c18..0817c702d4 100644
--- a/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
@@ -11,6 +11,6 @@ import { Link as TinyLink } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/link/basic-usage.vue b/examples/sites/demos/pc/app/link/basic-usage.vue
index fe33647f7a..44dd55b06d 100644
--- a/examples/sites/demos/pc/app/link/basic-usage.vue
+++ b/examples/sites/demos/pc/app/link/basic-usage.vue
@@ -17,6 +17,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/link/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/link/custom-icon-composition-api.vue
index f5f278dc41..2c848f5adf 100644
--- a/examples/sites/demos/pc/app/link/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/custom-icon-composition-api.vue
@@ -31,6 +31,6 @@ const TinyIconFilletExternalLink = iconFilletExternalLink()
diff --git a/examples/sites/demos/pc/app/link/custom-icon.vue b/examples/sites/demos/pc/app/link/custom-icon.vue
index b9ead0f9ae..be538bb968 100644
--- a/examples/sites/demos/pc/app/link/custom-icon.vue
+++ b/examples/sites/demos/pc/app/link/custom-icon.vue
@@ -38,6 +38,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
index 42a3d2586f..0afb14139b 100644
--- a/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
@@ -15,6 +15,6 @@ import { Link as TinyLink } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/link/dynamic-disable.vue b/examples/sites/demos/pc/app/link/dynamic-disable.vue
index 8402050091..1163cf5bb4 100644
--- a/examples/sites/demos/pc/app/link/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/link/dynamic-disable.vue
@@ -21,6 +21,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue b/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
index f8d2cad734..7b9d17bbaf 100644
--- a/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
@@ -11,6 +11,6 @@ import { Link as TinyLink } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/link/focus-no-underline.vue b/examples/sites/demos/pc/app/link/focus-no-underline.vue
index eb1c0cdbe9..8381899de7 100644
--- a/examples/sites/demos/pc/app/link/focus-no-underline.vue
+++ b/examples/sites/demos/pc/app/link/focus-no-underline.vue
@@ -17,6 +17,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/link/link-style-composition-api.vue b/examples/sites/demos/pc/app/link/link-style-composition-api.vue
index 4de8709378..aba6d57aaa 100644
--- a/examples/sites/demos/pc/app/link/link-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/link-style-composition-api.vue
@@ -15,6 +15,6 @@ import { Link as TinyLink } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/link/link-style.vue b/examples/sites/demos/pc/app/link/link-style.vue
index 9931e0e723..ded2bac446 100644
--- a/examples/sites/demos/pc/app/link/link-style.vue
+++ b/examples/sites/demos/pc/app/link/link-style.vue
@@ -21,6 +21,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/link/size-composition-api.vue b/examples/sites/demos/pc/app/link/size-composition-api.vue
index ce272dc029..895056acbf 100644
--- a/examples/sites/demos/pc/app/link/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/size-composition-api.vue
@@ -28,4 +28,7 @@ const TinyIconEdit = iconEdit()
.tiny-custom-del {
margin-left: 2px;
}
+.tiny-link {
+ margin-right: 48px;
+}
diff --git a/examples/sites/demos/pc/app/link/size.vue b/examples/sites/demos/pc/app/link/size.vue
index 28f4cf787b..330fa74523 100644
--- a/examples/sites/demos/pc/app/link/size.vue
+++ b/examples/sites/demos/pc/app/link/size.vue
@@ -37,4 +37,7 @@ export default {
.tiny-custom-del {
margin-left: 2px;
}
+.tiny-link {
+ margin-right: 48px;
+}