✨ 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

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

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",

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

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;

packages/tailwind-config/tailwind.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from "tailwindcss";
 
-const config = {
+export const presetTheme = {
   darkMode: ["class"],
   content: [
     "./pages/**/*.{ts,tsx}",
@@ -9,37 +9,23 @@ 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)",
-        },
-        danger: {
-          DEFAULT : "var(--danger)",
-          foreground: "var(--danger-foreground)",
-        },
-        warning: {
-          DEFAULT : "var(--warning)",
-          foreground: "var(--warning-foreground)",
-        },
-        focus: "var(--focus)",
       }
     }
   },
   plugins: [],
-} satisfies Config;
-
-export default config;
+} satisfies Config;

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 "./theme-variables";
+
+export function ApplicationLayout({ children }: { children: ReactNode }) {
+
+  useEffect(() => {
+    themeVariablesCSS()
+  }, []);
+
+  return <body className="h-screen w-full light bg-primary">{children}</body>;
 }

packages/ui/src/components/application-layout/theme-variables.ts

@@ -0,0 +1,14 @@
+function setDocumentStyleProperty(property: string, value: string) {
+  document.documentElement.style.setProperty(property, value);
+}
+
+export function themeVariablesCSS() {
+  setDocumentStyleProperty("--primary", "255, 137, 36");
+  setDocumentStyleProperty("--primary-dark", "255, 137, 36");
+  setDocumentStyleProperty("--primary-foreground", "255, 255, 255");
+  setDocumentStyleProperty("--primary-foreground-dark", "255, 255, 255");
+  setDocumentStyleProperty("--secondary", "212, 212, 216");
+  setDocumentStyleProperty("--secondary-dark", "63, 63, 70");
+  setDocumentStyleProperty("--secondary-foreground", "17, 24, 28")
+  setDocumentStyleProperty("--secondary-foreground-dark", "255, 255, 255")
+}

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

packages/ui/tsconfig.json

@@ -4,6 +4,6 @@
     "outDir": "dist",
     "baseUrl": ".",
   },
-  "include": ["src"],
+  "include": ["src", "**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }

packages/ui/tsconfig.lint.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src", "turbo"],
+  "include": ["src", "turbo", "**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }