@sdata/web-vue 4.7.1 → 5.0.0

package/es/tag/style/index.css

@@ -20,54 +20,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 {
@@ -78,8 +78,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;
@@ -96,239 +96,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;
@@ -342,115 +342,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);
 }
 
@@ -459,7 +459,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;