refactor(module)!: implement design system with CSS variables (#2298)

docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

@@ -33,7 +33,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     <template #item-label="{ item }">
       {{ item.label }}
 
-      <span class="text-gray-500 dark:text-gray-400">
+      <span class="text-[--ui-text-muted]">
         {{ item.email }}
       </span>
     </template>

docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue

@@ -4,21 +4,21 @@ const items = ref([
     label: 'bug',
     value: 'bug',
     chip: {
-      color: 'red' as const
-    }
-  },
-  {
-    label: 'enhancement',
-    value: 'enhancement',
-    chip: {
-      color: 'blue' as const
+      color: 'error' as const
     }
   },
   {
     label: 'feature',
     value: 'feature',
     chip: {
-      color: 'violet' as const
+      color: 'success' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'info' as const
     }
   }
 ])