refactor: Update color variables in globals.css and tailwind.config.ts

This commit updates the color variables in the `globals.css` and `tailwind.config.ts` files. The new color variables are `color-1`, `color-2`, `color-3`, `color-4`, and `color-5`. These variables are used to define the colors for the Zen Browser UI. The changes were made to improve the consistency and readability of the code.

src/app/globals.css

@@ -48,6 +48,12 @@
     --color-two: #72afd3;
     --color-three: #ff2e63;
      */
+
+		 --color-1: 0 100% 63%;
+		 --color-2: 270 100% 63%;
+		 --color-3: 210 100% 63%;
+		 --color-4: 195 100% 63%;
+		 --color-5: 90 100% 63%;
 	}
 
 	[data-theme="dark"],

src/components/download.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
-import { ChevronLeft, InfoIcon } from "lucide-react";
+import { BicepsFlexedIcon, ChevronLeft, InfoIcon, TestTubeDiagonalIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { CopyButton } from "./ui/copy-button";
 import Particles from "./ui/particles";
@@ -12,8 +12,11 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 const BASE_URL =
 	"https://github.com/zen-browser/desktop/releases/latest/download";
+const TWILIGHT_BASE_URL =
+	"https://github.com/zen-browser/desktop/releases/twilight/download";
 
 import SparklesText from "./ui/sparkles-text";
+import { RainbowButton } from "./ui/rainbow-button";
 const field_enter = keyframes`
   0% {
     opacity: 0;
@@ -50,7 +53,7 @@ const field_exit = keyframes`
 const FormField = styled.div<{ enter: boolean; out: boolean }>`
 	max-height: 0;
 	flex-direction: column;
-	margin-top: 3rem;
+	margin-top: 2rem;
 	opacity: 0;
 	width: 100%;
 	animation: 0.2s ease-in-out forwards
@@ -71,13 +74,10 @@ const FieldDescription = styled.div`
 
 export default function DownloadPage() {
 	const [platform, setPlatform] = useState<string | null>(null);
+	if (typeof window === "undefined") return null;
+	const searchParams = new URLSearchParams(window.location.search);
+	const [isTwilight, setIsTwilight] = useState(searchParams.has("twilight"));
 	const [architecture, setArchitecture] = useState<string | null>(null);
-	const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
-		null,
-	);
-	const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
-		null,
-	);
 
 	const [selectedPlatform, setSelectedPlatform] = useState("");
 	const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
@@ -154,7 +154,8 @@ export default function DownloadPage() {
 			console.log("Downloading: ");
 			console.log("platform: ", selectedPlatform);
 			console.log("compat: ", arch);
-			window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
+			const baseUrl = isTwilight ? TWILIGHT_BASE_URL : BASE_URL;
+			window.location.replace(`${baseUrl}/${releases[releaseTarget]}`);
 		}
 		setHasDownloaded(true);
 		throwConfetti();
@@ -164,8 +165,6 @@ export default function DownloadPage() {
 		if (flowIndex === 0) setPlatform(selectedPlatform);
 		if (flowIndex === 1) setArchitecture(selectedArchitecture);
 		if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) {
-			setWindowsDownloadType(selectedWindowsDownloadType);
-			setLinuxDownloadType(selectedLinuxDownloadType);
 			startDownload();
 		}
 		setFlowIndex(flowIndex + 1);
@@ -177,9 +176,7 @@ export default function DownloadPage() {
 		} else if (flowIndex === 2) {
 			setArchitecture(null);
 		} else if (flowIndex === 3) {
-			setWindowsDownloadType(null);
 			setSelectedWindowsDownloadType("installer");
-			setLinuxDownloadType(null);
 			setSelectedLinuxDownloadType("portable");
 		}
 		if (flowIndex > 0) setFlowIndex(flowIndex - 1);
