Token for mask transition

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 {

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',

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',

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',