chore(styles): remove CSS icons

.changeset/dry-moons-walk.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the deprecated `.pi-*` classes, which were previously used to display icons. The `post-icon` component should now be used instead.

packages/styles/src/components/_index.scss

@@ -26,7 +26,6 @@
 @use 'grid';
 @use 'icon-button';
 @use 'icon-close-button';
-@use 'icons';
 @use 'lead';
 @use 'list-group';
 @use 'modal';

packages/styles/src/components/alert.scss

@@ -106,10 +106,6 @@
       #{$fixed-alert-padding-x} + #{$alert-icon-size} + #{notification.$notification-gap}
     );
 
-    // for alerts with .pi-* icons (deprecated)
-    background-position-x: calc(#{$fixed-alert-padding-x} + #{0.5 * $alert-icon-size});
-
-    // for alerts with mask-image icons
     &::before {
       left: calc(#{$fixed-alert-padding-x});
     }

packages/styles/src/components/card.scss

@@ -59,7 +59,6 @@
   .link-icon {
     text-decoration: none;
 
-    .pi,
     post-icon {
       width: 1.5rem;
       height: 1.5rem;

packages/styles/src/components/datepicker.scss

@@ -146,13 +146,6 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
-  // DEPRECATED
-  .pi-calendar {
-    @include icons-mx.icon(3203);
-  }
-
-  .pi-calendar,
-  .pi-3203,
   post-icon {
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
@@ -174,8 +167,6 @@ span.ngb-dp-navigation-chevron {
   height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2});
   width: forms.$input-height-inner-lg;
 
-  .pi-3203,
-  .pi-calendar,
   post-icon {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;

packages/styles/src/components/intranet-header/_icon.scss

@@ -2,5 +2,5 @@
 
 .navbar-toggler .pi-menu,
 #sidebar .pi-menu {
-  @include icon-mixin.pi(2070);
+  @include icon-mixin.icon(2070);
 }

packages/styles/src/components/intranet-header/_sidebar.scss

@@ -62,12 +62,6 @@
       &:focus {
         background-color: color.$light;
       }
-
-      i.pi {
-        height: spacing.$spacer;
-        line-height: spacing.$spacer;
-        vertical-align: text-top;
-      }
     }
 
     &:not(.closed) > div > ul > li:first-child {

packages/styles/src/components/product-card.scss

@@ -48,7 +48,6 @@
     color: inherit;
     text-decoration: none;
 
-    > .pi,
     > post-icon {
       flex-shrink: 0;
       width: 3rem;

packages/styles/src/functions/_icons.scss

@@ -61,9 +61,9 @@
 
   @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
     $svg-url: map.get(icons.$svg-icon-map, #{$icon-name});
-  } @else if(map.has-key(icons.$svg-unofficial-icon-map, #{$icon-name})) {
+  } @else if(map.has-key(icons.$notification-icons, #{$icon-name})) {
     $svg-url: icons.$svg-pre-path +
-      map.get(icons.$svg-unofficial-icon-map, #{$icon-name}) +
+      map.get(icons.$notification-icons, #{$icon-name}) +
       icons.$svg-post-path;
   } @else {
     @error "Icon '#{$icon-name}' does not exist.";
@@ -75,15 +75,3 @@
 @function get-colored-svg-url($icon-name, $color) {
   @return add-fill-color(get-svg-url($icon-name), $color);
 }
-
-@function get-pre-colored-svg-url($icon-name) {
-  $path-definition: map.get(icons.$svg-pre-colored-icon-map, #{$icon-name});
-
-  @if (not map.has-key(icons.$svg-pre-colored-icon-map, #{$icon-name})) {
-    @error "Icon '#{$icon-name}' does not exist.";
-  }
-
-  $svg-url: icons.$svg-pre-path + $path-definition + icons.$svg-post-path;
-
-  @return $svg-url;
-}

packages/styles/src/mixins/_button.scss

@@ -28,7 +28,6 @@ tokens.$default-map: components.$post-button;
   gap: map.get(button.$btn-gap-x-map, $size);
   padding: 0 map.get(button.$btn-padding-x-map, $size);
 
-  > .pi,
   > post-icon {
     width: map.get(button.$btn-icon-size-map, $size);
     height: map.get(button.$btn-icon-size-map, $size);

packages/styles/src/mixins/_icon-button.scss

@@ -17,7 +17,6 @@ tokens.$default-map: components.$post-icon-button;
   width: tokens.get('icon-button-#{$actual-size}-outer');
   height: tokens.get('icon-button-#{$actual-size}-outer');
 
-  > .pi,
   > post-icon {
     min-width: tokens.get('icon-button-#{$actual-size}-icon');
     height: tokens.get('icon-button-#{$actual-size}-icon');

packages/styles/src/mixins/_icons.scss

@@ -17,32 +17,3 @@
 @mixin remove-icon() {
   mask-image: none;
 }
-
-// DEPRECATED
-@mixin pi($name, $color: color.$black) {
-  $type: meta.type-of($color);
-  $final-color: $color;
-
-  @if ($type != color) {
-    $final-color: map.get(color.$background-colors, $color);
-
-    @if (not $final-color) {
-      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{map.keys(color.$background-colors)}.";
-    }
-  }
-  border-color: $final-color;
-  background-image: url('#{icon-fn.get-colored-svg-url($name, $final-color)}');
-
-  // set icon to white on hcm
-  @include utilities.high-contrast-mode() {
-    @if ($final-color == color.$black) {
-      filter: invert(100%);
-    } @else {
-      background-image: url('#{icon-fn.get-colored-svg-url($name, color.$white)}');
-    }
-  }
-}
-
-@mixin pi-pre($name) {
-  background-image: url('#{icon-fn.get-pre-colored-svg-url($name)}');
-}

packages/styles/src/mixins/_notification.scss

@@ -26,24 +26,6 @@
   font-size: $font-size;
   font-weight: notification.$notification-font-weight;
 
-  &.no-icon {
-    min-height: 2 * $padding-y + close.$close-size;
-    padding-inline-start: $padding-x;
-  }
-
-  // for notifications with .pi-* icons (deprecated)
-  &[class^='pi-'],
-  &[class*=' pi-'] {
-    background-size: $icon-size;
-    background-position: $padding-x $padding-y;
-    background-repeat: no-repeat;
-
-    &.no-icon {
-      background-image: none;
-    }
-  }
-
-  // for notifications with mask-image icons and post-icon override
   &::before {
     content: '';
     display: block;
@@ -58,9 +40,10 @@
     top: $padding-y;
   }
 
-  &.no-icon,
-  &[class^='pi-'],
-  &[class*=' pi-'] {
+  &.no-icon {
+    min-height: 2 * $padding-y + close.$close-size;
+    padding-inline-start: $padding-x;
+
     &::before {
       content: unset;
     }
@@ -109,7 +92,7 @@
   @include color-mx.colored-background($color, $allow-alpha: false);
 
   // default icon (mask-image)
-  &:not(.no-icon, [class^='pi-'], [class*=' pi-'])::before {
+  &:not(.no-icon)::before {
     @include icons-mx.icon($icon);
   }
 

packages/styles/src/placeholders/_button.scss

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