feat: homescreen light mode

Co-authored-by: Copilot <[email protected]>

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);
   }
 }

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 (

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>
 

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";