feat(tag): add color variants

Author: jbaubree

playground/src/pages/index.vue

@@ -253,6 +253,7 @@ const date = ref()
           <USlider v-model="isSliderOpen" />
         </div>
         <UTable v-model="tableCheck" class="w-full" :columns="columns" :rows="people" :sort="{ column: 'name' }" />
+        <UTag size="xs" label="I'm a tag" />
         <UTag label="I'm a tag" />
         <div class="flex gap-2.5">
           <UTooltip text="Hi bro !" :popper="{ placement: 'left' }">

src/components/tag/UTag.vue

@@ -18,10 +18,11 @@ const props = withDefaults(defineProps<{
   ui: () => useAppUi().tag,
 })
 
-const config = computed(() => merge({}, useAppUi().tag, props.ui))
+const { primaryColor } = useAppTheme()
 
+const config = computed(() => merge({}, useAppUi().tag, props.ui))
 const tagClass = computed(() => {
-  const variant = config.value.variant[props.variant]
+  const variant = config.value.color?.[props.color]?.[props.variant] || (props.color === 'primary' && config.value.color?.[primaryColor.value]?.[props.variant]) || config.value.variant[props.variant]
   return classNames(
     config.value.base,
     config.value.font,

src/components/tag/tag.ts

@@ -12,6 +12,26 @@ export const tag = {
     md: 'text-13px px-3 py-1.25',
     lg: 'text-13px px-4 py-1.75',
   },
+  color: {
+    fluo: {
+      solid: 'bg-{color}-50 dark:bg-{color}-950 text-{color}-600 dark:text-{color}-300',
+    },
+    cyan: {
+      solid: 'bg-{color}-50 dark:bg-{color}-950 text-{color}-600 dark:text-{color}-300',
+    },
+    yellow: {
+      solid: 'bg-{color}-50 dark:bg-{color}-950 text-{color}-600 dark:text-{color}-300',
+    },
+    silver: {
+      solid: 'bg-{color}-50 dark:bg-{color}-950 text-{color}-600 dark:text-{color}-300',
+    },
+    dark: {
+      solid: 'bg-{color}-50 dark:bg-{color}-600 text-dark-500 dark:text-light-500',
+    },
+    light: {
+      solid: 'bg-{color}-200 dark:bg-{color}-600 text-{color}-800 dark:text-{color}-200',
+    },
+  },
   variant: {
     solid: 'bg-{color}-50 dark:bg-{color}-950 text-{color}-500 dark:text-{color}-400',
   },