make elements more transparent

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%;

dist/index.js

@@ -838,7 +838,7 @@
   // src/View/translations.ts
   var englishTranslations = {
     general: {
-      closeButtonAudioLabel: "close",
+      closeButtonAudioLabel: "Close",
       deleteItemButtonAudioLabel: "delete item",
       setButton: "Set"
     },

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: hsla(0, 0%, 0%, 5%);
-  --surface-hover: hsla(0, 0%, 91%, 100%);
+  --surface-hover: hsla(0, 0%, 5%, 10%);
-  --surface-active: hsla(0, 0%, 78%, 100%);
+  --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: hsla(0, 0%, 100%, 5%);
-    --surface-hover: hsla(0, 0%, 20%, 100%);
+    --surface-hover: hsla(0, 0%, 100%, 10%);
-    --surface-active: hsla(0, 0%, 44%, 100%);
+    --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);
 }

src/View/translations.ts

@@ -1,6 +1,6 @@
 const englishTranslations = {
   general: {
-    closeButtonAudioLabel: "close",
+    closeButtonAudioLabel: "Close",
     deleteItemButtonAudioLabel: "delete item",
 
     setButton: "Set",

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%;