refactor(badge): [badge] refactor badge theme vars (#2229)

* refactor(badge): [badge] refactor badge theme vars * feat(badge): [badge] Optimize style
opentiny · Oct 11, 2024 · 4e1b135 · 4e1b135
1 parent f0fee1b
commit 4e1b135
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 72 deletions.
diff --git a/examples/sites/demos/pc/app/badge/type.spec.ts b/examples/sites/demos/pc/app/badge/type.spec.ts
@@ -13,13 +13,13 @@ 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/)
   await expect(successBadge).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   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/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'
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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 {
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
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
@@ -31,6 +31,6 @@ const TinyIconFilletExternalLink = iconFilletExternalLink()
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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 {
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
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
@@ -15,6 +15,6 @@ import { Link as TinyLink } from '@opentiny/vue'
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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 {
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
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
@@ -11,6 +11,6 @@ import { Link as TinyLink } from '@opentiny/vue'
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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 {
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
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
@@ -15,6 +15,6 @@ import { Link as TinyLink } from '@opentiny/vue'
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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 {
 
 <style scoped>
 .tiny-link {
-  margin-right: 8px;
+  margin-right: 48px;
 }
 </style>
diff --git 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;
+}
 </style>
diff --git 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;
+}
 </style>
diff --git 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
@@ -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);
 }