From e62001f628762688bb23aedd94f66ce88d5ba509 Mon Sep 17 00:00:00 2001
From: sidarth-23 <sidarth157@gmail.com>
Date: Fri, 19 Apr 2024 16:44:57 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat=20:=20Made=20a=20tailwind=20co?=
=?UTF-8?q?nfig=20customisable=20by=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 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
✨ Update tailwindcss forms plugin
Added the require statement for @tailwindcss/forms to the plugins array in the
tailwind config file. This change ensures that only classes are generated by
the forms plugin.
---
apps/admin/package.json | 1 +
apps/admin/tailwind.config.ts | 20 ++++-
apps/learner/app/layout.tsx | 1 -
apps/learner/package.json | 1 +
apps/learner/tailwind.config.ts | 20 ++++-
packages/tailwind-config/cssVariableSetter.ts | 35 ++++++++
packages/tailwind-config/global.css | 73 +--------------
packages/tailwind-config/package.json | 4 +-
packages/tailwind-config/tailwind.config.ts | 88 ++++++++++++++-----
packages/ui/package.json | 1 +
.../components/application-layout/page.tsx | 14 ++-
packages/ui/tailwind.config.ts | 23 +++--
packages/ui/tsconfig.json | 2 +-
packages/ui/tsconfig.lint.json | 2 +-
pnpm-lock.yaml | 26 ++++++
15 files changed, 204 insertions(+), 107 deletions(-)
create mode 100644 packages/tailwind-config/cssVariableSetter.ts
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 5012a60..6bf445b 100644
--- 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
index fc53d2b..09cd162 100644
--- a/apps/admin/tailwind.config.ts
+++ b/apps/admin/tailwind.config.ts
@@ -1 +1,19 @@
-export * from "@repo/tailwind-config/tw-config";
\ No newline at end of file
+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
\ No newline at end of file
diff --git a/apps/learner/app/layout.tsx b/apps/learner/app/layout.tsx
index 1854bba..20bdade 100644
--- 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
index 8bdf1d5..397514d 100644
--- 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
index fc53d2b..09cd162 100644
--- a/apps/learner/tailwind.config.ts
+++ b/apps/learner/tailwind.config.ts
@@ -1 +1,19 @@
-export * from "@repo/tailwind-config/tw-config";
\ No newline at end of file
+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
\ No newline at end of file
diff --git a/packages/tailwind-config/cssVariableSetter.ts b/packages/tailwind-config/cssVariableSetter.ts
new file mode 100644
index 0000000..f2e37cb
--- /dev/null
+++ 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
index 8155407..bd6213e 100644
--- 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;
- }
-}
\ No newline at end of file
+@tailwind utilities;
\ No newline at end of file
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 5c1b175..da01166 100644
--- 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"
}
}
\ No newline at end of file
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
index 7454aad..8dc5a7b 100644
--- a/packages/tailwind-config/tailwind.config.ts
+++ b/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,85 @@ 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: [ require("@tailwindcss/forms")({
+ strategy: "class", // only generate classes
+ }),],
} satisfies Config;
-
-export default config;
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a56c745..49a1bbb 100644
--- 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
index ecced55..0c926ea 100644
--- 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
index d011ee8..e78a3fd 100644
--- 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
- */
\ No newline at end of file
+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
index 977a6f1..64a6242 100644
--- 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
index df2762e..3c46688 100644
--- 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"]
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 167c4ef..3123e84 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,6 +66,9 @@ importers:
'@repo/typescript-config':
specifier: workspace:*
version: link:../../packages/typescript-config
+ '@tailwindcss/forms':
+ specifier: ^0.5.7
+ version: 0.5.7(tailwindcss@3.4.1)
'@types/node':
specifier: ^20
version: 20.11.30
@@ -115,6 +118,9 @@ importers:
'@repo/typescript-config':
specifier: workspace:*
version: link:../../packages/typescript-config
+ '@tailwindcss/forms':
+ specifier: ^0.5.7
+ version: 0.5.7(tailwindcss@3.4.1)
'@types/node':
specifier: ^20
version: 20.11.30
@@ -169,6 +175,9 @@ importers:
packages/tailwind-config:
devDependencies:
+ '@tailwindcss/forms':
+ specifier: ^0.5.7
+ version: 0.5.7(tailwindcss@3.4.1)
tailwindcss:
specifier: ^3.4.1
version: 3.4.1
@@ -232,6 +241,9 @@ importers:
'@repo/typescript-config':
specifier: workspace:*
version: link:../typescript-config
+ '@tailwindcss/forms':
+ specifier: ^0.5.7
+ version: 0.5.7(tailwindcss@3.4.1)
'@turbo/gen':
specifier: ^1.11.3
version: 1.12.5(@types/node@20.11.30)(typescript@5.4.2)
@@ -1340,6 +1352,15 @@ packages:
tslib: 2.6.2
dev: false
+ /@tailwindcss/forms@0.5.7(tailwindcss@3.4.1):
+ resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
+ peerDependencies:
+ tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+ dependencies:
+ mini-svg-data-uri: 1.4.4
+ tailwindcss: 3.4.1
+ dev: true
+
/@tootallnate/quickjs-emscripten@0.23.0:
resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
dev: true
@@ -4619,6 +4640,11 @@ packages:
engines: {node: '>=4'}
dev: true
+ /mini-svg-data-uri@1.4.4:
+ resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+ hasBin: true
+ dev: true
+
/minimatch@3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
dependencies: