From 42451aa615a65187000e6f19d8e250e14fef7d06 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 5 Feb 2025 12:54:59 +0000
Subject: [PATCH] chore: add overlay color for background behind dialogs
 (#16442)

Create tailwind color for the background overlay for dialogs

<img width="1153" alt="Screenshot 2025-02-05 at 12 26 16"
src="https://github.com/user-attachments/assets/46d16418-f594-4daa-9fa9-8ecc597e5c02"
/>
---
 site/src/components/Dialog/Dialog.tsx | 2 +-
 site/src/index.css                    | 2 ++
 site/tailwind.config.js               | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
index 0770ec62ae..dde7dcae3b 100644
--- a/site/src/components/Dialog/Dialog.tsx
+++ b/site/src/components/Dialog/Dialog.tsx
@@ -27,7 +27,7 @@ export const DialogOverlay = forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			`fixed inset-0 z-50 bg-black/80
+			`fixed inset-0 z-50 bg-overlay
 			data-[state=open]:animate-in data-[state=closed]:animate-out
 			data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,
 			className,
diff --git a/site/src/index.css b/site/src/index.css
index 3dd12935c8..29b4240939 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -27,6 +27,7 @@
 		--border-default: 240 6% 90%;
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 84% 60%;
+		--overlay-default: 240 5% 84% / 80%;
 		--radius: 0.5rem;
 		--highlight-purple: 262 83% 58%;
 		--highlight-green: 143 64% 24%;
@@ -56,6 +57,7 @@
 		--border-default: 240 4% 16%;
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 91% 71%;
+		--overlay-default: 240 10% 4% / 80%;
 		--highlight-purple: 252 95% 85%;
 		--highlight-green: 141 79% 85%;
 		--border: 240 3.7% 15.9%;
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 7c07eed4bd..b9964e053f 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -49,6 +49,7 @@ module.exports = {
 					DEFAULT: "hsl(var(--border-default))",
 					destructive: "hsl(var(--border-destructive))",
 				},
+				overlay: "hsla(var(--overlay-default))",
 				input: "hsl(var(--input))",
 				ring: "hsl(var(--ring))",
 				highlight: {