From 192fcbfcf960dbd97f7a82d1a9ef3fff36133e02 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 3 Oct 2024 05:13:22 -0700
Subject: [PATCH] fix: modal overlay

---
 src/assets/styles/components/modal.css | 2 +-
 src/assets/styles/defaults/vars.css    | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 805c25c2..d25b50b7 100644
--- a/src/assets/styles/components/modal.css
+++ b/src/assets/styles/components/modal.css
@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
   inset: 0;
-  background: color-mix(in srgb, var(--gray-dark), transparent 10%);
+  background: var(--modal-overlay-background);
   position: fixed;
   z-index: 3;
 
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index df407e09..81183f31 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -173,6 +173,11 @@
   --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
   --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
 
+  /* modals */
+  --modal-overlay-background-light: #ffffffbf;
+  --modal-overlay-background-dark: #000000bf;
+  --modal-overlay-background: var(--modal-overlay-background-light);
+
   /* input accent color */
   accent-color: var(--accent-color);
 }
@@ -188,6 +193,7 @@
   --gray-light: var(--gray-300);
   --gray-lighter: var(--gray-200);
   --gray-dark: var(--gray-800);
+  --modal-overlay-background: var(--modal-overlay-background-light);
   --brand-github: var(--brand-github-light);
   --article: var(--article-light);
   --about: var(--about-light);
@@ -219,6 +225,7 @@
   --gray-light: var(--gray-600);
   --gray-lighter: var(--gray-700);
   --gray-dark: var(--gray-300);
+  --modal-overlay-background: var(--modal-overlay-background-dark);
   --brand-github: var(--brand-github-dark);
   --article: var(--article-dark);
   --about: var(--about-dark);
@@ -250,6 +257,7 @@
     --gray-light: var(--gray-600);
     --gray-lighter: var(--gray-700);
     --gray-dark: var(--gray-300);
+    --modal-overlay-background: var(--modal-overlay-background-dark);
     --brand-github: var(--brand-github-dark);
     --article: var(--article-dark);
     --about: var(--about-dark);