diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
index 50a61e8ec..19ba859fe 100644
--- a/packages/amis-ui/scss/_components.scss
+++ b/packages/amis-ui/scss/_components.scss
@@ -3279,4 +3279,149 @@
   --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
-}
+
+
+
+  --Tag-base-fontSize: var(--fonts-size-8);
+  --Tag-base-fontWeight: var(--fonts-weight-6);
+  --Tag-base-height: var(--sizes-base-12);
+  --Tag-base-paddingTop: var(--sizes-size-0);
+  --Tag-base-paddingBottom: var(--sizes-size-0);
+  --Tag-base-paddingLeft: var(--sizes-size-5);
+  --Tag-base-paddingRight: var(--sizes-size-5);
+  --Tag-model-normal-top-border-color: var(--colors-neutral-line-6);
+  --Tag-model-normal-top-border-width: var(--borders-width-2);
+  --Tag-model-normal-top-border-style: var(--borders-style-1);
+  --Tag-model-normal-right-border-color: var(--colors-neutral-line-6);
+  --Tag-model-normal-right-border-width: var(--borders-width-2);
+  --Tag-model-normal-right-border-style: var(--borders-style-1);
+  --Tag-model-normal-bottom-border-color: var(--colors-neutral-line-6);
+  --Tag-model-normal-bottom-border-width: var(--borders-width-2);
+  --Tag-model-normal-bottom-border-style: var(--borders-style-1);
+  --Tag-model-normal-left-border-color: var(--colors-neutral-line-6);
+  --Tag-model-normal-left-border-width: var(--borders-width-2);
+  --Tag-model-normal-left-border-style: var(--borders-style-1);
+  --Tag-model-normal-top-right-border-radius: var(--borders-radius-1);
+  --Tag-model-normal-top-left-border-radius: var(--borders-radius-1);
+  --Tag-model-normal-bottom-right-border-radius: var(--borders-radius-1);
+  --Tag-model-normal-bottom-left-border-radius: var(--borders-radius-1);
+  --Tag-model-normal-status-size: var(--sizes-size-0);
+  --Tag-model-normal-status-margin: var(--sizes-size-0);
+  --Tag-model-normal-close-size: var(--sizes-size-0);
+  --Tag-model-normal-close-margin: var(--sizes-size-0);
+  --Tag-model-rounded-top-border-color: var(--colors-neutral-line-6);
+  --Tag-model-rounded-top-border-width: var(--borders-width-2);
+  --Tag-model-rounded-top-border-style: var(--borders-style-2);
+  --Tag-model-rounded-right-border-color: var(--colors-neutral-line-6);
+  --Tag-model-rounded-right-border-width: var(--borders-width-2);
+  --Tag-model-rounded-right-border-style: var(--borders-style-2);
+  --Tag-model-rounded-bottom-border-color: var(--colors-neutral-line-6);
+  --Tag-model-rounded-bottom-border-width: var(--borders-width-2);
+  --Tag-model-rounded-bottom-border-style: var(--borders-style-2);
+  --Tag-model-rounded-left-border-color: var(--colors-neutral-line-6);
+  --Tag-model-rounded-left-border-width: var(--borders-width-2);
+  --Tag-model-rounded-left-border-style: var(--borders-style-2);
+  --Tag-model-rounded-top-right-border-radius: 12px;
+  --Tag-model-rounded-top-left-border-radius: 12px;
+  --Tag-model-rounded-bottom-right-border-radius: 12px;
+  --Tag-model-rounded-bottom-left-border-radius: 12px;
+  --Tag-model-rounded-status-size: var(--sizes-size-0);
+  --Tag-model-rounded-status-margin: var(--sizes-size-0);
+  --Tag-model-rounded-close-size: var(--sizes-size-0);
+  --Tag-model-rounded-close-margin: var(--sizes-size-0);
+  --Tag-model-status-top-border-color: var(--colors-neutral-line-6);
+  --Tag-model-status-top-border-width: var(--borders-width-2);
+  --Tag-model-status-top-border-style: var(--borders-style-1);
+  --Tag-model-status-right-border-color: var(--colors-neutral-line-6);
+  --Tag-model-status-right-border-width: var(--borders-width-2);
+  --Tag-model-status-right-border-style: var(--borders-style-1);
+  --Tag-model-status-bottom-border-color: var(--colors-neutral-line-6);
+  --Tag-model-status-bottom-border-width: var(--borders-width-2);
+  --Tag-model-status-bottom-border-style: var(--borders-style-1);
+  --Tag-model-status-left-border-color: var(--colors-neutral-line-6);
+  --Tag-model-status-left-border-width: var(--borders-width-2);
+  --Tag-model-status-left-border-style: var(--borders-style-1);
+  --Tag-model-status-top-right-border-radius: var(--borders-radius-1);
+  --Tag-model-status-top-left-border-radius: var(--borders-radius-1);
+  --Tag-model-status-bottom-right-border-radius: var(--borders-radius-1);
+  --Tag-model-status-bottom-left-border-radius: var(--borders-radius-1);
+  --Tag-model-status-status-size: var(--sizes-size-5);
+  --Tag-model-status-status-margin: var(--sizes-size-5);
+  --Tag-model-status-close-size: var(--sizes-size-5);
+  --Tag-model-status-close-margin: var(--sizes-size-5);
+  --Tag-color-active-color: var(--colors-neutral-fill-11);
+  --Tag-color-active-bg-color: var(--colors-brand-5);
+  --Tag-color-inactive-color: var(--colors-neutral-fill-11);
+  --Tag-color-inactive-bg-color: var(--colors-neutral-fill-6);
+  --Tag-color-error-color: var(--colors-neutral-fill-11);
+  --Tag-color-error-bg-color: var(--colors-error-5);
+  --Tag-color-success-color: var(--colors-neutral-fill-11);
+  --Tag-color-success-bg-color: var(--colors-success-5);
+  --Tag-color-processing-color: var(--colors-neutral-fill-11);
+  --Tag-color-processing-bg-color: var(--colors-brand-6);
+  --Tag-color-warning-color: var(--colors-neutral-fill-11);
+  --Tag-color-warning-bg-color: var(--colors-warning-5);
+
+  // tag
+  --Tag-content-fontSize: var(--Tag-base-fontSize);
+  --Tag-height: var(--Tag-base-height);
+  --Tag-borderRadius: var(--Tag-model-normal-top-left-border-radius)
+    var(--Tag-model-normal-top-right-border-radius)
+    var(--Tag-model-normal-bottom-right-border-radius) 
+    var(--Tag-model-normal-bottom-left-border-radius);
+  --Tag-fontColor: var(--Tag-base-color);
+
+  --Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
+  var(--Tag-model-rounded-top-right-border-radius)
+  var(--Tag-model-rounded-bottom-right-border-radius) 
+  var(--Tag-model-rounded-bottom-left-border-radius);
+
+  --Tag-status-margin: var(--Tag-model-status-status-margin);
+  --Tag-status-size: var(--Tag-model-status-status-size);
+  --Tag-close-margin: var(--Tag-model-status-close-margin);
+  --Tag-close-size: var(--Tag-model-status-close-size);
+
+  --Tag-default-color: var(--colors-neutral-fill-9);
+  --Tag-inactive-color: var(--Tag-color-inactive-color);
+  --Tag-active-color: var(--Tag-color-active-color);
+  --Tag-processing-color: var(--Tag-color-processing-color);
+  --Tag-success-color: var(--Tag-color-success-color);
+  --Tag-error-color: var(--Tag-color-error-color);
+  --Tag-warning-color: var( --Tag-color-warning-color);
+  --Tag-inactive-bg-color: var(--Tag-color-inactive-bg-color);
+  --Tag-active-bg-color: var(--Tag-color-active-bg-color);
+  --Tag-processing-bg-color: var(--Tag-color-processing-bg-color);
+  --Tag-success-bg-color: var(--Tag-color-success-bg-color);
+  --Tag-error-bg-color: var(--Tag-color-error-bg-color);
+  --Tag-warning-bg-color: var( --Tag-color-warning-bg-color);
+
+  --Tag-normal-borderWidth: var(--Tag-model-normal-top-border-width)
+   var(--Tag-model-normal-right-border-width)
+   var(--Tag-model-normal-bottom-border-width)
+   var(--Tag-model-normal-left-border-width);
+  --Tag-normal-borderRadius: var(--Tag-model-normal-top-left-border-radius)
+   var(--Tag-model-normal-top-right-border-radius)
+   var(--Tag-model-normal-bottom-right-border-radius)
+   var(--Tag-model-normal-bottom-left-border-radius);
+  --Tag-normal-borderColor: var(--Tag-model-normal-top-border-color)
+   var(--Tag-model-normal-right-border-color)
+   var(--Tag-model-normal-bottom-border-color)
+   var(--Tag-model-normal-left-border-color);
+  --Tag-normal-status-size: var(--Tag-model-normal-status-size);
+  --Tag-normal-status-margin: var(--Tag-model-normal-status-margin);
+
+  --Tag-rounded-borderWidth: var(--Tag-model-rounded-top-border-width)
+  var(--Tag-model-rounded-right-border-width)
+  var(--Tag-model-rounded-bottom-border-width)
+  var(--Tag-model-rounded-left-border-width);
+ --Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
+  var(--Tag-model-rounded-top-right-border-radius)
+  var(--Tag-model-rounded-bottom-right-border-radius)
+  var(--Tag-model-rounded-bottom-left-border-radius);
+ --Tag-rounded-borderColor: var(--Tag-model-rounded-top-border-color)
+  var(--Tag-model-rounded-right-border-color)
+  var(--Tag-model-rounded-bottom-border-color)
+  var(--Tag-model-rounded-left-border-color);
+
+
+}
\ No newline at end of file
diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss
index 26007e69a..a32a53051 100644
--- a/packages/amis-ui/scss/_properties.scss
+++ b/packages/amis-ui/scss/_properties.scss
@@ -1013,19 +1013,6 @@ $remFactor: 16px;
   --UserSelect--border-color: #f7f7f9;
   --UserSelect--content-bg: #f5f7f8;
   --UserSelect--bread-color: #5e626a;
