fix(website): removed 'EffectLayer.tsx' for now, this component needs more work to adapt to light theme

apps/website/app/(home)/page.tsx

@@ -1,4 +1,3 @@
-import { EffectLayer } from "#/components/EffectLayer";
 import { ESLintReact } from "#/components/ESLintReact";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { CircleDotDashed, Gauge, Sliders, Zap } from "lucide-react";
@@ -18,26 +17,24 @@ const features = [
 export default function HomePage() {
   return (
     <main className="w-full min-w-0 max-w-6xl px-8 pt-4 pb-12 md:px-12 mx-auto">
-      <EffectLayer />
       <ESLintReact />
-      <article className="prose max-w-none isolate dark:isolation-auto">
-        <h2 className="isolate">Features</h2>
+      <article className="prose max-w-none">
+        <h2>Features</h2>
         <Cards className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
           {features.map(([title, description, Icon]) => (
             <Card
-              className="mix-blend-luminosity shadow-none"
               description={description}
               icon={<Icon />}
               key={title}
               title={title}
             />
           ))}
         </Cards>
-        <h2 className="isolate">Roadmap</h2>
+        <h2>Roadmap</h2>
         <p>
           Check out the <Link href="/roadmap">roadmap</Link> to see what's planned for the future.
         </p>
-        <h2 className="isolate">Contributing</h2>
+        <h2>Contributing</h2>
         <p>
           Want to contribute? Check out the{" "}
           <Link href="https://github.com/Rel1cx/eslint-react/blob/main/.github/CONTRIBUTING.md">

apps/website/app/theme.css

@@ -1,71 +1,48 @@
-/* =============================================================================
-   Base Theme Variables - Light Mode (Default)
-   ========================================================================== */
-
 @theme {
-  /* Primary UI Colors */
   --color-fd-background: hsl(0, 0%, 100%);
   --color-fd-foreground: hsl(240, 6%, 25%);
-
-  /* Component Colors */
   --color-fd-card: hsl(0, 0%, 100%);
   --color-fd-card-foreground: hsl(0, 0%, 3.9%);
   --color-fd-popover: hsl(0, 0%, 100%);
   --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
-
-  /* Action Colors */
   --color-fd-primary: hsl(210, 100%, 44%);
-  /* Main action color */
   --color-fd-primary-foreground: hsl(0, 0%, 98%);
   --color-fd-secondary: hsl(240, 6%, 97%);
   --color-fd-secondary-foreground: hsl(0, 0%, 9%);
-
-  /* Utility Colors */
   --color-fd-border: hsl(0, 0%, 89.8%);
   --color-fd-ring: hsl(0, 0%, 63.9%);
   --color-fd-muted: hsl(0, 0%, 96%);
   --color-fd-muted-foreground: hsl(240, 6%, 50%);
   --color-fd-accent: hsl(0, 0%, 94.1%);
   --color-fd-accent-foreground: hsl(240, 6%, 25%);
-}
 
-/* =============================================================================
-   Dark Theme Variables
-   ========================================================================== */
+  --color-fd-prose-body:
+    color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+}
 
 .dark {
-  /* Primary UI Colors */
   --color-fd-background: hsl(0, 0%, 7.04%);
   --color-fd-foreground: hsl(0, 0%, 92%);
-
-  /* Component Colors */
   --color-fd-card: hsl(0, 0%, 9.8%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);
   --color-fd-popover: hsl(0, 0%, 9.8%);
   --color-fd-popover-foreground: hsl(0, 0%, 88%);
-
-  /* Action Colors */
   --color-fd-primary: hsl(0, 0%, 98%);
-  /* Inverted in dark mode */
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);
   --color-fd-secondary-foreground: hsl(0, 0%, 98%);
-
-  /* Utility Colors */
   --color-fd-border: hsl(0, 0%, 14%);
   --color-fd-ring: hsl(0, 0%, 54.9%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
   --color-fd-muted-foreground: hsl(0, 0%, 60.9%);
   --color-fd-accent: hsl(0, 0%, 16.9%);
   --color-fd-accent-foreground: hsl(0, 0%, 90%);
-}
 
-/* =============================================================================
-   Typography System
-   ========================================================================== */
+  --color-fd-prose-body:
+    color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+}
 
 :root {
-  /* Main text font stack */
   --font-family-body:
     "SF Pro Text",
     "SF Pro Icons",
@@ -85,7 +62,6 @@
     "Segoe UI Symbol",
     "Noto Color Emoji";
 
-  /* UI elements font stack */
   --font-family-ui:
     system-ui,
     -apple-system,
@@ -103,7 +79,6 @@
     "Segoe UI Symbol",
     "Noto Color Emoji";
 
-  /* Monospace font stack for code */
   --font-family-mono:
     var(--font-ibm_plex_mono),
     ui-monospace,
@@ -113,60 +88,39 @@
     monospace;
 }
 
-/* =============================================================================
-   Global Element Styling
-   ========================================================================== */
-
-/* Base body styling */
 body {
   font-family: var(--font-family-body);
 }
 
-/* Interactive elements */
 button {
   cursor: pointer;
 }
 
-/* =============================================================================
-   Focus States
-   ========================================================================== */
-
-/* Remove default focus outline */
 :focus-visible {
   outline: none;
 }
 
-/* Custom focus style for accessibility */
 :focus-visible:not([class*="outline-none"]) {
   outline: 2px solid var(--color-fd-primary);
   outline-offset: -2px;
   /* Commented out box-shadow alternative:
   box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--color-fd-primary) 20%, transparent); */
 }
 
-/* Remove focus outline from tab panels */
 [role="tabpanel"]:focus-visible {
   outline: none;
 }
 
-/* =============================================================================
-   Sidebar Navigation Styling
-   ========================================================================== */
-
 #nd-docs-layout #nd-sidebar {
-
-  /* Active link styling */
   a[data-active] {
     font-weight: 400;
   }
 
-  /* Section headings */
   p.mt-8.mb-2[style^="padding-inline-start:"] {
     margin-top: 28px;
     margin-bottom: 16px;
   }
 
-  /* Navigation items */
   div[data-state],
   a[data-active] {
     margin-top: 4px;
@@ -175,58 +129,45 @@ button {
   }
 }
 
-/* Sidebar adjustments for dark mode */
 .dark #nd-sidebar {
   --color-fd-muted: hsl(0, 0%, 16%);
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
 
-/* =============================================================================
-   Content/Prose Styling
-   ========================================================================== */
-
 .prose {
   font-family: var(--font-family-body);
   --tw-prose-links: var(--color-fd-primary);
-  /* Link color */
 
-  /* Code block styling */
   .fd-codeblock.shiki {
     background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
   }
 
-  /* Remove outlines from code blocks */
   .fd-codeblock,
   [data-radix-scroll-area-viewport],
   [data-radix-scroll-area-viewport]>div {
     outline: none;
   }
 
-  /* Inline code styling */
   :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
     border: none;
     padding: .125rem .25em;
     font-size: 14px;
   }
 
-  /* Table styling */
   table {
     font-size: 1em;
 
-    /* Code inside tables */
     thead tr th code,
     tbody tr td code {
       white-space: nowrap;
     }
   }
 }
 
-/* Dark mode adjustments for content */
 .dark .prose {
   --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
 
-  /* Code text color in dark mode */
   :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: #ffffff;
   }

apps/website/components/ESLintReact.tsx

@@ -8,7 +8,7 @@ export function ESLintReact() {
     <div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
       <Image alt="logo" height="150" quality={100} src={logo as StaticImageData} width="150" />
       <span className="text-2xl">ESLint React</span>
-      <p className="text-center text-gray-700 dark:text-gray-400 pt-4">
+      <p className="text-center text-(--color-fd-prose-body) pt-4">
         A series of composable ESLint rules for React and friends.
       </p>
     </div>