@koi-design/uxd-ui 14.0.3 → 14.0.5

package/styles/components/tag/index.less

@@ -4,13 +4,13 @@
 @css-prefix-tag: ~'@{css-prefix}-tag';
 .@{css-prefix-tag} {
   display: inline-flex;
-  padding: var(--tag-padding-vertical) var(--tag-padding-horizontal);
+  padding: var(--tag-padding);
   font-size: var(--tag-font-size);
   line-height: var(--tag-line-height);
   align-items: center;
   opacity: 1;
   background-color: var(--tag-background-color);
-  box-shadow: 0 0 0 1px var(--tag-border-color) inset;
+  border: 1px solid var(--tag-border-color);
   border-radius: var(--tag-border-radius);
   white-space: nowrap;
   cursor: default;
@@ -21,30 +21,27 @@
     color: var(--tag-font-color);
   }
 
-  &:hover {
-    opacity: 0.85;
-  }
-
   &-close {
     display: inline-flex;
     align-items: center;
-    margin-left: var(--tag-close-gutter);
+    margin-left: var(--tag-gutter);
     cursor: pointer;
     font-weight: bold;
+    opacity: 0.7;
     color: var(--tag-close-color);
     transition: all var(--animation-time) var(--ease-in-out);
 
     &:hover {
-      color: var(--tag-close-hover-color);
+      opacity: 1;
     }
   }
 
   &-round {
-    border-radius: 999px;
+    border-radius: var(--radius-full);
   }
 
   &-variant-soft {
-    box-shadow: none;
+    border-color: transparent;
   }
 
   &-variant-outline {
@@ -52,12 +49,12 @@
   }
 
   &-variant-solid {
-    box-shadow: none;
+    border-color: transparent;
     background-color: var(--tag-solid-background-color);
     &,
     a,
     a:hover {
-      color: var(--tag-solid-font-color);
+      color: white;
     }
   }
 
@@ -69,25 +66,15 @@
     a:hover,
     .@{css-prefix-tag}-close,
     .@{css-prefix-tag}-close:hover {
-      color: var(--tag-custom-font-color);
+      color: var(--tag-close-color);
     }
   }
 
   &-has-icon &-icon {
-    margin-right: var(--tag-icon-gutter);
+    margin-right: var(--tag-gutter);
   }
 
   .@{css-prefix}-icon:not(.@{css-prefix-tag}-close) {
-    margin-right: var(--tag-icon-gutter);
-  }
-
-  &-small {
-    line-height: var(--tag-line-height-small);
-    padding: var(--tag-padding-vertical) var(--tag-padding-horizontal-small);
-  }
-
-  &-large {
-    line-height: var(--tag-line-height-large);
-    padding: var(--tag-padding-vertical) var(--tag-padding-horizontal-large);
+    margin-right: var(--tag-gutter);
   }
 }

package/styles/components/tag/var.less