-  // tag
-  --Tag-content-fontSize: var(--fontSizeSm);
-  --Tag-height: #{px2rem(24px)};
-  --Tag-borderRadius: #{px2rem(2px)};
-  --Tag-fontColor: #151a26;
-
-  --Tag-default-color: #f2f2f4;
-  --Tag-inactive-color: #b8babf;
-  --Tag-active-color: var(--colors-brand-5);
-  --Tag-processing-color: var(--colors-brand-6);
-  --Tag-success-color: var(--colors-success-5);
-  --Tag-error-color: var(--colors-error-5);
-  --Tag-warning-color: var(--colors-warning-5);
 
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;
diff --git a/packages/amis-ui/scss/components/_tag.scss b/packages/amis-ui/scss/components/_tag.scss
index 4caecdf4a..20c4db126 100644
--- a/packages/amis-ui/scss/components/_tag.scss
+++ b/packages/amis-ui/scss/components/_tag.scss
@@ -28,79 +28,85 @@
     &--hasColor {
       color: var(--white);
     }
-    border-radius: var(--Tag-borderRadius);
+
+    border-width: var(--Tag-normal-borderWidth);
+    border-radius: var(--Tag-normal-borderRadius);
+    border-color: var(--Tag-normal-borderColor);
+
     &--inactive {
-      background: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-color);
+      background: var(--Tag-inactive-bg-color);
     }
     &--active {
-      background: var(--Tag-active-color);
+      color: var(--Tag-active-color);
+      background: var(--Tag-active-bg-color);
     }
     &--processing {
-      background: var(--Tag-processing-color);
+      color: var(--Tag-processing-color);
+      background: var(--Tag-processing-bg-color);
     }
     &--success {
-      background: var(--Tag-success-color);
+      color: var(--Tag-success-color);
+      background: var(--Tag-success-bg-color);
     }
     &--error {
-      background: var(--Tag-error-color);
+      color: var(--Tag-error-color);
+      background: var(--Tag-error-bg-color);
     }
     &--warning {
-      background: var(--Tag-warning-color);
+      color: var(--Tag-warning-color);
+      background: var(--Tag-warning-bg-color);
     }
   }
 
   &--rounded {
     background-color: var(--white);
-    border-radius: calc((var(--Tag-height) + 2px) / 2);
-    border: 1px solid var(--Tag-default-color);
+    border-style: solid;
+    border-width: var(--Tag-rounded-borderWidth);
+    border-radius: var(--Tag-rounded-borderRadius);
+    border-color: var(--Tag-rounded-borderColor);
     color: var(--Tag-default-color);
     line-height: 22px;
 
     &--inactive {
-      border-color: var(--Tag-inactive-color);
-      color: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-bg-color);
     }
     &--active {
-      border-color: var(--Tag-active-color);
-      color: var(--Tag-active-color);
+      color: var(--Tag-active-bg-color);
     }
     &--processing {
-      border-color: var(--Tag-processing-color);
-      color: var(--Tag-processing-color);
+      color: var(--Tag-processing-bg-color);
     }
     &--success {
-      border-color: var(--Tag-success-color);
-      color: var(--Tag-success-color);
+      color: var(--Tag-success-bg-color);
     }
     &--error {
-      border-color: var(--Tag-error-color);
-      color: var(--Tag-error-color);
+      color: var(--Tag-error-bg-color);
     }
     &--warning {
-      border-color: var(--Tag-warning-color);
-      color: var(--Tag-warning-color);
+      color: var(--Tag-warning-bg-color);
     }
   }
 
   &--status {
     background-color: var(--white);
     &--inactive .#{$ns}Tag--prev {
-      color: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-bg-color);
     }
     &--active .#{$ns}Tag--prev {