@@ -269,14 +266,24 @@ export default function DownloadPage() {
 						</div>
 					)) || (
 						<>
-							<h1 className="flex flex-col text-6xl font-bold lg:flex-row">
+							<h1 className="flex flex-col items-center text-6xl font-bold lg:flex-row">
-								Download <SparklesText className="mx-2" text="Zen" />
+								Download <SparklesText className="mx-2" text={isTwilight ? "Twilight" : "Zen"} />
 							</h1>
 							<p className="mt-3 text-muted-foreground">
 								We're thrilled for you to experience Zen Browser. First, let us
 								know which device you're using. This will only take a moment, we
 								promise.
 							</p>
+							{isTwilight && (
+								<div className="mt-5 flex items-center text-yellow-500">
+									<InfoCircledIcon className="mr-4 ml-2 size-4" />
+									<p className="text-muted-foreground text-xs opacity-80">
+										You're about to download Zen Browser Twilight, our
+										experimental build. This build is not stable and may contain
+										bugs.
+									</p>
+								</div>
+							)}
 						</>
 					)}
 					{/*Changes for the Choose your platform as checkbox looks old*/}
@@ -543,23 +550,25 @@ export default function DownloadPage() {
 											Download Zen as a ZIP file
 										</p>
 									</div>
-									<div
+									{!isTwilight && (
-										onClick={() => changeToFlatpak()}
+										<div
-										className={ny(
+											onClick={() => changeToFlatpak()}
-											"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+											className={ny(
-											selectedLinuxDownloadType === "flatpak"
+												"mb-2 ml-5 flex flex-1 cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
-												? "border-blue-400"
+												selectedLinuxDownloadType === "flatpak"
-												: "",
+													? "border-blue-400"
-										)}
+													: "",
-									>
+											)}
-										<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
+										>
-											🧑‍💻
+											<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">
-										</h1>
+												🧑‍💻
-										<h1 className="my-2 text-2xl font-semibold">Flatpak</h1>
+											</h1>
-										<p className="mx-auto text-center text-muted-foreground">
+											<h1 className="my-2 text-2xl font-semibold">Flatpak</h1>
-											Install Zen from the Flatpak repository.
+											<p className="mx-auto text-center text-muted-foreground">
-										</p>
+												Install Zen from the Flatpak repository.
-									</div>
+											</p>
+										</div>
+									)}
 								</div>
 							</FormField>
 						)}
@@ -615,6 +624,15 @@ export default function DownloadPage() {
 						)}
 				</div>
 			</div>
+			{/* We'll hide the button for now since "mr. benchmarks" thinks people act like apes and just "click on buttons without reading" */}
+			{isTwilight && (
+				<div className="absolute bottom-10 right-10">
+					<RainbowButton onClick={() => setIsTwilight(!isTwilight)}>
+						{!isTwilight ? <TestTubeDiagonalIcon className="size-5 mr-4" /> : <BicepsFlexedIcon className="size-5 mr-4" />}
+						{!isTwilight ? "Download Twilight" : "Switch to Stable"}
+					</RainbowButton>
+				</div>
+			)}
 			<Particles
 				className="absolute inset-0 -z-10 hidden dark:block"
 				quantity={50}

src/components/ui/rainbow-button.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { ny } from '@/lib/utils'
+
+interface RainbowButtonProps
+   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function RainbowButton({ children, ...props }: RainbowButtonProps) {
+   return (
+      <button
+         className={ny(
+            'focus-visible:ring-ring animate-rainbow text-primary-foreground group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-4 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
+
+            // before styles
+            'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]',
+
+            // light mode colors
+            'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+            // dark mode colors
+            ' dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+         )}
+         {...props}
+      >
+         {children}
+      </button>
+   )
+}

tailwind.config.ts

@@ -29,6 +29,11 @@ const config = {
 				background: "hsl(var(--background))",
 				foreground: "hsl(var(--foreground))",
 				surface: "var(--surface)",
+        "color-1": "hsl(var(--color-1))",
+        "color-2": "hsl(var(--color-2))",
+        "color-3": "hsl(var(--color-3))",
+        "color-4": "hsl(var(--color-4))",
+        "color-5": "hsl(var(--color-5))",
 				primary: {
 					DEFAULT: "hsl(var(--primary))",
 					foreground: "hsl(var(--primary-foreground))",
@@ -64,6 +69,10 @@ const config = {
 				sm: "calc(var(--radius) - 4px)",
 			},
 			keyframes: {
+        rainbow: {
+          "0%": { "background-position": "0%" },
+          "100%": { "background-position": "200%" },
+        },
 				orbit: {
 					"0%": {
 						transform:
@@ -137,6 +146,7 @@ const config = {
 				},
 			},
 			animation: {
+				rainbow: "rainbow var(--speed, 2s) infinite linear",
 				orbit: "orbit calc(var(--duration)*1s) linear infinite",
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",