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..c67fede 100644 --- 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), )", + dark: "rgba(var(--primary-dark), )", + foreground: "rgba(var(--primary-foreground), )", + "foreground-dark": + "rgba(var(--primary-foreground-dark), )", }, secondary: { - DEFAULT : "var(--secondary)", - foreground: "var(--secondary-foreground)", + DEFAULT: "rgba(var(--secondary), )", + dark: "rgba(var(--secondary-dark), )", + foreground: "rgba(var(--secondary-foreground-dark), )", + "foreground-dark": "rgba(var(--secondary-foreground), )", }, success: { - DEFAULT : "var(--success)", - foreground: "var(--success-foreground)", + DEFAULT: "rgba(var(--success), )", + dark: "rgba(var(--success-dark), )", + foreground: "rgba(var(--success-foreground), )", + "foreground-dark": + "rgba(var(--success-foreground-dark), )", + }, + warning: { + DEFAULT: "rgba(var(--warning), )", + dark: "rgba(var(--warning-dark), )", + foreground: "rgba(var(--warning-foreground), )", + "foreground-dark": + "rgba(var(--warning-foreground-dark), )", }, danger: { - DEFAULT : "var(--danger)", - foreground: "var(--danger-foreground)", + DEFAULT: "rgba(var(--danger), )", + dark: "rgba(var(--danger-dark), )", + foreground: "rgba(var(--danger-foreground), )", + "foreground-dark": + "rgba(var(--danger-foreground-dark), )", }, - warning: { - DEFAULT : "var(--warning)", - foreground: "var(--warning-foreground)", + focus: "var(--primary)", + background: { + DEFAULT: "rgba(var(--background), )", + dark: "rgba(var(--background-dark), )", + }, + foreground : { + DEFAULT: "rgba(var(--foreground), )", + dark: "rgba(var(--foreground-dark), )", }, - focus: "var(--focus)", + border : { + DEFAULT: "rgba(var(--border), )", + dark: "rgba(var(--border-dark), )", + }, + "input-border" : { + DEFAULT: "rgba(var(--input-border), )", + dark: "rgba(var(--input-border-dark), )", + }, + content : { + DEFAULT: "rgba(var(--content), )", + dark: "rgba(var(--content-dark), )", + }, + divider : { + DEFAULT: "rgba(var(--divider), )", + dark: "rgba(var(--divider-dark), )", + } + }, + 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; \ 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 {children}; +"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 {children}; } 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: