draft-components 3.5.0 → 4.0.0

package/dist/components/tag/tag.css

@@ -1,7 +1,7 @@
 .dc-tag {
-  --dc-tag-text-color: var(--dc-gray-700);
-  --dc-tag-border-color: rgb(var(--dc-gray-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 10%);
+  --color: var(--dc-neutral-700);
+  --background: rgb(var(--dc-neutral-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-neutral-700-rgb) / 20%);
 
   box-sizing: border-box;
   display: inline-flex;
@@ -9,23 +9,23 @@
   align-items: center;
   padding: 4px 10px;
   font: 400 14px/16px var(--dc-primary-font);
-  color: var(--dc-tag-text-color);
+  color: var(--color);
   color-scheme: light;
-  background: var(--dc-tag-bg);
+  background: var(--background);
   border-radius: 6px;
-  box-shadow: inset 0 0 0 1px var(--dc-tag-border-color);
+  box-shadow: inset 0 0 0 1px var(--border-color);
 }
 
 .dc-tag_filled {
-  --dc-tag-text-color: var(--dc-gray-800);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-gray-300);
+  --color: var(--dc-neutral-800);
+  --background: var(--dc-neutral-300);
+  --border-color: transparent;
 }
 
 .dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-gray-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-gray-300-rgb) / 40%);
+  --color: var(--dc-neutral-900);
+  --background: rgb(var(--dc-neutral-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_rounded {
@@ -55,336 +55,375 @@
 }
 
 .dc-tag_green {
-  --dc-tag-text-color: var(--dc-green-800);
-  --dc-tag-border-color: rgb(var(--dc-green-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 10%);
+  --color: var(--dc-green-900);
+  --background: rgb(var(--dc-green-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-green-700-rgb) / 20%);
 }
 
 .dc-tag_green.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-green-600);
+  --color: var(--dc-white);
+  --background: var(--dc-green-600);
+  --border-color: transparent;
 }
 
 .dc-tag_green.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-green-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-green-300-rgb) / 40%);
+  --color: var(--dc-green-900);
+  --background: rgb(var(--dc-green-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
-.dc-tag_cyan {
-  --dc-tag-text-color: var(--dc-sky-700);
-  --dc-tag-border-color: rgb(var(--dc-sky-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 10%);
+.dc-tag_lime {
+  --color: var(--dc-lime-900);
+  --background: rgb(var(--dc-lime-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-lime-700-rgb) / 20%);
 }
 
-.dc-tag_cyan.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-sky-600);
+.dc-tag_lime.dc-tag_filled {
+  --color: var(--dc-lime-950);
+  --background: var(--dc-lime-300);
+  --border-color: transparent;
 }
 
-.dc-tag_cyan.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-sky-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-sky-300-rgb) / 40%);
+.dc-tag_lime.dc-tag_tinted {
+  --color: var(--dc-lime-900);
+  --background: rgb(var(--dc-lime-300-rgb) / 40%);
+  --border-color: transparent;
+}
+
+.dc-tag_sky {
+  --color: var(--dc-sky-700);
+  --background: rgb(var(--dc-sky-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-sky-700-rgb) / 20%);
+}
+
+.dc-tag_sky.dc-tag_filled {
+  --color: var(--dc-white);
+  --background: var(--dc-sky-600);
+  --border-color: transparent;
+}
+
+.dc-tag_sky.dc-tag_tinted {
+  --color: var(--dc-sky-900);
+  --background: rgb(var(--dc-sky-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_blue {
-  --dc-tag-text-color: var(--dc-blue-800);
-  --dc-tag-border-color: rgb(var(--dc-blue-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 10%);
+  --color: var(--dc-blue-800);
+  --background: rgb(var(--dc-blue-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-blue-700-rgb) / 20%);
 }
 
 .dc-tag_blue.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-blue-600);
+  --color: var(--dc-white);
+  --background: var(--dc-blue-600);
+  --border-color: transparent;
 }
 
 .dc-tag_blue.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-blue-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-blue-300-rgb) / 40%);
+  --color: var(--dc-blue-900);
+  --background: rgb(var(--dc-blue-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
-.dc-tag_purple {
-  --dc-tag-text-color: var(--dc-violet-800);
-  --dc-tag-border-color: rgb(var(--dc-violet-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 10%);
+.dc-tag_indigo {
+  --color: var(--dc-indigo-800);
+  --background: rgb(var(--dc-indigo-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-indigo-700-rgb) / 20%);
 }
 
-.dc-tag_purple.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-violet-600);
+.dc-tag_indigo.dc-tag_filled {
+  --color: var(--dc-white);
+  --background: var(--dc-indigo-600);
+  --border-color: transparent;
 }
 
-.dc-tag_purple.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-violet-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-violet-300-rgb) / 40%);
+.dc-tag_indigo.dc-tag_tinted {
+  --color: var(--dc-indigo-900);
+  --background: rgb(var(--dc-indigo-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_pink {
-  --dc-tag-text-color: var(--dc-pink-700);
-  --dc-tag-border-color: rgb(var(--dc-pink-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 10%);
+  --color: var(--dc-pink-700);
+  --background: rgb(var(--dc-pink-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-pink-700-rgb) / 20%);
 }
 
 .dc-tag_pink.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-pink-600);
+  --color: var(--dc-white);
+  --background: var(--dc-pink-600);
+  --border-color: transparent;
 }
 
 .dc-tag_pink.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-pink-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-pink-300-rgb) / 40%);
+  --color: var(--dc-pink-900);
+  --background: rgb(var(--dc-pink-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_red {
-  --dc-tag-text-color: var(--dc-red-700);
-  --dc-tag-border-color: rgb(var(--dc-red-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 10%);
+  --color: var(--dc-red-700);
+  --background: rgb(var(--dc-red-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-red-700-rgb) / 20%);
 }
 
 .dc-tag_red.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-red-500);
+  --color: var(--dc-white);
+  --background: var(--dc-red-500);
+  --border-color: transparent;
 }
 
 .dc-tag_red.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-red-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-red-300-rgb) / 40%);
+  --color: var(--dc-red-900);
+  --background: rgb(var(--dc-red-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_orange {
-  --dc-tag-text-color: var(--dc-orange-700);
-  --dc-tag-border-color: rgb(var(--dc-orange-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 10%);
+  --color: var(--dc-orange-700);
+  --background: rgb(var(--dc-orange-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-orange-700-rgb) / 20%);
 }
 
 .dc-tag_orange.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-orange-500);
+  --color: var(--dc-white);
+  --background: var(--dc-orange-500);
+  --border-color: transparent;
 }
 
 .dc-tag_orange.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-orange-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-orange-300-rgb) / 40%);
+  --color: var(--dc-orange-900);
+  --background: rgb(var(--dc-orange-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dc-tag_yellow {
-  --dc-tag-text-color: var(--dc-yellow-800);
-  --dc-tag-border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 10%);
+  --color: var(--dc-yellow-900);
+  --background: rgb(var(--dc-yellow-300-rgb) / 10%);
+  --border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
 }
 
 .dc-tag_yellow.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-yellow-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-yellow-400);
+  --color: var(--dc-yellow-950);
+  --background: var(--dc-yellow-400);
+  --border-color: transparent;
 }
 
 .dc-tag_yellow.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-yellow-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-yellow-300-rgb) / 40%);
+  --color: var(--dc-yellow-900);
+  --background: rgb(var(--dc-yellow-300-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag,
 .dark.dc-tag {
-  --dc-tag-text-color: var(--dc-gray-300);
-  --dc-tag-border-color: rgb(var(--dc-gray-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 10%);
+  --color: var(--dc-neutral-300);
+  --background: rgb(var(--dc-neutral-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-neutral-200-rgb) / 20%);
 
   color-scheme: dark;
 }
 
 .dark .dc-tag_filled,
 .dark.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-gray-800);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-gray-300);
+  --color: var(--dc-neutral-800);
+  --background: var(--dc-neutral-300);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_tinted,
 .dark.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-gray-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-gray-400-rgb) / 40%);
+  --color: var(--dc-neutral-50);
+  --background: rgb(var(--dc-neutral-400-rgb) / 40%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_green,
 .dark.dc-tag_green {
-  --dc-tag-text-color: var(--dc-green-400);
-  --dc-tag-border-color: rgb(var(--dc-green-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 10%);
+  --color: var(--dc-green-400);
+  --background: rgb(var(--dc-green-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-green-200-rgb) / 20%);
 }
 
 .dark.dc-tag_green.dc-tag_filled,
 .dark .dc-tag_green.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-green-600);
+  --color: var(--dc-white);
+  --background: var(--dc-green-600);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_green.dc-tag_tinted,
 .dark.dc-tag_green.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-green-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-green-400-rgb) / 50%);
