chore: add tailwind/primeui

frontend/apps/club/package.json

@@ -12,6 +12,7 @@
     "@kwai/ui": "*",
     "@tanstack/vue-query": "^5.32.0",
     "@vueuse/core": "11.0.3",
+    "tailwindcss-primeui": "^0.3.4",
     "vee-validate": "^4.12.6",
     "vue": "^3.4.25",
     "vue-i18n": "^9.13.1",

frontend/apps/club/src/index.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import './index.css';
+import './style.css';
 
 import { VueQueryPlugin } from '@tanstack/vue-query';
 import { createRouter, createWebHistory } from 'vue-router';

frontend/apps/club/src/style.css

@@ -0,0 +1,73 @@
+/* Primary and Surface Palettes */
+:root {
+    --p-primary-50: #f0fdf4;
+    --p-primary-100: #dcfce7;
+    --p-primary-200: #bbf7d0;
+    --p-primary-300: #86efac;
+    --p-primary-400: #4ade80;
+    --p-primary-500: #22c55e;
+    --p-primary-600: #16a34a;
+    --p-primary-700: #15803d;
+    --p-primary-800: #166534;
+    --p-primary-900: #14532d;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/*
+ * 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"] {
+*/
+@media (prefers-color-scheme: dark) {
+    :root {
+        --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);
+    }
+}

frontend/apps/club/tailwind.config.js

@@ -1,18 +1,14 @@
 /** @type {import('tailwindcss').Config} */
-import colors from 'tailwindcss/colors';
+import primeui from 'tailwindcss-primeui';
+
 module.exports = {
   content: [
-    './index.html',
     './src/**/*.{html,js,ts,vue,jsx,tsx}',
     '../../packages/kwai-ui/src/**/*.{html,js,ts,vue,jsx,tsx}',
   ],
   theme: {
     extend: {
-      colors: {
-        primary: colors.green,
-        'primary-text': colors.white,
-      },
     },
   },
-  plugins: [],
+  plugins: [primeui],
 };