feat(module): generate tailwindcss theme colors (#2967)

Co-authored-by: HugoRCD <hugo.richard@epitech.eu>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app/components/theme-picker/ThemePickerButton.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  icon?: string
+  chip?: string
+  selected?: boolean
+}>()
+</script>
+
 <template>
   <UButton
     size="sm"
@@ -8,23 +17,16 @@
     class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
   >
     <template v-if="chip" #leading>
-      <span
-        class="inline-block w-2 h-2 rounded-full"
-        :class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
-        :style="{
-          '--color-light': `var(--color-${chip}-500)`,
-          '--color-dark': `var(--color-${chip}-400)`
-        }"
-      />
+      <slot name="leading">
+        <span
+          class="inline-block w-2 h-2 rounded-full"
+          :class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
+          :style="{
+            '--color-light': `var(--color-${chip}-500)`,
+            '--color-dark': `var(--color-${chip}-400)`
+          }"
+        />
+      </slot>
     </template>
   </UButton>
 </template>
-
-<script setup lang="ts">
-defineProps<{
-  label: string
-  icon?: string
-  chip?: string
-  selected?: boolean
-}>()
-</script>