fix(ffe-messages): add mask image css variable on icon inside ffe-messages

Author: hagenek

buildtool/config/stylelint.config.js

@@ -9,7 +9,7 @@ module.exports = {
             },
         ],
         'media-feature-name-no-vendor-prefix': true,
-        'property-no-vendor-prefix': true,
+        'property-no-vendor-prefix': null,
         'selector-max-specificity': [
             '0,3,0',
             {

packages/ffe-messages/less/common.less

@@ -68,27 +68,26 @@
         color: var(--text-color);
     }
 
-
     &__background {
         background: var(--background);
         border-radius: var(--ffe-g-border-radius-lg);
         border: var(--ffe-g-border-width) solid var(--border-color);
     }
 
     &--context {
-         --icon-size: var(--ffe-v-icons-size-lg);
-         --icon-padding: var(--ffe-spacing-xs);
+        --icon-size: var(--ffe-v-icons-size-lg);
+        --icon-padding: var(--ffe-spacing-xs);
 
-         .ffe-message__heading {
-             font-size: var(--ffe-fontsize-h6);
-             margin: 0 0 var(--ffe-spacing-2xs);
-         }
+        .ffe-message__heading {
+            font-size: var(--ffe-fontsize-h6);
+            margin: 0 0 var(--ffe-spacing-2xs);
+        }
 
         &.ffe-message--context-compact {
             --icon-size: var(--ffe-v-icons-size-md);
             --icon-padding: var(--ffe-spacing-2xs);
         }
-     }
+    }
 }
 
 .ffe-message__icon-container {
@@ -200,6 +199,7 @@
     mask-position: center;
     background-color: currentcolor;
     mask-image: var(--mask-image);
+    -webkit-mask-image: var(--mask-image);
     height: var(--icon-size);
     aspect-ratio: 1;
     mask-size: contain;