fix(styles): Alert actions button color contrast was not met with success background color

.changeset/strange-poems-occur.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed color contrast of alert component on success background color.

packages/components/cypress/e2e/alert.cy.ts

@@ -34,12 +34,6 @@ describe('alert', () => {
 describe('Accessibility', () => {
   it('Has no detectable a11y violations on load for all variants', () => {
     cy.getSnapshots('post-alert');
-    cy.checkA11y('#root-inner', {
-      rules: {
-        'color-contrast': {
-          enabled: false,
-        },
-      },
-    });
+    cy.checkA11y('#root-inner');
   });
 });

packages/styles/src/placeholders/_button.scss

@@ -30,6 +30,8 @@
 
   // Invert icon on dark backgrounds
   @include color-mx.on-dark-background() {
+    color: var(--post-contrast-color);
+
     .pi {
       filter: invert(1);
     }

packages/styles/src/placeholders/_close.scss

@@ -24,6 +24,10 @@
     width: close.$close-size;
   }
 
+  @include color-mx.on-dark-background() {
+    color: var(--post-contrast-color);
+  }
+
   @include utilities-mx.not-disabled-focus-hover() {
     color: close.$close-hover-color;
   }

packages/styles/src/variables/_color.scss

@@ -162,15 +162,42 @@ $background-colors: map.merge(
   )
 );
 
+$notification-colors: () !default;
+$notification-colors: list.join(
+  $notification-colors,
+  (
+    // When changed, check $notification-variants as well in packages/styles/src/variables/components/_notification.scss
+    'primary' $gray-80,
+    'success' $success,
+    'danger' $error,
+    'warning' $warning,
+    'info' $info,
+    'gray' $gray,
+    // deprecated
+    'notification' $gray-80,
+    'error' $error
+  )
+);
+
 // Merge with the other color maps
 $background-colors: map.merge($background-colors, $signal-colors);
 $background-colors: map.merge($background-colors, $signal-background-colors);
 $background-colors: map.merge($background-colors, $accent-colors);
 
 // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
 $dark-backgrounds: () !default;
-@each $colorname, $color in $background-colors {
+@each $color-name, $color in $background-colors {
+  @if (contrast-fn.light-or-dark($color) == 'dark') {
+    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma);
+  }
+}
+@each $color-name, $color in $notification-colors {
   @if (contrast-fn.light-or-dark($color) == 'dark') {
-    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$colorname}', $separator: comma);
+    $dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma);
+    $dark-backgrounds: list.append(
+      $dark-backgrounds,
+      'post-alert[type=#{$color-name}]',
+      $separator: comma
+    );
   }
 }

packages/styles/src/variables/components/_notification.scss

@@ -73,6 +73,7 @@ $notification-variants: () !default;
 $notification-variants: list.join(
   $notification-variants,
   (
+    // When changed, check $notification-variants as well in packages/styles/src/variables/_color.scss
     'primary' color.$primary 3134,
     'success' color.$success 2105,
     'warning' color.$warning 2104,