feat(unocss): use primevue theme colors

Author: sfxcode

app/components/ToDo.vue

@@ -10,7 +10,7 @@ defineProps({
 <template>
   <div>
     <div class="todo m-4 flex gap-2">
-      <i class="i-mdi-information text-3xl text-[color:var(--primary-color)]" />
+      <i class="i-mdi-information text-3xl text-primary" />
       <div data-testid="test_todo" class="text-2xl">
         {{ text }}
       </div>

app/components/app/AppSidebar.vue

@@ -51,7 +51,7 @@ onMounted(() => {
         </div>
       </template>
       <template #footer>
-        <div class="m-2 text-center text-xs text-color-[var(--primary-color)]">
+        <div class="m-2 text-center text-xs text-color-primary">
           <span v-if="!collapsed">MongoCamp Admin {{ config.public.APP_VERSION }}</span>
           <span v-if="collapsed">{{ config.public.APP_VERSION }}</span>
         </div>

app/pages/data/stores.vue

@@ -50,6 +50,6 @@ onMounted(async () => {
 
 <style lang='scss' scoped>
 h5 {
-  color: var(--primary-color)
+  color: var(--p-primary-color)
 }
 </style>

uno.config.ts

@@ -9,14 +9,52 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 
+function convert(color: string) {
+  return `color-mix(in srgb, ${color} calc(100% * <alpha-value>), transparent)`
+}
+
 export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
   theme: {
     colors: {
-      // ...
+      'primary': convert('var(--p-primary-color)'),
+      'primary-emphasis': convert('var(--p-primary-hover-color)'),
+      'primary-emphasis-alt': convert('var(--p-primary-active-color)'),
+      'primary-contrast': convert('var(--p-primary-contrast-color)'),
+      'primary-50': convert('var(--p-primary-50)'),
+      'primary-100': convert('var(--p-primary-100)'),
+      'primary-200': convert('var(--p-primary-200)'),
+      'primary-300': convert('var(--p-primary-300)'),
+      'primary-400': convert('var(--p-primary-400)'),
+      'primary-500': convert('var(--p-primary-500)'),
+      'primary-600': convert('var(--p-primary-600)'),
+      'primary-700': convert('var(--p-primary-700)'),
+      'primary-800': convert('var(--p-primary-800)'),
+      'primary-900': convert('var(--p-primary-900)'),
+      'primary-950': convert('var(--p-primary-950)'),
+      'surface-0': convert('var(--p-surface-0)'),
+      'surface-50': convert('var(--p-surface-50)'),
+      'surface-100': convert('var(--p-surface-100)'),
+      'surface-200': convert('var(--p-surface-200)'),
+      'surface-300': convert('var(--p-surface-300)'),
+      'surface-400': convert('var(--p-surface-400)'),
+      'surface-500': convert('var(--p-surface-500)'),
+      'surface-600': convert('var(--p-surface-600)'),
+      'surface-700': convert('var(--p-surface-700)'),
+      'surface-800': convert('var(--p-surface-800)'),
+      'surface-900': convert('var(--p-surface-900)'),
+      'surface-950': convert('var(--p-surface-950)'),
+    },
+    breakpoints: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      xxl: '1536px',
     },
+
   },
   presets: [
     presetUno(),