fix: implement proper color system with CSS variables

attarchi · attarchi · commit f888a0a6d15f · 2025-05-23T13:12:47.000+01:00
- Convert color variables from hex to RGB format for better opacity support
- Update Tailwind config to use RGB color values with alpha channel support
- Add test color squares to verify color system functionality
- Apply explicit color classes to UI components
- Fix theme class application in layout component
- Ensure proper CSS variable inheritance for light/dark themes
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,35 +5,33 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background-light: #ffffff;
-    --background-dark: #0d1117;
-    --text-light: #24292f;
-    --text-dark: #f0f6fc;
-    --accent-light: #0969da;
-    --accent-dark: #58a6ff;
-    --muted-light: #656d76;
-    --muted-dark: #8b949e;
-    --surface-light: #f6f8fa;
-    --surface-dark: #21262d;
-  }
+:root {
+  --background-light: 255 255 255;
+  --background-dark: 13 17 23;
+  --text-light: 36 41 47;
+  --text-dark: 240 246 252;
+  --accent-light: 9 105 218;
+  --accent-dark: 88 166 255;
+  --muted-light: 101 109 118;
+  --muted-dark: 139 148 158;
+  --surface-light: 246 248 250;
+  --surface-dark: 33 38 45;
+}
 
-  .light {
-    --background: var(--background-light);
-    --text: var(--text-light);
-    --accent: var(--accent-light);
-    --muted: var(--muted-light);
-    --surface: var(--surface-light);
-  }
+.light {
+  --background: var(--background-light);
+  --text: var(--text-light);
+  --accent: var(--accent-light);
+  --muted: var(--muted-light);
+  --surface: var(--surface-light);
+}
 
-  .dark {
-    --background: var(--background-dark);
-    --text: var(--text-dark);
-    --accent: var(--accent-dark);
-    --muted: var(--muted-dark);
-    --surface: var(--surface-dark);
-  }
+.dark {
+  --background: var(--background-dark);
+  --text: var(--text-dark);
+  --accent: var(--accent-dark);
+  --muted: var(--muted-dark);
+  --surface: var(--surface-dark);
 }
 
 @layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="light">
       <body
         className={`${jetbrainsMono.variable} ${inter.variable} antialiased`}
       >
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -16,66 +16,27 @@ import {
 export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority={true}
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-
+      {/* Test colors */}
+      <div className="fixed top-4 left-4 flex flex-col gap-2">
+        <div className="w-20 h-20 bg-background border border-text"></div>
+        <div className="w-20 h-20 bg-accent"></div>
+        <div className="w-20 h-20 bg-muted"></div>
+        <div className="w-20 h-20 bg-surface"></div>
+      </div>
+     
       <Section spacing="lg" maxWidth="4xl" align="center" className="row-start-2 w-full flex flex-col gap-12 items-center mt-8">
-        <Heading as="h2" size="h2" className="mb-2">UI Component Showcase</Heading>
+        <Heading as="h2" size="h2" className="mb-2 text-accent">UI Component Showcase</Heading>
         <div className="flex flex-wrap gap-8 justify-center w-full">
           <div className="flex flex-col gap-2 items-center">
-            <Text weight="bold">Badges</Text>
+            <Text weight="bold" className="text-accent">Badges</Text>
             <div className="flex gap-2">
               <Badge>Default</Badge>
               <Badge variant="secondary">Secondary</Badge>
               <Badge variant="outline">Outline</Badge>
             </div>
           </div>
           <div className="flex flex-col gap-2 items-center">
-            <Text weight="bold">Buttons</Text>
+            <Text weight="bold" className="text-accent">Buttons</Text>
             <div className="flex gap-2 flex-wrap">
               <Button>Default</Button>
               <Button variant="secondary">Secondary</Button>
@@ -89,8 +50,8 @@ export default function Home() {
         </div>
         <div className="flex flex-wrap gap-8 justify-center w-full">
           <div className="flex flex-col gap-2 items-center">
-            <Text weight="bold">Card</Text>
-            <Card className="w-80">
+            <Text weight="bold" className="text-accent">Card</Text>
+            <Card className="w-80 bg-surface">
               <CardHeader>
                 <CardTitle>Card Title</CardTitle>
                 <CardDescription>Card description goes here.</CardDescription>
@@ -104,15 +65,15 @@ export default function Home() {
             </Card>
           </div>
           <div className="flex flex-col gap-2 items-center">
-            <Text weight="bold">Section</Text>
-            <Section spacing="md" maxWidth="md" align="center" className="bg-muted-foreground/10 rounded-lg p-4 w-80">
+            <Text weight="bold" className="text-accent">Section</Text>
+            <Section spacing="md" maxWidth="md" align="center" className="bg-surface rounded-lg p-4 w-80">
               <Heading as="h3" size="h4">Section Title</Heading>
               <Text>This is a section container with spacing and alignment.</Text>
             </Section>
           </div>
         </div>
         <div className="flex flex-col gap-2 items-center w-full">
-          <Text weight="bold">Typography</Text>
+          <Text weight="bold" className="text-accent">Typography</Text>
           <div className="flex flex-col gap-1 items-center w-full">
             <Heading as="h1" size="h1">Heading 1</Heading>
             <Heading as="h2" size="h2">Heading 2</Heading>
@@ -136,7 +97,7 @@ export default function Home() {
 
       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
         <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
@@ -151,7 +112,7 @@ export default function Home() {
           Learn
         </a>
         <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
@@ -166,7 +127,7 @@ export default function Home() {
           Examples
         </a>
         <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-accent"
           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,26 +10,11 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: {
-          light: "#ffffff",
-          dark: "#0d1117",
-        },
-        text: {
-          light: "#24292f",
-          dark: "#f0f6fc",
-        },
-        accent: {
-          light: "#0969da",
-          dark: "#58a6ff",
-        },
-        muted: {
-          light: "#656d76",
-          dark: "#8b949e",
-        },
-        surface: {
-          light: "#f6f8fa",
-          dark: "#21262d",
-        },
+        background: "rgb(var(--background) / <alpha-value>)",
+        text: "rgb(var(--text) / <alpha-value>)",
+        accent: "rgb(var(--accent) / <alpha-value>)",
+        muted: "rgb(var(--muted) / <alpha-value>)",
+        surface: "rgb(var(--surface) / <alpha-value>)",
       },
       fontFamily: {
         mono: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default function RootLayout({`
`23`	`23`	`children: React.ReactNode;`
`24`	`24`	`}>) {`
`25`	`25`	`return (`
`26`		`- <html lang="en">`
	`26`	`+ <html lang="en" className="light">`
`27`	`27`	`<body`
`28`	`28`	className={`${jetbrainsMono.variable} ${inter.variable} antialiased`}
`29`	`29`	`>`