chore: add overlay color for background behind dialogs (#16442)

jaaydenh · web-flow · commit 42451aa615a6 · 2025-02-05T07:54:59.000-05:00
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" />
diff --git 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
@@ -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
@@ -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: {
