feat(styles): simplify the icon mixins (#6836)

## 📄 Description

The PR simplifies the icon mixins removing the need to load icons
manually.

---

## 🔮 Design review

- [ ] Design review done
- [x] No design review needed

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature
works
- ✔️ New and existing unit tests pass locally with my changes

Author: alizedebray

.changeset/polite-flowers-smell.md

@@ -0,0 +1,9 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': patch
+---
+
+Refactored the icon mixins so that icons no longer need to be included separately, imports are now handled automatically.
+The `custom-property` mixin as therefore be removed entirely.
+
+The `icon` mixin arguments have also been updated: `$height` and `$width` have been replaced with a single `$size` since all icons are square.

packages/components/src/components/post-stepper-item/post-stepper-item.scss

@@ -7,8 +7,6 @@
 
 tokens.$default-map: components.$post-stepper;
 
-@include icons.custom-property('success-solid');
-
 post-stepper-item {
   grid-row: 1;
   position: relative;

packages/documentation/.storybook/styles/preview.scss

@@ -12,8 +12,6 @@
 
 tokens.$default-map: utilities.$post-spacing;
 
-@include post.custom-property(('chevrondown', 'resizeexpand', 'link', 'code'));
-
 $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
 // Mixin for toolbar button icons

packages/documentation/src/stories/foundations/icons/icon.styles.scss

@@ -1,7 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-@include post.custom-property(('accessibility', 'letter'));
-
 $resizer-padding: 1rem;
 $resizer-border-width: 1px;
 $resizer-border-color: #999;

packages/documentation/src/stories/foundations/icons/mixin.sample.scss

@@ -1,18 +1,15 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-// Load icon(s) at the top of your file
-// For a single icon:
-@include post.custom-property('accessibility', './path/to/icon/folder');
-
-// For multiple icons in the same file:
-@include post.custom-property(('accessibility', 'arrow'), './path/to/icon/folder');
+// Icon inheriting the size and color from the surrounding text
+.my-inline-icon {
+  @include post.icon('printer');
+}
 
-.my-icon {
+// Icon with custom color and size
+.my-custom-icon {
   @include post.icon(
     $name: 'accessibility',
-    // optional
     $color: '#fc0',
-    $width: 1em,
-    $height: 1em
+    $size: 1em,
   );
 }

packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss

@@ -1,22 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-// Load all icon CSS files used in this component
-@include post.custom-property(
-  (
-    'plus',
-    'trash',
-    'chevrondown',
-    'filter',
-    'updown',
-    'chevronup',
-    'arrowup',
-    'arrowdown',
-    'checkmark',
-    'closex',
-    'burger'
-  )
-);
-
 @mixin custom-icon($icon) {
   display: inline-block;
   height: 1rem;

packages/styles/src/components/card.scss

@@ -9,8 +9,6 @@
 
 tokens.$default-map: components.$post-cards;
 
-@include icons-mx.custom-property('arrowright');
-
 .card {
   display: flex;
   flex-direction: column;

packages/styles/src/components/chip.scss

@@ -6,8 +6,6 @@
 
 tokens.$default-map: components.$post-chip;
 
-@include icons-mx.custom-property(('closex', 'checkmark'));
-
 button.chip-dismissible {
   $button-size: tokens.get('close-size', components.$post-close);
   $icon-size: tokens.get('close-icon-size', components.$post-close);

packages/styles/src/components/list-check.scss

@@ -6,8 +6,6 @@
 
 tokens.$default-map: components.$post-listcheck;
 
-@include icons-mx.custom-property('checkmark');
-
 ul.list-check {
   @include utilities.reset-list;
   display: flex;

packages/styles/src/mixins/_icons.scss

@@ -9,29 +9,40 @@
 @use './../mixins/utilities';
 @use './../utilities/env-variables' as icon-version;
 
-@mixin mask-image($name) {
+// Default path for icons
+$icons-default-path: '../icons/temp';
+
+/**
+ * Light mixin that applies only the mask image.
+ *
+ * Intended for internal use where full control over icon styles is needed.
+ * Not documented for Design System users.
+ */
+@mixin mask-image($name, $path: $icons-default-path) {
   mask-image: var(--post-icon-#{$name});
   background-color: currentColor;
-  color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color
-  forced-color-adjust: preserve-parent-color;
-}
 
-@mixin custom-property($names, $path: '../icons/temp') {
-  @each $name in $names {
+  // An extra selector is required to avoid having nested rule errors
+  & {
     @at-root {
       @include meta.load-css('#{$path}/#{$name}');
     }
   }
 }
 
-@mixin icon($name, $color: inherit, $width: 1em, $height: 1em) {
+/**
+ * Full-featured icon mixin.
+ *
+ * Documented for Design System users.
+ * Use with caution internally as it applies additional styles beyond the mask.
+ */
+@mixin icon($name, $path: $icons-default-path, $color: inherit, $size: 1em) {
+  @include mask-image($name, $path);
   display: inline-block;
-  width: $width;
-  height: $height;
+  width: $size;
+  height: $size;
   vertical-align: -0.15em;
-  background-color: currentColor;
   color: $color;
-  mask-image: var(--post-icon-#{$name});
   mask-position: center center;
   mask-repeat: no-repeat;
   mask-size: 100%;