From 378b04d50516bc6c576784fc245c3ff81a5d40f2 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Sun, 2 Nov 2025 06:55:18 +0100
Subject: [PATCH] Update semantic color tokens across components for improved
 consistency

- Refactor `text-*` and `bg-*` classes to use semantic color tokens such as `foreground`, `muted-foreground`, `card`, and `accent`.
- Adjust `Header`, `Footer`, and settings pages to align with the OKLCH-based design system.
- Ensure visual consistency and accessibility for both light and dark themes.
---
 frontend/src/app/(authenticated)/settings/layout.tsx      | 6 +++---
 .../src/app/(authenticated)/settings/password/page.tsx    | 4 ++--
 .../src/app/(authenticated)/settings/preferences/page.tsx | 4 ++--
 .../src/app/(authenticated)/settings/profile/page.tsx     | 4 ++--
 .../src/app/(authenticated)/settings/sessions/page.tsx    | 4 ++--
 frontend/src/components/layout/Footer.tsx                 | 8 ++++----
 frontend/src/components/layout/Header.tsx                 | 8 ++++----
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/(authenticated)/settings/layout.tsx b/frontend/src/app/(authenticated)/settings/layout.tsx
index 26cf42a..7c6cb6f 100644
--- a/frontend/src/app/(authenticated)/settings/layout.tsx
+++ b/frontend/src/app/(authenticated)/settings/layout.tsx
@@ -54,10 +54,10 @@ export default function SettingsLayout({
     <div className="container mx-auto px-4 py-8">
       {/* Page Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+        <h1 className="text-3xl font-bold text-foreground">
           Settings
         </h1>
-        <p className="mt-2 text-gray-600 dark:text-gray-400">
+        <p className="mt-2 text-muted-foreground">
           Manage your account settings and preferences
         </p>
       </div>
@@ -79,7 +79,7 @@ export default function SettingsLayout({
         </TabsList>
 
         {/* Tab Content */}
-        <div className="rounded-lg border bg-white dark:bg-gray-900 p-6">
+        <div className="rounded-lg border bg-card text-card-foreground p-6">
           {children}
         </div>
       </Tabs>
diff --git a/frontend/src/app/(authenticated)/settings/password/page.tsx b/frontend/src/app/(authenticated)/settings/password/page.tsx
index 4edacfa..06f9c9a 100644
--- a/frontend/src/app/(authenticated)/settings/password/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/password/page.tsx
@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function PasswordSettingsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Password Settings
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Change your password (Coming in Task 3.3)
       </p>
     </div>
diff --git a/frontend/src/app/(authenticated)/settings/preferences/page.tsx b/frontend/src/app/(authenticated)/settings/preferences/page.tsx
index db19d98..d7c4124 100644
--- a/frontend/src/app/(authenticated)/settings/preferences/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/preferences/page.tsx
@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function PreferencesPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Preferences
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Configure your preferences (Coming in Task 3.5)
       </p>
     </div>
diff --git a/frontend/src/app/(authenticated)/settings/profile/page.tsx b/frontend/src/app/(authenticated)/settings/profile/page.tsx
index bd6e224..0f34e73 100644
--- a/frontend/src/app/(authenticated)/settings/profile/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/profile/page.tsx
@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function ProfileSettingsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Profile Settings
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Manage your profile information (Coming in Task 3.2)
       </p>
     </div>
diff --git a/frontend/src/app/(authenticated)/settings/sessions/page.tsx b/frontend/src/app/(authenticated)/settings/sessions/page.tsx
index 369dd0d..a654b31 100644
--- a/frontend/src/app/(authenticated)/settings/sessions/page.tsx
+++ b/frontend/src/app/(authenticated)/settings/sessions/page.tsx
@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function SessionsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Active Sessions
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Manage your active sessions (Coming in Task 3.4)
       </p>
     </div>
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index 4c201dc..e481287 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -11,16 +11,16 @@ export function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="border-t bg-gray-50 dark:bg-gray-900/50">
+    <footer className="border-t bg-muted/30">
       <div className="container mx-auto px-4 py-6">
         <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
-          <div className="text-center text-sm text-gray-600 dark:text-gray-400 md:text-left">
+          <div className="text-center text-sm text-muted-foreground md:text-left">
             © {currentYear} FastNext Template. All rights reserved.
           </div>
           <div className="flex space-x-6">
             <Link
               href="/settings/profile"
-              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               Settings
             </Link>
@@ -28,7 +28,7 @@ export function Footer() {
               href="https://github.com/yourusername/fastnext-stack"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               GitHub
             </a>
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 91a0941..674f66b 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -57,8 +57,8 @@ function NavLink({
       className={cn(
         'px-3 py-2 rounded-md text-sm font-medium transition-colors',
         isActive
-          ? 'bg-gray-900 text-white dark:bg-gray-700'
-          : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+          ? 'bg-primary text-primary-foreground'
+          : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground'
       )}
     >
       {children}
@@ -75,12 +75,12 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b bg-white dark:bg-gray-900">
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto flex h-16 items-center px-4">
         {/* Logo */}
         <div className="flex items-center space-x-8">
           <Link href="/" className="flex items-center space-x-2">
-            <span className="text-xl font-bold text-gray-900 dark:text-white">
+            <span className="text-xl font-bold text-foreground">
               FastNext
             </span>
           </Link>