@sdata/web-vue 1.19.0 → 2.1.0

package/es/tag/interface.d.ts

@@ -18,4 +18,6 @@ export interface TagProps {
     ellipsisExpandTrigger?: 'click';
     ellipsisTooltip?: boolean | EllipsisTooltipProps;
     ellipsisPerformant?: boolean;
+    textColor?: string;
+    backgroundAlpha?: number;
 }

package/es/tag/style/index.css

@@ -21,40 +21,39 @@
   box-sizing: border-box;
   height: 24px;
   padding: 0 8px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   font-size: 12px;
   line-height: 22px;
   white-space: nowrap;
   vertical-align: middle;
   border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
+  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(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-tag-checkable {
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-tag-checkable:hover {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-tag-checked {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
 }
-.sd-tag .sd-tag-checkable.sd-tag-checked:hover {
-  background-color: var(--color-fill-3);
+.sd-tag-checkable.sd-tag-checked:hover {
+  background-color: var(--sd-color-fill-3);
   border-color: transparent;
 }
-.sd-tag-bordered,
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-bordered:hover {
-  border-color: var(--color-border-2);
+.sd-tag-bordered, .sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-bordered:hover {
+  border-color: var(--sd-color-border-2);
 }
 .sd-tag-size-small {
   height: 20px;
@@ -80,7 +79,7 @@
 }
 .sd-tag-icon {
   margin-right: 4px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-tag-text {
   min-width: 0;
@@ -96,156 +95,157 @@
   min-width: fit-content;
   max-width: none;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-red {
-  color: rgb(var(--red-6));
-  background-color: rgb(var(--red-1));
+.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;
 }
-.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(--red-6));
+.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));
 }
 .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(--red-6));
+  color: rgb(var(--sd-red-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orangered {
-  color: rgb(var(--orangered-6));
-  background-color: rgb(var(--orangered-1));
+.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;
 }
-.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(--orangered-6));
+.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));
 }
 .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(--orangered-6));
+  color: rgb(var(--sd-orangered-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orange {
-  color: rgb(var(--orange-6));
-  background-color: rgb(var(--orange-1));
+.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;
 }
-.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(--orange-6));
+.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));
 }
 .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(--orange-6));
+  color: rgb(var(--sd-orange-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-gold {
-  color: rgb(var(--gold-6));
-  background-color: rgb(var(--gold-1));
+.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;
 }
-.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(--gold-6));
+.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));
 }
 .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(--gold-6));
+  color: rgb(var(--sd-gold-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-lime {
-  color: rgb(var(--lime-6));
-  background-color: rgb(var(--lime-1));
+.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;
 }
-.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(--lime-6));
+.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));
 }
 .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(--lime-6));
+  color: rgb(var(--sd-lime-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-green {
-  color: rgb(var(--green-6));
-  background-color: rgb(var(--green-1));
+.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;
 }
-.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(--green-6));
+.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));
 }
 .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(--green-6));
+  color: rgb(var(--sd-green-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-cyan {
-  color: rgb(var(--cyan-6));
-  background-color: rgb(var(--cyan-1));
+.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;
 }
-.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(--cyan-6));
+.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));
 }
 .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(--cyan-6));
+  color: rgb(var(--sd-cyan-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-blue {
-  color: rgb(var(--blue-6));
-  background-color: rgb(var(--blue-1));
+.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;
 }
-.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(--blue-6));
+.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));
 }
 .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(--blue-6));
+  color: rgb(var(--sd-blue-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-sdblue {
-  color: rgb(var(--sdblue-6));
-  background-color: rgb(var(--sdblue-1));
+.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;
 }
-.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(--sdblue-6));
+.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));
 }
 .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(--sdblue-6));
+  color: rgb(var(--sd-sdblue-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-purple {
-  color: rgb(var(--purple-6));
-  background-color: rgb(var(--purple-1));
+.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;
 }
-.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(--purple-6));
+.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));
 }
 .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(--purple-6));
+  color: rgb(var(--sd-purple-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-pinkpurple {
-  color: rgb(var(--pinkpurple-6));
-  background-color: rgb(var(--pinkpurple-1));
+.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;
 }
-.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(--pinkpurple-6));
+.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));
 }
 .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(--pinkpurple-6));
+  color: rgb(var(--sd-pinkpurple-6));
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-magenta {
-  color: rgb(var(--magenta-6));
-  background-color: rgb(var(--magenta-1));
+.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;
 }
-.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(--magenta-6));
+.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));
 }
 .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(--magenta-6));
+  color: rgb(var(--sd-magenta-6));
 }
-.sd-tag .sd-tag.sd-tag-custom-color {
-  color: var(--color-white);
+.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));
 }
