feat(ui/web): update to use tailwind-primevue css styling

Signed-off-by: Jordan Shatford <[email protected]>

apps/web/package.json

@@ -29,13 +29,14 @@
     "@pinia/testing": "^0.1.6",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",

apps/web/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {}
   }

apps/web/src/components/ClipCard.vue

@@ -24,7 +24,7 @@
           <ProviderName :provider="clip.provider" class="font-normal" />
         </div>
       </div>
-      <div class="flex justify-around gap-2">
+      <div class="flex justify-around">
         <Button
           icon="pi pi-play"
           title="Play"

apps/web/src/main.ts

@@ -6,8 +6,6 @@ import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
 import { createApp } from 'vue'
 
 import { ConfirmationService, PrimeVue, ToastService } from '@cq/ui'
-// @ts-expect-error PrimeVue preset not properly typed
-import AuraPreset from '@cq/ui/presets/aura'
 
 import App from '@/App.vue'
 import { env } from '@/config'
@@ -22,7 +20,7 @@ Sentry.init({
 })
 
 // Prime vue
-app.use(PrimeVue, { unstyled: true, pt: AuraPreset })
+app.use(PrimeVue, { theme: 'none' })
 app.use(ConfirmationService)
 app.use(ToastService)
 

packages/player/package.json

@@ -23,7 +23,7 @@
   "devDependencies": {
     "@cq/config": "workspace:*",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",

packages/providers/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@cq/config": "workspace:*",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "typescript": "^5.6.3"
   }
 }

packages/services/package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@cq/config": "workspace:*",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@types/tmi.js": "^1.8.6",
     "typescript": "^5.6.3"
   }

packages/ui/package.json

@@ -5,8 +5,7 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./primeicons": "./src/primevue/icons.ts",
-    "./presets/aura": "./src/primevue/presets/aura/index.js"
+    "./primeicons": "./src/primevue/icons.ts"
   },
   "scripts": {
     "build": "pnpm typecheck && vite build",
@@ -27,7 +26,7 @@
   "devDependencies": {
     "@cq/config": "workspace:*",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.8.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",

packages/ui/src/primevue/base.css

@@ -26,7 +26,7 @@
   --p-content-border-radius: 6px;
 }
 
-/* Light Mode */
+/* Light */
 :root {
   --p-primary-color: var(--p-primary-500);
   --p-primary-contrast-color: var(--p-surface-0);
@@ -46,27 +46,29 @@
 }
 
 /*
-* Dark Mode
-* Change the .p-dark to match the darkMode in tailwind.config.
-* For example;
-*  darkMode: ['selector', '[class*="app-dark"]']
-*  should match;
-* :root.app-dark
+ * Dark Mode
+ * Defaults to system, change the selector to match the darkMode in tailwind.config.
+ * For example;
+ * darkMode: ['selector', '[class*="app-dark"]']
+ * should be;
+ * :root[class="app-dark"] {
 */
-:root.app-dark {
-  --p-primary-color: var(--p-primary-400);
-  --p-primary-contrast-color: var(--p-surface-900);
-  --p-primary-hover-color: var(--p-primary-300);
-  --p-primary-active-color: var(--p-primary-200);
-  --p-content-border-color: var(--p-surface-700);
-  --p-content-hover-background: var(--p-surface-800);
-  --p-content-hover-color: var(--p-surface-0);
-  --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
-  --p-highlight-color: rgba(255, 255, 255, 0.87);
-  --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
-  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
-  --p-text-color: var(--p-surface-0);
-  --p-text-hover-color: var(--p-surface-0);
-  --p-text-muted-color: var(--p-surface-400);
-  --p-text-hover-muted-color: var(--p-surface-300);
+@media (prefers-color-scheme: dark) {
+  :root[class='app-dark'] {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255, 255, 255, 0.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
+  }
 }