-      color: var(--Tag-active-color);
+      color: var(--Tag-active-bg-color);
     }
     &--processing .#{$ns}Tag--prev {
-      color: var(--Tag-processing-color);
+      color: var(--Tag-processing-bg-color);
     }
     &--success .#{$ns}Tag--prev {
-      color: var(--Tag-success-color);
+      color: var(--Tag-success-bg-color);
     }
     &--error .#{$ns}Tag--prev {
-      color: var(--Tag-error-color);
+      color: var(--Tag-error-bg-color);
     }
     &--warning .#{$ns}Tag--prev {
-      color: var(--Tag-warning-color);
+      color: var(--Tag-warning-bg-color);
     }
 
     &:not(&--processing):not(&--active) {
@@ -114,26 +120,26 @@
 
   &--prev {
     color: var(--Tag-default-color);
-    margin-right: var(--gap-sm);
+    margin-right: var(--Tag-status-margin);
     i {
       font-size: #{px2rem(8px)};
     }
     .icon {
-      width: #{px2rem(8px)};
-      height: #{px2rem(8px)};
+      width: var(--Tag-status-size);
+      height: var(--Tag-status-size);
       top: 0;
     }
   }
 
   &--close {
-    margin-left: var(--gap-sm);
-    margin-right: var(--gap-xs);
+    margin-left: var(--Tag-close-margin);
+    margin-right: var(--Tag-close-margin);
     i {
       font-size: #{px2rem(8px)};
     }
     .icon {
-      width: #{px2rem(8px)};
-      height: #{px2rem(8px)};
+      width: var(--Tag-close-size);
+      height: var(--Tag-close-size);
       position: inherit;
     }
     cursor: pointer;