From 378c1b97a1a377eadb6f0c707b5768b4ab0d9ec7 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Sat, 20 Jul 2024 22:48:57 +0200
Subject: [PATCH] make elements more transparent

---
 dist/index.css           | 16 ----------------
 dist/index.js            |  2 +-
 dist/styles.css          | 23 +++++++++++++----------
 src/View/translations.ts |  2 +-
 src/colors.css           | 18 ------------------
 5 files changed, 15 insertions(+), 46 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index a0d73021..1a2dace6 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -87,22 +87,6 @@ main {
     --accent-text-luma: var(--accent-text-luma-dark);
   }
 }
-#home-page,
-[color]:not([color=standard]).subtle-background {
-  --background-transparent: hsla(0, 0%, 0%, 5%);
-  --surface: hsla(0, 0%, 0%, 5%);
-  --surface-hover: hsla(0, 0%, 5%, 10%);
-  --surface-active: hsla(0, 0%, 5%, 15%);
-}
-@media (prefers-color-scheme: dark) {
-  #home-page,
-  [color]:not([color=standard]).subtle-background {
-    --background-transparent: hsla(0, 0%, 100%, 5%);
-    --surface: hsla(0, 0%, 100%, 5%);
-    --surface-hover: hsla(0, 0%, 100%, 10%);
-    --surface-active: hsla(0, 0%, 100%, 15%);
-  }
-}
 [color]:not([color=standard]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
diff --git a/dist/index.js b/dist/index.js
index 280df934..5da06f61 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -838,7 +838,7 @@
   // src/View/translations.ts
   var englishTranslations = {
     general: {
-      closeButtonAudioLabel: "close",
+      closeButtonAudioLabel: "Close",
       deleteItemButtonAudioLabel: "delete item",
       setButton: "Set"
     },
diff --git a/dist/styles.css b/dist/styles.css
index 70a696e2..7d92891e 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -20,15 +20,16 @@ COLORS
 /* definition */
 :root {
   --background: hsla(0, 0%, 100%, 100%);
-  --background-transparent: hsla(0, 0%, 100%, 60%);
+  --background-glass: hsla(0, 0%, 100%, 40%);
+  --background-transparent: hsla(0, 0%, 0%, 5%);
   --background-hover: hsla(0, 0%, 55%, 12%);
   --background-active: hsla(0, 0%, 55%, 12%);
 
   --layer: hsla(0, 0%, 96%, 60%);
 
-  --surface: hsla(0, 0%, 96%, 100%);
-  --surface-hover: hsla(0, 0%, 91%, 100%);
-  --surface-active: hsla(0, 0%, 78%, 100%);
+  --surface: hsla(0, 0%, 0%, 5%);
+  --surface-hover: hsla(0, 0%, 5%, 10%);
+  --surface-active: hsla(0, 0%, 5%, 15%);
 
   --border: hsla(0, 0%, 0%, 10%);
   --surface-border: #8d8d8d;
@@ -57,15 +58,16 @@ COLORS
 @media (prefers-color-scheme: dark) {
   :root {
     --background: hsla(0, 0%, 9%, 100%);
-    --background-transparent: hsla(0, 0%, 9%, 60%);
+    --background-glass: hsla(0, 0%, 9%, 40%);
+    --background-transparent: hsla(0, 0%, 100%, 5%);
     --background-hover: hsla(0, 0%, 55%, 16%);
     --background-active: hsla(0, 0%, 55%, 40%);
 
     --layer: hsla(0, 0%, 15%, 60%);
 
-    --surface: hsla(0, 0%, 15%, 100%);
-    --surface-hover: hsla(0, 0%, 20%, 100%);
-    --surface-active: hsla(0, 0%, 44%, 100%);
+    --surface: hsla(0, 0%, 100%, 5%);
+    --surface-hover: hsla(0, 0%, 100%, 10%);
+    --surface-active: hsla(0, 0%, 100%, 15%);
 
     --border: hsla(0, 0%, 100%, 10%);
     --surface-border: #6f6f6f;
@@ -106,7 +108,7 @@ html {
 }
 
 .modal > div {
-  background: var(--background);
+  background: var(--background-glass);
 }
 
 menu,
@@ -314,7 +316,8 @@ select {
 }
 
 header,
-menu {
+menu,
+.modal > div {
   backdrop-filter: blur(70px);
   -webkit-backdrop-filter: blur(70px);
 }
diff --git a/src/View/translations.ts b/src/View/translations.ts
index 86b45387..a0ab5cf8 100644
--- a/src/View/translations.ts
+++ b/src/View/translations.ts
@@ -1,6 +1,6 @@
 const englishTranslations = {
   general: {
-    closeButtonAudioLabel: "close",
+    closeButtonAudioLabel: "Close",
     deleteItemButtonAudioLabel: "delete item",
 
     setButton: "Set",
diff --git a/src/colors.css b/src/colors.css
index 86d2f57a..b5ae8d02 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -12,24 +12,6 @@
   }
 }
 
-#home-page,
-[color]:not([color="standard"]).subtle-background {
-  --background-transparent: hsla(0, 0%, 0%, 5%);
-  --surface: hsla(0, 0%, 0%, 5%);
-  --surface-hover: hsla(0, 0%, 5%, 10%);
-  --surface-active: hsla(0, 0%, 5%, 15%);
-}
-
-@media (prefers-color-scheme: dark) {
-  #home-page,
-  [color]:not([color="standard"]).subtle-background {
-    --background-transparent: hsla(0, 0%, 100%, 5%);
-    --surface: hsla(0, 0%, 100%, 5%);
-    --surface-hover: hsla(0, 0%, 100%, 10%);
-    --surface-active: hsla(0, 0%, 100%, 15%);
-  }
-}
-
 /* tile */
 [color]:not([color="standard"]).tile {
   --gradient-luma-1: 70%;