Merge pull request #402 from TykTechnologies/modal-blur-bg

adds a blur filter to the background of modals
TykTechnologies · Feb 11, 2025 · 040a5e5 · 040a5e5
2 parents ee81fd4 + f699e86
commit 040a5e5
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 11 deletions.
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/lib/tyk-ui.css.map b/lib/tyk-ui.css.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.15",
+  "version": "4.4.16",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css
@@ -164,7 +164,7 @@
 }
 
 .tyk-modal__backdrop {
-  background-color: var(--color-secondary-extra-dark1);
+  background-color: color-mix(in srgb, var(--color-secondary-extra-dark1) 20%, transparent);
   border: none;
   display: none;
   position: fixed;
@@ -174,12 +174,11 @@
 
   &.opened {
     display: block;
-    opacity: 0.5;
-    transition: opacity .2s ease;
   }
 
   &.fade-enter-done {
-    opacity: 0.5;
     z-index: 9;
+    backdrop-filter: blur(3px);
+    transition: backdrop-filter .2s ease;
   }
 }