From 0a16cb798f32c7d765fbfba025040ef0f2fb9490 Mon Sep 17 00:00:00 2001
From: zumuta <franky.braem@zumuta.be>
Date: Sat, 30 Nov 2024 18:35:03 +0100
Subject: [PATCH] chore: add tailwind/primeui

---
 frontend/apps/club/package.json       |  1 +
 frontend/apps/club/src/index.ts       |  1 +
 frontend/apps/club/src/style.css      | 73 +++++++++++++++++++++++++++
 frontend/apps/club/tailwind.config.js | 10 ++--
 frontend/package-lock.json            |  1 +
 5 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 frontend/apps/club/src/style.css

diff --git a/frontend/apps/club/package.json b/frontend/apps/club/package.json
index cffee9aa9..b4cee60d1 100644
--- a/frontend/apps/club/package.json
+++ b/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",
diff --git a/frontend/apps/club/src/index.ts b/frontend/apps/club/src/index.ts
index e58aa0fec..36ed887a0 100644
--- a/frontend/apps/club/src/index.ts
+++ b/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';
diff --git a/frontend/apps/club/src/style.css b/frontend/apps/club/src/style.css
new file mode 100644
index 000000000..a885cd482
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/frontend/apps/club/tailwind.config.js b/frontend/apps/club/tailwind.config.js
index 600d1fcd9..b2e8213e9 100644
--- a/frontend/apps/club/tailwind.config.js
+++ b/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],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f2c5e0547..19180ee1a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -128,6 +128,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",