+  --color: var(--dc-green-50);
+  --background: rgb(var(--dc-green-400-rgb) / 50%);
+  --border-color: transparent;
+}
+
+.dark .dc-tag_lime,
+.dark.dc-tag_lime {
+  --color: var(--dc-lime-400);
+  --background: rgb(var(--dc-lime-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-lime-200-rgb) / 20%);
+}
+
+.dark.dc-tag_lime.dc-tag_filled,
+.dark .dc-tag_lime.dc-tag_filled {
+  --color: var(--dc-lime-950);
+  --background: var(--dc-lime-400);
+  --border-color: transparent;
+}
+
+.dark .dc-tag_lime.dc-tag_tinted,
+.dark.dc-tag_lime.dc-tag_tinted {
+  --color: var(--dc-lime-50);
+  --background: rgb(var(--dc-lime-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
-.dark .dc-tag_cyan,
-.dark.dc-tag_cyan {
-  --dc-tag-text-color: var(--dc-sky-400);
-  --dc-tag-border-color: rgb(var(--dc-sky-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 10%);
+.dark .dc-tag_sky,
+.dark.dc-tag_sky {
+  --color: var(--dc-sky-400);
+  --background: rgb(var(--dc-sky-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-sky-200-rgb) / 20%);
 }
 
-.dark .dc-tag_cyan.dc-tag_filled,
-.dark.dc-tag_cyan.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-sky-600);
+.dark .dc-tag_sky.dc-tag_filled,
+.dark.dc-tag_sky.dc-tag_filled {
+  --color: var(--dc-white);
+  --background: var(--dc-sky-600);
+  --border-color: transparent;
 }
 
-.dark .dc-tag_cyan.dc-tag_tinted,
-.dark.dc-tag_cyan.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-sky-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-sky-400-rgb) / 50%);
+.dark .dc-tag_sky.dc-tag_tinted,
+.dark.dc-tag_sky.dc-tag_tinted {
+  --color: var(--dc-sky-50);
+  --background: rgb(var(--dc-sky-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_blue,
 .dark.dc-tag_blue {
-  --dc-tag-text-color: var(--dc-blue-400);
-  --dc-tag-border-color: rgb(var(--dc-blue-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 10%);
+  --color: var(--dc-blue-400);
+  --background: rgb(var(--dc-blue-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-blue-200-rgb) / 20%);
 }
 
 .dark .dc-tag_blue.dc-tag_filled,
 .dark.dc-tag_blue.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-blue-600);
+  --color: var(--dc-white);
+  --background: var(--dc-blue-600);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_blue.dc-tag_tinted,
 .dark.dc-tag_blue.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-blue-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-blue-400-rgb) / 50%);
+  --color: var(--dc-blue-50);
+  --background: rgb(var(--dc-blue-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
-.dark .dc-tag_purple,
-.dark.dc-tag_purple {
-  --dc-tag-text-color: var(--dc-violet-400);
-  --dc-tag-border-color: rgb(var(--dc-violet-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 10%);
+.dark .dc-tag_indigo,
+.dark.dc-tag_indigo {
+  --color: var(--dc-indigo-400);
+  --background: rgb(var(--dc-indigo-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-indigo-200-rgb) / 20%);
 }
 
-.dark .dc-tag_purple.dc-tag_filled,
-.dark.dc-tag_purple.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-violet-600);
+.dark .dc-tag_indigo.dc-tag_filled,
+.dark.dc-tag_indigo.dc-tag_filled {
+  --color: var(--dc-white);
+  --background: var(--dc-indigo-600);
+  --border-color: transparent;
 }
 
-.dark .dc-tag_purple.dc-tag_tinted,
-.dark.dc-tag_purple.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-violet-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-violet-400-rgb) / 50%);
+.dark .dc-tag_indigo.dc-tag_tinted,
+.dark.dc-tag_indigo.dc-tag_tinted {
+  --color: var(--dc-indigo-50);
+  --background: rgb(var(--dc-indigo-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
 .dark.dc-tag_pink,
 .dark .dc-tag_pink {
-  --dc-tag-text-color: var(--dc-pink-400);
-  --dc-tag-border-color: rgb(var(--dc-pink-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 10%);
+  --color: var(--dc-pink-400);
+  --background: rgb(var(--dc-pink-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-pink-200-rgb) / 20%);
 }
 
 .dark .dc-tag_pink.dc-tag_filled,
 .dark.dc-tag_pink.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-pink-600);
+  --color: var(--dc-white);
+  --background: var(--dc-pink-600);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_pink.dc-tag_tinted,
 .dark.dc-tag_pink.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-pink-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-pink-400-rgb) / 50%);
+  --color: var(--dc-pink-50);
+  --background: rgb(var(--dc-pink-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_red,
 .dark.dc-tag_red {
-  --dc-tag-text-color: var(--dc-red-400);
-  --dc-tag-border-color: rgb(var(--dc-red-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 10%);
+  --color: var(--dc-red-400);
+  --background: rgb(var(--dc-red-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-red-200-rgb) / 20%);
 }
 
 .dark .dc-tag_red.dc-tag_filled,
 .dark.dc-tag_red.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-red-500);
+  --color: var(--dc-white);
+  --background: var(--dc-red-500);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_red.dc-tag_tinted,
 .dark.dc-tag_red.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-red-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-red-400-rgb) / 50%);
+  --color: var(--dc-red-50);
+  --background: rgb(var(--dc-red-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_orange,
 .dark.dc-tag_orange {
-  --dc-tag-text-color: var(--dc-orange-500);
-  --dc-tag-border-color: rgb(var(--dc-orange-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 10%);
+  --color: var(--dc-orange-500);
+  --background: rgb(var(--dc-orange-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-orange-200-rgb) / 20%);
 }
 
 .dark .dc-tag_orange.dc-tag_filled,
 .dark.dc-tag_orange.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-white);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-orange-500);
+  --color: var(--dc-white);
+  --background: var(--dc-orange-500);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_orange.dc-tag_tinted,
 .dark.dc-tag_orange.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-orange-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-orange-400-rgb) / 50%);
+  --color: var(--dc-orange-50);
+  --background: rgb(var(--dc-orange-400-rgb) / 50%);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_yellow,
 .dark.dc-tag_yellow {
-  --dc-tag-text-color: var(--dc-yellow-500);
-  --dc-tag-border-color: rgb(var(--dc-yellow-200-rgb) / 20%);
-  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 10%);
+  --color: var(--dc-yellow-400);
+  --background: rgb(var(--dc-yellow-400-rgb) / 10%);
+  --border-color: rgb(var(--dc-yellow-200-rgb) / 20%);
 }
 
 .dark .dc-tag_yellow.dc-tag_filled,
 .dark.dc-tag_yellow.dc-tag_filled {
-  --dc-tag-text-color: var(--dc-yellow-900);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: var(--dc-yellow-400);
+  --color: var(--dc-yellow-950);
+  --background: var(--dc-yellow-400);
+  --border-color: transparent;
 }
 
 .dark .dc-tag_yellow.dc-tag_tinted,
 .dark.dc-tag_yellow.dc-tag_tinted {
-  --dc-tag-text-color: var(--dc-yellow-50);
-  --dc-tag-border-color: transparent;
-  --dc-tag-bg: rgb(var(--dc-yellow-400-rgb) / 50%);
+  --color: var(--dc-yellow-50);
+  --background: rgb(var(--dc-yellow-400-rgb) / 50%);
+  --border-color: transparent;
 }

package/dist/components/tag/tag.d.ts

@@ -1,15 +1,16 @@
-import { ComponentPropsWithRef } from 'react';
-type TagHTMLProps = ComponentPropsWithRef<'strong'>;
+import { type ComponentProps } from 'react';
 export type TagStyle = 'default' | 'filled' | 'tinted';
 export type TagSize = 'sm' | 'md' | 'lg';
-export type TagTint = 'gray' | 'green' | 'cyan' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+export type TagTint = 'gray' | 'green' | 'lime' | 'sky' | 'blue' | 'indigo' | 'pink' | 'red' | 'orange' | 'yellow';
 export type TagElementType = 'abbr' | 'b' | 'bdo' | 'cite' | 'code' | 'dfn' | 'em' | 'i' | 'kbd' | 'samp' | 'small' | 'span' | 'strong' | 'var';
-export type TagProps = {
+type TagHTMLProps = ComponentProps<'strong'>;
+type TagBaseProps = {
     as?: TagElementType;
     tagStyle?: TagStyle;
     size?: TagSize;
     tint?: TagTint;
-    rounded?: boolean;
-} & TagHTMLProps;
-export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    isRounded?: boolean;
+};
+export type TagProps = TagBaseProps & Omit<TagHTMLProps, keyof TagBaseProps>;
+export declare function Tag({ as: Component, tagStyle, size, tint, isRounded: rounded, className, children, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tag/tag.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const Tag = forwardRef(function Tag({ as: Component = 'strong', tagStyle = 'default', size = 'md', tint = 'gray', rounded, className, children, ...props }, ref) {
-    return (_jsx(Component, { ...props, ref: ref, className: classNames(className, 'dc-tag', {
+export function Tag({ as: Component = 'strong', tagStyle = 'default', size = 'md', tint = 'gray', isRounded: rounded, className, children, ...props }) {
+    return (_jsx(Component, { ...props, className: classNames(className, 'dc-tag', {
             [`dc-tag_${tagStyle}`]: tagStyle,
             [`dc-tag_${size}`]: size,
             [`dc-tag_${tint}`]: tint,
             'dc-tag_rounded': rounded,
         }), children: children }));
-});
+}
+//# sourceMappingURL=tag.js.map

package/dist/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAgDxD,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,QAAQ,GAAG,SAAS,EACpB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,SAAS,EAAE,OAAO,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACC;IACT,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE;YACzC,CAAC,UAAU,QAAQ,EAAE,CAAC,EAAE,QAAQ;YAChC,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,IAAI;YACxB,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,IAAI;YACxB,gBAAgB,EAAE,OAAO;SAC1B,CAAC,YAED,QAAQ,GACC,CACb,CAAC;AACJ,CAAC"}

package/dist/components/text-input/index.js

@@ -1 +1,2 @@
 export * from './text-input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}