fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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

@@ -7,7 +7,7 @@
         :variant="open ? 'soft' : 'ghost'"
         square
         aria-label="Color picker"
-        :ui="{ leadingIcon: 'text-[--ui-primary]' }"
+        :ui="{ leadingIcon: 'text-[var(--ui-primary)]' }"
       />
     </template>
 

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

@@ -5,13 +5,13 @@
     :icon="icon"
     :label="label"
     :variant="selected ? 'soft' : 'outline'"
-    class="capitalize ring-[--ui-border] rounded-[--ui-radius] text-[11px]"
+    class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
     @click.stop.prevent="$emit('select')"
   >
     <template v-if="chip" #leading>
       <span
         class="inline-block w-2 h-2 rounded-full"
-        :class="`bg-[--color-light] dark:bg-[--color-dark]`"
+        :class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
         :style="{
           '--color-light': `var(--color-${chip}-500)`,
           '--color-dark': `var(--color-${chip}-400)`