diff --git a/.prettierrc b/.prettierrc index 32ebab4e5..55a5cc75b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { + "plugins": ["prettier-plugin-tailwindcss"], "singleQuote": true, "trailingComma": "none" } diff --git a/apps/cms/postcss.config.mjs b/apps/cms/postcss.config.mjs index e4b74fc7e..186b3ea28 100644 --- a/apps/cms/postcss.config.mjs +++ b/apps/cms/postcss.config.mjs @@ -1,16 +1,7 @@ -import path from 'path'; -import { fileURLToPath } from 'url'; - -const filename = fileURLToPath(import.meta.url); -const dirname = path.dirname(filename); - /** @type {import('tailwindcss').Config} */ const config = { plugins: { - tailwindcss: { - config: path.join(dirname, 'tailwind.config.mjs') - }, - autoprefixer: {} + '@tailwindcss/postcss': {} } }; diff --git a/apps/cms/src/app/(frontend)/globals.css b/apps/cms/src/app/(frontend)/globals.css index 2e0beffff..8b332127e 100644 --- a/apps/cms/src/app/(frontend)/globals.css +++ b/apps/cms/src/app/(frontend)/globals.css @@ -1,6 +1,7 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@plugin 'tailwindcss-animate'; + +@custom-variant dark (&:is(.dark *)); :root { --steel-blue: #588bae; @@ -9,92 +10,102 @@ --light-gray: #d0d2d3; --eerie-black: #242526; --darker-black: #111111; - --max-width: 780px; - --padding: 2rem; -} - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html, -body { - height: 100%; - background: var(--darker-black); - color: var(--light-gray); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - line-height: 1.6; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.main { - flex: 1; - width: 100%; - max-width: var(--max-width); - margin: 0 auto; - padding: var(--padding); - display: flex; - align-items: center; - justify-content: center; -} - -.footer { - width: 100%; - max-width: var(--max-width); - margin: 0 auto; - padding: 2rem var(--padding); - display: flex; - justify-content: center; - gap: 2rem; - font-size: 0.9rem; - opacity: 0.7; -} - -.footer a { - color: var(--light-gray); - text-decoration: none; - transition: all 0.2s ease; - position: relative; -} - -.footer a::after { - content: ''; - position: absolute; - width: 100%; - height: 1px; - bottom: -2px; - left: 0; - background-color: currentColor; - transform: scaleX(0); - transform-origin: right; - transition: transform 0.2s ease; + --background: var(--darker-black); + --foreground: var(--light-gray); + /* Shadcn UI */ + /* --background: hsl(0 0% 100%); + --foreground: hsl(0 0% 3.9%); */ + --card: hsl(0 0% 100%); + --card-foreground: hsl(0 0% 3.9%); + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(0 0% 3.9%); + --primary: hsl(0 0% 9%); + --primary-foreground: hsl(0 0% 98%); + --secondary: hsl(0 0% 96.1%); + --secondary-foreground: hsl(0 0% 9%); + --muted: hsl(0 0% 96.1%); + --muted-foreground: hsl(0 0% 45.1%); + --accent: hsl(0 0% 96.1%); + --accent-foreground: hsl(0 0% 9%); + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(0 0% 89.8%); + --input: hsl(0 0% 89.8%); + --ring: hsl(0 0% 3.9%); + --chart-1: hsl(12 76% 61%); + --chart-2: hsl(173 58% 39%); + --chart-3: hsl(197 37% 24%); + --chart-4: hsl(43 74% 66%); + --chart-5: hsl(27 87% 67%); + --radius: 0.6rem; } -.footer a:hover { - opacity: 1; +.dark { + --background: var(--darker-black); + --foreground: var(--light-gray); + /* Shadcn UI */ + /* --background: hsl(0 0% 3.9%); + --foreground: hsl(0 0% 98%); */ + --card: hsl(0 0% 3.9%); + --card-foreground: hsl(0 0% 98%); + --popover: hsl(0 0% 3.9%); + --popover-foreground: hsl(0 0% 98%); + --primary: hsl(0 0% 98%); + --primary-foreground: hsl(0 0% 9%); + --secondary: hsl(0 0% 14.9%); + --secondary-foreground: hsl(0 0% 98%); + --muted: hsl(0 0% 14.9%); + --muted-foreground: hsl(0 0% 63.9%); + --accent: hsl(0 0% 14.9%); + --accent-foreground: hsl(0 0% 98%); + --destructive: hsl(0 62.8% 30.6%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(0 0% 14.9%); + --input: hsl(0 0% 14.9%); + --ring: hsl(0 0% 83.1%); + --chart-1: hsl(220 70% 50%); + --chart-2: hsl(160 60% 45%); + --chart-3: hsl(30 80% 55%); + --chart-4: hsl(280 65% 60%); + --chart-5: hsl(340 75% 55%); } -.footer a:hover::after { - transform: scaleX(1); - transform-origin: left; +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); } -@media (max-width: 768px) { - :root { - --padding: 1.5rem; +@layer base { + * { + @apply border-border outline-ring/50; } - - .footer { - flex-direction: column; - align-items: center; - gap: 1rem; + body { + @apply bg-background text-foreground; } } diff --git a/apps/cms/src/app/(frontend)/layout.tsx b/apps/cms/src/app/(frontend)/layout.tsx index dc3858f39..d8e21330a 100644 --- a/apps/cms/src/app/(frontend)/layout.tsx +++ b/apps/cms/src/app/(frontend)/layout.tsx @@ -1,6 +1,8 @@ import { Inter } from 'next/font/google'; import React from 'react'; +import { cn } from '@codeware/shared/util/ui'; + import './globals.css'; const inter = Inter({ subsets: ['latin'] }); @@ -17,10 +19,13 @@ export default async function RootLayout({ }) { return ( - -
{children}
-