From 0817ba18bd0e660316d2140c1a1fe5e753853cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 26 Apr 2026 20:06:59 -0500
Subject: [PATCH] feat: homescreen light mode

Co-authored-by: Copilot <copilot@github.com>
---
 .../src/components/Button/index.module.css         |  2 +-
 packages/website-ue/src/components/Text/index.tsx  |  9 +++++----
 packages/website-ue/src/components/ToolCard.astro  | 14 +++++++++++++-
 packages/website-ue/src/core/ui/color.ts           |  3 +++
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/website-ue/src/components/Button/index.module.css b/packages/website-ue/src/components/Button/index.module.css
index b6bedc3e6..2411bb869 100644
--- a/packages/website-ue/src/components/Button/index.module.css
+++ b/packages/website-ue/src/components/Button/index.module.css
@@ -21,6 +21,6 @@
   }
 
   &[data-light-text="true"] {
-    color: var(--gray-12);
+    color: var(--white-a12);
   }
 }
diff --git a/packages/website-ue/src/components/Text/index.tsx b/packages/website-ue/src/components/Text/index.tsx
index 258d004f4..0f7608eac 100644
--- a/packages/website-ue/src/components/Text/index.tsx
+++ b/packages/website-ue/src/components/Text/index.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import type { Color } from "../../core/ui/color";
+import type { ColorWithBW } from "../../core/ui/color";
 import styles from "./index.module.css";
 
 export interface TextProps extends ComponentProps<"span"> {
@@ -8,7 +8,7 @@ export interface TextProps extends ComponentProps<"span"> {
   lowContrast?: boolean;
   size?: "regular" | "minor" | "major";
   align?: "left" | "center" | "right";
-  color?: Color;
+  color?: ColorWithBW;
 }
 
 export function Text({
@@ -22,10 +22,11 @@ export function Text({
   ...props
 }: TextProps) {
   const scale = color === "gray" && lowContrast ? "white" : color;
-  let power: string | number = 12;
+  const isBW = color === "black" || color === "white";
+  let power: string | number = isBW ? "a12" : 12;
 
   if (lowContrast) {
-    power = color === "gray" ? "a9" : 11;
+    power = color === "gray" ? "a9" : isBW ? "a11" : 11;
   }
 
   return (
diff --git a/packages/website-ue/src/components/ToolCard.astro b/packages/website-ue/src/components/ToolCard.astro
index 63b4b537a..55a3215e7 100644
--- a/packages/website-ue/src/components/ToolCard.astro
+++ b/packages/website-ue/src/components/ToolCard.astro
@@ -43,6 +43,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       background-size: cover;
       background-position: center;
 
+      :root.light & {
+        filter: brightness(1.25);
+      }
+
       .gradient {
         width: 100%;
         height: 100%;
@@ -58,9 +62,17 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       backdrop-filter: blur(var(--space-6));
 
+      :root.light & {
+        backdrop-filter: blur(var(--space-6)) brightness(1.25);
+      }
+
       .readable {
         display: flex;
         flex-direction: column;
+
+        .title {
+          color: red;
+        }
       }
     }
   }
@@ -87,7 +99,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
   <div class="info">
     <div class="readable">
-      <Text weight="medium">{toolStrings.name}</Text>
+      <Text weight="medium" color="white">{toolStrings.name}</Text>
       <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
     </div>
 
diff --git a/packages/website-ue/src/core/ui/color.ts b/packages/website-ue/src/core/ui/color.ts
index d7401fc7d..b40d389f2 100644
--- a/packages/website-ue/src/core/ui/color.ts
+++ b/packages/website-ue/src/core/ui/color.ts
@@ -1,7 +1,10 @@
 import type * as colors from "@radix-ui/colors";
 
 const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
+
 export type Color = Exclude<
   keyof typeof colors,
   `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
 >;
+
+export type ColorWithBW = Color | "black" | "white";