@sdata/web-vue 1.19.0 → 2.1.0

package/es/_components/select-view/style/index.css

@@ -26,40 +26,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;
@@ -85,7 +84,7 @@
 }
 .sd-tag-icon {
   margin-right: 4px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-tag-text {
   min-width: 0;
@@ -101,156 +100,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;
@@ -267,112 +267,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 {
@@ -405,33 +405,33 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 14px;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-select-view-single:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   border-color: transparent;
 }
 .sd-select-view-single:focus-within, .sd-select-view-single.sd-select-view-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  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);
 }
 .sd-select-view-single.sd-select-view-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
   cursor: not-allowed;
 }
 .sd-select-view-single.sd-select-view-disabled:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
 }
 .sd-select-view-single.sd-select-view-disabled .sd-select-view-prefix,
@@ -439,18 +439,18 @@
   color: inherit;
 }
 .sd-select-view-single.sd-select-view-error {
-  background-color: var(--color-danger-light-1);
+  background-color: var(--sd-color-danger-light-1);
   border-color: transparent;
 }
 .sd-select-view-single.sd-select-view-error:hover {
-  background-color: var(--color-danger-light-2);
+  background-color: var(--sd-color-danger-light-2);
   border-color: transparent;
 }
 .sd-select-view-single.sd-select-view-error:focus-within, .sd-select-view-single.sd-select-view-error.sd-select-view-single-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
+  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);
 }
 .sd-select-view-single .sd-select-view-prefix,
 .sd-select-view-single .sd-select-view-suffix {
@@ -466,30 +466,30 @@
 }
 .sd-select-view-single .sd-select-view-prefix {
   padding-right: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-select-view-single .sd-select-view-suffix {
   padding-left: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-select-view-single .sd-select-view-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-select-view-single .sd-select-view-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-select-view-single .sd-select-view-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--success-6));
+  color: rgb(var(--sd-success-6));
 }
 .sd-select-view-single .sd-select-view-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--warning-6));
+  color: rgb(var(--sd-warning-6));
 }
 .sd-select-view-single .sd-select-view-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--danger-6));
+  color: rgb(var(--sd-danger-6));
 }
 .sd-select-view-single .sd-select-view-clear-btn {
   align-self: center;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   visibility: hidden;
   cursor: pointer;
@@ -502,7 +502,7 @@
   visibility: visible;
 }
 .sd-select-view-single:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
 }
 .sd-select-view-single {
   cursor: pointer;
@@ -522,13 +522,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-select-view-single .sd-select-view-input::placeholder {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-select-view-single .sd-select-view-input[disabled]::placeholder {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-select-view-single .sd-select-view-input[disabled] {
-  -webkit-text-fill-color: var(--color-text-4);
+  -webkit-text-fill-color: var(--sd-color-text-4);
 }
 .sd-select-view-single .sd-select-view-input-hidden {
   position: absolute;
@@ -602,33 +602,33 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 14px;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-select-view-multiple:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   border-color: transparent;
 }
 .sd-select-view-multiple:focus-within, .sd-select-view-multiple.sd-select-view-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  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);
 }
 .sd-select-view-multiple.sd-select-view-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
   cursor: not-allowed;
 }
 .sd-select-view-multiple.sd-select-view-disabled:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
 }
 .sd-select-view-multiple.sd-select-view-disabled .sd-select-view-prefix,
@@ -636,18 +636,18 @@
   color: inherit;
 }
 .sd-select-view-multiple.sd-select-view-error {
-  background-color: var(--color-danger-light-1);
+  background-color: var(--sd-color-danger-light-1);
   border-color: transparent;
 }
 .sd-select-view-multiple.sd-select-view-error:hover {
-  background-color: var(--color-danger-light-2);
+  background-color: var(--sd-color-danger-light-2);
   border-color: transparent;
 }
 .sd-select-view-multiple.sd-select-view-error:focus-within, .sd-select-view-multiple.sd-select-view-error.sd-select-view-multiple-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
+  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);
 }
 .sd-select-view-multiple .sd-select-view-prefix,
 .sd-select-view-multiple .sd-select-view-suffix {
@@ -663,30 +663,30 @@
 }
 .sd-select-view-multiple .sd-select-view-prefix {
   padding-right: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-select-view-multiple .sd-select-view-suffix {
   padding-left: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-select-view-multiple .sd-select-view-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-select-view-multiple .sd-select-view-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-select-view-multiple .sd-select-view-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--success-6));
+  color: rgb(var(--sd-success-6));
 }
 .sd-select-view-multiple .sd-select-view-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--warning-6));
+  color: rgb(var(--sd-warning-6));
 }
 .sd-select-view-multiple .sd-select-view-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--danger-6));
+  color: rgb(var(--sd-danger-6));
 }
 .sd-select-view-multiple .sd-select-view-clear-btn {
   align-self: center;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   visibility: hidden;
   cursor: pointer;
@@ -699,7 +699,7 @@
   visibility: visible;
 }
 .sd-select-view-multiple:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
 }
 .sd-select-view-multiple.sd-select-view-has-tag {
   padding-right: 4px;
@@ -732,18 +732,18 @@
   align-items: center;
   min-width: 0;
   margin-right: 4px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
-  background-color: var(--color-bg-2);
-  border-color: var(--color-fill-3);
+  background-color: var(--sd-color-bg-2);
+  border-color: var(--sd-color-fill-3);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag .sd-icon-hover:hover::before {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
@@ -776,13 +776,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input::placeholder {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input[disabled]::placeholder {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input[disabled] {
-  -webkit-text-fill-color: var(--color-text-4);
+  -webkit-text-fill-color: var(--sd-color-text-4);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   box-sizing: border-box;
@@ -820,16 +820,16 @@
   vertical-align: bottom;
 }
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
-  background-color: var(--color-fill-2);
-  border-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
+  border-color: var(--sd-color-fill-2);
 }
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag .sd-icon-hover:hover::before {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-select-view-multiple.sd-select-view-disabled .sd-select-view-tag {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
-  border-color: var(--color-fill-3);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
+  border-color: var(--sd-color-fill-3);
 }
 .sd-select-view-multiple.sd-select-view-readonly, .sd-select-view-multiple.sd-select-view-disabled-input {
   cursor: default;