@sdata/web-vue 4.7.1 → 5.0.0

package/es/input-tag/style/index.css

@@ -25,54 +25,54 @@
   align-items: center;
   box-sizing: border-box;
   height: 24px;
-  padding: 0 8px;
-  color: var(--sd-color-text-1);
-  font-weight: 500;
-  font-size: 12px;
+  padding: 0 var(--component-tag-tag-padding-horizontal, var(--component-tag-padding-horizontal, 8px));
+  color: var(--component-tag-tag-default-color-text, var(--component-tag-default-color-text, var(--sd-color-text-1)));
+  font-weight: var(--component-tag-tag-text-font-weight, var(--component-tag-text-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-tag-tag-size-default-font-size, var(--component-tag-size-default-font-size, 12px));
   line-height: 22px;
   white-space: nowrap;
   vertical-align: middle;
-  border: 1px solid transparent;
-  border-radius: var(--sd-border-radius-small);
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) transparent;
+  border-radius: var(--component-tag-tag-border-radius, var(--component-tag-border-radius, var(--sd-border-radius-small)));
 }
 .sd-tag .sd-icon-hover.sd-tag-icon-hover::before {
   width: 16px;
   height: 16px;
 }
 .sd-tag .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-tag-tag-default-color-bg-hover, var(--component-tag-default-color-bg-hover, var(--sd-color-fill-3)));
 }
 .sd-tag-checkable {
   cursor: pointer;
   transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tag-checkable:hover {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-tag-tag-color-bg-not-checked-hover, var(--component-tag-color-bg-not-checked-hover, var(--sd-color-fill-2)));
 }
 .sd-tag-checked {
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  background-color: var(--component-tag-tag-default-color-bg, var(--component-tag-default-color-bg, var(--sd-color-fill-2)));
+  border-color: var(--component-tag-tag-default-color-border, var(--component-tag-default-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag-checkable.sd-tag-checked:hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-tag-tag-default-color-bg-hover, var(--component-tag-default-color-bg-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-tag-tag-default-color-border-hover, var(--component-tag-default-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag-bordered, .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-bordered:hover {
-  border-color: var(--sd-color-border-2);
+  border-color: var(--component-tag-tag-default-bordered-color-border, var(--component-tag-default-bordered-color-border, var(--sd-color-border-2)));
 }
 .sd-tag-size-small {
   height: 20px;
-  font-size: 12px;
+  font-size: var(--component-tag-tag-size-small-font-size, var(--component-tag-size-small-font-size, 12px));
   line-height: 18px;
 }
 .sd-tag-size-medium {
   height: 24px;
-  font-size: 12px;
+  font-size: var(--component-tag-tag-size-medium-font-size, var(--component-tag-size-medium-font-size, var(--component-tag-tag-size-default-font-size, var(--component-tag-size-default-font-size, 12px))));
   line-height: 22px;
 }
 .sd-tag-size-large {
   height: 32px;
-  font-size: 14px;
+  font-size: var(--component-tag-tag-size-large-font-size, var(--component-tag-size-large-font-size, 14px));
   line-height: 30px;
 }
 .sd-tag-hide {
@@ -83,8 +83,8 @@
   opacity: 0.8;
 }
 .sd-tag-icon {
-  margin-right: 4px;
-  color: var(--sd-color-text-2);
+  margin-right: var(--component-tag-tag-icon-margin-right, var(--component-tag-icon-margin-right, var(--spacing-2, 4px)));
+  color: var(--component-tag-tag-default-color-icon, var(--component-tag-default-color-icon, var(--sd-color-text-2)));
 }
 .sd-tag-text {
   min-width: 1em;
@@ -101,239 +101,239 @@
   max-width: none;
 }
 .sd-tag.sd-tag-checked.sd-tag-red {
-  color: rgb(var(--sd-red-6));
-  background-color: rgb(var(--sd-red-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-red-color-text, var(--component-tag-red-color-text, rgb(var(--sd-red-6))));
+  background-color: var(--component-tag-tag-red-color-bg, var(--component-tag-red-color-bg, rgb(var(--sd-red-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-red-color-border, var(--component-tag-red-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-red-2));
+  background-color: var(--component-tag-tag-red-color-icon-bg-hover, var(--component-tag-red-color-icon-bg-hover, rgb(var(--sd-red-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
-  background-color: rgb(var(--sd-red-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-red-color-bg-hover, var(--component-tag-red-color-bg-hover, rgb(var(--sd-red-2))));
+  border-color: var(--component-tag-tag-red-color-border-hover, var(--component-tag-red-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-red.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-red.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-red-6));
+  border-color: var(--component-tag-tag-red-bordered-color-border, var(--component-tag-red-bordered-color-border, rgb(var(--sd-red-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-red .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-red .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-red .sd-tag-loading-icon {
-  color: rgb(var(--sd-red-6));
+  color: var(--component-tag-tag-red-color-icon, var(--component-tag-red-color-icon, rgb(var(--sd-red-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orangered {
-  color: rgb(var(--sd-orangered-6));
-  background-color: rgb(var(--sd-orangered-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-orangered-color-text, var(--component-tag-orangered-color-text, rgb(var(--sd-orangered-6))));
+  background-color: var(--component-tag-tag-orangered-color-bg, var(--component-tag-orangered-color-bg, rgb(var(--sd-orangered-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-orangered-color-border, var(--component-tag-orangered-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-orangered-2));
+  background-color: var(--component-tag-tag-orangered-color-icon-bg-hover, var(--component-tag-orangered-color-icon-bg-hover, rgb(var(--sd-orangered-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
-  background-color: rgb(var(--sd-orangered-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-orangered-color-bg-hover, var(--component-tag-orangered-color-bg-hover, rgb(var(--sd-orangered-2))));
+  border-color: var(--component-tag-tag-orangered-color-border-hover, var(--component-tag-orangered-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orangered.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-orangered.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-orangered-6));
+  border-color: var(--component-tag-tag-orangered-bordered-color-border, var(--component-tag-orangered-bordered-color-border, rgb(var(--sd-orangered-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-loading-icon {
-  color: rgb(var(--sd-orangered-6));
+  color: var(--component-tag-tag-orangered-color-icon, var(--component-tag-orangered-color-icon, rgb(var(--sd-orangered-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orange {
-  color: rgb(var(--sd-orange-6));
-  background-color: rgb(var(--sd-orange-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-orange-color-text, var(--component-tag-orange-color-text, rgb(var(--sd-orange-6))));
+  background-color: var(--component-tag-tag-orange-color-bg, var(--component-tag-orange-color-bg, rgb(var(--sd-orange-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-orange-color-border, var(--component-tag-orange-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-orange-2));
+  background-color: var(--component-tag-tag-orange-color-icon-bg-hover, var(--component-tag-orange-color-icon-bg-hover, rgb(var(--sd-orange-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
-  background-color: rgb(var(--sd-orange-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-orange-color-bg-hover, var(--component-tag-orange-color-bg-hover, rgb(var(--sd-orange-2))));
+  border-color: var(--component-tag-tag-orange-color-border-hover, var(--component-tag-orange-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orange.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-orange.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-orange-6));
+  border-color: var(--component-tag-tag-orange-bordered-color-border, var(--component-tag-orange-bordered-color-border, rgb(var(--sd-orange-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-loading-icon {
-  color: rgb(var(--sd-orange-6));
+  color: var(--component-tag-tag-orange-color-icon, var(--component-tag-orange-color-icon, rgb(var(--sd-orange-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-gold {
-  color: rgb(var(--sd-gold-6));
-  background-color: rgb(var(--sd-gold-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-gold-color-text, var(--component-tag-gold-color-text, rgb(var(--sd-gold-6))));
+  background-color: var(--component-tag-tag-gold-color-bg, var(--component-tag-gold-color-bg, rgb(var(--sd-gold-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-gold-color-border, var(--component-tag-gold-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-gold-2));
+  background-color: var(--component-tag-tag-gold-color-icon-bg-hover, var(--component-tag-gold-color-icon-bg-hover, rgb(var(--sd-gold-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
-  background-color: rgb(var(--sd-gold-3));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-gold-color-bg-hover, var(--component-tag-gold-color-bg-hover, rgb(var(--sd-gold-3))));
+  border-color: var(--component-tag-tag-gold-color-border-hover, var(--component-tag-gold-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-gold.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-gold.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-gold-6));
+  border-color: var(--component-tag-tag-gold-bordered-color-border, var(--component-tag-gold-bordered-color-border, rgb(var(--sd-gold-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-loading-icon {
-  color: rgb(var(--sd-gold-6));
+  color: var(--component-tag-tag-gold-color-icon, var(--component-tag-gold-color-icon, rgb(var(--sd-gold-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-lime {
-  color: rgb(var(--sd-lime-6));
-  background-color: rgb(var(--sd-lime-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-lime-color-text, var(--component-tag-lime-color-text, rgb(var(--sd-lime-6))));
+  background-color: var(--component-tag-tag-lime-color-bg, var(--component-tag-lime-color-bg, rgb(var(--sd-lime-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-lime-color-border, var(--component-tag-lime-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-lime-2));
+  background-color: var(--component-tag-tag-lime-color-icon-bg-hover, var(--component-tag-lime-color-icon-bg-hover, rgb(var(--sd-lime-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
-  background-color: rgb(var(--sd-lime-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-lime-color-bg-hover, var(--component-tag-lime-color-bg-hover, rgb(var(--sd-lime-2))));
+  border-color: var(--component-tag-tag-lime-color-border-hover, var(--component-tag-lime-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-lime.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-lime.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-lime-6));
+  border-color: var(--component-tag-tag-lime-bordered-color-border, var(--component-tag-lime-bordered-color-border, rgb(var(--sd-lime-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-loading-icon {
-  color: rgb(var(--sd-lime-6));
+  color: var(--component-tag-tag-lime-color-icon, var(--component-tag-lime-color-icon, rgb(var(--sd-lime-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-green {
-  color: rgb(var(--sd-green-6));
-  background-color: rgb(var(--sd-green-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-green-color-text, var(--component-tag-green-color-text, rgb(var(--sd-green-6))));
+  background-color: var(--component-tag-tag-green-color-bg, var(--component-tag-green-color-bg, rgb(var(--sd-green-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-green-color-border, var(--component-tag-green-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-green-2));
+  background-color: var(--component-tag-tag-green-color-icon-bg-hover, var(--component-tag-green-color-icon-bg-hover, rgb(var(--sd-green-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
-  background-color: rgb(var(--sd-green-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-green-color-bg-hover, var(--component-tag-green-color-bg-hover, rgb(var(--sd-green-2))));
+  border-color: var(--component-tag-tag-green-color-border-hover, var(--component-tag-green-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-green.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-green.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-green-6));
+  border-color: var(--component-tag-tag-green-bordered-color-border, var(--component-tag-green-bordered-color-border, rgb(var(--sd-green-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-green .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-green .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-green .sd-tag-loading-icon {
-  color: rgb(var(--sd-green-6));
+  color: var(--component-tag-tag-green-color-icon, var(--component-tag-green-color-icon, rgb(var(--sd-green-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-cyan {
-  color: rgb(var(--sd-cyan-6));
-  background-color: rgb(var(--sd-cyan-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-cyan-color-text, var(--component-tag-cyan-color-text, rgb(var(--sd-cyan-6))));
+  background-color: var(--component-tag-tag-cyan-color-bg, var(--component-tag-cyan-color-bg, rgb(var(--sd-cyan-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-cyan-color-border, var(--component-tag-cyan-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-cyan-2));
+  background-color: var(--component-tag-tag-cyan-color-icon-bg-hover, var(--component-tag-cyan-color-icon-bg-hover, rgb(var(--sd-cyan-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
-  background-color: rgb(var(--sd-cyan-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-cyan-color-bg-hover, var(--component-tag-cyan-color-bg-hover, rgb(var(--sd-cyan-2))));
+  border-color: var(--component-tag-tag-cyan-color-border-hover, var(--component-tag-cyan-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-cyan.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-cyan.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-cyan-6));
+  border-color: var(--component-tag-tag-cyan-bordered-color-border, var(--component-tag-cyan-bordered-color-border, rgb(var(--sd-cyan-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-loading-icon {
-  color: rgb(var(--sd-cyan-6));
+  color: var(--component-tag-tag-cyan-color-icon, var(--component-tag-cyan-color-icon, rgb(var(--sd-cyan-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-blue {
-  color: rgb(var(--sd-blue-6));
-  background-color: rgb(var(--sd-blue-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-blue-color-text, var(--component-tag-blue-color-text, rgb(var(--sd-blue-6))));
+  background-color: var(--component-tag-tag-blue-color-bg, var(--component-tag-blue-color-bg, rgb(var(--sd-blue-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-blue-color-border, var(--component-tag-blue-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-blue-2));
+  background-color: var(--component-tag-tag-blue-color-icon-bg-hover, var(--component-tag-blue-color-icon-bg-hover, rgb(var(--sd-blue-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
-  background-color: rgb(var(--sd-blue-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-blue-color-bg-hover, var(--component-tag-blue-color-bg-hover, rgb(var(--sd-blue-2))));
+  border-color: var(--component-tag-tag-blue-color-border-hover, var(--component-tag-blue-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-blue.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-blue.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-blue-6));
+  border-color: var(--component-tag-tag-blue-bordered-color-border, var(--component-tag-blue-bordered-color-border, rgb(var(--sd-blue-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-loading-icon {
-  color: rgb(var(--sd-blue-6));
+  color: var(--component-tag-tag-blue-color-icon, var(--component-tag-blue-color-icon, rgb(var(--sd-blue-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-sdblue {
-  color: rgb(var(--sd-sdblue-6));
-  background-color: rgb(var(--sd-sdblue-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-sdblue-color-text, var(--component-tag-sdblue-color-text, rgb(var(--sd-sdblue-6))));
+  background-color: var(--component-tag-tag-sdblue-color-bg, var(--component-tag-sdblue-color-bg, rgb(var(--sd-sdblue-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-sdblue-color-border, var(--component-tag-sdblue-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-sdblue-2));
+  background-color: var(--component-tag-tag-sdblue-color-icon-bg-hover, var(--component-tag-sdblue-color-icon-bg-hover, rgb(var(--sd-sdblue-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
-  background-color: rgb(var(--sd-sdblue-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-sdblue-color-bg-hover, var(--component-tag-sdblue-color-bg-hover, rgb(var(--sd-sdblue-2))));
+  border-color: var(--component-tag-tag-sdblue-color-border-hover, var(--component-tag-sdblue-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-sdblue.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-sdblue.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-sdblue-6));
+  border-color: var(--component-tag-tag-sdblue-bordered-color-border, var(--component-tag-sdblue-bordered-color-border, rgb(var(--sd-sdblue-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-loading-icon {
-  color: rgb(var(--sd-sdblue-6));
+  color: var(--component-tag-tag-sdblue-color-icon, var(--component-tag-sdblue-color-icon, rgb(var(--sd-sdblue-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-purple {
-  color: rgb(var(--sd-purple-6));
-  background-color: rgb(var(--sd-purple-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-purple-color-text, var(--component-tag-purple-color-text, rgb(var(--sd-purple-6))));
+  background-color: var(--component-tag-tag-purple-color-bg, var(--component-tag-purple-color-bg, rgb(var(--sd-purple-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-purple-color-border, var(--component-tag-purple-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-purple-2));
+  background-color: var(--component-tag-tag-purple-color-icon-bg-hover, var(--component-tag-purple-color-icon-bg-hover, rgb(var(--sd-purple-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
-  background-color: rgb(var(--sd-purple-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-purple-color-bg-hover, var(--component-tag-purple-color-bg-hover, rgb(var(--sd-purple-2))));
+  border-color: var(--component-tag-tag-purple-color-border-hover, var(--component-tag-purple-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-purple.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-purple.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-purple-6));
+  border-color: var(--component-tag-tag-purple-bordered-color-border, var(--component-tag-purple-bordered-color-border, rgb(var(--sd-purple-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-loading-icon {
-  color: rgb(var(--sd-purple-6));
+  color: var(--component-tag-tag-purple-color-icon, var(--component-tag-purple-color-icon, rgb(var(--sd-purple-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-pinkpurple {
-  color: rgb(var(--sd-pinkpurple-6));
-  background-color: rgb(var(--sd-pinkpurple-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-pinkpurple-color-text, var(--component-tag-pinkpurple-color-text, rgb(var(--sd-pinkpurple-6))));
+  background-color: var(--component-tag-tag-pinkpurple-color-bg, var(--component-tag-pinkpurple-color-bg, rgb(var(--sd-pinkpurple-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-pinkpurple-color-border, var(--component-tag-pinkpurple-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-pinkpurple-2));
+  background-color: var(--component-tag-tag-pinkpurple-color-icon-bg-hover, var(--component-tag-pinkpurple-color-icon-bg-hover, rgb(var(--sd-pinkpurple-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
-  background-color: rgb(var(--sd-pinkpurple-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-pinkpurple-color-bg-hover, var(--component-tag-pinkpurple-color-bg-hover, rgb(var(--sd-pinkpurple-2))));
+  border-color: var(--component-tag-tag-pinkpurple-color-border-hover, var(--component-tag-pinkpurple-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-pinkpurple-6));
+  border-color: var(--component-tag-tag-pinkpurple-bordered-color-border, var(--component-tag-pinkpurple-bordered-color-border, rgb(var(--sd-pinkpurple-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-loading-icon {
-  color: rgb(var(--sd-pinkpurple-6));
+  color: var(--component-tag-tag-pinkpurple-color-icon, var(--component-tag-pinkpurple-color-icon, rgb(var(--sd-pinkpurple-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-magenta {
-  color: rgb(var(--sd-magenta-6));
-  background-color: rgb(var(--sd-magenta-1));
-  border: 1px solid transparent;
+  color: var(--component-tag-tag-magenta-color-text, var(--component-tag-magenta-color-text, rgb(var(--sd-magenta-6))));
+  background-color: var(--component-tag-tag-magenta-color-bg, var(--component-tag-magenta-color-bg, rgb(var(--sd-magenta-1))));
+  border: 1px var(--component-tag-tag-border-type, var(--component-tag-border-type, solid)) var(--component-tag-tag-magenta-color-border, var(--component-tag-magenta-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sd-magenta-2));
+  background-color: var(--component-tag-tag-magenta-color-icon-bg-hover, var(--component-tag-magenta-color-icon-bg-hover, rgb(var(--sd-magenta-2))));
 }
 .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
-  background-color: rgb(var(--sd-magenta-2));
-  border-color: transparent;
+  background-color: var(--component-tag-tag-magenta-color-bg-hover, var(--component-tag-magenta-color-bg-hover, rgb(var(--sd-magenta-2))));
+  border-color: var(--component-tag-tag-magenta-color-border-hover, var(--component-tag-magenta-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-tag.sd-tag-checked.sd-tag-magenta.sd-tag-bordered, .sd-tag.sd-tag-checked.sd-tag-magenta.sd-tag-bordered:hover {
-  border-color: rgb(var(--sd-magenta-6));
+  border-color: var(--component-tag-tag-magenta-bordered-color-border, var(--component-tag-magenta-bordered-color-border, rgb(var(--sd-magenta-6))));
 }
 .sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-loading-icon {
-  color: rgb(var(--sd-magenta-6));
+  color: var(--component-tag-tag-magenta-color-icon, var(--component-tag-magenta-color-icon, rgb(var(--sd-magenta-6))));
 }
 .sd-tag.sd-tag-custom-color {
-  color: var(--sd-tag-color, var(--sd-color-white));
-  background-color: var(--sd-tag-bg-color, var(--sd-color-fill-2));
+  color: var(--sd-tag-color, var(--component-tag-tag-custom-color-text, var(--component-tag-custom-color-text, var(--sd-color-white))));
+  background-color: var(--sd-tag-bg-color, var(--component-tag-tag-default-color-bg, var(--component-tag-default-color-bg, var(--sd-color-fill-2))));
 }
 .sd-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--component-tag-tag-custom-color-icon-bg-hover, var(--component-tag-custom-color-icon-bg-hover, rgba(255, 255, 255, 0.2)));
 }
 .sd-tag.sd-tag-custom-color.sd-tag-checked {
-  color: var(--sd-tag-color, var(--sd-color-white));
-  background-color: var(--sd-tag-bg-color, var(--sd-color-fill-2));
+  color: var(--sd-tag-color, var(--component-tag-tag-custom-color-text, var(--component-tag-custom-color-text, var(--sd-color-white))));
+  background-color: var(--sd-tag-bg-color, var(--component-tag-tag-default-color-bg, var(--component-tag-default-color-bg, var(--sd-color-fill-2))));
 }
 .sd-tag.sd-tag-custom-color.sd-tag-bordered {
-  border-color: var(--sd-tag-border-color, var(--sd-color-border-2));
+  border-color: var(--sd-tag-border-color, var(--component-tag-tag-default-bordered-color-border, var(--component-tag-default-bordered-color-border, var(--sd-color-border-2))));
 }
 .sd-tag-custom-color .sd-tag-icon,
 .sd-tag-custom-color .sd-tag-close-btn,
 .sd-tag-custom-color .sd-tag-loading-icon {
-  color: var(--sd-tag-color, var(--sd-color-white));
+  color: var(--sd-tag-color, var(--component-tag-tag-custom-color-text, var(--component-tag-custom-color-text, var(--sd-color-white))));
 }
 .sd-tag .sd-tag-close-btn {
   margin-left: 4px;
@@ -347,115 +347,115 @@
   font-size: 12px;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked {
   color: rgba(255, 255, 255, 0.9);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red {
   background-color: rgba(var(--sd-red-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-red-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
   background-color: rgba(var(--sd-red-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered {
   background-color: rgba(var(--sd-orangered-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-orangered-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
   background-color: rgba(var(--sd-orangered-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange {
   background-color: rgba(var(--sd-orange-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-orange-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
   background-color: rgba(var(--sd-orange-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold {
   background-color: rgba(var(--sd-gold-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-gold-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
   background-color: rgba(var(--sd-gold-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime {
   background-color: rgba(var(--sd-lime-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-lime-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
   background-color: rgba(var(--sd-lime-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green {
   background-color: rgba(var(--sd-green-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-green-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
   background-color: rgba(var(--sd-green-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan {
   background-color: rgba(var(--sd-cyan-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-cyan-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
   background-color: rgba(var(--sd-cyan-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue {
   background-color: rgba(var(--sd-blue-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-blue-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
   background-color: rgba(var(--sd-blue-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue {
   background-color: rgba(var(--sd-sdblue-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-sdblue-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
   background-color: rgba(var(--sd-sdblue-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple {
   background-color: rgba(var(--sd-purple-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-purple-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
   background-color: rgba(var(--sd-purple-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple {
   background-color: rgba(var(--sd-pinkpurple-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-pinkpurple-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
   background-color: rgba(var(--sd-pinkpurple-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta {
   background-color: rgba(var(--sd-magenta-6), 0.2);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sd-magenta-6), 0.35);
 }
-:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
   background-color: rgba(var(--sd-magenta-6), 0.35);
 }
 
@@ -464,7 +464,7 @@
 }
 .sd-tag-rtl .sd-tag-icon {
   margin-right: 0;
-  margin-left: 4px;
+  margin-left: var(--component-tag-tag-icon-margin-right, var(--component-tag-icon-margin-right, var(--spacing-2, 4px)));
 }
 .sd-tag-rtl .sd-tag-close-btn, .sd-tag-rtl .sd-tag-loading-icon {
   margin-right: 4px;
@@ -483,52 +483,52 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  background-color: var(--sd-color-fill-2);
-  border: 1px solid transparent;
-  border-radius: var(--sd-border-radius-small);
+  color: var(--component-input-input-color-text, var(--component-input-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)));
+  background-color: var(--component-input-input-color-bg, var(--component-input-color-bg, var(--sd-color-fill-2)));
+  border: 1px solid var(--component-input-input-color-border, var(--component-input-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
+  border-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
   cursor: text;
   transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-tag:hover {
-  background-color: var(--sd-color-fill-3);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-hover, var(--component-input-color-bg-hover, var(--sd-color-fill-3)));
+  border-color: var(--component-input-input-color-border-hover, var(--component-input-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-tag:focus-within, .sd-input-tag.sd-input-tag-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-primary-6));
-  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
+  background-color: var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)));
+  border-color: var(--component-input-input-color-border-focus, var(--component-input-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-focus, var(--component-input-size-shadow-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-focus, var(--component-input-color-shadow-focus, var(--sd-color-primary-light-2)));
 }
 .sd-input-tag.sd-input-tag-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
   cursor: not-allowed;
 }
 .sd-input-tag.sd-input-tag-disabled:hover {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: transparent;
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-tag.sd-input-tag-disabled .sd-input-tag-prefix,
 .sd-input-tag.sd-input-tag-disabled .sd-input-tag-suffix {
   color: inherit;
 }
 .sd-input-tag.sd-input-tag-error {
-  background-color: var(--sd-color-danger-light-1);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error, var(--component-input-color-bg-error, var(--sd-color-danger-light-1)));
+  border-color: var(--component-input-input-color-border-error, var(--component-input-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-tag.sd-input-tag-error:hover {
-  background-color: var(--sd-color-danger-light-2);
-  border-color: transparent;
+  background-color: var(--component-input-input-color-bg-error-hover, var(--component-input-color-bg-error-hover, var(--sd-color-danger-light-2)));
+  border-color: var(--component-input-input-color-border-error-hover, var(--component-input-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
 }
 .sd-input-tag.sd-input-tag-error:focus-within, .sd-input-tag.sd-input-tag-error.sd-input-tag-focus {
   z-index: 1;
-  background-color: var(--sd-color-bg-2);
-  border-color: rgb(var(--sd-danger-6));
-  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
+  background-color: var(--component-input-input-color-bg-error-focus, var(--component-input-color-bg-error-focus, var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)))));
+  border-color: var(--component-input-input-color-border-error-focus, var(--component-input-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  box-shadow: 0 0 0 var(--component-input-input-size-shadow-error-focus, var(--component-input-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-error-focus, var(--component-input-color-shadow-error-focus, var(--sd-color-danger-light-2)));
 }
 .sd-input-tag .sd-input-tag-prefix,
 .sd-input-tag .sd-input-tag-suffix {
@@ -540,7 +540,7 @@
 }
 .sd-input-tag .sd-input-tag-prefix > svg,
 .sd-input-tag .sd-input-tag-suffix > svg {
-  font-size: 14px;
+  font-size: var(--component-input-input-size-default-icon-suffix-size, var(--component-input-size-default-icon-suffix-size, 14px));
 }
 .sd-input-tag .sd-input-tag-prefix {
   padding-right: 12px;
@@ -548,27 +548,27 @@
 }
 .sd-input-tag .sd-input-tag-suffix {
   padding-left: 12px;
-  color: var(--sd-color-text-2);
+  color: var(--component-input-input-color-suffix-text, var(--component-input-color-suffix-text, var(--sd-color-text-2)));
 }
 .sd-input-tag .sd-input-tag-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-input-tag .sd-input-tag-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-input-input-feedback-icon-color-validating, var(--component-input-feedback-icon-color-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-input-tag .sd-input-tag-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-input-input-feedback-icon-color-success, var(--component-input-feedback-icon-color-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-input-tag .sd-input-tag-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-input-input-feedback-icon-color-warning, var(--component-input-feedback-icon-color-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-input-tag .sd-input-tag-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-input-input-feedback-icon-color-error, var(--component-input-feedback-icon-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-input-tag .sd-input-tag-clear-btn {
   align-self: center;
-  color: var(--sd-color-text-2);
-  font-size: 12px;
+  color: var(--component-input-input-color-icon-clear, var(--component-input-color-icon-clear, var(--sd-color-text-2)));
+  font-size: var(--component-input-input-size-icon-clear, var(--component-input-size-icon-clear, var(--size-3, 12px)));
   visibility: hidden;
   cursor: pointer;
 }
@@ -580,7 +580,7 @@
   visibility: visible;
 }
 .sd-input-tag:not(.sd-input-tag-focus) .sd-input-tag-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-4);
+  background-color: var(--component-input-input-color-icon-clear-bg-hover, var(--component-input-color-icon-clear-bg-hover, var(--sd-color-fill-4)));
 }
 .sd-input-tag {
   position: relative;
@@ -595,8 +595,8 @@
   max-width: 100%;
 }
 .sd-input-tag.sd-input-tag-has-tag {
-  padding-right: 4px;
-  padding-left: 4px;
+  padding-right: var(--component-input-tag-input-tag-padding-horizontal, var(--component-input-tag-padding-horizontal, var(--spacing-2, 4px)));
+  padding-left: var(--component-input-tag-input-tag-padding-horizontal, var(--component-input-tag-padding-horizontal, var(--spacing-2, 4px)));
 }
 .sd-input-tag.sd-input-tag-has-prefix {
   padding-left: 12px;
@@ -624,21 +624,21 @@
   flex-shrink: 0;
   align-items: center;
   min-width: 0;
-  margin-right: 4px;
-  font-size: 12px;
+  margin-right: var(--component-input-tag-input-tag-tag-margin-right, var(--component-input-tag-tag-margin-right, var(--spacing-2, 4px)));
+  font-size: var(--component-input-tag-input-tag-tag-font-size, var(--component-input-tag-tag-font-size, var(--font-size-body-1, 12px)));
   white-space: pre-wrap;
   word-break: break-word;
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
-  color: var(--sd-color-text-1);
-  background-color: var(--sd-color-bg-2);
-  border-color: var(--sd-color-fill-3);
+  color: var(--component-input-tag-input-tag-color-text-default, var(--component-input-tag-color-text-default, var(--sd-color-text-1)));
+  background-color: var(--component-input-tag-input-tag-tag-color-bg, var(--component-input-tag-tag-color-bg, var(--sd-color-bg-2)));
+  border-color: var(--component-input-tag-input-tag-tag-color-border, var(--component-input-tag-tag-color-border, var(--sd-color-fill-3)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag .sd-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-input-tag-input-tag-tag-remove-icon-color-bg, var(--component-input-tag-tag-remove-icon-color-bg, var(--sd-color-fill-2)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--component-tag-tag-custom-color-icon-bg-hover, var(--component-tag-custom-color-icon-bg-hover, rgba(255, 255, 255, 0.2)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
   flex-shrink: 0;
@@ -660,13 +660,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input::placeholder {
-  color: var(--sd-color-text-3);
+  color: var(--component-input-input-color-placeholder-text, var(--component-input-color-placeholder-text, var(--sd-color-text-3)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input[disabled]::placeholder {
-  color: var(--sd-color-text-4);
+  color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input[disabled] {
-  -webkit-text-fill-color: var(--sd-color-text-4);
+  -webkit-text-fill-color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
@@ -683,16 +683,16 @@
   pointer-events: none;
 }
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
-  background-color: var(--sd-color-fill-2);
-  border-color: var(--sd-color-fill-2);
+  background-color: var(--component-input-tag-input-tag-tag-color-bg-focus, var(--component-input-tag-tag-color-bg-focus, var(--sd-color-fill-2)));
+  border-color: var(--component-input-tag-input-tag-tag-color-border-focus, var(--component-input-tag-tag-color-border-focus, var(--sd-color-fill-2)));
 }
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag .sd-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-3);
+  background-color: var(--component-input-tag-input-tag-tag-remove-icon-color-bg-focus, var(--component-input-tag-tag-remove-icon-color-bg-focus, var(--sd-color-fill-3)));
 }
 .sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-fill-2);
-  border-color: var(--sd-color-fill-3);
+  color: var(--component-input-tag-input-tag-color-text-disabled, var(--component-input-tag-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-input-tag-input-tag-tag-color-bg-disabled, var(--component-input-tag-tag-color-bg-disabled, var(--sd-color-fill-2)));
+  border-color: var(--component-input-tag-input-tag-tag-color-border-disabled, var(--component-input-tag-tag-color-border-disabled, var(--sd-color-fill-3)));
 }
 .sd-input-tag.sd-input-tag-readonly, .sd-input-tag.sd-input-tag-disabled-input {
   cursor: default;