-.sd-tag .sd-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: 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));
+}
+.sd-tag.sd-tag-custom-color.sd-tag-bordered {
+  border-color: var(--sd-tag-border-color, 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));
+}
 .sd-tag .sd-tag-close-btn {
   margin-left: 4px;
   font-size: 12px;
@@ -262,112 +262,112 @@
   color: rgba(255, 255, 255, 0.9);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red {
-  background-color: rgba(var(--red-6), 0.2);
+  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 {
-  background-color: rgba(var(--red-6), 0.35);
+  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 {
-  background-color: rgba(var(--red-6), 0.35);
+  background-color: rgba(var(--sd-red-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered {
-  background-color: rgba(var(--orangered-6), 0.2);
+  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 {
-  background-color: rgba(var(--orangered-6), 0.35);
+  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 {
-  background-color: rgba(var(--orangered-6), 0.35);
+  background-color: rgba(var(--sd-orangered-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange {
-  background-color: rgba(var(--orange-6), 0.2);
+  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 {
-  background-color: rgba(var(--orange-6), 0.35);
+  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 {
-  background-color: rgba(var(--orange-6), 0.35);
+  background-color: rgba(var(--sd-orange-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold {
-  background-color: rgba(var(--gold-6), 0.2);
+  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 {
-  background-color: rgba(var(--gold-6), 0.35);
+  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 {
-  background-color: rgba(var(--gold-6), 0.35);
+  background-color: rgba(var(--sd-gold-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime {
-  background-color: rgba(var(--lime-6), 0.2);
+  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 {
-  background-color: rgba(var(--lime-6), 0.35);
+  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 {
-  background-color: rgba(var(--lime-6), 0.35);
+  background-color: rgba(var(--sd-lime-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green {
-  background-color: rgba(var(--green-6), 0.2);
+  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 {
-  background-color: rgba(var(--green-6), 0.35);
+  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 {
-  background-color: rgba(var(--green-6), 0.35);
+  background-color: rgba(var(--sd-green-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan {
-  background-color: rgba(var(--cyan-6), 0.2);
+  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 {
-  background-color: rgba(var(--cyan-6), 0.35);
+  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 {
-  background-color: rgba(var(--cyan-6), 0.35);
+  background-color: rgba(var(--sd-cyan-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue {
-  background-color: rgba(var(--blue-6), 0.2);
+  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 {
-  background-color: rgba(var(--blue-6), 0.35);
+  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 {
-  background-color: rgba(var(--blue-6), 0.35);
+  background-color: rgba(var(--sd-blue-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue {
-  background-color: rgba(var(--sdblue-6), 0.2);
+  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 {
-  background-color: rgba(var(--sdblue-6), 0.35);
+  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 {
-  background-color: rgba(var(--sdblue-6), 0.35);
+  background-color: rgba(var(--sd-sdblue-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple {
-  background-color: rgba(var(--purple-6), 0.2);
+  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 {
-  background-color: rgba(var(--purple-6), 0.35);
+  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 {
-  background-color: rgba(var(--purple-6), 0.35);
+  background-color: rgba(var(--sd-purple-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple {
-  background-color: rgba(var(--pinkpurple-6), 0.2);
+  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 {
-  background-color: rgba(var(--pinkpurple-6), 0.35);
+  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 {
-  background-color: rgba(var(--pinkpurple-6), 0.35);
+  background-color: rgba(var(--sd-pinkpurple-6), 0.35);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta {
-  background-color: rgba(var(--magenta-6), 0.2);
+  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 {
-  background-color: rgba(var(--magenta-6), 0.35);
+  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 {
-  background-color: rgba(var(--magenta-6), 0.35);
+  background-color: rgba(var(--sd-magenta-6), 0.35);
 }
 
 .sd-tag-rtl {

package/es/tag/style/index.scss

@@ -59,13 +59,15 @@ $colors:
     border-color: $tag-default-color-border;
   }
 
-  .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked:hover {
-    background-color: $tag-default-color-bg_hover;
-    border-color: $tag-default-color-border_hover;
+  &-checkable {
+    &.#{$tag-prefix-cls}-checked:hover {
+      background-color: $tag-default-color-bg_hover;
+      border-color: $tag-default-color-border_hover;
+    }
   }
 
   &-bordered,
-  .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-bordered:hover {
+  &.#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-bordered:hover {
     border-color: $tag-default-bordered-color-border;
   }
 
@@ -121,7 +123,7 @@ $colors:
   }
 
   @each $value in $colors {
-    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} {
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} {
       color: token-var('tag-#{$value}-color-text');
       background-color: token-var('tag-#{$value}-color-bg');
       border: $tag-border-width $tag-border-type token-var('tag-#{$value}-color-border');
@@ -132,29 +134,47 @@ $colors:
       );
     }
 
-    .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}:hover {
+    &.#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}:hover {
       background-color: token-var('tag-#{$value}-color-bg_hover');
       border-color: token-var('tag-#{$value}-color-border_hover');
     }
 
-    .#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered,
-    .#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered:hover {
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered,
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered:hover {
       border-color: token-var('tag-#{$value}-bordered-color-border');
     }
 
-    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-icon,
-    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-close-btn,
-    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-loading-icon {
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-icon,
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-close-btn,
+    &.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-loading-icon {
       color: token-var('tag-#{$value}-color-icon');
     }
   }
 
-  .#{$tag-prefix-cls}.#{$tag-prefix-cls}-custom-color {
-    color: $tag-custom-color-text;
+  &.#{$tag-prefix-cls}-custom-color {
+    color: var(--#{$tag-prefix-cls}-color, $tag-custom-color-text);
+    background-color: var(--#{$tag-prefix-cls}-bg-color, $tag-default-color-bg);
 
     @include icon-hover.icon-hover-bg($tag-prefix-cls, $tag-custom-color-icon-bg_hover);
   }
 
+  &.#{$tag-prefix-cls}-custom-color.#{$tag-prefix-cls}-checked {
+    color: var(--#{$tag-prefix-cls}-color, $tag-custom-color-text);
+    background-color: var(--#{$tag-prefix-cls}-bg-color, $tag-default-color-bg);
+  }
+
+  &.#{$tag-prefix-cls}-custom-color.#{$tag-prefix-cls}-bordered {
+    border-color: var(--#{$tag-prefix-cls}-border-color, $tag-default-bordered-color-border);
+  }
+
+  &-custom-color {
+    .#{$tag-prefix-cls}-icon,
+    .#{$tag-prefix-cls}-close-btn,
+    .#{$tag-prefix-cls}-loading-icon {
+      color: var(--#{$tag-prefix-cls}-color, $tag-custom-color-text);
+    }
+  }
+
   & &-close-btn {
     margin-left: 4px;
     font-size: 12px;

package/es/tag/tag.js

@@ -1,67 +1,5 @@
-import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
-import tag_vue_vue_type_script_lang_default from "./tag.vue_vue_type_script_lang.js";
-import { createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, resolveDynamicComponent, withCtx, withModifiers } from "vue";
+import tag_vue_vue_type_script_setup_true_lang_default from "./tag.vue_vue_type_script_setup_true_lang.js";
 //#region components/tag/tag.vue
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	const _component_icon_close = resolveComponent("icon-close");
-	const _component_icon_hover = resolveComponent("icon-hover");
-	const _component_icon_loading = resolveComponent("icon-loading");
-	return _ctx.computedVisible ? (openBlock(), createElementBlock("span", {
-		key: 0,
-		class: normalizeClass(_ctx.cls),
-		style: normalizeStyle(_ctx.style),
-		onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-	}, [
-		_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
-			key: 0,
-			class: normalizeClass(`${_ctx.prefixCls}-icon`)
-		}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("", true),
-		_ctx.shouldRenderEllipsis ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.ellipsisComponent), {
-			key: 1,
-			class: normalizeClass(`${_ctx.prefixCls}-text`),
-			"line-clamp": _ctx.ellipsisLineClamp,
-			"expand-trigger": _ctx.ellipsisExpandTrigger,
-			tooltip: _ctx.ellipsisTooltip
-		}, createSlots({
-			default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-			_: 2
-		}, [_ctx.$slots.tooltip ? {
-			name: "tooltip",
-			fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
-			key: "0"
-		} : void 0]), 1032, [
-			"class",
-			"line-clamp",
-			"expand-trigger",
-			"tooltip"
-		])) : _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
-			key: 2,
-			class: normalizeClass(`${_ctx.prefixCls}-text`)
-		}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
-		_ctx.closable ? (openBlock(), createBlock(_component_icon_hover, {
-			key: 3,
-			tabindex: "0",
-			role: "button",
-			"aria-label": "Close",
-			prefix: _ctx.prefixCls,
-			class: normalizeClass(`${_ctx.prefixCls}-close-btn`),
-			onClick: withModifiers(_ctx.handleClose, ["stop"]),
-			onKeydown: withModifiers(_ctx.handleCloseKeydown, ["stop", "prevent"])
-		}, {
-			default: withCtx(() => [renderSlot(_ctx.$slots, "close-icon", {}, () => [createVNode(_component_icon_close)])]),
-			_: 3
-		}, 8, [
-			"prefix",
-			"class",
-			"onClick",
-			"onKeydown"
-		])) : createCommentVNode("", true),
-		_ctx.loading ? (openBlock(), createElementBlock("span", {
-			key: 4,
-			class: normalizeClass(`${_ctx.prefixCls}-loading-icon`)
-		}, [createVNode(_component_icon_loading)], 2)) : createCommentVNode("", true)
-	], 6)) : createCommentVNode("", true);
-}
-var tag_default = /* @__PURE__ */ _plugin_vue_export_helper_default(tag_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var tag_default = tag_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { tag_default as default };