✨ Feat : Made a tailwind config customisable by api

- Updated global CSS and theme variables to set primary and secondary colorsfor light and dark modes. - Modified tailwind configuration in UI and app components, ensuring consistency of colors and styles. - Made the root layout to be able to load the variables from an api call ✨ Add custom theme variables for light and dark mode - Moved the css variable setting function into tailwind config package - Made a basic tailwind config and attached it to all relavant packages
kalvilabs · Apr 19, 2024 · 05e1625 · 05e1625
1 parent 24fb777
commit 05e1625
Show file tree

Hide file tree

Showing 15 changed files with 203 additions and 107 deletions.
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/apps/admin/tailwind.config.ts b/apps/admin/tailwind.config.ts
@@ -1 +1,19 @@
-export * from "@repo/tailwind-config/tw-config";
+import {type Config} from "tailwindcss";
+import { presetTheme } from "@repo/tailwind-config/tw-config";
+
+const config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  presets: [presetTheme],
+} satisfies Config
+
+export default config
diff --git a/apps/learner/app/layout.tsx b/apps/learner/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import "@repo/tailwind-config/css";
 
 export const metadata: Metadata = {
   title: "Create Next App",

diff --git a/apps/learner/package.json b/apps/learner/package.json
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/apps/learner/tailwind.config.ts b/apps/learner/tailwind.config.ts
@@ -1 +1,19 @@
-export * from "@repo/tailwind-config/tw-config";
+import {type Config} from "tailwindcss";
+import { presetTheme } from "@repo/tailwind-config/tw-config";
+
+const config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  presets: [presetTheme],
+} satisfies Config
+
+export default config
diff --git a/packages/tailwind-config/cssVariableSetter.ts b/packages/tailwind-config/cssVariableSetter.ts
@@ -0,0 +1,35 @@
+function setDocumentStyleProperty(
+  property: string,
+  lightValue: string,
+  darkValue?: string,
+) {
+  document.documentElement.style.setProperty(`--${property}`, lightValue);
+  document.documentElement.style.setProperty(
+    `--${property}-dark`,
+    darkValue || lightValue,
+  );
+}
+
+export function themeVariablesCSS() {
+  setDocumentStyleProperty("background", "255, 255, 255", "23, 23, 23");
+  setDocumentStyleProperty("foreground", "23, 23, 23", "236, 237, 238");
+  setDocumentStyleProperty("border", "229, 231, 235", "63, 63, 70");
+  setDocumentStyleProperty("content", "255, 255, 255", "39, 39, 42");
+  setDocumentStyleProperty("input-border", "63, 63, 70", "156, 166, 163");
+  setDocumentStyleProperty("divider", "218, 222, 242", "78, 84, 83");
+  setDocumentStyleProperty("primary", "255, 137, 36");
+  setDocumentStyleProperty("primary-foreground", "255, 255, 255");
+  setDocumentStyleProperty("secondary", "212, 212, 216", "63, 63, 70");
+  setDocumentStyleProperty(
+    "secondary-foreground",
+    "17, 24, 28",
+    "255, 255, 255",
+  );
+  setDocumentStyleProperty("success", "23, 201, 100");
+  setDocumentStyleProperty("success-foreground", "17, 24, 28");
+  setDocumentStyleProperty("warning", "245, 165, 36");
+  setDocumentStyleProperty("warning-foreground", "17, 24, 28");
+  setDocumentStyleProperty("danger", "243, 18, 96");
+  setDocumentStyleProperty("danger-foreground", "255, 255, 255");
+  setDocumentStyleProperty("focus", "var(--primary");
+}
diff --git a/packages/tailwind-config/global.css b/packages/tailwind-config/global.css
@@ -1,74 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-
-@layer base {
-  :root{
-    --primary: #006FEE;
-    --primary-foreground: #FFFFFF;
-
-    --success: #17c964;
-    --success-foreground: #11181C;
-
-    --warning: #f5a524;
-    --warning-foreground: #11181C;
-
-    --danger: #f31260;
-    --danger-foreground: #FFFFFF;
-
-    --focus: #006FEE;
-  }
-
-  .default.light {
-    --background: #FFFFFF;
-    --foreground: #11181C;
-
-    --secondary: #d4d4d8;
-    --secondary-foreground: #11181C;
-
-    --content-1: #FFFFFF;
-    --content-2: #f4f4f5;
-    --content-3: #e4e4e7;
-    --content-4: #d4d4d8;
-  }
-
-  .default.dark {
-    --background: #000000;
-    --foreground: #ECEDEE;
-
-    --secondary: #3f3f46;
-    --secondary-foreground: #FFFFFF;
-
-    --content-1: #18181b;
-    --content-2: #27272a;
-    --content-3: #3f3f46;
-    --content-4: #52525b;
-  }
-}
-
-@layer base {
-  html,
-  body {
-    scroll-behavior: smooth;
-    --header-height: 74px;
-    --footer-height: 60px;
-    --sidebar-width: 260px;
-  }
-  /* Track */
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-  ::-webkit-scrollbar-track {
-    background: #f2f2f2;
-  }
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background: #999;
-  }
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: #777;
-  }
-}
+@tailwind utilities;
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
@@ -8,9 +8,11 @@
   "exports": {
     "./postcss-config": "./postcss.config.js",
     "./tw-config": "./tailwind.config.ts",
-    "./css": "./global.css"
+    "./css": "./global.css",
+    "./css-variable-setter": "./cssVariableSetter.ts"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "tailwindcss": "^3.4.1"
   }
 }
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
+import tailwindForms from "@tailwindcss/forms"
 
