diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 83879e50c..a5fa4f1eb 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -88,22 +88,21 @@ const theme = ({ dt }) => `
 }
 
 .p-overlay-mask {
-    background: rgba(0, 0, 0, 0.4);
-    transition-duration: ${dt('mask.transition.duration')};
+    background: ${dt('mask.background')};
+    color: ${dt('mask.color')};
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    color: ${dt('mask.color')};
 }
 
 .p-overlay-mask-enter {
-    animation: p-overlay-mask-enter-animation 150ms forwards;
+    animation: p-overlay-mask-enter-animation ${dt('mask.transition.duration')} forwards;
 }
 
 .p-overlay-mask-leave {
-    animation: p-overlay-mask-leave-animation 150ms forwards;
+    animation: p-overlay-mask-leave-animation ${dt('mask.transition.duration')} forwards;
 }
 
 @keyframes p-overlay-mask-enter-animation {
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 67a9aa764..9e78b689f 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -172,6 +172,9 @@ export default {
         content: {
             borderRadius: '{border.radius.md}'
         },
+        mask: {
+            transitionDuration: '0.15s'
+        },
         navigation: {
             list: {
                 padding: '0.25rem 0.25rem',
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index 4152708c4..cbdd40c12 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -171,6 +171,9 @@ export default {
         content: {
             borderRadius: '{border.radius.md}'
         },
+        mask: {
+            transitionDuration: '0.15s'
+        },
         navigation: {
             list: {
                 padding: '0.5rem 0',
diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js
index 63d3d2b43..23cbfe5f3 100644
--- a/components/lib/themes/nora/index.js
+++ b/components/lib/themes/nora/index.js
@@ -171,6 +171,9 @@ export default {
         content: {
             borderRadius: '{border.radius.xs}'
         },
+        mask: {
+            transitionDuration: '0.15s'
+        },
         navigation: {
             list: {
                 padding: '0.125rem 0',