@@ -1,23 +1,15 @@
 .@{css-prefix-tag} {
-  --tag-padding-vertical: 0;
-  --tag-padding-horizontal: var(--space-2);
-  --tag-padding-horizontal-small: var(--space-1);
-  --tag-padding-horizontal-large: var(--space-3);
+  --tag-padding: var(--space-0-5) var(--space-2-5);
   --tag-font-size: var(--font-size-xs);
-  --tag-line-height: var(--space-6);
-  --tag-line-height-small: var(--space-5);
-  --tag-line-height-large: var(--space-7);
-  --tag-close-gutter: 2px;
-  --tag-icon-gutter: 2px;
-  --tag-close-color: var(--gray-11);
-  --tag-close-hover-color: var(--gray-12);
+  --tag-line-height: var(--space-4);
+  --tag-background-color: var(--color-background-secondary);
+  --tag-border-color: var(--color-border-base);
   --tag-font-color: var(--default-font-color);
-  --tag-background-color: var(--gray-3);
-  --tag-border-color: var(--gray-6);
-  --tag-custom-font-color: var(--gray-1);
-  --tag-solid-background-color: var(--gray-9);
-  --tag-solid-font-color: var(--gray-1);
-  --tag-border-radius: var(--radius-base);
+  --tag-gutter: var(--space-0-5);
+  --tag-border-radius: var(--radius-md);
+  --tag-close-color: var(--default-font-color);
+  --tag-solid-background-color: var(--default-font-color);
+
   &[data-color='processing'] {
     --tag-font-color: var(--primary-11);
     --tag-border-color: var(--primary-6);
@@ -25,7 +17,6 @@
     --tag-close-color: var(--primary-11);
     --tag-close-hover-color: var(--primary-12);
     --tag-solid-background-color: var(--primary-color);
-    --tag-solid-font-color: #fff;
   }
   &[data-color='success'] {
     --tag-font-color: var(--success-color);
@@ -34,7 +25,6 @@
     --tag-close-color: var(--success-color);
     --tag-close-hover-color: var(--success-hover);
     --tag-solid-background-color: var(--success-color);
-    --tag-solid-font-color: #fff;
   }
   &[data-color='error'] {
     --tag-font-color: var(--error-color);
@@ -43,7 +33,6 @@
     --tag-close-color: var(--error-color);
     --tag-close-hover-color: var(--error-hover);
     --tag-solid-background-color: var(--error-color);
-    --tag-solid-font-color: #fff;
   }
   &[data-color='warning'] {
     --tag-font-color: var(--warning-color);
@@ -52,52 +41,5 @@
     --tag-close-color: var(--warning-color);
     --tag-close-hover-color: var(--warning-hover);
     --tag-solid-background-color: var(--warning-color);
-    --tag-solid-font-color: #fff;
   }
 }
-// :root {
-//   --tag-padding-vertical: 0;
-//   --tag-padding-horizontal: var(--space-2);
-//   --tag-padding-horizontal-small: var(--space-1);
-//   --tag-padding-horizontal-large: var(--space-3);
-//   --tag-font-size: var(--font-size-xs);
-//   --tag-line-height: var(--line-height-normal);
-//   --tag-line-height-small: var(--line-heigh-normal);
-//   --tag-line-height-large: var(--space-6);
-//   --tag-close-gutter: 2px;
-//   --tag-icon-gutter: 2px;
-//   --tag-close-color: var(--gray-11);
-//   --tag-close-hover-color: var(--gray-12);
-//   --tag-font-color: var(--default-font-color);
-//   --tag-background-color: var(--gray-3);
-//   --tag-border-color: var(--gray-6);
-//   --tag-custom-font-color: var(--gray-1);
-//   --tag-solid-background-color: var(--gray-9);
-//   --tag-solid-font-color: var(--gray-1);
-// }
-
-// .dark,
-// .dark-theme {
-//   --tag-background-color: var(--gray-3);
-// }
-
-// :root,
-// .light,
-// .light-theme,
-// .dark,
-// .dark-theme {
-//   & [data-color] {
-//     --tag-font-color: var(--primary-11);
-//     --tag-border-color: var(--primary-6);
-//     --tag-background-color: var(--primary-3);
-//     --tag-close-color: var(--primary-11);
-//     --tag-close-hover-color: var(--primary-12);
-//     --tag-solid-background-color: var(--primary-color);
-//     --tag-solid-font-color: var(--primary-contrast);
-//   }
-// }
-
-// :root,
-// [data-radius] {
-//   --tag-border-radius: var(--radius-base);
-// }

package/styles/cssVariable.less

@@ -77,7 +77,6 @@
   --error-soft: #feebe7;
   --error-soft-hover: #ffdcd3;
   --error-color: rgba(254, 59, 47, 100%);
-  // --error-hover: #dd4425;
   --error-hover: rgba(254, 59, 47, 90%);
   --error-active: rgba(254, 59, 47, 90%);
   --error-a30: rgba(254, 59, 47, 30%);