-const config = {
+export const presetTheme = {
   darkMode: ["class"],
   content: [
     "./pages/**/*.{ts,tsx}",
@@ -9,37 +10,83 @@ const config = {
     "./src/**/*.{ts,tsx}",
     "../../packages/ui/src/**/*.{ts,tsx}",
   ],
-  prefix: "",
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
         primary: {
-          DEFAULT : "var(--primary)",
-          foreground: "var(--primary-foreground)",
+          DEFAULT: "rgba(var(--primary), <alpha-value>)",
+          dark: "rgba(var(--primary-dark), <alpha-value>)",
+          foreground: "rgba(var(--primary-foreground), <alpha-value>)",
+          "foreground-dark":
+            "rgba(var(--primary-foreground-dark), <alpha-value>)",
         },
         secondary: {
-          DEFAULT : "var(--secondary)",
-          foreground: "var(--secondary-foreground)",
+          DEFAULT: "rgba(var(--secondary), <alpha-value>)",
+          dark: "rgba(var(--secondary-dark), <alpha-value>)",
+          foreground: "rgba(var(--secondary-foreground-dark), <alpha-value>)",
+          "foreground-dark": "rgba(var(--secondary-foreground), <alpha-value>)",
         },
         success: {
-          DEFAULT : "var(--success)",
-          foreground: "var(--success-foreground)",
+          DEFAULT: "rgba(var(--success), <alpha-value>)",
+          dark: "rgba(var(--success-dark), <alpha-value>)",
+          foreground: "rgba(var(--success-foreground), <alpha-value>)",
+          "foreground-dark":
+            "rgba(var(--success-foreground-dark), <alpha-value>)",
+        },
+        warning: {
+          DEFAULT: "rgba(var(--warning), <alpha-value>)",
+          dark: "rgba(var(--warning-dark), <alpha-value>)",
+          foreground: "rgba(var(--warning-foreground), <alpha-value>)",
+          "foreground-dark":
+            "rgba(var(--warning-foreground-dark), <alpha-value>)",
         },
         danger: {
-          DEFAULT : "var(--danger)",
-          foreground: "var(--danger-foreground)",
+          DEFAULT: "rgba(var(--danger), <alpha-value>)",
+          dark: "rgba(var(--danger-dark), <alpha-value>)",
+          foreground: "rgba(var(--danger-foreground), <alpha-value>)",
+          "foreground-dark":
+            "rgba(var(--danger-foreground-dark), <alpha-value>)",
         },
-        warning: {
-          DEFAULT : "var(--warning)",
-          foreground: "var(--warning-foreground)",
+        focus: "var(--primary)",
+        background: {
+          DEFAULT: "rgba(var(--background), <alpha-value>)",
+          dark: "rgba(var(--background-dark), <alpha-value>)",
+        },
+        foreground : {
+          DEFAULT: "rgba(var(--foreground), <alpha-value>)",
+          dark: "rgba(var(--foreground-dark), <alpha-value>)",
         },
-        focus: "var(--focus)",
+        border : {
+          DEFAULT: "rgba(var(--border), <alpha-value>)",
+          dark: "rgba(var(--border-dark), <alpha-value>)",
+        },
+        "input-border" : {
+          DEFAULT: "rgba(var(--input-border), <alpha-value>)",
+          dark: "rgba(var(--input-border-dark), <alpha-value>)",
+        },
+        content : {
+          DEFAULT: "rgba(var(--content), <alpha-value>)",
+          dark: "rgba(var(--content-dark), <alpha-value>)",
+        },
+        divider : {
+          DEFAULT: "rgba(var(--divider), <alpha-value>)",
+          dark: "rgba(var(--divider-dark), <alpha-value>)",
+        }
+      },
+      spacing: {
+        xs: "8px",
+        s: "16px",
+        m: "24px",
+        l: "32px",
+        xl: "48px",
+        xxl: "80px"
+      },
+      borderRadius: {
+        small: "6px",
+        medium: "8px",
+        large: "32px"
       }
-    }
+    },
   },
-  plugins: [],
+  plugins: [tailwindForms],
 } satisfies Config;
-
-export default config;
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@tailwindcss/forms": "^0.5.7",
     "@turbo/gen": "^1.11.3",
     "@types/eslint": "^8.56.1",
     "@types/node": "^20.10.6",

diff --git a/packages/ui/src/components/application-layout/page.tsx b/packages/ui/src/components/application-layout/page.tsx
@@ -1,3 +1,13 @@
-export function ApplicationLayout({ children }: { children: React.ReactNode }) {
-  return <body className="h-screen w-full light">{children}</body>;
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import { themeVariablesCSS } from "@repo/tailwind-config/css-variable-setter";
+
+export function ApplicationLayout({ children }: { children: ReactNode }) {
+
+  useEffect(() => {
+    themeVariablesCSS()
+  }, []);
+
+  return <body className="h-screen w-full light bg-primary">{children}</body>;
 }
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -1,8 +1,17 @@
-export * from "@repo/tailwind-config/tw-config";
+import {type Config} from "tailwindcss";
+import { presetTheme } from "@repo/tailwind-config/tw-config";
 
-/**
- * Author: sidarth-23
- * Date: 2023-02-15
- * 
- * Any changes you want, make it in the tailwind config package so that it is consistent across all the apps
- */
+const config = {
+  content: [
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  presets: [presetTheme],
+} satisfies Config
+
+export default config
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -4,6 +4,6 @@
     "outDir": "dist",
     "baseUrl": ".",
   },
-  "include": ["src"],
+  "include": ["src", "**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/ui/tsconfig.lint.json b/packages/ui/tsconfig.lint.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src", "turbo"],
+  "include": ["src", "turbo", "**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }