From c34a76490410fe46d1eb6e18864d9a3a18908d69 Mon Sep 17 00:00:00 2001 From: alona Date: Fri, 12 Sep 2025 22:06:17 +0200 Subject: [PATCH 001/159] test --- .../components/src/components/post-banner/post-banner.scss | 5 +++++ packages/styles/src/mixins/_icons.scss | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/packages/components/src/components/post-banner/post-banner.scss b/packages/components/src/components/post-banner/post-banner.scss index e3b64400d0..535f7d715f 100644 --- a/packages/components/src/components/post-banner/post-banner.scss +++ b/packages/components/src/components/post-banner/post-banner.scss @@ -10,6 +10,7 @@ @use '@swisspost/design-system-styles/functions/tokens'; tokens.$default-map: components.$post-banner; +@include icons.load-icon-css('1004'); :host { position: relative; @@ -35,6 +36,10 @@ tokens.$default-map: components.$post-banner; width: tokens.get('banner-icon-size'); inset-block-start: tokens.get('banner-padding'); inset-inline-start: tokens.get('banner-padding'); + + background-image: var(--post-icon-1004); + background-repeat: no-repeat; + background-size: contain; } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 6656fc77ed..0869bcd6f9 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use 'sass:meta'; +@use 'sass:list'; @use './../variables/type'; @use './../variables/color'; @@ -16,6 +17,12 @@ forced-color-adjust: preserve-parent-color; } +@mixin load-icon-css($name, $path: '@swisspost/design-system-icons/dist/custom-properties') { + @at-root { + @include meta.load-css("#{$path}/#{$name}.css"); + } +} + @mixin post-icon( $base: 'https://unpkg.com/@swisspost/design-system-icons@#{icon-version.$post-icon-version}/public/post-icons', From f920ece857b58ef8aba6f46bb4d87654ead73b73 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:05:53 +0200 Subject: [PATCH 002/159] fix(icons): implement `meta-load.css` --- packages/documentation/package.json | 1 + .../foundations/icons/mixin.sample.scss | 4 +-- packages/internet-header/package.json | 1 + packages/styles/src/components/chip.scss | 12 +++---- .../styles/src/components/form-input.scss | 4 +-- packages/styles/src/mixins/_icons.scss | 34 +++++++++++++++++++ pnpm-lock.yaml | 25 ++++++++------ 7 files changed, 58 insertions(+), 23 deletions(-) diff --git a/packages/documentation/package.json b/packages/documentation/package.json index fecc6de0e6..2cbc12c6d5 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -47,6 +47,7 @@ "@storybook/addon-links": "9.0.18", "@storybook/web-components-vite": "9.0.18", "@swisspost/design-system-components-angular": "workspace:10.0.0-next.47", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.23", diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 736236e69a..1ac8684c48 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,11 +1,9 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - @include post.post-icon( + @include post.post-icon-load( $name: 'accessibility', // optional - $base: '/optional/path/to/your/self-hosted/svgs', - // optional $color: '#fc0' ); } diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index 5a2873286d..e3d660f2d9 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -60,6 +60,7 @@ "@stencil/sass": "3.0.12", "@stencil/store": "2.0.16", "@types/body-scroll-lock": "3.1.2", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/iframe-resizer": "4.0.0", "@types/jest": "29.5.14", "@types/jquery": "3.5.32", diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index effae1ae1d..2b7fb7b1b3 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -41,12 +41,12 @@ button.chip-dismissible { // Close icon &::after { content: ''; - @include icons-mx.post-icon($name: 'closex', $height: $icon-size, $width: $icon-size); margin-left: calc((#{$button-size} - #{$icon-size}) / 2); @include utilities.high-contrast-mode() { background-color: ButtonText; } + @include icons-mx.post-icon-load($name: 'closex'); } &:hover::after { @@ -102,17 +102,15 @@ button.chip-dismissible { &::before { content: ''; - @include icons-mx.post-icon( - $name: 'checkmark', - $width: tokens.get('chip-selectable-icon'), - $height: tokens.get('chip-selectable-icon') - ); position: absolute; left: tokens.get('chip-selectable-padding-inline'); - + @include utilities.high-contrast-mode() { background-color: Highlight; } + @include icons-mx.post-icon-load( + $name: 'checkmark' + ); } .badge { diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index d3b7727a06..c90c432291 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -216,7 +216,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icon-mx.post-icon( + @include icon-mx.post-icon-load( $name: 'success-solid', $color: tokens.get('post-validation-success', components.$post-validation), $width: tokens.get('input-sizing-icon'), @@ -233,7 +233,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icon-mx.post-icon( + @include icon-mx.post-icon-load( $name: 'warning-solid', $color: tokens.get('post-validation-error', components.$post-validation), $width: tokens.get('input-sizing-icon'), diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 0869bcd6f9..1722bb4223 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,6 +9,40 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; +$loaded-icons: () !default; + +@mixin load-icon-css($name, $path: '@swisspost/design-system-icons/dist/custom-properties') { + @if list.index($loaded-icons, $name) == null { + $loaded-icons: list.append($loaded-icons, $name) !global; + @at-root { + @include meta.load-css("#{$path}/#{$name}"); + } + } +} + +@mixin post-icon-load( + $name, + $color: inherit, + $width: 1em, + $height: 1em, +) { + display: inline-block; + vertical-align: -0.15em; + background-color: currentColor; + color: $color; + mask-image: var(--post-icon-#{$name}); + -webkit-mask-image: var(--post-icon-#{$name}); + -webkit-mask-position: center center; + mask-position: center center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + width: $width; + height: $height; + @include load-icon-css($name); +} + @mixin icon($name) { $icon: icon-fn.get-svg-url($name); mask-image: url('#{$icon}'); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d4daac88a..69c7448c8d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -671,6 +671,9 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) + '@swisspost/design-system-icons': + specifier: workspace:10.0.0-next.47 + version: link:../icons '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 @@ -12073,7 +12076,7 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) - '@angular-devkit/build-webpack': 0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.4)) + '@angular-devkit/build-webpack': 0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0(esbuild@0.25.4)))(webpack@5.98.0(esbuild@0.25.4)) '@angular-devkit/core': 19.2.15(chokidar@4.0.1) '@angular/build': 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jiti@2.4.2)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.89.2)(tailwindcss@4.1.11)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.0) '@angular/compiler-cli': 19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3) @@ -12124,8 +12127,8 @@ snapshots: tslib: 2.8.1 typescript: 5.8.3 webpack: 5.98.0(esbuild@0.25.4) - webpack-dev-middleware: 7.4.2(webpack@5.98.0) - webpack-dev-server: 5.2.2(webpack@5.98.0) + webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.4)) + webpack-dev-server: 5.2.2(webpack@5.98.0(esbuild@0.25.4)) webpack-merge: 6.0.1 webpack-subresource-integrity: 5.1.0(webpack@5.98.0(esbuild@0.25.4)) optionalDependencies: @@ -12162,7 +12165,7 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) - '@angular-devkit/build-webpack': 0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.4)) + '@angular-devkit/build-webpack': 0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0(esbuild@0.25.4)))(webpack@5.98.0(esbuild@0.25.4)) '@angular-devkit/core': 19.2.15(chokidar@4.0.1) '@angular/build': 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jiti@2.4.2)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(postcss@8.5.2)(sass-embedded@1.89.2)(tailwindcss@4.1.11)(terser@5.39.0)(typescript@5.8.3)(yaml@2.7.0) '@angular/compiler-cli': 19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3) @@ -12213,8 +12216,8 @@ snapshots: tslib: 2.8.1 typescript: 5.8.3 webpack: 5.98.0(esbuild@0.25.4) - webpack-dev-middleware: 7.4.2(webpack@5.98.0) - webpack-dev-server: 5.2.2(webpack@5.98.0) + webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.4)) + webpack-dev-server: 5.2.2(webpack@5.98.0(esbuild@0.25.4)) webpack-merge: 6.0.1 webpack-subresource-integrity: 5.1.0(webpack@5.98.0(esbuild@0.25.4)) optionalDependencies: @@ -12247,12 +12250,12 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-webpack@0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.4))': + '@angular-devkit/build-webpack@0.1902.15(chokidar@4.0.1)(webpack-dev-server@5.2.2(webpack@5.98.0(esbuild@0.25.4)))(webpack@5.98.0(esbuild@0.25.4))': dependencies: '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) rxjs: 7.8.1 webpack: 5.98.0(esbuild@0.25.4) - webpack-dev-server: 5.2.2(webpack@5.98.0) + webpack-dev-server: 5.2.2(webpack@5.98.0(esbuild@0.25.4)) transitivePeerDependencies: - chokidar @@ -24838,7 +24841,7 @@ snapshots: webidl-conversions@7.0.0: {} - webpack-dev-middleware@7.4.2(webpack@5.98.0): + webpack-dev-middleware@7.4.2(webpack@5.98.0(esbuild@0.25.4)): dependencies: colorette: 2.0.20 memfs: 4.9.3 @@ -24849,7 +24852,7 @@ snapshots: optionalDependencies: webpack: 5.98.0(esbuild@0.25.4) - webpack-dev-server@5.2.2(webpack@5.98.0): + webpack-dev-server@5.2.2(webpack@5.98.0(esbuild@0.25.4)): dependencies: '@types/bonjour': 3.5.13 '@types/connect-history-api-fallback': 1.5.4 @@ -24877,7 +24880,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 7.4.2(webpack@5.98.0) + webpack-dev-middleware: 7.4.2(webpack@5.98.0(esbuild@0.25.4)) ws: 8.18.2 optionalDependencies: webpack: 5.98.0(esbuild@0.25.4) From 332e304514af68be9458c59d75f56d0e931c81b9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:27:46 +0200 Subject: [PATCH 003/159] substituted the `post-icon` mixin --- .../.storybook/styles/preview.scss | 45 ++++++++++++------- .../foundations/icons/icon.styles.scss | 6 +-- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 86b4a13234..22958ecc14 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -13,18 +13,6 @@ tokens.$default-map: utilities.$post-color; $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - -// Mixin for toolbar button icons -@mixin toolbar-icon($icon-name) { - @include post.post-icon($name: $icon-name, $base: '/post-icons'); - content: ''; - margin-right: 0.5rem; - width: 1em; - height: 1em; - display: inline-block; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - #storybook-root, #storybook-docs { .sbdocs-content *:not(.section) > .container >, @@ -243,8 +231,13 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier @include media.min(md) { &::before { - @include toolbar-icon('2052'); - transition: all 0.3s ease; + content: ''; + margin-right: 0.5rem; + width: 1em; + height: 1em; + display: inline-block; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + @include post.post-icon-load($name: '2052'); } &--expanded::before { @@ -256,15 +249,33 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier .docblock-code-toggle + button { @include media.min(md) { &::before { - @include toolbar-icon('resizeexpand'); + content: ''; + margin-right: 0.5rem; + width: 1em; + height: 1em; + display: inline-block; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + @include post.post-icon-load($name: 'resizeexpand'); } + button::before { - @include toolbar-icon('link'); + content: ''; + margin-right: 0.5rem; + width: 1em; + height: 1em; + display: inline-block; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + @include post.post-icon-load($name: 'link'); } + button + button::before { - @include toolbar-icon('code'); + content: ''; + margin-right: 0.5rem; + width: 1em; + height: 1em; + display: inline-block; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + @include post.post-icon-load($name: 'code'); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index ab4805bc2f..3065972667 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -28,13 +28,13 @@ $resizer-max-width: 64px; } .my-1022-icon { - @include post.post-icon($name: '1022', $base: '/post-icons'); + @include post.post-icon-load($name: '1022'); } .my-accessibility-icon { - @include post.post-icon($name: 'accessibility', $base: '/post-icons'); + @include post.post-icon-load($name: 'accessibility'); } .my-handvictory-icon { - @include post.post-icon($name: 'handvictory', $base: '/post-icons', $color: #666666); + @include post.post-icon-load($name: 'handvictory', $color: #666666); } From a313b8a7555d670f4db2f6702c681b9f4e4afe2e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:29:17 +0200 Subject: [PATCH 004/159] removed redundant code --- .../components/src/components/post-banner/post-banner.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/src/components/post-banner/post-banner.scss b/packages/components/src/components/post-banner/post-banner.scss index 535f7d715f..e3b64400d0 100644 --- a/packages/components/src/components/post-banner/post-banner.scss +++ b/packages/components/src/components/post-banner/post-banner.scss @@ -10,7 +10,6 @@ @use '@swisspost/design-system-styles/functions/tokens'; tokens.$default-map: components.$post-banner; -@include icons.load-icon-css('1004'); :host { position: relative; @@ -36,10 +35,6 @@ tokens.$default-map: components.$post-banner; width: tokens.get('banner-icon-size'); inset-block-start: tokens.get('banner-padding'); inset-inline-start: tokens.get('banner-padding'); - - background-image: var(--post-icon-1004); - background-repeat: no-repeat; - background-size: contain; } } From c81bc8b5aa543ad3c615fdd2020aad86e105a9b4 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:46:37 +0200 Subject: [PATCH 005/159] removed redundant devDependency --- packages/internet-header/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index e3d660f2d9..5a2873286d 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -60,7 +60,6 @@ "@stencil/sass": "3.0.12", "@stencil/store": "2.0.16", "@types/body-scroll-lock": "3.1.2", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/iframe-resizer": "4.0.0", "@types/jest": "29.5.14", "@types/jquery": "3.5.32", From 9e65eca3511dd4f3469a0c0b88fd838332ea445c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:47:01 +0200 Subject: [PATCH 006/159] removed devDependency --- pnpm-lock.yaml | 3 --- 1 file changed, 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69c7448c8d..126944925e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -671,9 +671,6 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 - version: link:../icons '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 From 479542238fc5d6dcd8a44c382c2a58f075759edb Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:49:44 +0200 Subject: [PATCH 007/159] removed devDependency --- packages/documentation/package.json | 1 - packages/internet-header/package.json | 1 + pnpm-lock.yaml | 23 +++++++++++++---------- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 2cbc12c6d5..fecc6de0e6 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -47,7 +47,6 @@ "@storybook/addon-links": "9.0.18", "@storybook/web-components-vite": "9.0.18", "@swisspost/design-system-components-angular": "workspace:10.0.0-next.47", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.23", diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index 5a2873286d..e3d660f2d9 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -60,6 +60,7 @@ "@stencil/sass": "3.0.12", "@stencil/store": "2.0.16", "@types/body-scroll-lock": "3.1.2", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/iframe-resizer": "4.0.0", "@types/jest": "29.5.14", "@types/jquery": "3.5.32", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 126944925e..79dbd013dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -221,7 +221,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -537,7 +537,7 @@ importers: version: 6.0.1 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -612,7 +612,7 @@ importers: version: 3.3.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -671,6 +671,9 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) + '@swisspost/design-system-icons': + specifier: workspace:10.0.0-next.47 + version: link:../icons '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 @@ -712,7 +715,7 @@ importers: version: 4.2.0(eslint@9.18.0(jiti@2.4.2)) eslint-plugin-jest: specifier: 28.11.0 - version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) eslint-plugin-react: specifier: 7.37.5 version: 7.37.5(eslint@9.18.0(jiti@2.4.2)) @@ -751,7 +754,7 @@ importers: version: 2.0.13 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -953,7 +956,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -12069,7 +12072,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -12158,7 +12161,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -18409,7 +18412,7 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): + eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.18.0(jiti@2.4.2) @@ -24249,7 +24252,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): + ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 From 951cc740911e61ab2b99c4d11c08342bcc9028d9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Sat, 13 Sep 2025 18:55:27 +0200 Subject: [PATCH 008/159] restored package.json --- packages/documentation/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/documentation/package.json b/packages/documentation/package.json index fecc6de0e6..2cbc12c6d5 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -47,6 +47,7 @@ "@storybook/addon-links": "9.0.18", "@storybook/web-components-vite": "9.0.18", "@swisspost/design-system-components-angular": "workspace:10.0.0-next.47", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.23", From 3119d619e702bee1a9d682e8ff3cc8967581c751 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 08:46:38 +0200 Subject: [PATCH 009/159] removed redundant code --- packages/styles/src/mixins/_icons.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 1722bb4223..5bd5173df7 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -51,12 +51,6 @@ $loaded-icons: () !default; forced-color-adjust: preserve-parent-color; } -@mixin load-icon-css($name, $path: '@swisspost/design-system-icons/dist/custom-properties') { - @at-root { - @include meta.load-css("#{$path}/#{$name}.css"); - } -} - @mixin post-icon( $base: 'https://unpkg.com/@swisspost/design-system-icons@#{icon-version.$post-icon-version}/public/post-icons', From 7e6b400c8c5a6e7c324c5f66aaba21833171453f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 10:48:30 +0200 Subject: [PATCH 010/159] removed redundant code --- .../documentation/.storybook/styles/preview.scss | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 22958ecc14..7d389d0c0d 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -233,10 +233,7 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier &::before { content: ''; margin-right: 0.5rem; - width: 1em; - height: 1em; - display: inline-block; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s ease; @include post.post-icon-load($name: '2052'); } @@ -251,9 +248,6 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier &::before { content: ''; margin-right: 0.5rem; - width: 1em; - height: 1em; - display: inline-block; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'resizeexpand'); } @@ -261,9 +255,6 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier + button::before { content: ''; margin-right: 0.5rem; - width: 1em; - height: 1em; - display: inline-block; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'link'); } @@ -271,9 +262,6 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier + button + button::before { content: ''; margin-right: 0.5rem; - width: 1em; - height: 1em; - display: inline-block; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'code'); } From bf3bf551a3d53ac02265f1ddb0ba44d16f4712e4 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 10:50:17 +0200 Subject: [PATCH 011/159] removed redundant code --- packages/documentation/.storybook/styles/preview.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 7d389d0c0d..a381e7e013 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -248,21 +248,18 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier &::before { content: ''; margin-right: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'resizeexpand'); } + button::before { content: ''; margin-right: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'link'); } + button + button::before { content: ''; margin-right: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @include post.post-icon-load($name: 'code'); } } From 06f8b9a5aa5ee7a86f4fd728504c7f328746f7ed Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 10:51:48 +0200 Subject: [PATCH 012/159] added missing code --- packages/styles/src/components/chip.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 2b7fb7b1b3..27783d172f 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -109,7 +109,9 @@ button.chip-dismissible { background-color: Highlight; } @include icons-mx.post-icon-load( - $name: 'checkmark' + $name: 'checkmark', + $width: tokens.get('chip-selectable-icon'), + $height: tokens.get('chip-selectable-icon') ); } From 17261688a6f10b7dc0315545630917c6e56042ac Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 10:57:52 +0200 Subject: [PATCH 013/159] fixed linting --- packages/styles/src/components/chip.scss | 2 +- packages/styles/src/mixins/_icons.scss | 21 ++++++++++----------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 27783d172f..ec4c5ff39e 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -104,7 +104,7 @@ button.chip-dismissible { content: ''; position: absolute; left: tokens.get('chip-selectable-padding-inline'); - + @include utilities.high-contrast-mode() { background-color: Highlight; } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 5bd5173df7..c52e7bbd6f 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -15,29 +15,28 @@ $loaded-icons: () !default; @if list.index($loaded-icons, $name) == null { $loaded-icons: list.append($loaded-icons, $name) !global; @at-root { - @include meta.load-css("#{$path}/#{$name}"); + @include meta.load-css('#{$path}/#{$name}'); } } } -@mixin post-icon-load( - $name, - $color: inherit, - $width: 1em, - $height: 1em, -) { +@mixin post-icon-load($name, $color: inherit, $width: 1em, $height: 1em) { display: inline-block; vertical-align: -0.15em; background-color: currentColor; color: $color; mask-image: var(--post-icon-#{$name}); - -webkit-mask-image: var(--post-icon-#{$name}); - -webkit-mask-position: center center; + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkit-mask-image: var(--post-icon-#{$name}); mask-position: center center; - -webkit-mask-repeat: no-repeat; + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkit-mask-position: center center; mask-repeat: no-repeat; - -webkit-mask-size: 100%; + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkit-mask-repeat: no-repeat; mask-size: 100%; + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkit-mask-size: 100%; width: $width; height: $height; @include load-icon-css($name); From 01beedf40bbcf8609ba32df5f66cc055056b3cf6 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 10:59:49 +0200 Subject: [PATCH 014/159] fixed linting --- packages/styles/src/mixins/_icons.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index c52e7bbd6f..51616d8c2c 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -27,16 +27,16 @@ $loaded-icons: () !default; color: $color; mask-image: var(--post-icon-#{$name}); /* stylelint-disable-next-line property-no-vendor-prefix */ - webkit-mask-image: var(--post-icon-#{$name}); + -webkit-mask-image: var(--post-icon-#{$name}); mask-position: center center; /* stylelint-disable-next-line property-no-vendor-prefix */ - webkit-mask-position: center center; + -webkit-mask-position: center center; mask-repeat: no-repeat; /* stylelint-disable-next-line property-no-vendor-prefix */ - webkit-mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; mask-size: 100%; /* stylelint-disable-next-line property-no-vendor-prefix */ - webkit-mask-size: 100%; + -webkit-mask-size: 100%; width: $width; height: $height; @include load-icon-css($name); From 7dc733ddf289b3f9ead94b8ea174925dca2c6e92 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 13:32:36 +0200 Subject: [PATCH 015/159] chore(components, styles): replace `post-icons` with `ui-icons` in styles and components packages --- .../post-accordion-item/post-accordion-item.tsx | 2 +- .../src/components/post-back-to-top/post-back-to-top.tsx | 2 +- .../post-breadcrumb-item/post-breadcrumb-item.tsx | 2 +- .../src/components/post-breadcrumbs/post-breadcrumbs.tsx | 2 +- .../post-mainnavigation/post-mainnavigation.scss | 8 +++++--- .../components/src/components/post-rating/post-rating.tsx | 4 ++-- packages/styles/src/components/card.scss | 5 +---- packages/styles/src/components/list-check.scss | 8 +++++--- packages/styles/src/placeholders/_close.scss | 7 ++----- packages/styles/tests/core.test.scss | 4 ++-- packages/styles/tests/functions/icons.test.scss | 2 +- packages/styles/tests/index_core.test.scss | 2 +- 12 files changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx index 49448c7c20..07f59e000e 100644 --- a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx +++ b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx @@ -96,7 +96,7 @@ export class PostAccordionItem { - + diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx index 3dbb2c3930..ad96ba9a43 100644 --- a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx +++ b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx @@ -118,7 +118,7 @@ export class PostBackToTop { tabindex={this.belowFold ? '0' : '-1'} onClick={this.scrollToTop} > - + diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx index 1d0bb51c57..e77ebc11de 100644 --- a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx +++ b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx @@ -64,7 +64,7 @@ export class PostBreadcrumbItem { return ( - + - +
))} diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index da79e1066f..6b9bf14855 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -108,11 +108,8 @@ post-linkarea:has(> .card) { -ms-flex-align: center; &::before { - @include icons-mx.icon(3020); content: ''; - display: inline-block; - width: icons.$icon-size-default; - height: icons.$icon-size-default; + @include icons-mx.post-icon-load('arrowright', $width: icons.$icon-size-default, $height: icons.$icon-size-default); } } } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index cc0c6efd9a..2e9e967597 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -65,15 +65,17 @@ ul.list-check { margin-block: calc(-1 * tokens.get('list-check-text-padding')); top: tokens.get('list-check-padding-icon'); left: tokens.get('list-check-padding-icon'); - width: tokens.get('list-check-sizing-icon'); - height: tokens.get('list-check-sizing-icon'); content: ''; - @include icon-mixin.icon('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } + @include icon-mixin.post-icon-load( + 'checkmark', + $width: tokens.get('list-check-sizing-icon'), + $height: tokens.get('list-check-sizing-icon'), + ); } } } diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 2e11fdd0e5..010cb48725 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -16,12 +16,9 @@ border-radius: commons.$border-radius; } - &::before { - @include icons.icon(2043); + &::before { content: ''; - display: block; - height: close.$close-size; - width: close.$close-size; + @include icons.post-icon-load('closex', $width: close.$close-size, $height: close.$close-size); } @include utilities.not-disabled-focus-hover() { diff --git a/packages/styles/tests/core.test.scss b/packages/styles/tests/core.test.scss index ce7ec0bf4f..13da7b91c9 100644 --- a/packages/styles/tests/core.test.scss +++ b/packages/styles/tests/core.test.scss @@ -7,8 +7,8 @@ * packages. Extend these tests at your convenience. */ .test { - background-image: url(post.get-colored-svg-url('2063', #ff0080)); - background-image: url(post.get-colored-svg-url('2063', post.$white)); + background-image: url(post.get-colored-svg-url('heart', #ff0080)); + background-image: url(post.get-colored-svg-url('heart', post.$white)); @include jest.equal(post.strip-unit(12px), 12); } diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index f0c1f03dfa..ef6db01423 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -17,7 +17,7 @@ $expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32 // add-stroke-color @include jest.equal( - icons.add-stroke-color(icons.get-colored-svg-url('1000', #000), #fff, 2px), + icons.add-stroke-color(icons.get-colored-svg-url('letter', #000), #fff, 2px), $expected-add-stroke-color-output ); diff --git a/packages/styles/tests/index_core.test.scss b/packages/styles/tests/index_core.test.scss index 62566ef5e1..d23d94c64a 100644 --- a/packages/styles/tests/index_core.test.scss +++ b/packages/styles/tests/index_core.test.scss @@ -2,5 +2,5 @@ @use 'src/core' as post; .test { - background-image: url(post.get-colored-svg-url('2063', #ff0080)); + background-image: url(post.get-colored-svg-url('heart', #ff0080)); } From 4a0a9578236278ba905c15ec8cebd64b23760a96 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 13:42:04 +0200 Subject: [PATCH 016/159] added missing code --- packages/styles/src/components/chip.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index ec4c5ff39e..86ce46ea58 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -46,7 +46,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.post-icon-load($name: 'closex'); + @include icons-mx.post-icon-load($name: 'closex', $height: $icon-size, $width: $icon-size); } &:hover::after { From 0afcce047264e8674b1a1d998fa17c9f8a838e7d Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 14:02:14 +0200 Subject: [PATCH 017/159] simplified code --- .../.storybook/styles/preview.scss | 48 +++++++++---------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index a381e7e013..825532e9c5 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -13,6 +13,15 @@ tokens.$default-map: utilities.$post-color; $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + +// Toolbar icons map for eliminating repetition +$toolbar-icons: ( + '.docblock-code-toggle': '2052', + '.docblock-code-toggle + button': 'resizeexpand', + '.docblock-code-toggle + button + button': 'link', + '.docblock-code-toggle + button + button + button': 'code' +); + #storybook-root, #storybook-docs { .sbdocs-content *:not(.section) > .container >, @@ -225,16 +234,25 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier } } + @each $selector, $icon-name in $toolbar-icons { + #{$selector} { + @include media.min(md) { + &::before { + content: ''; + margin-right: 0.5rem; + @include post.post-icon-load($name: $icon-name); + } + } + } + } + .docblock-code-toggle { margin-right: auto; border-radius: 0 4px 0 0; @include media.min(md) { &::before { - content: ''; - margin-right: 0.5rem; - transition: all 0.3s ease; - @include post.post-icon-load($name: '2052'); + transition: all 0.3s ease; } &--expanded::before { @@ -243,28 +261,6 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier } } - .docblock-code-toggle + button { - @include media.min(md) { - &::before { - content: ''; - margin-right: 0.5rem; - @include post.post-icon-load($name: 'resizeexpand'); - } - - + button::before { - content: ''; - margin-right: 0.5rem; - @include post.post-icon-load($name: 'link'); - } - - + button + button::before { - content: ''; - margin-right: 0.5rem; - @include post.post-icon-load($name: 'code'); - } - } - } - .docblock-source { margin: 0 0 1rem; } From 8129fa217f26925bdfe743b52a711a48204eee5e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 15 Sep 2025 14:53:48 +0200 Subject: [PATCH 018/159] updated footer --- .../components/button/button.stories.ts | 28 +++++++++---------- .../components/footer/footer.stories.ts | 16 +++++------ 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts index 28386b8fe8..fa36c4ccca 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/button/button.stories.ts @@ -22,8 +22,8 @@ const meta: MetaComponent = { variant: 'btn-primary', size: 'null', iconPosition: 'iconBeforeText', - icon: '2069', - secondIcon: '2069', + icon: 'search', + secondIcon: 'search', disabled: false, }, argTypes: { @@ -145,14 +145,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - '2069': 'Search (2069)', - '3193': 'Edit (3193)', - '2059': 'Save (2059)', - '2015': 'Remove (2015)', - '2286': 'Like (2286)', + 'search': 'Search', + 'edit': 'Edit', + 'save': 'Save', + 'trash': 'Remove', + 'like': 'Like', }, }, - options: ['null', '2069', '3193', '2059', '2015', '2286'], + options: ['null', 'search', 'edit', 'save', 'trash', 'like'], table: { category: 'Icon', }, @@ -168,14 +168,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - '2069': 'Search (2069)', - '3193': 'Edit (3193)', - '2059': 'Save (2059)', - '2015': 'Remove (2015)', - '2286': 'Like (2286)', + 'search': 'Search', + 'edit': 'Edit', + 'save': 'Save', + 'trash': 'Remove', + 'like': 'Like', }, }, - options: ['null', '2069', '3193', '2059', '2015', '2286'], + options: ['null', 'search', 'edit', 'save', 'trash', 'like'], table: { category: 'Icon', }, diff --git a/packages/documentation/src/stories/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/footer/footer.stories.ts index b412f8a3ea..fa9e717886 100644 --- a/packages/documentation/src/stories/components/footer/footer.stories.ts +++ b/packages/documentation/src/stories/components/footer/footer.stories.ts @@ -52,37 +52,37 @@ function render(args: Args) {

Follow us

- + - + - + - + - - + + - + @@ -91,7 +91,7 @@ function render(args: Args) { href="https://www.xing.com/companies/dieschweizerischepost" class="btn btn-primary btn-icon" > - + From 3ddd10fd21f7dd0ac4016fa06cf5f2d250b3ccb6 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 10:12:51 +0200 Subject: [PATCH 019/159] fixed formatting --- .../components/src/components/post-footer/post-footer.scss | 6 ++++++ packages/styles/src/placeholders/_close.scss | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/post-footer/post-footer.scss b/packages/components/src/components/post-footer/post-footer.scss index a1a1137528..8e236ddc30 100644 --- a/packages/components/src/components/post-footer/post-footer.scss +++ b/packages/components/src/components/post-footer/post-footer.scss @@ -81,6 +81,12 @@ footer { } } +&[name="facebook"], + &[name="youtube"] { + width: tokens.get('icon-button-#{$actual-size}-icon-socialmedia'); + height: tokens.get('icon-button-#{$actual-size}-icon-socialmedia'); + } + .visually-hidden { @include utilities.visuallyhidden(); } diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 010cb48725..27eafd5d8f 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -16,7 +16,7 @@ border-radius: commons.$border-radius; } - &::before { + &::before { content: ''; @include icons.post-icon-load('closex', $width: close.$close-size, $height: close.$close-size); } From a0df6d7b5a0a2f68327e2e9c8aecc12d35cbfcde Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 10:43:14 +0200 Subject: [PATCH 020/159] added width of `post-footer` --- .../components/post-footer/post-footer.scss | 11 +++++----- pnpm-lock.yaml | 20 +++++++++---------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/post-footer/post-footer.scss b/packages/components/src/components/post-footer/post-footer.scss index 8e236ddc30..b8a9ab9044 100644 --- a/packages/components/src/components/post-footer/post-footer.scss +++ b/packages/components/src/components/post-footer/post-footer.scss @@ -81,12 +81,6 @@ footer { } } -&[name="facebook"], - &[name="youtube"] { - width: tokens.get('icon-button-#{$actual-size}-icon-socialmedia'); - height: tokens.get('icon-button-#{$actual-size}-icon-socialmedia'); - } - .visually-hidden { @include utilities.visuallyhidden(); } @@ -136,6 +130,11 @@ footer { .footer-socialmedia { margin-block-end: var(--post-footer-socialmedia-margin-block-end); + + ::slotted(post-list post-list-item a post-icon:not([name="letter"])) { + width: 20px; + height: 20px; + } } .footer-app { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79dbd013dc..69c7448c8d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -221,7 +221,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -537,7 +537,7 @@ importers: version: 6.0.1 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -612,7 +612,7 @@ importers: version: 3.3.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -715,7 +715,7 @@ importers: version: 4.2.0(eslint@9.18.0(jiti@2.4.2)) eslint-plugin-jest: specifier: 28.11.0 - version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) eslint-plugin-react: specifier: 7.37.5 version: 7.37.5(eslint@9.18.0(jiti@2.4.2)) @@ -754,7 +754,7 @@ importers: version: 2.0.13 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -956,7 +956,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -12072,7 +12072,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -12161,7 +12161,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -18412,7 +18412,7 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): + eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.18.0(jiti@2.4.2) @@ -24252,7 +24252,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): + ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 From c310837208e4b01dcc6c5975a5d6f687b9178444 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 13:02:27 +0200 Subject: [PATCH 021/159] updated icons for badge and banner --- .../src/stories/components/badge/badge.stories.ts | 2 +- .../src/stories/components/banner/banner.stories.ts | 4 ++-- packages/styles/src/components/footer/_post-footer.scss | 5 +++++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts index 555e226444..954beeadd9 100644 --- a/packages/documentation/src/stories/components/badge/badge.stories.ts +++ b/packages/documentation/src/stories/components/badge/badge.stories.ts @@ -116,7 +116,7 @@ export const Position: Story = { ${chipMeta.render?.({ ...chipMeta.args, badge: true }, context)}
- +
3
`, diff --git a/packages/documentation/src/stories/components/banner/banner.stories.ts b/packages/documentation/src/stories/components/banner/banner.stories.ts index 4e56557200..770f785d2b 100644 --- a/packages/documentation/src/stories/components/banner/banner.stories.ts +++ b/packages/documentation/src/stories/components/banner/banner.stories.ts @@ -109,8 +109,8 @@ export const Contents: Story = { innerHTML: '

Heading Title

' + '
    ' + - '
  • An example list item
    • ' + - '
  • Another example list item
    • ' + + '
  • An example list item
    • ' + + '
  • Another example list item
    • ' + '
' + '
' + '

This is the banner content that provides important information to the user.

' + diff --git a/packages/styles/src/components/footer/_post-footer.scss b/packages/styles/src/components/footer/_post-footer.scss index 990065c020..e9fde515c5 100644 --- a/packages/styles/src/components/footer/_post-footer.scss +++ b/packages/styles/src/components/footer/_post-footer.scss @@ -83,6 +83,11 @@ post-footer { &[slot='socialmedia'] > [role='list'] { gap: var(--post-footer-socialmedia-list-item-gap); + + post-list-item a post-icon:not([name="letter"]) { + width: 32px; + height: 32px; + } } &[slot='app'] > [role='list'] { From d67779cbae53ef6e9d79e6a7f57dfb00a649ba24 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 13:42:19 +0200 Subject: [PATCH 022/159] substitited icons --- .../card-control/standard-html/card-control.stories.ts | 2 +- packages/styles/src/functions/_forms.scss | 2 +- packages/styles/src/variables/components/_stepper.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts index 3a3392b237..50d2f3c9b1 100644 --- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts +++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts @@ -65,7 +65,7 @@ const meta: MetaComponent = { control: { type: 'select', }, - options: ['none', '1000', '1001', '2000'], + options: ['none', 'mailboxprivate', 'letter', 'onlineservice'], table: { category: 'General', }, diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss index ca8fa92123..40006dab09 100644 --- a/packages/styles/src/functions/_forms.scss +++ b/packages/styles/src/functions/_forms.scss @@ -50,7 +50,7 @@ ); @if ($state) { - $icon: icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}')); + $icon: icons.get-colored-svg-url('chevrondown', map.get($arrow-color-map, '#{$state}-#{$mode}')); $state: url('#{$icon}'); } diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 37a58a4ca6..d6d369cd84 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -29,7 +29,7 @@ $stepper-indicator-hover-bg: color.$black; $stepper-indicator-future-bg: color.$gray-60; $stepper-indicator-future-color: color.$white; -$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color); +$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('checkmark', $stepper-indicator-color); $stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}'); $stepper-indicator-check-icon-size: $stepper-indicator-check-size; From b75b18be2defec865d72593432482d3ace0a25d3 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 14:16:55 +0200 Subject: [PATCH 023/159] chenged the docs --- .../addons/version-switcher/VersionSwitcher.tsx | 4 ++-- .../src/stories/components/card/card.stories.ts | 8 ++++---- .../foundations/icons/search/search-icons.blocks.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx index 779752faf7..52e5b5dfa1 100644 --- a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx +++ b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx @@ -96,14 +96,14 @@ function VersionSwitcher() { aria-hidden="true" > v{CURRENT_MINOR_VERSION} - + )} > v{CURRENT_MINOR_VERSION} - + ); diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts index bd19368566..ea78497d9b 100644 --- a/packages/documentation/src/stories/components/card/card.stories.ts +++ b/packages/documentation/src/stories/components/card/card.stories.ts @@ -224,10 +224,10 @@ export const CustomContent: Story = { return html`
- +

User Details

- +
@@ -237,14 +237,14 @@ export const CustomContent: Story = { Mr
First Name Last Name
Street 1
1234 City - +

  • Language: English

    - +
    • diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx index c7e7e4dbf3..0626a55a6e 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx +++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx @@ -321,7 +321,7 @@ export class Search extends React.Component { if (this.results.paging.totalPages <= 0) return (
    - +

    No results found with your current query

    ); From f54ec08bd88de12a710a4cf0d80f033461496f4b Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 16 Sep 2025 15:11:54 +0200 Subject: [PATCH 024/159] reverted redundant files --- .../version-switcher/VersionSwitcher.tsx | 4 +-- .../stories/components/badge/badge.stories.ts | 2 +- .../components/banner/banner.stories.ts | 4 +-- .../components/button/button.stories.ts | 28 +++++++++---------- .../standard-html/card-control.stories.ts | 2 +- .../stories/components/card/card.stories.ts | 8 +++--- .../components/footer/footer.stories.ts | 16 +++++------ .../icons/search/search-icons.blocks.tsx | 2 +- 8 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx index 52e5b5dfa1..779752faf7 100644 --- a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx +++ b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx @@ -96,14 +96,14 @@ function VersionSwitcher() { aria-hidden="true" > v{CURRENT_MINOR_VERSION} - + )} > v{CURRENT_MINOR_VERSION} - + ); diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts index 954beeadd9..555e226444 100644 --- a/packages/documentation/src/stories/components/badge/badge.stories.ts +++ b/packages/documentation/src/stories/components/badge/badge.stories.ts @@ -116,7 +116,7 @@ export const Position: Story = { ${chipMeta.render?.({ ...chipMeta.args, badge: true }, context)}
    - +
    3
    `, diff --git a/packages/documentation/src/stories/components/banner/banner.stories.ts b/packages/documentation/src/stories/components/banner/banner.stories.ts index 770f785d2b..4e56557200 100644 --- a/packages/documentation/src/stories/components/banner/banner.stories.ts +++ b/packages/documentation/src/stories/components/banner/banner.stories.ts @@ -109,8 +109,8 @@ export const Contents: Story = { innerHTML: '

    Heading Title

    ' + '
      ' + - '
    • An example list item
      • ' + - '
    • Another example list item
      • ' + + '
    • An example list item
      • ' + + '
    • Another example list item
      • ' + '
    ' + '
    ' + '

    This is the banner content that provides important information to the user.

    ' + diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts index fa36c4ccca..28386b8fe8 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/button/button.stories.ts @@ -22,8 +22,8 @@ const meta: MetaComponent = { variant: 'btn-primary', size: 'null', iconPosition: 'iconBeforeText', - icon: 'search', - secondIcon: 'search', + icon: '2069', + secondIcon: '2069', disabled: false, }, argTypes: { @@ -145,14 +145,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - 'search': 'Search', - 'edit': 'Edit', - 'save': 'Save', - 'trash': 'Remove', - 'like': 'Like', + '2069': 'Search (2069)', + '3193': 'Edit (3193)', + '2059': 'Save (2059)', + '2015': 'Remove (2015)', + '2286': 'Like (2286)', }, }, - options: ['null', 'search', 'edit', 'save', 'trash', 'like'], + options: ['null', '2069', '3193', '2059', '2015', '2286'], table: { category: 'Icon', }, @@ -168,14 +168,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - 'search': 'Search', - 'edit': 'Edit', - 'save': 'Save', - 'trash': 'Remove', - 'like': 'Like', + '2069': 'Search (2069)', + '3193': 'Edit (3193)', + '2059': 'Save (2059)', + '2015': 'Remove (2015)', + '2286': 'Like (2286)', }, }, - options: ['null', 'search', 'edit', 'save', 'trash', 'like'], + options: ['null', '2069', '3193', '2059', '2015', '2286'], table: { category: 'Icon', }, diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts index 50d2f3c9b1..3a3392b237 100644 --- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts +++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts @@ -65,7 +65,7 @@ const meta: MetaComponent = { control: { type: 'select', }, - options: ['none', 'mailboxprivate', 'letter', 'onlineservice'], + options: ['none', '1000', '1001', '2000'], table: { category: 'General', }, diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts index ea78497d9b..bd19368566 100644 --- a/packages/documentation/src/stories/components/card/card.stories.ts +++ b/packages/documentation/src/stories/components/card/card.stories.ts @@ -224,10 +224,10 @@ export const CustomContent: Story = { return html`
    - +

    User Details

    - +
    @@ -237,14 +237,14 @@ export const CustomContent: Story = { Mr
    First Name Last Name
    Street 1
    1234 City - +

  • Language: English

    - +
    • diff --git a/packages/documentation/src/stories/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/footer/footer.stories.ts index fa9e717886..b412f8a3ea 100644 --- a/packages/documentation/src/stories/components/footer/footer.stories.ts +++ b/packages/documentation/src/stories/components/footer/footer.stories.ts @@ -52,37 +52,37 @@ function render(args: Args) {

    Follow us

    - + - + - + - + - - + + - + @@ -91,7 +91,7 @@ function render(args: Args) { href="https://www.xing.com/companies/dieschweizerischepost" class="btn btn-primary btn-icon" > - + diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx index 0626a55a6e..c7e7e4dbf3 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx +++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx @@ -321,7 +321,7 @@ export class Search extends React.Component { if (this.results.paging.totalPages <= 0) return (
    - +

    No results found with your current query

    ); From b6e8ef099403b2d954dbb68e35244db3fd329bd1 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 10:23:31 +0200 Subject: [PATCH 025/159] added temp files --- packages/styles/.gitignore | 1 + packages/styles/gulpfile.js | 14 +++++++++++--- packages/styles/package.json | 2 +- packages/styles/src/mixins/_icons.scss | 2 +- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore index a2a3d99d2d..5b0113ba18 100644 --- a/packages/styles/.gitignore +++ b/packages/styles/.gitignore @@ -17,3 +17,4 @@ src/utilities/_env-variables.scss # Temporary files src/tokens/temp/ +src/icons/temp/ diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 01906e15f1..8e5cd6e328 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -30,6 +30,14 @@ gulp.task('temporarily-copy-token-files', () => { return gulp.src(['../tokens/dist/**/*.scss']).pipe(gulp.dest('./src/tokens/temp')); }); +/** + * Temporary task to copy icon CSS files from icons package to the styles package since + * pnpm does not correctly install dependencies of dependencies for workspace packages. + */ +gulp.task('temporarily-copy-icon-files', () => { + return gulp.src(['../icons/dist/custom-properties/**/*.css']).pipe(gulp.dest('./src/icons/temp')); +}); + /** * Autoprefix SCSS files */ @@ -165,7 +173,7 @@ gulp.task('sass:dev', () => { */ gulp.task( 'sass:tests', - gulp.series('temporarily-copy-token-files', () => { + gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', () => { return gulp.src('./tests/**/*.scss').pipe( gulpSass.sync({ loadPaths: [...options.loadPaths, './'], @@ -180,7 +188,7 @@ gulp.task( */ gulp.task( 'watch', - gulp.series('temporarily-copy-token-files', () => { + gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', () => { return gulp.watch('./src/**/*.scss', gulp.series('copy', 'sass:dev')); }), ); @@ -194,7 +202,7 @@ exports.default = gulp.task( 'prebuild-env-vars', gulp.parallel( gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'), - gulp.series('temporarily-copy-token-files', 'sass'), + gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', 'sass'), ), ), ); diff --git a/packages/styles/package.json b/packages/styles/package.json index 6bd5de8339..4834b40070 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -23,7 +23,7 @@ "start": "gulp watch", "build": "pnpm turbo run build:force", "build:force": "pnpm clean && gulp build", - "clean": "rimraf dist src/tokens/temp", + "clean": "rimraf dist src/tokens/temp src/icons/temp", "unit": "gulp sass:tests", "lint": "stylelint src/**/*.scss !src/tokens/temp/**", "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix", diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 51616d8c2c..85e52bfe3d 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -11,7 +11,7 @@ $loaded-icons: () !default; -@mixin load-icon-css($name, $path: '@swisspost/design-system-icons/dist/custom-properties') { +@mixin load-icon-css($name, $path: './icons/temp') { @if list.index($loaded-icons, $name) == null { $loaded-icons: list.append($loaded-icons, $name) !global; @at-root { From 62a7b79ba3bf2fddc36e201cc1b96e01d8443bd0 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 10:30:17 +0200 Subject: [PATCH 026/159] removed redundant dependency --- packages/internet-header/package.json | 1 - packages/styles/src/mixins/_icons.scss | 2 +- pnpm-lock.yaml | 23 ++++++++++------------- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json index e3d660f2d9..5a2873286d 100644 --- a/packages/internet-header/package.json +++ b/packages/internet-header/package.json @@ -60,7 +60,6 @@ "@stencil/sass": "3.0.12", "@stencil/store": "2.0.16", "@types/body-scroll-lock": "3.1.2", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/iframe-resizer": "4.0.0", "@types/jest": "29.5.14", "@types/jquery": "3.5.32", diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 85e52bfe3d..80d3009fea 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -11,7 +11,7 @@ $loaded-icons: () !default; -@mixin load-icon-css($name, $path: './icons/temp') { +@mixin load-icon-css($name, $path: '../icons/temp') { @if list.index($loaded-icons, $name) == null { $loaded-icons: list.append($loaded-icons, $name) !global; @at-root { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79dbd013dc..126944925e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -221,7 +221,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -537,7 +537,7 @@ importers: version: 6.0.1 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -612,7 +612,7 @@ importers: version: 3.3.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -671,9 +671,6 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 - version: link:../icons '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 @@ -715,7 +712,7 @@ importers: version: 4.2.0(eslint@9.18.0(jiti@2.4.2)) eslint-plugin-jest: specifier: 28.11.0 - version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) eslint-plugin-react: specifier: 7.37.5 version: 7.37.5(eslint@9.18.0(jiti@2.4.2)) @@ -754,7 +751,7 @@ importers: version: 2.0.13 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -956,7 +953,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -12072,7 +12069,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -12161,7 +12158,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -18412,7 +18409,7 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): + eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.18.0(jiti@2.4.2) @@ -24252,7 +24249,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): + ts-jest@29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 From eb1db4601bd60a5e71e3908a3a200a1f9b9b6795 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 10:32:19 +0200 Subject: [PATCH 027/159] remove redundant dependencies --- packages/documentation/package.json | 1 - pnpm-lock.yaml | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 2cbc12c6d5..a2cf0545be 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -31,7 +31,6 @@ "dependencies": { "@swisspost/design-system-components": "workspace:10.0.0-next.47", "@swisspost/design-system-components-react": "workspace:10.0.0-next.47", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@swisspost/design-system-styles": "workspace:10.0.0-next.47", "@swisspost/design-system-tokens": "workspace:10.0.0-next.47", "@swisspost/internet-header": "workspace:10.0.0-next.47" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 126944925e..8dc5a5b2df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -359,9 +359,6 @@ importers: '@swisspost/design-system-components-react': specifier: workspace:10.0.0-next.47 version: link:../components-react - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 - version: link:../icons '@swisspost/design-system-styles': specifier: workspace:10.0.0-next.47 version: link:../styles/dist @@ -402,6 +399,9 @@ importers: '@swisspost/design-system-components-angular': specifier: workspace:10.0.0-next.47 version: link:../components-angular/dist/components + '@swisspost/design-system-icons': + specifier: workspace:10.0.0-next.47 + version: link:../icons '@types/css-modules': specifier: 1.0.5 version: 1.0.5 From 82e4072fba21f5c33d49ba02f9674f393f4b7c62 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 10:33:23 +0200 Subject: [PATCH 028/159] remove redundant dependencies --- packages/documentation/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/package.json b/packages/documentation/package.json index a2cf0545be..fecc6de0e6 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -31,6 +31,7 @@ "dependencies": { "@swisspost/design-system-components": "workspace:10.0.0-next.47", "@swisspost/design-system-components-react": "workspace:10.0.0-next.47", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@swisspost/design-system-styles": "workspace:10.0.0-next.47", "@swisspost/design-system-tokens": "workspace:10.0.0-next.47", "@swisspost/internet-header": "workspace:10.0.0-next.47" @@ -46,7 +47,6 @@ "@storybook/addon-links": "9.0.18", "@storybook/web-components-vite": "9.0.18", "@swisspost/design-system-components-angular": "workspace:10.0.0-next.47", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@types/css-modules": "1.0.5", "@types/mdx": "2.0.13", "@types/react": "18.3.23", From 36190ac96594e2f8289894040930b9318e7a08d5 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 10:38:04 +0200 Subject: [PATCH 029/159] updated lock file --- pnpm-lock.yaml | 57 ++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8dc5a5b2df..5e58ddef59 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -359,6 +359,9 @@ importers: '@swisspost/design-system-components-react': specifier: workspace:10.0.0-next.47 version: link:../components-react + '@swisspost/design-system-icons': + specifier: workspace:10.0.0-next.47 + version: link:../icons '@swisspost/design-system-styles': specifier: workspace:10.0.0-next.47 version: link:../styles/dist @@ -399,9 +402,6 @@ importers: '@swisspost/design-system-components-angular': specifier: workspace:10.0.0-next.47 version: link:../components-angular/dist/components - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 - version: link:../icons '@types/css-modules': specifier: 1.0.5 version: 1.0.5 @@ -625,9 +625,6 @@ importers: packages/internet-header: dependencies: - '@swisspost/design-system-styles': - specifier: workspace:10.0.0-next.47 - version: link:../styles/dist body-scroll-lock: specifier: 4.0.0-beta.0 version: 4.0.0-beta.0 @@ -671,6 +668,9 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) + '@swisspost/design-system-styles': + specifier: workspace:10.0.0-next.47 + version: link:../styles/dist '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 @@ -15614,7 +15614,7 @@ snapshots: next: 15.3.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.2) recast: 0.23.9 vite: 6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0) - webpack: 5.98.0(esbuild@0.25.4) + webpack: 5.98.0 '@stencil/store@2.0.16(@stencil/core@4.19.2)': dependencies: @@ -16885,7 +16885,7 @@ snapshots: dependencies: '@babel/core': 7.26.0 find-up: 5.0.0 - webpack: 5.98.0(esbuild@0.25.4) + webpack: 5.98.0 babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0(esbuild@0.25.4)): dependencies: @@ -19614,7 +19614,7 @@ snapshots: dependencies: source-map-js: 1.2.1 strip-comments: 2.0.1 - webpack: 5.98.0(esbuild@0.25.4) + webpack: 5.98.0 imurmurhash@0.1.4: {} @@ -24103,6 +24103,15 @@ snapshots: optionalDependencies: esbuild: 0.25.4 + terser-webpack-plugin@5.3.14(webpack@5.98.0): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 4.3.0 + serialize-javascript: 6.0.2 + terser: 5.39.0 + webpack: 5.98.0 + terser@5.39.0: dependencies: '@jridgewell/source-map': 0.3.3 @@ -24902,6 +24911,36 @@ snapshots: webpack-virtual-modules@0.6.2: {} + webpack@5.98.0: + dependencies: + '@types/eslint-scope': 3.7.7 + '@types/estree': 1.0.7 + '@webassemblyjs/ast': 1.14.1 + '@webassemblyjs/wasm-edit': 1.14.1 + '@webassemblyjs/wasm-parser': 1.14.1 + acorn: 8.14.1 + browserslist: 4.25.0 + chrome-trace-event: 1.0.3 + enhanced-resolve: 5.18.2 + es-module-lexer: 1.5.3 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 4.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.14(webpack@5.98.0) + watchpack: 2.4.2 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + webpack@5.98.0(esbuild@0.25.4): dependencies: '@types/eslint-scope': 3.7.7 From 4e1e032c71eaa95bb253343450ae8a41e7863915 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 11:35:33 +0200 Subject: [PATCH 030/159] fixed the gulp task --- packages/styles/gulpfile.js | 8 ++++ packages/styles/package.json | 2 +- pnpm-lock.yaml | 77 +++++++++--------------------------- 3 files changed, 28 insertions(+), 59 deletions(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 8e5cd6e328..a0b9bdb1f5 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -38,6 +38,13 @@ gulp.task('temporarily-copy-icon-files', () => { return gulp.src(['../icons/dist/custom-properties/**/*.css']).pipe(gulp.dest('./src/icons/temp')); }); +/** + * Copy icon CSS files to dist folder + */ +gulp.task('copy-icon-files-to-dist', () => { + return gulp.src(['./src/icons/temp/**/*.css']).pipe(gulp.dest(`${options.outputDir}/icons`)); +}); + /** * Autoprefix SCSS files */ @@ -204,5 +211,6 @@ exports.default = gulp.task( gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'), gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', 'sass'), ), + 'copy-icon-files-to-dist', ), ); diff --git a/packages/styles/package.json b/packages/styles/package.json index 4834b40070..7d59281c33 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -31,10 +31,10 @@ }, "dependencies": { "@popperjs/core": "2.11.8", + "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "gulp-sourcemaps": "3.0.0" }, "devDependencies": { - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", "@swisspost/design-system-tokens": "workspace:10.0.0-next.47", "@types/node": "22.10.5", "autoprefixer": "10.4.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5e58ddef59..d0c98efdd4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -166,7 +166,7 @@ importers: version: 5.0.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -221,7 +221,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -537,7 +537,7 @@ importers: version: 6.0.1 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -612,7 +612,7 @@ importers: version: 3.3.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -625,6 +625,9 @@ importers: packages/internet-header: dependencies: + '@swisspost/design-system-styles': + specifier: workspace:10.0.0-next.47 + version: link:../styles/dist body-scroll-lock: specifier: 4.0.0-beta.0 version: 4.0.0-beta.0 @@ -668,9 +671,6 @@ importers: '@stencil/store': specifier: 2.0.16 version: 2.0.16(@stencil/core@4.19.2) - '@swisspost/design-system-styles': - specifier: workspace:10.0.0-next.47 - version: link:../styles/dist '@types/body-scroll-lock': specifier: 3.1.2 version: 3.1.2 @@ -712,7 +712,7 @@ importers: version: 4.2.0(eslint@9.18.0(jiti@2.4.2)) eslint-plugin-jest: specifier: 28.11.0 - version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) eslint-plugin-react: specifier: 7.37.5 version: 7.37.5(eslint@9.18.0(jiti@2.4.2)) @@ -834,13 +834,13 @@ importers: '@popperjs/core': specifier: 2.11.8 version: 2.11.8 + '@swisspost/design-system-icons': + specifier: workspace:10.0.0-next.47 + version: link:../icons gulp-sourcemaps: specifier: 3.0.0 version: 3.0.0 devDependencies: - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 - version: link:../icons '@swisspost/design-system-tokens': specifier: workspace:10.0.0-next.47 version: link:../tokens/dist @@ -953,7 +953,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -12069,7 +12069,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -12158,7 +12158,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -15614,7 +15614,7 @@ snapshots: next: 15.3.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.2) recast: 0.23.9 vite: 6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0) - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) '@stencil/store@2.0.16(@stencil/core@4.19.2)': dependencies: @@ -16885,7 +16885,7 @@ snapshots: dependencies: '@babel/core': 7.26.0 find-up: 5.0.0 - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0(esbuild@0.25.4)): dependencies: @@ -18409,7 +18409,7 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): + eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.18.0(jiti@2.4.2) @@ -19614,7 +19614,7 @@ snapshots: dependencies: source-map-js: 1.2.1 strip-comments: 2.0.1 - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) imurmurhash@0.1.4: {} @@ -24103,15 +24103,6 @@ snapshots: optionalDependencies: esbuild: 0.25.4 - terser-webpack-plugin@5.3.14(webpack@5.98.0): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 4.3.0 - serialize-javascript: 6.0.2 - terser: 5.39.0 - webpack: 5.98.0 - terser@5.39.0: dependencies: '@jridgewell/source-map': 0.3.3 @@ -24277,7 +24268,7 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.26.0) - ts-jest@29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): + ts-jest@29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 @@ -24911,36 +24902,6 @@ snapshots: webpack-virtual-modules@0.6.2: {} - webpack@5.98.0: - dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.7 - '@webassemblyjs/ast': 1.14.1 - '@webassemblyjs/wasm-edit': 1.14.1 - '@webassemblyjs/wasm-parser': 1.14.1 - acorn: 8.14.1 - browserslist: 4.25.0 - chrome-trace-event: 1.0.3 - enhanced-resolve: 5.18.2 - es-module-lexer: 1.5.3 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - json-parse-even-better-errors: 2.3.1 - loader-runner: 4.3.0 - mime-types: 2.1.35 - neo-async: 2.6.2 - schema-utils: 4.3.0 - tapable: 2.2.1 - terser-webpack-plugin: 5.3.14(webpack@5.98.0) - watchpack: 2.4.2 - webpack-sources: 3.2.3 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - webpack@5.98.0(esbuild@0.25.4): dependencies: '@types/eslint-scope': 3.7.7 From 8188364b0c18b6fee5079cd1a140bc1fe8766053 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 11:48:46 +0200 Subject: [PATCH 031/159] small changes --- packages/styles/gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index a0b9bdb1f5..243f039ca3 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -42,7 +42,7 @@ gulp.task('temporarily-copy-icon-files', () => { * Copy icon CSS files to dist folder */ gulp.task('copy-icon-files-to-dist', () => { - return gulp.src(['./src/icons/temp/**/*.css']).pipe(gulp.dest(`${options.outputDir}/icons`)); + return gulp.src(['./src/icons/temp/**/*.css']).pipe(gulp.dest(`${options.outputDir}/icons/temp`)); }); /** From bbb8d7311f21715a481b99bb6571e364b53a5cbc Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 12:02:01 +0200 Subject: [PATCH 032/159] reverted changes --- packages/styles/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/package.json b/packages/styles/package.json index c3aa2bb05d..6bbe4015cf 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -31,11 +31,11 @@ }, "dependencies": { "@popperjs/core": "2.11.8", - "@swisspost/design-system-icons": "workspace:10.0.0-next.47", + "@swisspost/design-system-icons": "workspace:10.0.0-next.48", "gulp-sourcemaps": "3.0.0" }, "devDependencies": { - "@swisspost/design-system-tokens": "workspace:10.0.0-next.47", + "@swisspost/design-system-tokens": "workspace:10.0.0-next.48", "@types/node": "22.10.5", "autoprefixer": "10.4.21", "copyfiles": "2.4.1", From e8bd4004847ec9ac095f51b290a983d29459a60e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 12:17:52 +0200 Subject: [PATCH 033/159] changes to pnpm-lock.yaml --- pnpm-lock.yaml | 70 ++++++++++---------------------------------------- 1 file changed, 14 insertions(+), 56 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b6cd2b2ab..6556ada385 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -166,7 +166,7 @@ importers: version: 5.0.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -221,7 +221,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -537,7 +537,7 @@ importers: version: 6.0.1 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) typescript: specifier: 5.8.3 version: 5.8.3 @@ -618,7 +618,7 @@ importers: version: 3.3.2 ts-jest: specifier: 29.2.5 - version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) + version: 29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@22.10.5)(typescript@5.8.3) @@ -718,7 +718,7 @@ importers: version: 4.2.0(eslint@9.18.0(jiti@2.4.2)) eslint-plugin-jest: specifier: 28.11.0 - version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3) + version: 28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3) eslint-plugin-react: specifier: 7.37.5 version: 7.37.5(eslint@9.18.0(jiti@2.4.2)) @@ -841,15 +841,12 @@ importers: specifier: 2.11.8 version: 2.11.8 '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.47 + specifier: workspace:10.0.0-next.48 version: link:../icons gulp-sourcemaps: specifier: 3.0.0 version: 3.0.0 devDependencies: - '@swisspost/design-system-icons': - specifier: workspace:10.0.0-next.48 - version: link:../icons '@swisspost/design-system-tokens': specifier: workspace:10.0.0-next.48 version: link:../tokens/dist @@ -962,7 +959,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: 19.2.15 - version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) + version: 19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0) '@angular/cli': specifier: 19.2.0 version: 19.2.0(@types/node@22.10.5)(chokidar@4.0.1) @@ -12081,7 +12078,7 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.2.7(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.85.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -12170,7 +12167,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': + '@angular-devkit/build-angular@19.2.15(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(@types/node@22.10.5)(chokidar@4.0.1)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(jiti@2.4.2)(karma@6.4.4)(lightningcss@1.30.1)(ng-packagr@19.2.2(@angular/compiler-cli@19.2.0(@angular/compiler@19.2.0(@angular/core@19.2.0(rxjs@7.8.2)(zone.js@0.15.1)))(typescript@5.8.3))(tailwindcss@4.1.11)(tslib@2.8.1)(typescript@5.8.3))(sass-embedded@1.89.2)(tailwindcss@4.1.11)(typescript@5.8.3)(vite@6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)': dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.15(chokidar@4.0.1) @@ -15626,7 +15623,7 @@ snapshots: next: 15.3.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.2) recast: 0.23.9 vite: 6.3.6(@types/node@22.10.5)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.1)(sass-embedded@1.89.2)(sass@1.89.2)(terser@5.39.0)(yaml@2.7.0) - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) '@stencil/store@2.0.16(@stencil/core@4.19.2)': dependencies: @@ -16899,7 +16896,7 @@ snapshots: dependencies: '@babel/core': 7.26.0 find-up: 5.0.0 - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0(esbuild@0.25.4)): dependencies: @@ -18423,7 +18420,7 @@ snapshots: - supports-color - typescript - eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5))(typescript@5.8.3): + eslint-plugin-jest@28.11.0(@typescript-eslint/eslint-plugin@8.22.0(@typescript-eslint/parser@7.18.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.18.0(jiti@2.4.2))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.22.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.18.0(jiti@2.4.2) @@ -19628,7 +19625,7 @@ snapshots: dependencies: source-map-js: 1.2.1 strip-comments: 2.0.1 - webpack: 5.98.0 + webpack: 5.98.0(esbuild@0.25.4) imurmurhash@0.1.4: {} @@ -24117,15 +24114,6 @@ snapshots: optionalDependencies: esbuild: 0.25.4 - terser-webpack-plugin@5.3.14(webpack@5.98.0): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 4.3.0 - serialize-javascript: 6.0.2 - terser: 5.39.0 - webpack: 5.98.0 - terser@5.39.0: dependencies: '@jridgewell/source-map': 0.3.3 @@ -24291,7 +24279,7 @@ snapshots: '@jest/types': 29.6.3 babel-jest: 29.7.0(@babel/core@7.26.0) - ts-jest@29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0)(typescript@5.8.3): + ts-jest@29.2.5(@babel/core@7.26.10)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.10))(jest@29.7.0(@types/node@22.10.5)(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.8.3)))(typescript@5.8.3): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 @@ -24925,36 +24913,6 @@ snapshots: webpack-virtual-modules@0.6.2: {} - webpack@5.98.0: - dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.7 - '@webassemblyjs/ast': 1.14.1 - '@webassemblyjs/wasm-edit': 1.14.1 - '@webassemblyjs/wasm-parser': 1.14.1 - acorn: 8.14.1 - browserslist: 4.25.0 - chrome-trace-event: 1.0.3 - enhanced-resolve: 5.18.2 - es-module-lexer: 1.5.3 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - json-parse-even-better-errors: 2.3.1 - loader-runner: 4.3.0 - mime-types: 2.1.35 - neo-async: 2.6.2 - schema-utils: 4.3.0 - tapable: 2.2.1 - terser-webpack-plugin: 5.3.14(webpack@5.98.0) - watchpack: 2.4.2 - webpack-sources: 3.2.3 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - webpack@5.98.0(esbuild@0.25.4): dependencies: '@types/eslint-scope': 3.7.7 From df89c4043fc9002d2101b87d42784e2ff1c57998 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 12:44:41 +0200 Subject: [PATCH 034/159] changed the name of mixin --- .../.storybook/styles/preview.scss | 2 +- .../foundations/icons/icon.styles.scss | 6 ++-- .../foundations/icons/mixin.sample.scss | 2 +- packages/styles/src/components/chip.scss | 4 +-- .../styles/src/components/form-input.scss | 4 +-- packages/styles/src/mixins/_icons.scss | 30 +------------------ 6 files changed, 10 insertions(+), 38 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 825532e9c5..ca2dffc84b 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -240,7 +240,7 @@ $toolbar-icons: ( &::before { content: ''; margin-right: 0.5rem; - @include post.post-icon-load($name: $icon-name); + @include post.post-icon($name: $icon-name); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 3065972667..4e316a7901 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -28,13 +28,13 @@ $resizer-max-width: 64px; } .my-1022-icon { - @include post.post-icon-load($name: '1022'); + @include post.post-icon($name: '1022'); } .my-accessibility-icon { - @include post.post-icon-load($name: 'accessibility'); + @include post.post-icon($name: 'accessibility'); } .my-handvictory-icon { - @include post.post-icon-load($name: 'handvictory', $color: #666666); + @include post.post-icon($name: 'handvictory', $color: #666666); } diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 1ac8684c48..f8e16f4f79 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - @include post.post-icon-load( + @include post.post-icon( $name: 'accessibility', // optional $color: '#fc0' diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 86ce46ea58..17caa19b81 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -46,7 +46,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.post-icon-load($name: 'closex', $height: $icon-size, $width: $icon-size); + @include icons-mx.post-icon($name: 'closex', $height: $icon-size, $width: $icon-size); } &:hover::after { @@ -108,7 +108,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: Highlight; } - @include icons-mx.post-icon-load( + @include icons-mx.post-icon( $name: 'checkmark', $width: tokens.get('chip-selectable-icon'), $height: tokens.get('chip-selectable-icon') diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index c90c432291..d3b7727a06 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -216,7 +216,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icon-mx.post-icon-load( + @include icon-mx.post-icon( $name: 'success-solid', $color: tokens.get('post-validation-success', components.$post-validation), $width: tokens.get('input-sizing-icon'), @@ -233,7 +233,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icon-mx.post-icon-load( + @include icon-mx.post-icon( $name: 'warning-solid', $color: tokens.get('post-validation-error', components.$post-validation), $width: tokens.get('input-sizing-icon'), diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 80d3009fea..0558c87fe6 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -20,7 +20,7 @@ $loaded-icons: () !default; } } -@mixin post-icon-load($name, $color: inherit, $width: 1em, $height: 1em) { +@mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { display: inline-block; vertical-align: -0.15em; background-color: currentColor; @@ -50,34 +50,6 @@ $loaded-icons: () !default; forced-color-adjust: preserve-parent-color; } -@mixin post-icon( - $base: - 'https://unpkg.com/@swisspost/design-system-icons@#{icon-version.$post-icon-version}/public/post-icons', - $name, - $color: inherit, - $width: 1em, - $height: 1em -) { - display: inline-block; - width: $width; - height: $height; - vertical-align: -0.15em; - background-color: currentColor; - color: $color; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-image: url('#{$base}/#{$name}.svg'); - mask-image: url('#{$base}/#{$name}.svg'); - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-position: center center; - mask-position: center center; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-size: 100%; - mask-size: 100%; -} - @mixin remove-icon() { mask-image: none; } From 8bd4253952e3a01ecd8260e3d4a914177f14a0f9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 12:48:04 +0200 Subject: [PATCH 035/159] small refactor --- .../documentation/.storybook/styles/preview.scss | 2 +- packages/styles/src/mixins/_icons.scss | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index ca2dffc84b..8afb87648f 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -14,7 +14,7 @@ tokens.$default-map: utilities.$post-color; $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; -// Toolbar icons map for eliminating repetition +// Mixin for toolbar button icons $toolbar-icons: ( '.docblock-code-toggle': '2052', '.docblock-code-toggle + button': 'resizeexpand', diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 0558c87fe6..af38c04803 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,6 +9,14 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; +@mixin icon($name) { + $icon: icon-fn.get-svg-url($name); + mask-image: url('#{$icon}'); + background-color: currentColor; + color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color + forced-color-adjust: preserve-parent-color; +} + $loaded-icons: () !default; @mixin load-icon-css($name, $path: '../icons/temp') { @@ -42,14 +50,6 @@ $loaded-icons: () !default; @include load-icon-css($name); } -@mixin icon($name) { - $icon: icon-fn.get-svg-url($name); - mask-image: url('#{$icon}'); - 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 remove-icon() { mask-image: none; } From f70e2d4d9780dc96e61d431f6a38e316b992b170 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 12:57:51 +0200 Subject: [PATCH 036/159] added a changeset --- .changeset/fair-mangos-leave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-mangos-leave.md diff --git a/.changeset/fair-mangos-leave.md b/.changeset/fair-mangos-leave.md new file mode 100644 index 0000000000..d8b8f257f0 --- /dev/null +++ b/.changeset/fair-mangos-leave.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed icon loading by replacing CDN-based icon URLs with `CSS custom properties` and dynamic CSS file loading. Components using the `post-icon mixin` now reliably display icons without external dependencies. From 38e5f0c127d934a1da73a224c6a7360d281eac3f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 13:47:19 +0200 Subject: [PATCH 037/159] small changes --- packages/styles/src/mixins/_icons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index af38c04803..1be4615cb0 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -30,6 +30,8 @@ $loaded-icons: () !default; @mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { display: inline-block; + width: $width; + height: $height; vertical-align: -0.15em; background-color: currentColor; color: $color; @@ -45,8 +47,6 @@ $loaded-icons: () !default; mask-size: 100%; /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; - width: $width; - height: $height; @include load-icon-css($name); } From e10aac410e01722b5618f45c9ba4b407113fa310 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 16:31:24 +0200 Subject: [PATCH 038/159] changed the name of the mixin --- .../post-mainnavigation/post-mainnavigation.scss | 2 +- packages/documentation/.storybook/styles/preview.scss | 8 ++++---- .../src/stories/foundations/icons/icon.styles.scss | 6 +++--- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- packages/styles/src/components/card.scss | 2 +- packages/styles/src/components/chip.scss | 4 ++-- packages/styles/src/components/form-input.scss | 4 ++-- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/mixins/_icons.scss | 2 +- packages/styles/src/placeholders/_close.scss | 2 +- 10 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index 52edcac528..64381abbbf 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -47,7 +47,7 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.post-icon-load( + @include icons.post-icon( $name: 'chevrondown', $width: 24px, $height: 24px diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index a381e7e013..9d27b56d48 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -234,7 +234,7 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier content: ''; margin-right: 0.5rem; transition: all 0.3s ease; - @include post.post-icon-load($name: '2052'); + @include post.post-icon($name: '2052'); } &--expanded::before { @@ -248,19 +248,19 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier &::before { content: ''; margin-right: 0.5rem; - @include post.post-icon-load($name: 'resizeexpand'); + @include post.post-icon($name: 'resizeexpand'); } + button::before { content: ''; margin-right: 0.5rem; - @include post.post-icon-load($name: 'link'); + @include post.post-icon($name: 'link'); } + button + button::before { content: ''; margin-right: 0.5rem; - @include post.post-icon-load($name: 'code'); + @include post.post-icon($name: 'code'); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 3065972667..4e316a7901 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -28,13 +28,13 @@ $resizer-max-width: 64px; } .my-1022-icon { - @include post.post-icon-load($name: '1022'); + @include post.post-icon($name: '1022'); } .my-accessibility-icon { - @include post.post-icon-load($name: 'accessibility'); + @include post.post-icon($name: 'accessibility'); } .my-handvictory-icon { - @include post.post-icon-load($name: 'handvictory', $color: #666666); + @include post.post-icon($name: 'handvictory', $color: #666666); } diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 1ac8684c48..f8e16f4f79 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - @include post.post-icon-load( + @include post.post-icon( $name: 'accessibility', // optional $color: '#fc0' diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 6b9bf14855..c5350890a1 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -109,7 +109,7 @@ post-linkarea:has(> .card) { &::before { content: ''; - @include icons-mx.post-icon-load('arrowright', $width: icons.$icon-size-default, $height: icons.$icon-size-default); + @include icons-mx.post-icon('arrowright', $width: icons.$icon-size-default, $height: icons.$icon-size-default); } } } diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index ec4c5ff39e..33b90dcb0c 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -46,7 +46,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.post-icon-load($name: 'closex'); + @include icons-mx.post-icon($name: 'closex'); } &:hover::after { @@ -108,7 +108,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: Highlight; } - @include icons-mx.post-icon-load( + @include icons-mx.post-icon( $name: 'checkmark', $width: tokens.get('chip-selectable-icon'), $height: tokens.get('chip-selectable-icon') diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index c90c432291..d3b7727a06 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -216,7 +216,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icon-mx.post-icon-load( + @include icon-mx.post-icon( $name: 'success-solid', $color: tokens.get('post-validation-success', components.$post-validation), $width: tokens.get('input-sizing-icon'), @@ -233,7 +233,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icon-mx.post-icon-load( + @include icon-mx.post-icon( $name: 'warning-solid', $color: tokens.get('post-validation-error', components.$post-validation), $width: tokens.get('input-sizing-icon'), diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 2e9e967597..8f97bce5a3 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -71,7 +71,7 @@ ul.list-check { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } - @include icon-mixin.post-icon-load( + @include icon-mixin.post-icon( 'checkmark', $width: tokens.get('list-check-sizing-icon'), $height: tokens.get('list-check-sizing-icon'), diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 51616d8c2c..7bffa3e23c 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -20,7 +20,7 @@ $loaded-icons: () !default; } } -@mixin post-icon-load($name, $color: inherit, $width: 1em, $height: 1em) { +@mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { display: inline-block; vertical-align: -0.15em; background-color: currentColor; diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 27eafd5d8f..1b9dde0988 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -18,7 +18,7 @@ &::before { content: ''; - @include icons.post-icon-load('closex', $width: close.$close-size, $height: close.$close-size); + @include icons.post-icon('closex', $width: close.$close-size, $height: close.$close-size); } @include utilities.not-disabled-focus-hover() { From 7430f8acbd93d1fed37db166b3c3ea9195ccc9f5 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 16:32:29 +0200 Subject: [PATCH 039/159] removed deprecated mixin --- packages/styles/src/mixins/_animation.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/styles/src/mixins/_animation.scss b/packages/styles/src/mixins/_animation.scss index a7ef358aa0..aa66caebfd 100644 --- a/packages/styles/src/mixins/_animation.scss +++ b/packages/styles/src/mixins/_animation.scss @@ -30,22 +30,6 @@ } } -// DEPRECATED -@mixin hover-animation-svg-icon($color, $icon-name, $stroke-width: null) { - &:not(:disabled):not(.disabled) > span { - &::after { - @if ($stroke-width == null) { - $icon: icons.get-colored-svg-url($icon-name, $color); - background-image: url('#{$icon}'); - } @else { - $icon: icons.get-colored-svg-url($icon-name, $color); - $icon: icons.add-stroke-color($icon, $color, $stroke-width); - background-image: url('#{$icon}'); - } - } - } -} - @mixin pop-in-animation($duration) { animation: popIn $duration ease-out forwards; } From 3361856a95a403e4ecaaaa0dd54a1f6c22698cc7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 17 Sep 2025 18:07:52 +0200 Subject: [PATCH 040/159] removed redundant icon --- .../src/stories/foundations/icons/icon.styles.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 4e316a7901..333c957d2c 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -34,7 +34,3 @@ $resizer-max-width: 64px; .my-accessibility-icon { @include post.post-icon($name: 'accessibility'); } - -.my-handvictory-icon { - @include post.post-icon($name: 'handvictory', $color: #666666); -} From f3abd883e355c4f5d8f596784088daec63ef1163 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 08:40:08 +0200 Subject: [PATCH 041/159] small fixes --- packages/styles/gulpfile.js | 27 +++++++++++++------------- packages/styles/src/mixins/_icons.scss | 13 +++++++++---- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 243f039ca3..7eef4325fa 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -11,16 +11,6 @@ const autoprefixer = require('autoprefixer'); const { globSync } = require('glob'); const options = require('./package.json').sass; -/** - * Copy task - */ -gulp.task('copy', () => { - return gulp - .src(['./LICENSE', './README.md', './package.json', './src/**/*.scss']) - .pipe(newer(options.outputDir)) - .pipe(gulp.dest(options.outputDir)); -}); - /** * Temporary task to copy token files from tokens package to the styles package since * pnpm does not correctly install dependencies of dependencies for workspace packages. @@ -45,6 +35,18 @@ gulp.task('copy-icon-files-to-dist', () => { return gulp.src(['./src/icons/temp/**/*.css']).pipe(gulp.dest(`${options.outputDir}/icons/temp`)); }); +/** + * Copy task + */ +gulp.task('copy', + gulp.series('copy-icon-files-to-dist', () => { + return gulp + .src(['./LICENSE', './README.md', './package.json', './src/**/*.scss']) + .pipe(newer(options.outputDir)) + .pipe(gulp.dest(options.outputDir)); + }) +); + /** * Autoprefix SCSS files */ @@ -208,9 +210,8 @@ exports.default = gulp.task( gulp.series( 'prebuild-env-vars', gulp.parallel( - gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'), - gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', 'sass'), + 'map-icons', + gulp.series('temporarily-copy-token-files', 'temporarily-copy-icon-files', 'copy', 'transform-package-json', 'autoprefixer', 'sass'), ), - 'copy-icon-files-to-dist', ), ); diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 1be4615cb0..64dfd72a30 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -35,18 +35,23 @@ $loaded-icons: () !default; vertical-align: -0.15em; background-color: currentColor; color: $color; - mask-image: var(--post-icon-#{$name}); + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-image: var(--post-icon-#{$name}); - mask-position: center center; + mask-image: var(--post-icon-#{$name}); + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-position: center center; - mask-repeat: no-repeat; + mask-position: center center; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-repeat: no-repeat; - mask-size: 100%; + mask-repeat: no-repeat; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; + mask-size: 100%; + @include load-icon-css($name); } From fbf12c6f1dfe1fbde495b4bad34d2703da50add9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 11:47:24 +0200 Subject: [PATCH 042/159] fix linting --- packages/styles/src/mixins/_icons.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 64dfd72a30..e546731a29 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -35,19 +35,15 @@ $loaded-icons: () !default; vertical-align: -0.15em; background-color: currentColor; color: $color; - /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-image: var(--post-icon-#{$name}); mask-image: var(--post-icon-#{$name}); - /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-position: center center; mask-position: center center; - /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; mask-size: 100%; From d355e669f7076e6e971a5958d2708b87516f1679 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 11:50:02 +0200 Subject: [PATCH 043/159] fix linting --- packages/styles/src/mixins/_icons.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index e546731a29..93f4775ae1 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -47,7 +47,6 @@ $loaded-icons: () !default; /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; mask-size: 100%; - @include load-icon-css($name); } From fa087b74cc37ec2704fa1525af782792154eb6f7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 15:53:19 +0200 Subject: [PATCH 044/159] temporary fix --- packages/styles/src/functions/_forms.scss | 2 +- packages/styles/src/variables/_icons.scss | 6 +++--- packages/styles/src/variables/components/_stepper.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss index 40006dab09..050e7af892 100644 --- a/packages/styles/src/functions/_forms.scss +++ b/packages/styles/src/functions/_forms.scss @@ -50,7 +50,7 @@ ); @if ($state) { - $icon: icons.get-colored-svg-url('chevrondown', map.get($arrow-color-map, '#{$state}-#{$mode}')); + $icon: icons.get-colored-svg-url('1002', map.get($arrow-color-map, '#{$state}-#{$mode}')); $state: url('#{$icon}'); } diff --git a/packages/styles/src/variables/_icons.scss b/packages/styles/src/variables/_icons.scss index e8ce60b8f0..cea284a0b2 100644 --- a/packages/styles/src/variables/_icons.scss +++ b/packages/styles/src/variables/_icons.scss @@ -13,7 +13,7 @@ $svg-post-path: "'%3E%3C/path%3E%3C/svg%3E"; $other-icons: () !default; $error-icon-name: 'error'; -$error-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM21.88 20.46C22.27 20.85 22.27 21.48 21.88 21.87C21.68 22.07 21.43 22.16 21.17 22.16C20.91 22.16 20.66 22.06 20.46 21.87L16 17.41L11.54 21.87C11.34 22.07 11.09 22.16 10.83 22.16C10.57 22.16 10.32 22.06 10.12 21.87C9.73 21.48 9.73 20.85 10.12 20.46L14.58 16L10.12 11.54C9.73 11.15 9.73 10.52 10.12 10.13C10.51 9.74 11.14 9.74 11.53 10.13L15.99 14.59L20.45 10.13C20.84 9.74 21.47 9.74 21.86 10.13C22.25 10.52 22.25 11.15 21.86 11.54L17.4 16L21.86 20.46H21.88Z'; +$error-icon-svg-path: var(--post-signal-icon-error); $other-icons: map.merge( ( $error-icon-name: $error-icon-svg-path, @@ -22,7 +22,7 @@ $other-icons: map.merge( ); $success-icon-name: 'success'; -$success-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'; +$success-icon-svg-path: var(--post-signal-icon-success); $other-icons: map.merge( ( $success-icon-name: $success-icon-svg-path, @@ -31,7 +31,7 @@ $other-icons: map.merge( ); $warning-icon-name: 'warning'; -$warning-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'; +$warning-icon-svg-path: var(--post-signal-icon-warning); $other-icons: map.merge( ( $warning-icon-name: $warning-icon-svg-path, diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index d6d369cd84..a7b5697d65 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -29,7 +29,7 @@ $stepper-indicator-hover-bg: color.$black; $stepper-indicator-future-bg: color.$gray-60; $stepper-indicator-future-color: color.$white; -$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('checkmark', $stepper-indicator-color); +$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('1001', $stepper-indicator-color); $stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}'); $stepper-indicator-check-icon-size: $stepper-indicator-check-size; From aa764b471d5a2ea26713c0ceab2c59268aefd8a4 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 16:47:26 +0200 Subject: [PATCH 045/159] changed the icons --- packages/styles/src/functions/_forms.scss | 2 +- packages/styles/tests/core.test.scss | 4 ++-- packages/styles/tests/functions/icons.test.scss | 2 +- packages/styles/tests/index_core.test.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss index 050e7af892..ca8fa92123 100644 --- a/packages/styles/src/functions/_forms.scss +++ b/packages/styles/src/functions/_forms.scss @@ -50,7 +50,7 @@ ); @if ($state) { - $icon: icons.get-colored-svg-url('1002', map.get($arrow-color-map, '#{$state}-#{$mode}')); + $icon: icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}')); $state: url('#{$icon}'); } diff --git a/packages/styles/tests/core.test.scss b/packages/styles/tests/core.test.scss index 13da7b91c9..0d542b0b31 100644 --- a/packages/styles/tests/core.test.scss +++ b/packages/styles/tests/core.test.scss @@ -7,8 +7,8 @@ * packages. Extend these tests at your convenience. */ .test { - background-image: url(post.get-colored-svg-url('heart', #ff0080)); - background-image: url(post.get-colored-svg-url('heart', post.$white)); + background-image: url(post.get-colored-svg-url('success', #ff0080)); + background-image: url(post.get-colored-svg-url('success', post.$white)); @include jest.equal(post.strip-unit(12px), 12); } diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index ef6db01423..e0a0620bc5 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -17,7 +17,7 @@ $expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32 // add-stroke-color @include jest.equal( - icons.add-stroke-color(icons.get-colored-svg-url('letter', #000), #fff, 2px), + icons.add-stroke-color(icons.get-colored-svg-url('warning', #000), #fff, 2px), $expected-add-stroke-color-output ); diff --git a/packages/styles/tests/index_core.test.scss b/packages/styles/tests/index_core.test.scss index d23d94c64a..96d7bed996 100644 --- a/packages/styles/tests/index_core.test.scss +++ b/packages/styles/tests/index_core.test.scss @@ -2,5 +2,5 @@ @use 'src/core' as post; .test { - background-image: url(post.get-colored-svg-url('heart', #ff0080)); + background-image: url(post.get-colored-svg-url('warning', #ff0080)); } From dacf1085775e89123b42358334367b05ae6e28b3 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 16:48:35 +0200 Subject: [PATCH 046/159] changed the icons --- packages/styles/src/variables/components/_stepper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index a7b5697d65..37a58a4ca6 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -29,7 +29,7 @@ $stepper-indicator-hover-bg: color.$black; $stepper-indicator-future-bg: color.$gray-60; $stepper-indicator-future-color: color.$white; -$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('1001', $stepper-indicator-color); +$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color); $stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}'); $stepper-indicator-check-icon-size: $stepper-indicator-check-size; From 042618298df5e94098042661b5ec3c10768f54ca Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 17:22:57 +0200 Subject: [PATCH 047/159] chenged to the ui-icon --- packages/styles/src/components/stepper.scss | 19 ++++++++++--------- .../src/variables/components/_stepper.scss | 5 ----- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 16ea25e860..9ac033b97e 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -172,34 +172,35 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.icon(2105); - display: block; position: absolute; - top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); + top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-size) / 2); z-index: 1; - height: stepper.$stepper-indicator-check-icon-size; - width: stepper.$stepper-indicator-check-icon-size; transition: stepper.$stepper-indicator-transition; - color: stepper.$stepper-indicator-color; .stepper-item:first-child > & { left: calc( - (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2 + (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-size) / 2 ); } .stepper-item:not(:first-child, :last-child) > & { - left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); + left: calc(50% - (stepper.$stepper-indicator-check-size / 2)); } .stepper-item:last-child > & { - right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); + right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-size) / 2); } // show only for completed steps .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { content: ''; } + @include icons-mx.post-icon( + 'checkmark', + stepper.$stepper-indicator-color, + stepper.$stepper-indicator-check-size, + stepper.$stepper-indicator-check-size + ); } // hover/focus state diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 37a58a4ca6..86cc1f8953 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -2,8 +2,6 @@ @use './../color'; @use './../animation'; -@use './../../functions/icons' as icon-fn; - @use '../../tokens/utilities'; @use '../../functions/tokens'; @@ -29,9 +27,6 @@ $stepper-indicator-hover-bg: color.$black; $stepper-indicator-future-bg: color.$gray-60; $stepper-indicator-future-color: color.$white; -$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color); -$stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}'); -$stepper-indicator-check-icon-size: $stepper-indicator-check-size; $stepper-link-line-height: type.$line-height-sm; $stepper-link-gap: tokens.get('utility-gap-8'); From 728da1b497a5d5f645fe6623bc7972f04686234c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 20:38:07 +0200 Subject: [PATCH 048/159] fixed the test --- packages/components/cypress/e2e/accordion.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/cypress/e2e/accordion.cy.ts b/packages/components/cypress/e2e/accordion.cy.ts index 697bc2192f..35e46f86f4 100644 --- a/packages/components/cypress/e2e/accordion.cy.ts +++ b/packages/components/cypress/e2e/accordion.cy.ts @@ -49,7 +49,7 @@ describe('accordion', () => { cy.get('@collapsibles').each(($item) => { cy.wrap($item) .shadow() - .find('post-icon[name="2051"]') + .find('post-icon[name="chevrondown"]') .should('exist'); }); }); From 294f4fe36a7cbc25015e1626ff141e66f66ac3f8 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 18 Sep 2025 20:40:51 +0200 Subject: [PATCH 049/159] fixed linting --- packages/styles/src/components/card.scss | 6 +++++- packages/styles/src/components/footer/_post-footer.scss | 2 +- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 4 +--- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index c5350890a1..fdfcf65c69 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -109,7 +109,11 @@ post-linkarea:has(> .card) { &::before { content: ''; - @include icons-mx.post-icon('arrowright', $width: icons.$icon-size-default, $height: icons.$icon-size-default); + @include icons-mx.post-icon( + 'arrowright', + $width: icons.$icon-size-default, + $height: icons.$icon-size-default + ); } } } diff --git a/packages/styles/src/components/footer/_post-footer.scss b/packages/styles/src/components/footer/_post-footer.scss index e9fde515c5..f440861988 100644 --- a/packages/styles/src/components/footer/_post-footer.scss +++ b/packages/styles/src/components/footer/_post-footer.scss @@ -84,7 +84,7 @@ post-footer { &[slot='socialmedia'] > [role='list'] { gap: var(--post-footer-socialmedia-list-item-gap); - post-list-item a post-icon:not([name="letter"]) { + post-list-item a post-icon:not([name='letter']) { width: 32px; height: 32px; } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 8f97bce5a3..b1b38921f4 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -74,7 +74,7 @@ ul.list-check { @include icon-mixin.post-icon( 'checkmark', $width: tokens.get('list-check-sizing-icon'), - $height: tokens.get('list-check-sizing-icon'), + $height: tokens.get('list-check-sizing-icon') ); } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 9ac033b97e..261484c6a1 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -178,9 +178,7 @@ tokens.$default-map: utilities.$post-spacing; transition: stepper.$stepper-indicator-transition; .stepper-item:first-child > & { - left: calc( - (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-size) / 2 - ); + left: calc((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-size) / 2); } .stepper-item:not(:first-child, :last-child) > & { From 17dda8842be03df03e0174afdee52d3a3d3d7367 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:02:25 +0200 Subject: [PATCH 050/159] small test fixes --- packages/styles/tests/index_core.test.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/tests/index_core.test.scss b/packages/styles/tests/index_core.test.scss index 96d7bed996..9e338e0bc5 100644 --- a/packages/styles/tests/index_core.test.scss +++ b/packages/styles/tests/index_core.test.scss @@ -2,5 +2,5 @@ @use 'src/core' as post; .test { - background-image: url(post.get-colored-svg-url('warning', #ff0080)); + background-image: url(post.get-colored-svg-url('success', #ff0080)); } From dd73d8b1abbeac4d9a12af6cee6dbc32b0d724fd Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:33:03 +0200 Subject: [PATCH 051/159] reverted changes for the test --- packages/styles/tests/functions/icons.test.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index e0a0620bc5..9e1cbfcebc 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -13,11 +13,11 @@ $expected-add-fill-color-output: "data:image/svg+xml,%3Csvg xmlns='http://www.w3 $expected-add-fill-color-output ); -$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M32 14 19.8 1.7l-.4-.4-18 18 .4.4L6 24H0v5.3h11.3L10 28H1.3v-2.7h6L14 32l2.6-2.6H32V24H22zM18.5 4.1l.3 13.2c0 .4-.1.7-.4 1s-.6.4-1 .4h-.1l-13.2-.2zM14.9 20h2.4c1.5 0 2.8-1.3 2.7-2.9l-.1-3 9.5.3-14.2 14.5zm14.5-6.7-9.4-.4-.2-9.3zM13.6 20l.3 10.1L3.7 19.8zm17.1 5.4V28H18l2.7-2.7h10z'/%3E%3C/svg%3E"; +$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M26.34 6.91a5 5 0 0 1-.63-.37 8.8 8.8 0 0 1-1.61-1.37c-1.2-1.38-1.65-2.77-1.82-3.75-.14-.81-.08-1.34-.07-1.34h-5.48v21.2c0 .28 0 .57-.01.84v.15c-.12 1.56-1 2.94-2.34 3.71-.69.39-1.47.6-2.27.6-2.55 0-4.62-2.08-4.62-4.65s2.07-4.65 4.62-4.65c.48 0 .96.08 1.42.23v-5.58c-2.81-.36-5.66.47-7.84 2.3-.94.82-1.74 1.8-2.35 2.89-.23.4-1.1 2-1.21 4.6-.07 1.48.38 3.01.59 3.64.13.39.65 1.66 1.49 2.73.68.86 1.48 1.61 2.37 2.24s.01 0 .01 0c2.65 1.8 5.6 1.68 5.6 1.68.51-.02 2.22 0 4.15-.92 2.15-1.02 3.37-2.53 3.37-2.53.78-.91 1.4-1.94 1.84-3.05.5-1.3.66-2.87.66-3.49V10.77c.07.04.95.63.95.63s1.28.82 3.27 1.35c1.43.38 3.35.46 3.35.46V7.77c-.67.07-2.04-.14-3.45-.84 Z'/%3E%3C/svg%3E"; // add-stroke-color @include jest.equal( - icons.add-stroke-color(icons.get-colored-svg-url('warning', #000), #fff, 2px), + icons.add-stroke-color(icons.get-colored-svg-url('1000', #000), #fff, 2px), $expected-add-stroke-color-output ); From 12f70f131b8eeafab97338e7ce8633db6510a521 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:34:09 +0200 Subject: [PATCH 052/159] reverted changes for the test --- packages/styles/tests/functions/icons.test.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index 9e1cbfcebc..f0c1f03dfa 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -13,7 +13,7 @@ $expected-add-fill-color-output: "data:image/svg+xml,%3Csvg xmlns='http://www.w3 $expected-add-fill-color-output ); -$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M26.34 6.91a5 5 0 0 1-.63-.37 8.8 8.8 0 0 1-1.61-1.37c-1.2-1.38-1.65-2.77-1.82-3.75-.14-.81-.08-1.34-.07-1.34h-5.48v21.2c0 .28 0 .57-.01.84v.15c-.12 1.56-1 2.94-2.34 3.71-.69.39-1.47.6-2.27.6-2.55 0-4.62-2.08-4.62-4.65s2.07-4.65 4.62-4.65c.48 0 .96.08 1.42.23v-5.58c-2.81-.36-5.66.47-7.84 2.3-.94.82-1.74 1.8-2.35 2.89-.23.4-1.1 2-1.21 4.6-.07 1.48.38 3.01.59 3.64.13.39.65 1.66 1.49 2.73.68.86 1.48 1.61 2.37 2.24s.01 0 .01 0c2.65 1.8 5.6 1.68 5.6 1.68.51-.02 2.22 0 4.15-.92 2.15-1.02 3.37-2.53 3.37-2.53.78-.91 1.4-1.94 1.84-3.05.5-1.3.66-2.87.66-3.49V10.77c.07.04.95.63.95.63s1.28.82 3.27 1.35c1.43.38 3.35.46 3.35.46V7.77c-.67.07-2.04-.14-3.45-.84 Z'/%3E%3C/svg%3E"; +$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M32 14 19.8 1.7l-.4-.4-18 18 .4.4L6 24H0v5.3h11.3L10 28H1.3v-2.7h6L14 32l2.6-2.6H32V24H22zM18.5 4.1l.3 13.2c0 .4-.1.7-.4 1s-.6.4-1 .4h-.1l-13.2-.2zM14.9 20h2.4c1.5 0 2.8-1.3 2.7-2.9l-.1-3 9.5.3-14.2 14.5zm14.5-6.7-9.4-.4-.2-9.3zM13.6 20l.3 10.1L3.7 19.8zm17.1 5.4V28H18l2.7-2.7h10z'/%3E%3C/svg%3E"; // add-stroke-color @include jest.equal( From 8cd60526b4d09f27ab175cf615e1ea1a421337bf Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:38:00 +0200 Subject: [PATCH 053/159] remove redundant test --- packages/styles/tests/mixins/animation.test.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/tests/mixins/animation.test.scss b/packages/styles/tests/mixins/animation.test.scss index 636ba9c79f..9bf8dfa862 100644 --- a/packages/styles/tests/mixins/animation.test.scss +++ b/packages/styles/tests/mixins/animation.test.scss @@ -2,5 +2,4 @@ body { @include animation.hover-animation(10px, 500px, 500px); - @include animation.hover-animation-svg-icon(red, 2021); } From 01e57e1ad9accb6e88a16dafc7ed62c9e4fbd2e9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:41:56 +0200 Subject: [PATCH 054/159] reverted changes --- packages/styles/src/components/stepper.scss | 12 ++++++------ .../styles/src/variables/components/_stepper.scss | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 261484c6a1..f345c9ae57 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -173,20 +173,20 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { position: absolute; - top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-size) / 2); + top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); z-index: 1; transition: stepper.$stepper-indicator-transition; .stepper-item:first-child > & { - left: calc((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-size) / 2); + left: calc((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2); } .stepper-item:not(:first-child, :last-child) > & { - left: calc(50% - (stepper.$stepper-indicator-check-size / 2)); + left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); } .stepper-item:last-child > & { - right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-size) / 2); + right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); } // show only for completed steps @@ -196,8 +196,8 @@ tokens.$default-map: utilities.$post-spacing; @include icons-mx.post-icon( 'checkmark', stepper.$stepper-indicator-color, - stepper.$stepper-indicator-check-size, - stepper.$stepper-indicator-check-size + stepper.$stepper-indicator-check-icon-size, + stepper.$stepper-indicator-check-icon-size ); } diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 86cc1f8953..844a4ff937 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -17,7 +17,7 @@ $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255)); $stepper-indicator-font-weight: type.$font-weight-bold; $stepper-indicator-bg: color.$yellow; $stepper-indicator-color: color.$black; -$stepper-indicator-check-size: tokens.get('utility-gap-24'); +$stepper-indicator-check-icon-size: tokens.get('utility-gap-24'); $stepper-indicator-transition: color animation.$transition-base-timing, background-color animation.$transition-base-timing; From 8425371747b6f60db773dab37d7a3ce496593623 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:44:49 +0200 Subject: [PATCH 055/159] fixed linting --- packages/styles/src/components/stepper.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index f345c9ae57..86af7292ab 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -178,7 +178,9 @@ tokens.$default-map: utilities.$post-spacing; transition: stepper.$stepper-indicator-transition; .stepper-item:first-child > & { - left: calc((#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2); + left: calc( + (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2 + ); } .stepper-item:not(:first-child, :last-child) > & { From 94623ddb3282b7ae80676e66687b211a1e960621 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 11:49:13 +0200 Subject: [PATCH 056/159] fixed unit-test --- packages/styles/tests/mixins/index.test.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss index b0156b1463..7bd96582c0 100644 --- a/packages/styles/tests/mixins/index.test.scss +++ b/packages/styles/tests/mixins/index.test.scss @@ -3,7 +3,6 @@ body { @include mixins.hover-animation(10px, 500px, 500px); - @include mixins.hover-animation-svg-icon(red, 2021); @include mixins.focus-outline(); @include mixins.font-smoothing(); From cd260ead156675717a196cc8c0f717d68cc6bdba Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 12:19:44 +0200 Subject: [PATCH 057/159] reverted redundant changes --- .../components/src/components/post-footer/post-footer.scss | 5 ----- packages/styles/src/components/footer/_post-footer.scss | 5 ----- 2 files changed, 10 deletions(-) diff --git a/packages/components/src/components/post-footer/post-footer.scss b/packages/components/src/components/post-footer/post-footer.scss index b8a9ab9044..a1a1137528 100644 --- a/packages/components/src/components/post-footer/post-footer.scss +++ b/packages/components/src/components/post-footer/post-footer.scss @@ -130,11 +130,6 @@ footer { .footer-socialmedia { margin-block-end: var(--post-footer-socialmedia-margin-block-end); - - ::slotted(post-list post-list-item a post-icon:not([name="letter"])) { - width: 20px; - height: 20px; - } } .footer-app { diff --git a/packages/styles/src/components/footer/_post-footer.scss b/packages/styles/src/components/footer/_post-footer.scss index f440861988..990065c020 100644 --- a/packages/styles/src/components/footer/_post-footer.scss +++ b/packages/styles/src/components/footer/_post-footer.scss @@ -83,11 +83,6 @@ post-footer { &[slot='socialmedia'] > [role='list'] { gap: var(--post-footer-socialmedia-list-item-gap); - - post-list-item a post-icon:not([name='letter']) { - width: 32px; - height: 32px; - } } &[slot='app'] > [role='list'] { From b8c726f9dd8c86260855fc40a285f4d7faecaf4d Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Fri, 19 Sep 2025 16:25:08 +0200 Subject: [PATCH 058/159] removed legacy code --- packages/styles/tests/functions/icons.test.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index f0c1f03dfa..b790e396a2 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -13,14 +13,6 @@ $expected-add-fill-color-output: "data:image/svg+xml,%3Csvg xmlns='http://www.w3 $expected-add-fill-color-output ); -$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M32 14 19.8 1.7l-.4-.4-18 18 .4.4L6 24H0v5.3h11.3L10 28H1.3v-2.7h6L14 32l2.6-2.6H32V24H22zM18.5 4.1l.3 13.2c0 .4-.1.7-.4 1s-.6.4-1 .4h-.1l-13.2-.2zM14.9 20h2.4c1.5 0 2.8-1.3 2.7-2.9l-.1-3 9.5.3-14.2 14.5zm14.5-6.7-9.4-.4-.2-9.3zM13.6 20l.3 10.1L3.7 19.8zm17.1 5.4V28H18l2.7-2.7h10z'/%3E%3C/svg%3E"; - -// add-stroke-color -@include jest.equal( - icons.add-stroke-color(icons.get-colored-svg-url('1000', #000), #fff, 2px), - $expected-add-stroke-color-output -); - // get-colored-svg-url .test { @each $name, $path in icon-vars.$svg-icon-map { From 2925ec46f5cffa037d97169d553a78a3fc5a99ad Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 22 Sep 2025 10:41:02 +0200 Subject: [PATCH 059/159] fixed the checked lists --- packages/styles/src/components/list-check.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index b1b38921f4..26ed05cb3d 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -66,13 +66,13 @@ ul.list-check { top: tokens.get('list-check-padding-icon'); left: tokens.get('list-check-padding-icon'); content: ''; - color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } @include icon-mixin.post-icon( 'checkmark', + $color: tokens.get('list-check-color-icon-fg'), $width: tokens.get('list-check-sizing-icon'), $height: tokens.get('list-check-sizing-icon') ); From 15dd5101e776a1829ca41514c5aec91c2707f7c6 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 22 Sep 2025 10:55:39 +0200 Subject: [PATCH 060/159] added a changeset --- .changeset/gentle-doors-smash.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/gentle-doors-smash.md diff --git a/.changeset/gentle-doors-smash.md b/.changeset/gentle-doors-smash.md new file mode 100644 index 0000000000..5752de16da --- /dev/null +++ b/.changeset/gentle-doors-smash.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-components': patch +'@swisspost/design-system-styles': patch +--- + +Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package. This improves consistency and aligns icon usage with the current design guidelines. From 11a2030f021d325d39677756788f9216e3b17cd6 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 22 Sep 2025 10:56:57 +0200 Subject: [PATCH 061/159] adjusted the changeset --- .changeset/gentle-doors-smash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-doors-smash.md b/.changeset/gentle-doors-smash.md index 5752de16da..e50dcd35da 100644 --- a/.changeset/gentle-doors-smash.md +++ b/.changeset/gentle-doors-smash.md @@ -3,4 +3,4 @@ '@swisspost/design-system-styles': patch --- -Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package. This improves consistency and aligns icon usage with the current design guidelines. +Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package. This improves icon usage with the current design guidelines. From 8d1dfa42a95cf087ca345b1ec478a914f5d21681 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 22 Sep 2025 10:58:17 +0200 Subject: [PATCH 062/159] adjusted the changeset --- .changeset/gentle-doors-smash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-doors-smash.md b/.changeset/gentle-doors-smash.md index e50dcd35da..9b3feeeff4 100644 --- a/.changeset/gentle-doors-smash.md +++ b/.changeset/gentle-doors-smash.md @@ -3,4 +3,4 @@ '@swisspost/design-system-styles': patch --- -Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package. This improves icon usage with the current design guidelines. +Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package to align icon usage with the current design guidelines. From afe3227c609193e63e88c0b4c588540c3af1dda4 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:12:38 +0200 Subject: [PATCH 063/159] chore(docs): replace post-icons with ui-icons in docs (#6226) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📄 Description This PR replaces all usages of `Post Icons` with the corresponding `UI Icons` across the documentation package (`designers request`). ## Changes 1. Updated Storybook preview styles to reference `UI Icon` names instead of `Post Icon` numbers. 2. Replaced `Post Icons` with `UI Icons` across all component stories. 3. Adjusted argTypes and control options in stories to use named `UI Icons`. **Exceptions:** Post icons are retained in `mission.blocks.tsx`, `design-principles.data.ts`, and `introduction.docs.md` because they offer superior semantic clarity for the intended context, with no equivalent alternatives available in the current UI icon set. **ℹ️ Note on social media icon sizes** Since this PR replaces Post Icons with UI Icons, and UI Icons are designed with larger internal padding, the icons in the composable footer appeared too small when swapped directly. To address this, I manually increased the icon sizes for the social media icons inside the footer (agreed with Rouven and Oli): - These values are not tokenized, because they are footer-specific. - The adjustment only applies to the icons rendered in the slot="socialmedia" area of the composable footer. --- ## 📝 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 --- .changeset/many-words-hug.md | 5 ++++ .../version-switcher/VersionSwitcher.tsx | 4 +-- packages/documentation/.storybook/main.ts | 2 +- .../.storybook/styles/preview.scss | 2 +- .../stories/components/badge/badge.stories.ts | 2 +- .../components/banner/banner.stories.ts | 4 +-- .../components/button/button.stories.ts | 28 +++++++++---------- .../standard-html/card-control.stories.ts | 2 +- .../web-component/card-control.stories.ts | 2 +- .../card-product/card-product.stories.ts | 6 ++-- .../stories/components/card/card.stories.ts | 8 +++--- .../components/dialog/dialog.stories.ts | 10 +++---- .../components/footer/footer.stories.ts | 14 +++++----- .../form-footer/form-footer.stories.ts | 4 +-- .../list-interactive.stories.ts | 6 ++-- .../segmented-button.stories.ts | 4 ++- .../stories/components/table/table.stories.ts | 12 ++++---- .../stories/components/tabs/tabs.stories.ts | 4 +-- .../components/tag/tag.snapshot.stories.ts | 2 +- .../src/stories/components/tag/tag.stories.ts | 2 +- .../togglebutton/togglebutton.stories.ts | 4 +-- .../stories/foundations/icons/icon.stories.ts | 24 ++++++++-------- .../foundations/icons/icon.styles.scss | 8 +++--- .../icons/search/search-icons.blocks.tsx | 2 +- .../accessibility/accessibility.docs.mdx | 8 +++--- .../migrationv4-5.component.ts | 2 +- .../migrationv5-6.component.ts | 2 +- .../migrationv6-7.component.ts | 2 +- .../migrationv7-8.component.ts | 2 +- .../migrationv8-9.component.ts | 2 +- .../migrationv9-10.component.ts | 2 +- .../packages/components-react/csr.sample.tsx | 2 +- .../packages/components-react/ssr.sample.tsx | 2 +- .../stories/packages/icons/package-icons.mdx | 2 +- .../internet-header/internet-header.docs.mdx | 2 +- .../src/components/footer/_post-footer.scss | 15 ++++++++++ 36 files changed, 113 insertions(+), 91 deletions(-) create mode 100644 .changeset/many-words-hug.md diff --git a/.changeset/many-words-hug.md b/.changeset/many-words-hug.md new file mode 100644 index 0000000000..5b7f893603 --- /dev/null +++ b/.changeset/many-words-hug.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the documentation to align icon usage with the current design guidelines. diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx index 779752faf7..52e5b5dfa1 100644 --- a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx +++ b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx @@ -96,14 +96,14 @@ function VersionSwitcher() { aria-hidden="true" > v{CURRENT_MINOR_VERSION} - + )} > v{CURRENT_MINOR_VERSION} - + ); diff --git a/packages/documentation/.storybook/main.ts b/packages/documentation/.storybook/main.ts index a6e845680b..bcc61039d8 100644 --- a/packages/documentation/.storybook/main.ts +++ b/packages/documentation/.storybook/main.ts @@ -37,7 +37,7 @@ const config: StorybookConfig = { content: { type: 'element', tagName: 'post-icon', - properties: { name: 2037 }, + properties: { name: 'link' }, }, headingProperties: { className: 'docs-autolink' }, behavior: 'append', diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 8afb87648f..97ed55e259 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -16,7 +16,7 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier // Mixin for toolbar button icons $toolbar-icons: ( - '.docblock-code-toggle': '2052', + '.docblock-code-toggle': 'chevrondown', '.docblock-code-toggle + button': 'resizeexpand', '.docblock-code-toggle + button + button': 'link', '.docblock-code-toggle + button + button + button': 'code' diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts index 555e226444..954beeadd9 100644 --- a/packages/documentation/src/stories/components/badge/badge.stories.ts +++ b/packages/documentation/src/stories/components/badge/badge.stories.ts @@ -116,7 +116,7 @@ export const Position: Story = { ${chipMeta.render?.({ ...chipMeta.args, badge: true }, context)}
    - +
    3
    `, diff --git a/packages/documentation/src/stories/components/banner/banner.stories.ts b/packages/documentation/src/stories/components/banner/banner.stories.ts index f9e5ad0701..f235e65898 100644 --- a/packages/documentation/src/stories/components/banner/banner.stories.ts +++ b/packages/documentation/src/stories/components/banner/banner.stories.ts @@ -102,8 +102,8 @@ export const Contents: Story = { innerHTML: '

    Heading Title

    ' + '
      ' + - '
    • An example list item
      • ' + - '
    • Another example list item
      • ' + + '
    • An example list item
      • ' + + '
    • Another example list item
      • ' + '
    ' + '
    ' + '

    This is the banner content that provides important information to the user.

    ' + diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts index 28386b8fe8..c3a821e51b 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/packages/documentation/src/stories/components/button/button.stories.ts @@ -22,8 +22,8 @@ const meta: MetaComponent = { variant: 'btn-primary', size: 'null', iconPosition: 'iconBeforeText', - icon: '2069', - secondIcon: '2069', + icon: 'search', + secondIcon: 'search', disabled: false, }, argTypes: { @@ -145,14 +145,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - '2069': 'Search (2069)', - '3193': 'Edit (3193)', - '2059': 'Save (2059)', - '2015': 'Remove (2015)', - '2286': 'Like (2286)', + 'search': 'Search', + 'edit': 'Edit', + 'save': 'Save', + 'trash': 'Remove', + 'heart': 'Like', }, }, - options: ['null', '2069', '3193', '2059', '2015', '2286'], + options: ['null', 'search', 'edit', 'save', 'trash', 'heart'], table: { category: 'Icon', }, @@ -168,14 +168,14 @@ const meta: MetaComponent = { type: 'select', labels: { 'null': 'None', - '2069': 'Search (2069)', - '3193': 'Edit (3193)', - '2059': 'Save (2059)', - '2015': 'Remove (2015)', - '2286': 'Like (2286)', + 'search': 'Search', + 'edit': 'Edit', + 'save': 'Save', + 'trash': 'Remove', + 'heart': 'Like', }, }, - options: ['null', '2069', '3193', '2059', '2015', '2286'], + options: ['null', 'search', 'edit', 'save', 'trash', 'heart'], table: { category: 'Icon', }, diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts index 3a3392b237..4494f106ef 100644 --- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts +++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts @@ -65,7 +65,7 @@ const meta: MetaComponent = { control: { type: 'select', }, - options: ['none', '1000', '1001', '2000'], + options: ['none', 'letter', 'letteropen', 'parcel'], table: { category: 'General', }, diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts index 204c53afbf..bc92c7da3c 100644 --- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts +++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts @@ -280,7 +280,7 @@ export const FormIntegration: Story = {
    diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts index 2fccfe62c5..f33adb94be 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts +++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts @@ -97,7 +97,7 @@ function renderProductCard(args: Args) {
    ${getTitle(args)} ${getText(args)} - + Learn more
    @@ -155,7 +155,7 @@ export const Multipart: Story = {
    @@ -251,7 +251,7 @@ export const Multipart: Story = {
    diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts index bd19368566..8422d2a317 100644 --- a/packages/documentation/src/stories/components/card/card.stories.ts +++ b/packages/documentation/src/stories/components/card/card.stories.ts @@ -224,10 +224,10 @@ export const CustomContent: Story = { return html`
    - +

    User Details

    - +
    @@ -237,14 +237,14 @@ export const CustomContent: Story = { Mr
    First Name Last Name
    Street 1
    1234 City - +

  • Language: English

    - +
    • diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts index e162545ef7..d764202f7d 100644 --- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts +++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts @@ -66,13 +66,13 @@ const meta: Meta = { type: 'select', labels: { none: 'None', - 1034: '1034 (Info)', - 2104: '2104 (Danger)', - 2106: '2106 (Warning)', - 2105: '2105 (Success)', + info: 'Info', + error: 'Error', + warning: 'Warning', + success: 'Success', }, }, - options: ['none', '1034', '2105', '2104', '2106'], + options: ['none', 'info', 'success', 'error', 'warning'], table: { category: 'Content' }, }, palette: { diff --git a/packages/documentation/src/stories/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/footer/footer.stories.ts index b412f8a3ea..6a0fca9dc6 100644 --- a/packages/documentation/src/stories/components/footer/footer.stories.ts +++ b/packages/documentation/src/stories/components/footer/footer.stories.ts @@ -52,37 +52,37 @@ function render(args: Args) {

    Follow us

    - + - + - + - + - + - + @@ -91,7 +91,7 @@ function render(args: Args) { href="https://www.xing.com/companies/dieschweizerischepost" class="btn btn-primary btn-icon" > - + diff --git a/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts b/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts index 4f8a3d2adf..0697eb335c 100644 --- a/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts +++ b/packages/documentation/src/stories/components/form-footer/form-footer.stories.ts @@ -5,12 +5,12 @@ import { MetaComponent } from '@root/types'; export const FooterArgs = { showPrimaryButton: true, primaryButtonText: 'Send', - primaryButtonIcon: '3020', + primaryButtonIcon: 'arrowright', showSecondaryButton: true, secondaryButtonText: 'Cancel', showTertiaryButton: true, tertiaryButtonText: 'Back', - tertiaryButtonIcon: '3024', + tertiaryButtonIcon: 'arrowleft', }; const meta: MetaComponent = { diff --git a/packages/documentation/src/stories/components/list-interactive/list-interactive.stories.ts b/packages/documentation/src/stories/components/list-interactive/list-interactive.stories.ts index 3c7d9a784b..9bb1168343 100644 --- a/packages/documentation/src/stories/components/list-interactive/list-interactive.stories.ts +++ b/packages/documentation/src/stories/components/list-interactive/list-interactive.stories.ts @@ -65,9 +65,9 @@ export function renderListGroup(args: Args) { } function getContent(args: Args, itemsCount: number) { - const linkIcon = getIcon('3020'); - const fileIcon = getIcon('3169'); - const downloadIcon = getIcon('2066'); + const linkIcon = getIcon('arrowright'); + const fileIcon = getIcon('document'); + const downloadIcon = getIcon('download'); const isDoc = args.listType === 'document'; const items = Array.from(Array(itemsCount).keys()); diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.stories.ts b/packages/documentation/src/stories/components/segmented-button/segmented-button.stories.ts index 617b897ac5..45cbda0195 100644 --- a/packages/documentation/src/stories/components/segmented-button/segmented-button.stories.ts +++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.stories.ts @@ -60,6 +60,8 @@ export const IconExample: Story = { render: (args: Args) => { const labelCount = Math.min(args.labelCount || 0, MAX_LABELS); const name = `segmented-button-${Math.random().toString(36).slice(-6)}`; + + const iconNames = ['letter', 'parcel', 'letterandparcel', 'locationpackage', 'locationletter', 'stampapost', 'stampbpost', 'mailboxprivate']; return html`
    @@ -70,7 +72,7 @@ export const IconExample: Story = { (_undefined, index) => html` `, )} diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts index ecec6a708d..b354f03be2 100644 --- a/packages/documentation/src/stories/components/table/table.stories.ts +++ b/packages/documentation/src/stories/components/table/table.stories.ts @@ -193,11 +193,11 @@ export const TableWithButtons: Story = { @@ -208,11 +208,11 @@ export const TableWithButtons: Story = { @@ -223,11 +223,11 @@ export const TableWithButtons: Story = { diff --git a/packages/documentation/src/stories/components/tabs/tabs.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.stories.ts index 87f62d4249..bfc385178f 100644 --- a/packages/documentation/src/stories/components/tabs/tabs.stories.ts +++ b/packages/documentation/src/stories/components/tabs/tabs.stories.ts @@ -109,7 +109,7 @@ export const Async: Story = {
    diff --git a/packages/documentation/src/stories/components/tag/tag.snapshot.stories.ts b/packages/documentation/src/stories/components/tag/tag.snapshot.stories.ts index 32a0b3772f..61adb25634 100644 --- a/packages/documentation/src/stories/components/tag/tag.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/tag/tag.snapshot.stories.ts @@ -36,7 +36,7 @@ export const Tag: Story = { ...args, ...bombArgs, variant, - icon: '1001', + icon: 'letter', }, context, ), diff --git a/packages/documentation/src/stories/components/tag/tag.stories.ts b/packages/documentation/src/stories/components/tag/tag.stories.ts index 9b61682a25..8288c3efb1 100644 --- a/packages/documentation/src/stories/components/tag/tag.stories.ts +++ b/packages/documentation/src/stories/components/tag/tag.stories.ts @@ -23,7 +23,7 @@ const meta: MetaComponent = { variant: 'null', size: 'null', showIcon: false, - icon: 1001, + icon: "letter", markup: 'Tag', }, argTypes: { diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts index 3d63ab368f..f1a47a7ed1 100644 --- a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts +++ b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts @@ -90,8 +90,8 @@ export const ContentVisibility: StoryObj = { return html` Menu - - + + `; }, diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts index 418d0f4379..2eb01869b1 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts +++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts @@ -19,7 +19,7 @@ const meta: MetaComponent = { }, }, args: { - name: '1022', + name: 'stampapostplus', base: '', flipH: false, flipV: false, @@ -146,7 +146,7 @@ export const Size: Story = { ]), decorators: [ (story: StoryFn, context: StoryContext) => - generateDecorators(story, context, 'd-flex flex-column'), + generateDecorators(story, context, 'd-flex flex-column gap-4'), ], }; @@ -212,12 +212,12 @@ export const Animate: Story = { }, render: args => renderAnimateVariants(args, [ - { name: '2253', animation: 'cylon' }, - { name: '2252', animation: 'cylon-vertical' }, - { name: '2041', animation: 'spin' }, - { name: '2042', animation: 'spin-reverse' }, - { name: '2151', animation: 'fade' }, - { name: '2063', animation: 'throb' }, + { name: 'dragleftright', animation: 'cylon' }, + { name: 'dragupdown', animation: 'cylon-vertical' }, + { name: 'reloadright', animation: 'spin' }, + { name: 'reloadleft', animation: 'spin-reverse' }, + { name: 'sun', animation: 'fade' }, + { name: 'heart', animation: 'throb' }, ]), decorators: [ (story: StoryFn, context: StoryContext) => @@ -227,7 +227,7 @@ export const Animate: Story = { export const CSS_Default: Story = { render: () => { - return html`
    `; + return html`
    `; }, decorators: [ (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'fs-2'), @@ -236,7 +236,7 @@ export const CSS_Default: Story = { export const CSS_UI: Story = { render: () => { - return html`
    `; + return html`
    `; }, decorators: [ (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'resizer'), @@ -245,7 +245,7 @@ export const CSS_UI: Story = { export const CSS_Color: Story = { render: () => { - return html`
    `; + return html`
    `; }, decorators: [ (story: StoryFn, context: StoryContext) => generateDecorators(story, context, 'fs-2'), @@ -254,7 +254,7 @@ export const CSS_Color: Story = { export const CSS_Size: Story = { render: () => { - return html`
    `; + return html`
    `; }, decorators: [(story: StoryFn, context: StoryContext) => generateDecorators(story, context)], }; diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 333c957d2c..74586e02ed 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -27,10 +27,10 @@ $resizer-max-width: 64px; background-color: post.$info; } -.my-1022-icon { - @include post.post-icon($name: '1022'); -} - .my-accessibility-icon { @include post.post-icon($name: 'accessibility'); } + +.letter-icon { + @include post.post-icon($name: 'letter'); +} \ No newline at end of file diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx index c7e7e4dbf3..0626a55a6e 100644 --- a/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx +++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.blocks.tsx @@ -321,7 +321,7 @@ export class Search extends React.Component { if (this.results.paging.totalPages <= 0) return (
    - +

    No results found with your current query

    ); diff --git a/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx index 104b55b8ba..838b097626 100644 --- a/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx +++ b/packages/documentation/src/stories/guidelines/accessibility/accessibility.docs.mdx @@ -37,7 +37,7 @@ The Web Content Accessibility Guidelines are a recommendation for designing acce
    - +

    Perceivability

    @@ -49,7 +49,7 @@ The Web Content Accessibility Guidelines are a recommendation for designing acce
    - +

    Operability

    @@ -61,7 +61,7 @@ The Web Content Accessibility Guidelines are a recommendation for designing acce
    - +

    Understandability

    through readability, predictability and assistance with entering data.
    @@ -70,7 +70,7 @@ The Web Content Accessibility Guidelines are a recommendation for designing acce
    - +

    Robustness

    through compatibility with assistive technologies.
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts index 045a028229..682f4e676f 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts @@ -26,7 +26,7 @@ export class MigrationV45Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v4-to-v5" > - +
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts index 86d6ef8c13..079401829a 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts @@ -26,7 +26,7 @@ export class MigrationV56Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v5-to-v6" > - +
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv6-7.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv6-7.component.ts index 4ab7742260..0edbc3e48a 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv6-7.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv6-7.component.ts @@ -26,7 +26,7 @@ export class MigrationV67Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v6-to-v7" > - +
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv7-8.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv7-8.component.ts index 380888c028..f85864e338 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv7-8.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv7-8.component.ts @@ -25,7 +25,7 @@ export class MigrationV78Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v7-to-v8" > - +
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts index 38a57b3997..670ff69188 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts @@ -25,7 +25,7 @@ export class MigrationV89Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v8-to-v9" > - +
    diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts index fdf1a38168..5f582925b2 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts @@ -25,7 +25,7 @@ export class MigrationV99Component extends LitElement { tabindex="-1" href="/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v9-to-v10" > - +
    diff --git a/packages/documentation/src/stories/packages/components-react/csr.sample.tsx b/packages/documentation/src/stories/packages/components-react/csr.sample.tsx index 4a1f2ba776..8ea344e066 100644 --- a/packages/documentation/src/stories/packages/components-react/csr.sample.tsx +++ b/packages/documentation/src/stories/packages/components-react/csr.sample.tsx @@ -2,5 +2,5 @@ import { PostIcon } '@swisspost/design-system-components-react'; export default function App() { - return ; + return ; } diff --git a/packages/documentation/src/stories/packages/components-react/ssr.sample.tsx b/packages/documentation/src/stories/packages/components-react/ssr.sample.tsx index 6af2b842a7..1cc4f1009f 100644 --- a/packages/documentation/src/stories/packages/components-react/ssr.sample.tsx +++ b/packages/documentation/src/stories/packages/components-react/ssr.sample.tsx @@ -2,5 +2,5 @@ import { PostIcon } '@swisspost/design-system-components-react/server'; export default function Page() { - return ; + return ; } diff --git a/packages/documentation/src/stories/packages/icons/package-icons.mdx b/packages/documentation/src/stories/packages/icons/package-icons.mdx index 9310224d64..7a6c8ce3de 100644 --- a/packages/documentation/src/stories/packages/icons/package-icons.mdx +++ b/packages/documentation/src/stories/packages/icons/package-icons.mdx @@ -74,7 +74,7 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx'; Base-attribute solution - `} language="html"/> + `} language="html"/> diff --git a/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx b/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx index a1a4fcfb80..1c43465b9d 100644 --- a/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx +++ b/packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx @@ -34,7 +34,7 @@ import PackageDocs from '@/shared/packages-docs-layout.mdx';
    If you're working on a new project, you probably need a new configuration. Please contact the Post Portal Team.

    Step 1

    -

    Integration of header only: contact dm-tec@post.ch directly

    +

    Integration of header only: contact dm-tec@post.ch directly

    Integration of header and KLP: contact KLP first for integration

    Step 2

    diff --git a/packages/styles/src/components/footer/_post-footer.scss b/packages/styles/src/components/footer/_post-footer.scss index 990065c020..0aaec6afe0 100644 --- a/packages/styles/src/components/footer/_post-footer.scss +++ b/packages/styles/src/components/footer/_post-footer.scss @@ -83,6 +83,21 @@ post-footer { &[slot='socialmedia'] > [role='list'] { gap: var(--post-footer-socialmedia-list-item-gap); + + post-list-item a post-icon:not([name='letter']) { + width: 26px; + height: 26px; + + @include media.max(md) { + width: 24px; + height: 24px; + } + + @include media.max(sm) { + width: 22px; + height: 22px; + } + } } &[slot='app'] > [role='list'] { From d62b5ce60ac00b0f736fbb0e38e2300fef1a3481 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Fri, 26 Sep 2025 11:16:24 +0200 Subject: [PATCH 064/159] Delete packages/styles/tests/index_core.test.scss as legacy code --- packages/styles/tests/index_core.test.scss | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 packages/styles/tests/index_core.test.scss diff --git a/packages/styles/tests/index_core.test.scss b/packages/styles/tests/index_core.test.scss deleted file mode 100644 index 9e338e0bc5..0000000000 --- a/packages/styles/tests/index_core.test.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'src/index'; -@use 'src/core' as post; - -.test { - background-image: url(post.get-colored-svg-url('success', #ff0080)); -} From d8f001ec021fb52b08774b6ed88888bf4a2b752e Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Fri, 26 Sep 2025 11:17:08 +0200 Subject: [PATCH 065/159] Delete packages/styles/tests/core.test.scss as legacy code --- packages/styles/tests/core.test.scss | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 packages/styles/tests/core.test.scss diff --git a/packages/styles/tests/core.test.scss b/packages/styles/tests/core.test.scss deleted file mode 100644 index 0d542b0b31..0000000000 --- a/packages/styles/tests/core.test.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'sass:map'; -@use 'src/core' as post; -@use './jest'; - -/** - * This file contains tests for edge cases or fails discovered while building the 4.0 style & demo - * packages. Extend these tests at your convenience. - */ -.test { - background-image: url(post.get-colored-svg-url('success', #ff0080)); - background-image: url(post.get-colored-svg-url('success', post.$white)); - - @include jest.equal(post.strip-unit(12px), 12); -} From 0ac82e08dd516ee42d805cf1cd71ebf8fed7643b Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 12:11:26 +0200 Subject: [PATCH 066/159] chore(styles): remove `post-icon` mixin from styles package --- .../post-mainnavigation/post-mainnavigation.scss | 2 +- .../styles-primeng/src/lib/primeng-theme/_icons.scss | 2 +- packages/styles/src/components/card.scss | 2 +- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 2 +- packages/styles/src/components/validation.scss | 4 ++-- packages/styles/src/mixins/_icons.scss | 12 ++++++------ packages/styles/src/placeholders/_close.scss | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index 3a29ce5e9e..e5f2f8d5e3 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -47,7 +47,7 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.icon(2113); + @include icons.mask-image(2113); height: 24px; width: 24px; } diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 7275a18f1e..0b4cef923e 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; @mixin custom-icon($icon) { - @include post.icon($icon); + @include post.mask-image($icon); display: inline-block; height: 1rem; width: 1rem; diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 21be88e09f..6eb7da20b0 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -102,7 +102,7 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.icon(3020); + @include icons-mx.mask-image(3020); content: ''; display: inline-block; width: icons.$icon-size-default; diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index cc0c6efd9a..f9284c33ac 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -68,7 +68,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icon-mixin.icon('3035'); + @include icon-mixin.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 16ea25e860..7556f8124c 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -172,7 +172,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.icon(2105); + @include icons-mx.mask-image(2105); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 44e590c846..5503faf5ed 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -111,10 +111,10 @@ input[type='radio'], } ~ .invalid-feedback::before { - @include icon-mixin.icon('warning'); + @include icon-mixin.mask-image('warning'); } ~ .valid-feedback::before { - @include icon-mixin.icon('success'); + @include icon-mixin.mask-image('success'); } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 93f4775ae1..3b06e7ff1d 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,7 +9,7 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; -@mixin icon($name) { +@mixin mask-image($name) { $icon: icon-fn.get-svg-url($name); mask-image: url('#{$icon}'); background-color: currentColor; @@ -17,11 +17,11 @@ forced-color-adjust: preserve-parent-color; } -$loaded-icons: () !default; +$loaded-custom-properties: () !default; -@mixin load-icon-css($name, $path: '../icons/temp') { - @if list.index($loaded-icons, $name) == null { - $loaded-icons: list.append($loaded-icons, $name) !global; +@mixin custom-property($name, $path: '../icons/temp') { + @if list.index($loaded-custom-properties, $name) == null { + $loaded-custom-properties: list.append($loaded-custom-properties, $name) !global; @at-root { @include meta.load-css('#{$path}/#{$name}'); } @@ -47,7 +47,7 @@ $loaded-icons: () !default; /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-size: 100%; mask-size: 100%; - @include load-icon-css($name); + @include custom-property($name); } @mixin remove-icon() { diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 2e11fdd0e5..8056b0e7bb 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -17,7 +17,7 @@ } &::before { - @include icons.icon(2043); + @include icons.mask-image(2043); content: ''; display: block; height: close.$close-size; From 7f9410391c56d2376d324232c0fcc66f44d2cbb3 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 17:47:00 +0200 Subject: [PATCH 067/159] replaced the `post-icon` with `icon` mixin --- .../.storybook/styles/preview.scss | 6 +++- .../foundations/icons/icon.styles.scss | 12 +++++-- .../foundations/icons/mixin.sample.scss | 10 +++--- packages/styles/src/components/card.scss | 2 +- packages/styles/src/components/chip.scss | 20 +++++++---- .../styles/src/components/form-input.scss | 26 +++++++------- .../styles/src/components/list-check.scss | 3 +- packages/styles/src/components/stepper.scss | 34 +++++++++---------- packages/styles/src/mixins/_icons.scss | 6 ++-- packages/styles/src/placeholders/_close.scss | 2 +- 10 files changed, 73 insertions(+), 48 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 97ed55e259..035b372f3f 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -240,7 +240,11 @@ $toolbar-icons: ( &::before { content: ''; margin-right: 0.5rem; - @include post.post-icon($name: $icon-name); + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + @include post.mask-image($icon-name); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 74586e02ed..11513961ff 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -28,9 +28,17 @@ $resizer-max-width: 64px; } .my-accessibility-icon { - @include post.post-icon($name: 'accessibility'); + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + @include post.mask-image('accessibility'); } .letter-icon { - @include post.post-icon($name: 'letter'); + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + @include post.mask-image('letter'); } \ No newline at end of file diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index f8e16f4f79..dbe6155b75 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,9 +1,9 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - @include post.post-icon( - $name: 'accessibility', - // optional - $color: '#fc0' - ); + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + @include post.mask-image('accessibility'); } diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 6eb7da20b0..1341b33c0c 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -102,11 +102,11 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.mask-image(3020); content: ''; display: inline-block; width: icons.$icon-size-default; height: icons.$icon-size-default; + @include icons-mx.mask-image(3020); } } } diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 17caa19b81..0516a7d36f 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -46,7 +46,13 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.post-icon($name: 'closex', $height: $icon-size, $width: $icon-size); + + display: inline-block; + width: $icon-size; + height: $icon-size; + vertical-align: -0.15em; + background-color: currentColor; + @include icons-mx.mask-image('closex'); } &:hover::after { @@ -108,11 +114,13 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: Highlight; } - @include icons-mx.post-icon( - $name: 'checkmark', - $width: tokens.get('chip-selectable-icon'), - $height: tokens.get('chip-selectable-icon') - ); + + display: inline-block; + width: tokens.get('chip-selectable-icon'); + height: tokens.get('chip-selectable-icon'); + vertical-align: -0.15em; + background-color: currentColor; + @include icons-mx.mask-image('checkmark'); } .badge { diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index d3b7727a06..48fdd27ae7 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -216,12 +216,13 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icon-mx.post-icon( - $name: 'success-solid', - $color: tokens.get('post-validation-success', components.$post-validation), - $width: tokens.get('input-sizing-icon'), - $height: tokens.get('input-sizing-icon') - ); + + display: inline-block; + width: tokens.get('input-sizing-icon'); + height: tokens.get('input-sizing-icon'); + vertical-align: -0.15em; + color: tokens.get('post-validation-success', components.$post-validation); + @include icon-mx.mask-image('success-solid'); } &:has(> input.form-control.is-invalid:not(:disabled))::after, @@ -233,12 +234,13 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icon-mx.post-icon( - $name: 'warning-solid', - $color: tokens.get('post-validation-error', components.$post-validation), - $width: tokens.get('input-sizing-icon'), - $height: tokens.get('input-sizing-icon') - ); + + display: inline-block; + width: tokens.get('input-sizing-icon'); + height: tokens.get('input-sizing-icon'); + vertical-align: -0.15em; + color: tokens.get('post-validation-error', components.$post-validation); + @include icon-mx.mask-image('warning-solid'); } > input.form-control ~ label { diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index f9284c33ac..c54d9ebe45 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -68,12 +68,13 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icon-mixin.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); + @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } + @include icon-mixin.mask-image('3035'); } } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 7556f8124c..4954d5f209 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -172,7 +172,6 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.mask-image(2105); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); @@ -181,25 +180,26 @@ tokens.$default-map: utilities.$post-spacing; width: stepper.$stepper-indicator-check-icon-size; transition: stepper.$stepper-indicator-transition; color: stepper.$stepper-indicator-color; - + .stepper-item:first-child > & { left: calc( (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2 - ); - } - - .stepper-item:not(:first-child, :last-child) > & { - left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); - } - - .stepper-item:last-child > & { - right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); - } - - // show only for completed steps - .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { - content: ''; - } + ); + } + + .stepper-item:not(:first-child, :last-child) > & { + left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); + } + + .stepper-item:last-child > & { + right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); + } + + // show only for completed steps + .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { + content: ''; + } + @include icons-mx.mask-image('2105'); } // hover/focus state diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 3b06e7ff1d..ec23bb84f3 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -10,11 +10,13 @@ @use './../utilities/env-variables' as icon-version; @mixin mask-image($name) { - $icon: icon-fn.get-svg-url($name); - mask-image: url('#{$icon}'); + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-mask-image: var(--post-icon-#{$name}); + 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; + @include custom-property($name); } $loaded-custom-properties: () !default; diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 8056b0e7bb..38bced3c82 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -17,11 +17,11 @@ } &::before { - @include icons.mask-image(2043); content: ''; display: block; height: close.$close-size; width: close.$close-size; + @include icons.mask-image(2043); } @include utilities.not-disabled-focus-hover() { From 3a5855d0636e1e0963bf4e8a6c2f9586c77fc8bc Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 17:47:33 +0200 Subject: [PATCH 068/159] replaced the `post-icon` with `icon` mixin --- .../src/components/post-mainnavigation/post-mainnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index e5f2f8d5e3..a7ee92878a 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -47,9 +47,9 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.mask-image(2113); height: 24px; width: 24px; + @include icons.mask-image(2113); } @include utilities.high-contrast-mode() { From de4c7b92801ab18cbacf97d6316d6115c56e84fc Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 17:50:39 +0200 Subject: [PATCH 069/159] removed `post-icon` --- packages/styles/src/mixins/_icons.scss | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index ec23bb84f3..cddd167b00 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -30,28 +30,6 @@ $loaded-custom-properties: () !default; } } -@mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { - display: inline-block; - width: $width; - height: $height; - vertical-align: -0.15em; - background-color: currentColor; - color: $color; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-image: var(--post-icon-#{$name}); - mask-image: var(--post-icon-#{$name}); - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-position: center center; - mask-position: center center; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-size: 100%; - mask-size: 100%; - @include custom-property($name); -} - @mixin remove-icon() { mask-image: none; } From 90c7bead274cd4b2d89e4ea9f4dd9074a00ffd8e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 17:58:20 +0200 Subject: [PATCH 070/159] fixed code repetition --- .../src/stories/foundations/icons/icon.styles.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 11513961ff..81d823739b 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -27,18 +27,18 @@ $resizer-max-width: 64px; background-color: post.$info; } -.my-accessibility-icon { +.my-accessibility-icon, +.letter-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; +} + +.my-accessibility-icon { @include post.mask-image('accessibility'); } .letter-icon { - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.15em; @include post.mask-image('letter'); } \ No newline at end of file From 482760ed6b08bcb387e0a97d5acb61d64cff5199 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:01:51 +0200 Subject: [PATCH 071/159] removed redundant code --- packages/styles/src/components/chip.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 0516a7d36f..e0639d8244 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -51,7 +51,6 @@ button.chip-dismissible { width: $icon-size; height: $icon-size; vertical-align: -0.15em; - background-color: currentColor; @include icons-mx.mask-image('closex'); } @@ -119,7 +118,6 @@ button.chip-dismissible { width: tokens.get('chip-selectable-icon'); height: tokens.get('chip-selectable-icon'); vertical-align: -0.15em; - background-color: currentColor; @include icons-mx.mask-image('checkmark'); } From 5ca5577eab32b1beea796240b26026b3dd528e96 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:04:29 +0200 Subject: [PATCH 072/159] reverted redundant changes --- .../src/stories/foundations/icons/mixin.sample.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index dbe6155b75..a59194d561 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -4,6 +4,5 @@ display: inline-block; width: 1em; height: 1em; - vertical-align: -0.15em; @include post.mask-image('accessibility'); } From e0392f942a6cd765322e48340556bac1b1ecde49 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:13:23 +0200 Subject: [PATCH 073/159] removed repetition --- packages/styles/src/components/chip.scss | 16 ++++++------- .../styles/src/components/form-input.scss | 23 +++++++++++-------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index e0639d8244..062bf0e56a 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -6,6 +6,14 @@ tokens.$default-map: components.$post-chip; +// Common icon styles +button.chip-dismissible::after, +.chip-selectable input:checked + label::before { + display: inline-block; + vertical-align: -0.15em; + background-color: currentColor; +} + button.chip-dismissible { $button-size: tokens.get('close-size', components.$post-close); $icon-size: tokens.get('close-icon-size', components.$post-close); @@ -47,10 +55,6 @@ button.chip-dismissible { background-color: ButtonText; } - display: inline-block; - width: $icon-size; - height: $icon-size; - vertical-align: -0.15em; @include icons-mx.mask-image('closex'); } @@ -114,10 +118,6 @@ button.chip-dismissible { background-color: Highlight; } - display: inline-block; - width: tokens.get('chip-selectable-icon'); - height: tokens.get('chip-selectable-icon'); - vertical-align: -0.15em; @include icons-mx.mask-image('checkmark'); } diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 48fdd27ae7..b4a54093ea 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -207,6 +207,17 @@ input.form-control { .form-floating { position: relative; + // Shared icon styling for validation icons + &:has(> input.form-control.is-valid:not(:disabled))::after, + &:has(> input.form-control:-webkit-autofill.is-valid)::after, + &:has(> input.form-control.is-invalid:not(:disabled))::after, + &:has(> input.form-control:-webkit-autofill.is-invalid)::after { + display: inline-block; + width: tokens.get('input-sizing-icon'); + height: tokens.get('input-sizing-icon'); + vertical-align: -0.15em; + } + &:has(> input.form-control.is-valid:not(:disabled))::after, &:has(> input.form-control:-webkit-autofill.is-valid)::after { content: ''; @@ -217,12 +228,8 @@ input.form-control { z-index: 2; pointer-events: none; - display: inline-block; - width: tokens.get('input-sizing-icon'); - height: tokens.get('input-sizing-icon'); - vertical-align: -0.15em; color: tokens.get('post-validation-success', components.$post-validation); - @include icon-mx.mask-image('success-solid'); + @include icons-mx.mask-image('success-solid'); } &:has(> input.form-control.is-invalid:not(:disabled))::after, @@ -235,12 +242,8 @@ input.form-control { z-index: 1; pointer-events: none; - display: inline-block; - width: tokens.get('input-sizing-icon'); - height: tokens.get('input-sizing-icon'); - vertical-align: -0.15em; color: tokens.get('post-validation-error', components.$post-validation); - @include icon-mx.mask-image('warning-solid'); + @include icons-mx.mask-image('warning-solid'); } > input.form-control ~ label { From 94506d9e064aceba1dfbfc6b2c81fe5ef4d60d72 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:15:37 +0200 Subject: [PATCH 074/159] removed many selectors --- packages/styles/src/components/form-input.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index b4a54093ea..dca5363c48 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -207,11 +207,7 @@ input.form-control { .form-floating { position: relative; - // Shared icon styling for validation icons - &:has(> input.form-control.is-valid:not(:disabled))::after, - &:has(> input.form-control:-webkit-autofill.is-valid)::after, - &:has(> input.form-control.is-invalid:not(:disabled))::after, - &:has(> input.form-control:-webkit-autofill.is-invalid)::after { + &::after { display: inline-block; width: tokens.get('input-sizing-icon'); height: tokens.get('input-sizing-icon'); From e3e2e569eea6a6ce9825fe4bbe1b25a13e1c1224 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:17:23 +0200 Subject: [PATCH 075/159] removed redundant comment --- packages/styles/src/components/chip.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 062bf0e56a..2df1849fe6 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -6,7 +6,6 @@ tokens.$default-map: components.$post-chip; -// Common icon styles button.chip-dismissible::after, .chip-selectable input:checked + label::before { display: inline-block; From 9e2e64283d3dec283e5f15cfc92bc662de805d0c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:20:42 +0200 Subject: [PATCH 076/159] fixed typo --- packages/styles/src/components/form-input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index dca5363c48..338f08fde2 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -3,7 +3,7 @@ @use './../tokens/elements'; @use './../mixins/forms' as forms-mx; @use './../mixins/utilities'; -@use './../mixins/icons' as icon-mx; +@use './../mixins/icons' as icons-mx; @use './../variables/components/forms'; tokens.$default-map: components.$post-text-input; From dda2f57c2518e22f0cf55e34bb449d7f431acf8f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 18:24:46 +0200 Subject: [PATCH 077/159] fixed the sample --- .../src/stories/foundations/icons/mixin.sample.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index a59194d561..05e6b0c30b 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,8 +1,5 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - display: inline-block; - width: 1em; - height: 1em; @include post.mask-image('accessibility'); } From bd1d069700d6373f3183b663a71f11c928b97a17 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 19:59:17 +0200 Subject: [PATCH 078/159] fixed linting --- packages/styles/src/components/chip.scss | 4 +-- .../styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 34 +++++++++---------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 2df1849fe6..aa5254d512 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -53,7 +53,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - + @include icons-mx.mask-image('closex'); } @@ -116,7 +116,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: Highlight; } - + @include icons-mx.mask-image('checkmark'); } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index c54d9ebe45..8f9841eaaa 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -69,7 +69,7 @@ ul.list-check { height: tokens.get('list-check-sizing-icon'); content: ''; color: tokens.get('list-check-color-icon-fg'); - + @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 4954d5f209..44e46f23c4 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -180,26 +180,26 @@ tokens.$default-map: utilities.$post-spacing; width: stepper.$stepper-indicator-check-icon-size; transition: stepper.$stepper-indicator-transition; color: stepper.$stepper-indicator-color; - + .stepper-item:first-child > & { left: calc( (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2 - ); - } - - .stepper-item:not(:first-child, :last-child) > & { - left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); - } - - .stepper-item:last-child > & { - right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); - } - - // show only for completed steps - .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { - content: ''; - } - @include icons-mx.mask-image('2105'); + ); + } + + .stepper-item:not(:first-child, :last-child) > & { + left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2)); + } + + .stepper-item:last-child > & { + right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); + } + + // show only for completed steps + .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { + content: ''; + } + @include icons-mx.mask-image('2105'); } // hover/focus state From 83daa75a413dd02b0973f9265b21cd6393e91f4c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 20:02:41 +0200 Subject: [PATCH 079/159] fixed linting --- packages/styles/src/components/form-input.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 338f08fde2..31f42f369e 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -223,7 +223,6 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - color: tokens.get('post-validation-success', components.$post-validation); @include icons-mx.mask-image('success-solid'); } @@ -237,7 +236,6 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - color: tokens.get('post-validation-error', components.$post-validation); @include icons-mx.mask-image('warning-solid'); } From 387845dba777a22463a113a09cc6c641167d5594 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 23:01:07 +0200 Subject: [PATCH 080/159] fixed linting --- packages/styles/src/components/chip.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index aa5254d512..e480203624 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -49,11 +49,13 @@ button.chip-dismissible { &::after { content: ''; margin-left: calc((#{$button-size} - #{$icon-size}) / 2); + width: tokens.get('close-icon-size', components.$post-close); + height: tokens.get('close-icon-size', components.$post-close); @include utilities.high-contrast-mode() { background-color: ButtonText; } - + @include icons-mx.mask-image('closex'); } @@ -116,7 +118,8 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: Highlight; } - + width: tokens.get('chip-selectable-icon'); + height: tokens.get('chip-selectable-icon'); @include icons-mx.mask-image('checkmark'); } From a53aa32b10c8da154e1434df15078b7cc626402c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 23:03:55 +0200 Subject: [PATCH 081/159] fixed linting --- packages/styles/src/components/chip.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index e480203624..f32121800a 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -55,7 +55,6 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.mask-image('closex'); } From ffa243ebb39f10d46e4f2d014d2a1f582c325d3f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 23:10:34 +0200 Subject: [PATCH 082/159] changed the sample --- .../src/stories/foundations/icons/mixin.sample.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 05e6b0c30b..21f8598823 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,5 +1,11 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { + // Add common icon properties + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + @include post.mask-image('accessibility'); } From b9a9d6f6a4ec9f3200bb690653ed0097a0fd4c27 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 6 Oct 2025 23:21:18 +0200 Subject: [PATCH 083/159] added a comment --- .../src/stories/foundations/icons/mixin.sample.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 21f8598823..d8c22ef83c 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -7,5 +7,6 @@ height: 1em; vertical-align: -0.15em; + // Use mask-image mixin with icon name or number (e.g., 'accessibility', '2105') @include post.mask-image('accessibility'); } From bc23198b9cc886d1ab15a4181ee4b9cf4f7fd21c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 09:15:44 +0200 Subject: [PATCH 084/159] fixed comment --- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index d8c22ef83c..04b393c17e 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -7,6 +7,6 @@ height: 1em; vertical-align: -0.15em; - // Use mask-image mixin with icon name or number (e.g., 'accessibility', '2105') + // Use mask-image mixin with icon name (e.g., 'accessibility', '2105') @include post.mask-image('accessibility'); } From 5177e37a2d5ef0133906a29b19c346e6e5bb2c51 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:03:23 +0200 Subject: [PATCH 085/159] small fixes --- packages/styles/src/components/form-input.scss | 6 ++---- packages/styles/src/components/validation.scss | 4 ++-- packages/styles/src/mixins/_icons.scss | 6 +++--- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 31f42f369e..831e058f6b 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -223,8 +223,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - color: tokens.get('post-validation-success', components.$post-validation); - @include icons-mx.mask-image('success-solid'); + @include icons-mx.mask-image('success-solid', tokens.get('post-validation-success', components.$post-validation)); } &:has(> input.form-control.is-invalid:not(:disabled))::after, @@ -236,8 +235,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - color: tokens.get('post-validation-error', components.$post-validation); - @include icons-mx.mask-image('warning-solid'); + @include icons-mx.mask-image('warning-solid', tokens.get('post-validation-success', components.$post-validation)); } > input.form-control ~ label { diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 5503faf5ed..70cf4adc14 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -111,10 +111,10 @@ input[type='radio'], } ~ .invalid-feedback::before { - @include icon-mixin.mask-image('warning'); + @include icon-mixin.mask-image('warning-solid'); } ~ .valid-feedback::before { - @include icon-mixin.mask-image('success'); + @include icon-mixin.mask-image('success-solid'); } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index cddd167b00..e6aab0335c 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,12 +9,12 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; -@mixin mask-image($name) { +@mixin mask-image($name, $color: currentColor) { /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-mask-image: var(--post-icon-#{$name}); mask-image: var(--post-icon-#{$name}); - background-color: currentColor; - color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color + background-color: $color; + color: $color; // Required in this case with usage of forced-color-adjust: preserve-parent-color forced-color-adjust: preserve-parent-color; @include custom-property($name); } From e05d3084aa52a477a1dac7523d7ca09becc60af1 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:19:39 +0200 Subject: [PATCH 086/159] color fixes --- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 8f9841eaaa..e950bc8232 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -74,7 +74,7 @@ ul.list-check { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } - @include icon-mixin.mask-image('3035'); + @include icon-mixin.mask-image('3035', tokens.get('list-check-color-icon-fg')); } } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 44e46f23c4..4ea71e67dd 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -199,7 +199,7 @@ tokens.$default-map: utilities.$post-spacing; .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { content: ''; } - @include icons-mx.mask-image('2105'); + @include icons-mx.mask-image('2105', stepper.$stepper-indicator-color); } // hover/focus state @@ -224,7 +224,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon &::after { - color: stepper.$stepper-indicator-hover-color; + @include icons-mx.mask-image('2105', stepper.$stepper-indicator-hover-color); } } } From c2195c1a1ce04adcf3a72083576c987ba63733ec Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:27:12 +0200 Subject: [PATCH 087/159] added a changeset --- .changeset/giant-clocks-chew.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .changeset/giant-clocks-chew.md diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md new file mode 100644 index 0000000000..28f03ec87b --- /dev/null +++ b/.changeset/giant-clocks-chew.md @@ -0,0 +1,30 @@ +--- +'@swisspost/design-system-styles': patch +--- + +The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. + +BEFORE: +```scss +.my-icon { + @include post.post-icon( + $name: 'accessibility', + // optional + $color: '#fc0', + $width: 1em, + $height: 1em + ); +} + +AFTER: +```scss +.my-icon { + // Add common icon properties manually + display: inline-block; + width: 1em; + height: 1em; + vertical-align: -0.15em; + + // Use mask-image mixin with optional color parameter + @include post.mask-image('accessibility', '#fc0'); +} From 28b200f2e9c60e2593f6e0d082bb2ae60a100ec9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:28:04 +0200 Subject: [PATCH 088/159] added a changeset --- .changeset/giant-clocks-chew.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 28f03ec87b..1b45ef2fea 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -15,6 +15,7 @@ BEFORE: $height: 1em ); } +``` AFTER: ```scss @@ -28,3 +29,4 @@ AFTER: // Use mask-image mixin with optional color parameter @include post.mask-image('accessibility', '#fc0'); } +``` \ No newline at end of file From 68f2ab62deee3d82f1a26aab1aebd3b0a20984c3 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:28:39 +0200 Subject: [PATCH 089/159] added a changeset --- .changeset/giant-clocks-chew.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 1b45ef2fea..439c46dad8 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -1,5 +1,5 @@ --- -'@swisspost/design-system-styles': patch +'@swisspost/design-system-styles': major --- The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. From f5d64e4d4720fe8271725d6aa5519a8d3c6a45d2 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:33:56 +0200 Subject: [PATCH 090/159] refactored the changeset --- .changeset/giant-clocks-chew.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 439c46dad8..29413f7f00 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -26,7 +26,10 @@ AFTER: height: 1em; vertical-align: -0.15em; - // Use mask-image mixin with optional color parameter - @include post.mask-image('accessibility', '#fc0'); + @include post.mask-image( + $name: 'accessibility', + // optional + $color: '#fc0', + ); } ``` \ No newline at end of file From 8e2aec94e2c4001b7da71f465e74722e668b712f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:39:12 +0200 Subject: [PATCH 091/159] adjusted the changeset --- .changeset/giant-clocks-chew.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 29413f7f00..3b48716adb 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -1,5 +1,6 @@ --- '@swisspost/design-system-styles': major +'@swisspost/design-system-icons': major --- The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. From 5452a5910a3879db3be43d3f552cb165401598a7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:42:43 +0200 Subject: [PATCH 092/159] changed the mixin sample --- .../src/stories/foundations/icons/mixin.sample.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 04b393c17e..fefc20c9cc 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,12 +1,15 @@ @use '@swisspost/design-system-styles/core' as post; .my-icon { - // Add common icon properties + // Add common icon properties manually display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; - // Use mask-image mixin with icon name (e.g., 'accessibility', '2105') - @include post.mask-image('accessibility'); + @include post.mask-image( + $name: 'accessibility', + // optional + $color: '#fc0', + ); } From 5b40c6232b96bb66609dd996580ec8fbc9afd5f5 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:51:46 +0200 Subject: [PATCH 093/159] small changes to styles --- .../styles-primeng/src/lib/primeng-theme/_icons.scss | 5 +++-- packages/styles/src/components/chip.scss | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 0b4cef923e..055f62e4fc 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,14 +1,15 @@ @use '@swisspost/design-system-styles/core' as post; @mixin custom-icon($icon) { - @include post.mask-image($icon); display: inline-block; height: 1rem; width: 1rem; - + > * { display: none; } + + @include post.mask-image($icon); } plusicon { diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index f32121800a..d006881dd8 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -10,7 +10,6 @@ button.chip-dismissible::after, .chip-selectable input:checked + label::before { display: inline-block; vertical-align: -0.15em; - background-color: currentColor; } button.chip-dismissible { From e5858a84121691f0c14915d0ed40adf8fc51ff76 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 10:56:44 +0200 Subject: [PATCH 094/159] fixed the wrong token value --- packages/styles/src/components/form-input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 831e058f6b..c72a254e69 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -235,7 +235,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image('warning-solid', tokens.get('post-validation-success', components.$post-validation)); + @include icons-mx.mask-image('warning-solid', tokens.get('post-validation-error', components.$post-validation)); } > input.form-control ~ label { From 8e8eda11429342860d56b84c7fc723a64e3f57ae Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 11:04:50 +0200 Subject: [PATCH 095/159] fixed linting --- packages/styles/src/components/form-input.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index c72a254e69..7ee2e7a040 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -223,7 +223,10 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.mask-image('success-solid', tokens.get('post-validation-success', components.$post-validation)); + @include icons-mx.mask-image( + 'success-solid', + tokens.get('post-validation-success', components.$post-validation) + ); } &:has(> input.form-control.is-invalid:not(:disabled))::after, @@ -235,7 +238,10 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image('warning-solid', tokens.get('post-validation-error', components.$post-validation)); + @include icons-mx.mask-image( + 'warning-solid', + tokens.get('post-validation-error', components.$post-validation) + ); } > input.form-control ~ label { From 6f35921bdad16001fd88b9e11c65fc19c085b3d0 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 11:07:20 +0200 Subject: [PATCH 096/159] fixed linting --- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 055f62e4fc..fa785e40f8 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -4,7 +4,6 @@ display: inline-block; height: 1rem; width: 1rem; - > * { display: none; } From b510d8df15f76a1d56af0645f223b2a90a887952 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 7 Oct 2025 11:09:21 +0200 Subject: [PATCH 097/159] fixed linting --- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index fa785e40f8..882027f402 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -4,6 +4,7 @@ display: inline-block; height: 1rem; width: 1rem; + > * { display: none; } From d470dfef1dd8f535dc04858dced5c18abe1b3557 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 8 Oct 2025 17:19:28 +0200 Subject: [PATCH 098/159] test --- packages/styles/src/components/card.scss | 2 ++ packages/styles/src/components/chip.scss | 3 +++ packages/styles/src/components/form-input.scss | 9 +++++---- packages/styles/src/components/list-check.scss | 4 +++- packages/styles/src/components/stepper.scss | 9 +++------ packages/styles/src/components/validation.scss | 3 +++ packages/styles/src/mixins/_icons.scss | 16 +++++++--------- packages/styles/src/placeholders/_close.scss | 2 ++ 8 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 1341b33c0c..64ce5ae893 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -10,6 +10,8 @@ tokens.$default-map: components.$post-cards; +@include icons-mx.custom-property(3020); + .card { display: flex; flex-direction: column; diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index d006881dd8..2bcd707871 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -6,6 +6,9 @@ tokens.$default-map: components.$post-chip; +@include icons-mx.custom-property('closex'); +@include icons-mx.custom-property('checkmark'); + button.chip-dismissible::after, .chip-selectable input:checked + label::before { display: inline-block; diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 7ee2e7a040..f0bee4aebd 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -8,6 +8,9 @@ tokens.$default-map: components.$post-text-input; +@include icons-mx.custom-property('success-solid'); +@include icons-mx.custom-property('warning-solid'); + input.form-control { display: block; width: 100%; @@ -224,8 +227,7 @@ input.form-control { z-index: 2; pointer-events: none; @include icons-mx.mask-image( - 'success-solid', - tokens.get('post-validation-success', components.$post-validation) + 'success-solid' ); } @@ -239,8 +241,7 @@ input.form-control { z-index: 1; pointer-events: none; @include icons-mx.mask-image( - 'warning-solid', - tokens.get('post-validation-error', components.$post-validation) + 'warning-solid' ); } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index e950bc8232..03fd7dcae8 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -6,6 +6,8 @@ tokens.$default-map: components.$post-listcheck; +@include icon-mixin.custom-property('3035'); + ul.list-check { @include utilities.reset-list; display: flex; @@ -74,7 +76,7 @@ ul.list-check { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } - @include icon-mixin.mask-image('3035', tokens.get('list-check-color-icon-fg')); + @include icon-mixin.mask-image('3035'); } } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 4ea71e67dd..15ed39e81e 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -12,6 +12,8 @@ tokens.$default-map: utilities.$post-spacing; +@include icons-mx.custom-property(2105); + // for backward compatibility .stepper-container { margin-bottom: 20px; @@ -199,7 +201,7 @@ tokens.$default-map: utilities.$post-spacing; .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { content: ''; } - @include icons-mx.mask-image('2105', stepper.$stepper-indicator-color); + @include icons-mx.mask-image('2105'); } // hover/focus state @@ -221,11 +223,6 @@ tokens.$default-map: utilities.$post-spacing; color: stepper.$stepper-indicator-hover-color; background-color: stepper.$stepper-indicator-hover-bg; } - - // check icon - &::after { - @include icons-mx.mask-image('2105', stepper.$stepper-indicator-hover-color); - } } } diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 70cf4adc14..1d2ab656bc 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -6,6 +6,9 @@ tokens.$default-map: components.$post-validation; +@include icon-mixin.custom-property('warning-solid'); +@include icon-mixin.custom-property('success-solid'); + /* Default feedback message classes */ diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index e6aab0335c..808bbfd9b3 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,21 +9,19 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; -@mixin mask-image($name, $color: currentColor) { - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-image: var(--post-icon-#{$name}); +@mixin mask-image($name) { mask-image: var(--post-icon-#{$name}); - background-color: $color; - color: $color; // Required in this case with usage of forced-color-adjust: preserve-parent-color + background-color: currentColor; + color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color forced-color-adjust: preserve-parent-color; - @include custom-property($name); } -$loaded-custom-properties: () !default; + +$loaded-icons: () !default; @mixin custom-property($name, $path: '../icons/temp') { - @if list.index($loaded-custom-properties, $name) == null { - $loaded-custom-properties: list.append($loaded-custom-properties, $name) !global; + @if list.index($loaded-icons, $name) == null { + $loaded-icons: list.append($loaded-icons, $name) !global; @at-root { @include meta.load-css('#{$path}/#{$name}'); } diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 38bced3c82..0007afb029 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -5,6 +5,8 @@ @use './../variables/commons'; @use './../variables/components/close'; +@include icons.custom-property(2043); + %btn-close { @include button.reset-button; border-radius: close.$close-border-radius; From 7ba292f7aebbc816eb9b11b0fbf5799676b685af Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 10:48:52 +0200 Subject: [PATCH 099/159] slight changes --- packages/styles/src/components/form-input.scss | 8 ++------ packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 7 ++++++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index f0bee4aebd..705d5d7903 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -226,9 +226,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.mask-image( - 'success-solid' - ); + @include icons-mx.mask-image('success-solid'); } &:has(> input.form-control.is-invalid:not(:disabled))::after, @@ -240,9 +238,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image( - 'warning-solid' - ); + @include icons-mx.mask-image('warning-solid'); } > input.form-control ~ label { diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 03fd7dcae8..dfd63295c1 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -70,13 +70,13 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; + @include icon-mixin.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } - @include icon-mixin.mask-image('3035'); } } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 15ed39e81e..9ffb4c6c76 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -174,6 +174,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { + @include icons-mx.mask-image(2105); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); @@ -201,7 +202,6 @@ tokens.$default-map: utilities.$post-spacing; .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { content: ''; } - @include icons-mx.mask-image('2105'); } // hover/focus state @@ -223,6 +223,11 @@ tokens.$default-map: utilities.$post-spacing; color: stepper.$stepper-indicator-hover-color; background-color: stepper.$stepper-indicator-hover-bg; } + + // check icon + &::after { + color: stepper.$stepper-indicator-hover-color; + } } } From 18b4ea92eb240b554d1f74223eeda41e5a335985 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 10:52:52 +0200 Subject: [PATCH 100/159] fixed the coloring --- packages/styles/src/components/form-input.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 705d5d7903..ba7b470cb8 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -219,6 +219,7 @@ input.form-control { &:has(> input.form-control.is-valid:not(:disabled))::after, &:has(> input.form-control:-webkit-autofill.is-valid)::after { + @include icons-mx.mask-image('success-solid'); content: ''; position: absolute; top: calc(#{tokens.get('input-sizing-height')} / 2); @@ -226,11 +227,12 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.mask-image('success-solid'); + color: tokens.get('post-validation-success', components.$post-validation); } &:has(> input.form-control.is-invalid:not(:disabled))::after, &:has(> input.form-control:-webkit-autofill.is-invalid)::after { + @include icons-mx.mask-image('warning-solid'); content: ''; position: absolute; top: calc(#{tokens.get('input-sizing-height')} / 2); @@ -238,7 +240,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image('warning-solid'); + color: tokens.get('post-validation-error', components.$post-validation); } > input.form-control ~ label { From 29527a0e67dc9ec7ed6ad186007c2503c02912fa Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:15:22 +0200 Subject: [PATCH 101/159] small refactors --- .changeset/giant-clocks-chew.md | 16 +++++++++------- .../documentation/.storybook/styles/preview.scss | 5 +++++ .../stories/foundations/icons/icon.styles.scss | 3 +++ .../stories/foundations/icons/mixin.sample.scss | 10 +++++----- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 3b48716adb..bd836df145 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. +The `post-icon` mixin has been removed and replaced with the more flexible `mask-image` mixin. Icon CSS must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss @@ -20,6 +20,9 @@ BEFORE: AFTER: ```scss +// load icon CSS at the top of your file +@include post.custom-property('accessibility'); + .my-icon { // Add common icon properties manually display: inline-block; @@ -27,10 +30,9 @@ AFTER: height: 1em; vertical-align: -0.15em; - @include post.mask-image( - $name: 'accessibility', - // optional - $color: '#fc0', - ); + @include post.mask-image('accessibility'); + + // optional + color: #fc0; } -``` \ No newline at end of file +``` diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 035b372f3f..7ee0580882 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -12,6 +12,11 @@ tokens.$default-map: utilities.$post-color; +@include post.custom-property('chevrondown'); +@include post.custom-property('resizeexpand'); +@include post.custom-property('link'); +@include post.custom-property('code'); + $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; // Mixin for toolbar button icons diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 81d823739b..2023ab90e2 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -1,5 +1,8 @@ @use '@swisspost/design-system-styles/core' as post; +@include post.load-icon-css('accessibility'); +@include post.load-icon-css('letter'); + $resizer-padding: 1rem; $resizer-border-width: 1px; $resizer-border-color: #999; diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index fefc20c9cc..90c0a2408a 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,5 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; +@include post.load-icon-css('accessibility'); + .my-icon { // Add common icon properties manually display: inline-block; @@ -7,9 +9,7 @@ height: 1em; vertical-align: -0.15em; - @include post.mask-image( - $name: 'accessibility', - // optional - $color: '#fc0', - ); + @include post.mask-image('accessibility'); + // Set color separately - the mask will use currentColor + color: #fc0; } From 820ee7ccc5390115ec59fcf5029459af80c245f4 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:17:52 +0200 Subject: [PATCH 102/159] small fix --- .changeset/giant-clocks-chew.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index bd836df145..98ed7562b9 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been removed and replaced with the more flexible `mask-image` mixin. Icon CSS must now be loaded separately using the `custom-property` mixin at the top of the file. +The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. Icon must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss @@ -24,7 +24,7 @@ AFTER: @include post.custom-property('accessibility'); .my-icon { - // Add common icon properties manually + // add common icon properties manually display: inline-block; width: 1em; height: 1em; From 755baf79b0ca0d0b24867861ccdefae4ccb640ce Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:19:02 +0200 Subject: [PATCH 103/159] small change --- .../src/stories/foundations/icons/mixin.sample.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 90c0a2408a..d483feb5e4 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,15 +1,16 @@ @use '@swisspost/design-system-styles/core' as post; +// load icon CSS at the top of your file @include post.load-icon-css('accessibility'); .my-icon { - // Add common icon properties manually + // add common icon properties manually display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; @include post.mask-image('accessibility'); - // Set color separately - the mask will use currentColor + // optional color: #fc0; } From c34507f8b409122bf018f7c46677f8e52c37dc83 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:19:48 +0200 Subject: [PATCH 104/159] small change --- .changeset/giant-clocks-chew.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 98ed7562b9..f1ccc6ec8a 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. Icon must now be loaded separately using the `custom-property` mixin at the top of the file. +The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss From db153f5c1c46046f5e509d1e055de14fcde78372 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:30:44 +0200 Subject: [PATCH 105/159] fixed litning --- packages/styles/src/components/stepper.scss | 2 +- packages/styles/src/mixins/_icons.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 9ffb4c6c76..7a2957ae37 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -223,7 +223,7 @@ tokens.$default-map: utilities.$post-spacing; color: stepper.$stepper-indicator-hover-color; background-color: stepper.$stepper-indicator-hover-bg; } - + // check icon &::after { color: stepper.$stepper-indicator-hover-color; diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 808bbfd9b3..0fceaafc1e 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,7 +16,6 @@ forced-color-adjust: preserve-parent-color; } - $loaded-icons: () !default; @mixin custom-property($name, $path: '../icons/temp') { From d32e767c77c87a9c2b234c871f7d50378d6e0e08 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:37:04 +0200 Subject: [PATCH 106/159] fix --- .../src/stories/foundations/icons/icon.styles.scss | 4 ++-- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 2023ab90e2..d0044e5356 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.load-icon-css('accessibility'); -@include post.load-icon-css('letter'); +@include post.custom-property('accessibility'); +@include post.custom-property('letter'); $resizer-padding: 1rem; $resizer-border-width: 1px; diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index d483feb5e4..3d22c87ad2 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // load icon CSS at the top of your file -@include post.load-icon-css('accessibility'); +@include post.custom-property('accessibility'); .my-icon { // add common icon properties manually From c18e4e834b966d032b6d69cff1ef0f6072c9c4bc Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 11:53:50 +0200 Subject: [PATCH 107/159] fixed mainnaviagtion --- .../src/components/post-mainnavigation/post-mainnavigation.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index a7ee92878a..051dc18daa 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -10,6 +10,8 @@ @use '@swisspost/design-system-styles/variables/elevation'; @use '@swisspost/design-system-styles/variables/color'; +@include icons.custom-property('2113'); + post-mainnavigation { // reset links and buttons post-list-item { From 6392127a2a0032acd9d440515dee9f5a8d989cae Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 12:27:43 +0200 Subject: [PATCH 108/159] changes comment --- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 3d22c87ad2..62c2ddcea1 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -// load icon CSS at the top of your file +// load icon at the top of your file @include post.custom-property('accessibility'); .my-icon { From e0c37fdbe5944ba10f09cca8ffeb805988fe5360 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 12:33:17 +0200 Subject: [PATCH 109/159] added icons --- .../src/lib/primeng-theme/_icons.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 882027f402..fe9ca6c22d 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,5 +1,18 @@ @use '@swisspost/design-system-styles/core' as post; +// Load all icon CSS files used in this component +@include post.custom-property('2040'); +@include post.custom-property('2015'); +@include post.custom-property('2113'); +@include post.custom-property('2060'); +@include post.custom-property('2127'); +@include post.custom-property('2112'); +@include post.custom-property('3026'); +@include post.custom-property('3022'); +@include post.custom-property('3035'); +@include post.custom-property('2043'); +@include post.custom-property('2070'); + @mixin custom-icon($icon) { display: inline-block; height: 1rem; From b60df82cdf7c521d1ad6bdbc7c98f96d925e1b5a Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 12:48:26 +0200 Subject: [PATCH 110/159] fixed naming --- packages/styles/src/mixins/_icons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 0fceaafc1e..3891dd288f 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,11 +16,11 @@ forced-color-adjust: preserve-parent-color; } -$loaded-icons: () !default; +$loaded-custom-properties: () !default; @mixin custom-property($name, $path: '../icons/temp') { - @if list.index($loaded-icons, $name) == null { - $loaded-icons: list.append($loaded-icons, $name) !global; + @if list.index($loaded-custom-properties, $name) == null { + $loaded-custom-properties: list.append($loaded-custom-properties, $name) !global; @at-root { @include meta.load-css('#{$path}/#{$name}'); } From a7aa64f122d9dcdfa1988eb7ca2fc7dae303069c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 14:45:41 +0200 Subject: [PATCH 111/159] removed redundant property --- packages/styles/src/mixins/_icons.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 3891dd288f..e86d84584a 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,14 +16,9 @@ forced-color-adjust: preserve-parent-color; } -$loaded-custom-properties: () !default; - @mixin custom-property($name, $path: '../icons/temp') { - @if list.index($loaded-custom-properties, $name) == null { - $loaded-custom-properties: list.append($loaded-custom-properties, $name) !global; - @at-root { - @include meta.load-css('#{$path}/#{$name}'); - } + @at-root { + @include meta.load-css('#{$path}/#{$name}'); } } From f47e92560fd8cad3d2051aa19cf6e6e20be01443 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Thu, 9 Oct 2025 14:54:42 +0200 Subject: [PATCH 112/159] unified naming --- packages/styles/src/components/list-check.scss | 6 +++--- packages/styles/src/components/validation.scss | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index dfd63295c1..13c14536d6 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -1,12 +1,12 @@ @use '../functions/tokens'; -@use '../mixins/icons' as icon-mixin; +@use '../mixins/icons' as icons-mx; @use '../tokens/components'; @use '../mixins/media'; @use '../mixins/utilities'; tokens.$default-map: components.$post-listcheck; -@include icon-mixin.custom-property('3035'); +@include icons-mx.custom-property('3035'); ul.list-check { @include utilities.reset-list; @@ -70,7 +70,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icon-mixin.mask-image('3035'); + @include icons-mx.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 1d2ab656bc..fbde6d7890 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -1,13 +1,13 @@ @use 'sass:map'; @use '../functions/tokens'; @use '../functions/icons'; -@use './../mixins/icons' as icon-mixin; +@use './../mixins/icons' as icons-mx; @use '../tokens/components'; tokens.$default-map: components.$post-validation; -@include icon-mixin.custom-property('warning-solid'); -@include icon-mixin.custom-property('success-solid'); +@include icons-mx.custom-property('warning-solid'); +@include icons-mx.custom-property('success-solid'); /* Default feedback message classes @@ -114,10 +114,10 @@ input[type='radio'], } ~ .invalid-feedback::before { - @include icon-mixin.mask-image('warning-solid'); + @include icons-mx.mask-image('warning-solid'); } ~ .valid-feedback::before { - @include icon-mixin.mask-image('success-solid'); + @include icons-mx.mask-image('success-solid'); } } From d588993fc853d58d78fce86ce001ce1eb710c334 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Tue, 14 Oct 2025 11:19:12 +0200 Subject: [PATCH 113/159] Update .changeset/giant-clocks-chew.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/giant-clocks-chew.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index f1ccc6ec8a..22e8f03cf9 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been removed and replaced with more flexible `mask-image` mixin. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. +The `icon` and `post-icon` mixins have been removed and replaced with more flexible `mask-image` mixin. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss From fc88ab5acf7315459c9319a518a5bbee8e87528f Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Tue, 14 Oct 2025 11:20:19 +0200 Subject: [PATCH 114/159] Apply suggestion from @alizedebray MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 62c2ddcea1..ea5466353a 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // load icon at the top of your file -@include post.custom-property('accessibility'); +@include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { // add common icon properties manually From 48acac6e54a2b64753b6e071747b5c60f4eb0251 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Tue, 14 Oct 2025 11:21:20 +0200 Subject: [PATCH 115/159] Update comment on color style rule --- .changeset/giant-clocks-chew.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 22e8f03cf9..435864d311 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -32,7 +32,7 @@ AFTER: @include post.mask-image('accessibility'); - // optional + // optional, must be placed after the mixin color: #fc0; } ``` From 0ade46358bcc2f63de858f3f0623475717946770 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 14 Oct 2025 11:34:38 +0200 Subject: [PATCH 116/159] fixed the position of the mixin --- .../src/components/post-mainnavigation/post-mainnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index 051dc18daa..c469dddbc7 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -49,9 +49,9 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; + @include icons.mask-image(2113); height: 24px; width: 24px; - @include icons.mask-image(2113); } @include utilities.high-contrast-mode() { From a94dbf45c8defa92ccb5313c5ada453686f64d86 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:30:17 +0200 Subject: [PATCH 117/159] refactored custom-property mixin --- packages/styles/src/mixins/_icons.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index e86d84584a..d126fa08e1 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,9 +16,11 @@ forced-color-adjust: preserve-parent-color; } -@mixin custom-property($name, $path: '../icons/temp') { - @at-root { - @include meta.load-css('#{$path}/#{$name}'); +@mixin custom-property($names...) { + @each $name in $names { + @at-root { + @include meta.load-css('../icons/temp/#{$name}'); + } } } From 53686175a5b3dcb554e7fb195695c4c03901a5d9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:31:01 +0200 Subject: [PATCH 118/159] refactored custom-property mixin --- packages/documentation/.storybook/styles/preview.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 7ee0580882..e2e62555e7 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -12,10 +12,7 @@ tokens.$default-map: utilities.$post-color; -@include post.custom-property('chevrondown'); -@include post.custom-property('resizeexpand'); -@include post.custom-property('link'); -@include post.custom-property('code'); +@include post.custom-property('chevrondown', 'resizeexpand', 'link', 'code'); $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; From 495a2ad0b7d3c51508df8a3f7c279b571e9d1fac Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 15 Oct 2025 14:34:42 +0200 Subject: [PATCH 119/159] Apply suggestion from @alizedebray MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../src/stories/foundations/icons/mixin.sample.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index ea5466353a..38c64b7fc7 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -4,13 +4,10 @@ @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - // add common icon properties manually - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.15em; - @include post.mask-image('accessibility'); - // optional + + // optionally add styles for the icon color: #fc0; + width: 1em; + height: 1em; } From a3012ac1ac8eeae779c6d5dfa14694f3c7812b3b Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:35:56 +0200 Subject: [PATCH 120/159] simplified the code --- .../src/stories/foundations/icons/icon.styles.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index d0044e5356..91d603fbd7 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -1,7 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.custom-property('accessibility'); -@include post.custom-property('letter'); +@include post.custom-property('accessibility', 'letter'); $resizer-padding: 1rem; $resizer-border-width: 1px; From 22d4fd2bca990ca66c5b63b2b2824df8d11ea97d Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:37:11 +0200 Subject: [PATCH 121/159] refactoring --- .../styles-primeng/src/lib/primeng-theme/_icons.scss | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index fe9ca6c22d..b584f92c48 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,17 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // Load all icon CSS files used in this component -@include post.custom-property('2040'); -@include post.custom-property('2015'); -@include post.custom-property('2113'); -@include post.custom-property('2060'); -@include post.custom-property('2127'); -@include post.custom-property('2112'); -@include post.custom-property('3026'); -@include post.custom-property('3022'); -@include post.custom-property('3035'); -@include post.custom-property('2043'); -@include post.custom-property('2070'); +@include post.custom-property('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070'); @mixin custom-icon($icon) { display: inline-block; From 23df6ada2f3b50be4721494152ccc6bfe3014235 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:41:26 +0200 Subject: [PATCH 122/159] small improvements --- packages/styles/src/components/chip.scss | 3 +-- packages/styles/src/components/form-input.scss | 3 +-- packages/styles/src/components/validation.scss | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 2bcd707871..b406d3bdf8 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -6,8 +6,7 @@ tokens.$default-map: components.$post-chip; -@include icons-mx.custom-property('closex'); -@include icons-mx.custom-property('checkmark'); +@include icons-mx.custom-property('closex', 'checkmark'); button.chip-dismissible::after, .chip-selectable input:checked + label::before { diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index ba7b470cb8..8f7343e516 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -8,8 +8,7 @@ tokens.$default-map: components.$post-text-input; -@include icons-mx.custom-property('success-solid'); -@include icons-mx.custom-property('warning-solid'); +@include icons-mx.custom-property('success-solid', 'warning-solid'); input.form-control { display: block; diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index fbde6d7890..80668675d8 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -6,8 +6,7 @@ tokens.$default-map: components.$post-validation; -@include icons-mx.custom-property('warning-solid'); -@include icons-mx.custom-property('success-solid'); +@include icons-mx.custom-property('warning-solid', 'success-solid'); /* Default feedback message classes From c16054dfccf87c4f46fa361def46a3d8cae4c559 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:45:46 +0200 Subject: [PATCH 123/159] fixed the changeset --- .changeset/giant-clocks-chew.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 435864d311..3d0504c689 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -20,19 +20,15 @@ BEFORE: AFTER: ```scss -// load icon CSS at the top of your file -@include post.custom-property('accessibility'); +// load icon at the top of your file +@include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - // add common icon properties manually - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.15em; - @include post.mask-image('accessibility'); - - // optional, must be placed after the mixin + + // optionally add styles for the icon color: #fc0; + width: 1em; + height: 1em; } ``` From e5d59627d260df330b175f28113967d737893e16 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:50:13 +0200 Subject: [PATCH 124/159] moved the mixin to the initial placement --- packages/styles/src/components/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 64ce5ae893..269aee38d4 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,11 +104,11 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { + @include icons-mx.mask-image(3020); content: ''; display: inline-block; width: icons.$icon-size-default; height: icons.$icon-size-default; - @include icons-mx.mask-image(3020); } } } From eedd20a64c08147cadd6514a5326b6b25f249ae3 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 15 Oct 2025 14:58:33 +0200 Subject: [PATCH 125/159] refactoring --- packages/styles/src/components/form-input.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 8f7343e516..a0f8c27971 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -218,7 +218,6 @@ input.form-control { &:has(> input.form-control.is-valid:not(:disabled))::after, &:has(> input.form-control:-webkit-autofill.is-valid)::after { - @include icons-mx.mask-image('success-solid'); content: ''; position: absolute; top: calc(#{tokens.get('input-sizing-height')} / 2); @@ -226,12 +225,12 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; + @include icons-mx.mask-image('success-solid'); color: tokens.get('post-validation-success', components.$post-validation); } &:has(> input.form-control.is-invalid:not(:disabled))::after, &:has(> input.form-control:-webkit-autofill.is-invalid)::after { - @include icons-mx.mask-image('warning-solid'); content: ''; position: absolute; top: calc(#{tokens.get('input-sizing-height')} / 2); @@ -239,6 +238,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; + @include icons-mx.mask-image('warning-solid'); color: tokens.get('post-validation-error', components.$post-validation); } From e082f6fe9caf38134154d5baae7f6168c0f22c0a Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 20 Oct 2025 18:48:20 +0200 Subject: [PATCH 126/159] removed deprecated code --- packages/styles/src/mixins/_animation.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/styles/src/mixins/_animation.scss b/packages/styles/src/mixins/_animation.scss index 404a4a1207..ff8181f157 100644 --- a/packages/styles/src/mixins/_animation.scss +++ b/packages/styles/src/mixins/_animation.scss @@ -29,19 +29,3 @@ } } } - -// DEPRECATED -@mixin hover-animation-svg-icon($color, $icon-name, $stroke-width: null) { - &:not(:disabled):not(.disabled) > span { - &::after { - @if ($stroke-width == null) { - $icon: icons.get-colored-svg-url($icon-name, $color); - background-image: url('#{$icon}'); - } @else { - $icon: icons.get-colored-svg-url($icon-name, $color); - $icon: icons.add-stroke-color($icon, $color, $stroke-width); - background-image: url('#{$icon}'); - } - } - } -} From d0afdfc1742c5af160e17c10bd8a9c621226cc4a Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:12:34 +0200 Subject: [PATCH 127/159] updated the styles files to use `icon` mixin --- .../post-mainnavigation/post-mainnavigation.scss | 2 +- .../documentation/.storybook/styles/preview.scss | 2 +- .../stories/foundations/icons/icon.styles.scss | 4 ++-- .../src/lib/primeng-theme/_icons.scss | 2 +- packages/styles/src/components/card.scss | 2 +- packages/styles/src/components/chip.scss | 4 ++-- packages/styles/src/components/form-input.scss | 4 ++-- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 2 +- packages/styles/src/components/validation.scss | 4 ++-- packages/styles/src/mixins/_icons.scss | 15 ++++++++++++++- 11 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index 4964b1bcbb..649dc8f2ce 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -49,7 +49,7 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.mask-image(2113); + @include icons.icon(2113); height: 24px; width: 24px; } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index e2e62555e7..4f93ad6329 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -246,7 +246,7 @@ $toolbar-icons: ( width: 1em; height: 1em; vertical-align: -0.15em; - @include post.mask-image($icon-name); + @include post.icon($icon-name); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 91d603fbd7..3454e511b7 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -38,9 +38,9 @@ $resizer-max-width: 64px; } .my-accessibility-icon { - @include post.mask-image('accessibility'); + @include post.icon('accessibility'); } .letter-icon { - @include post.mask-image('letter'); + @include post.icon('letter'); } \ No newline at end of file diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index b584f92c48..a1e612338c 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -12,7 +12,7 @@ display: none; } - @include post.mask-image($icon); + @include post.icon($icon); } plusicon { diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 269aee38d4..8d9e8d1d5f 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,7 +104,7 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.mask-image(3020); + @include icons-mx.icon(3020); content: ''; display: inline-block; width: icons.$icon-size-default; diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index b406d3bdf8..69cd855f68 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -56,7 +56,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.mask-image('closex'); + @include icons-mx.icon('closex'); } &:hover::after { @@ -120,7 +120,7 @@ button.chip-dismissible { } width: tokens.get('chip-selectable-icon'); height: tokens.get('chip-selectable-icon'); - @include icons-mx.mask-image('checkmark'); + @include icons-mx.icon('checkmark'); } .badge { diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index a0f8c27971..de37afb23e 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -225,7 +225,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.mask-image('success-solid'); + @include icons-mx.icon('success-solid'); color: tokens.get('post-validation-success', components.$post-validation); } @@ -238,7 +238,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image('warning-solid'); + @include icons-mx.icon('warning-solid'); color: tokens.get('post-validation-error', components.$post-validation); } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 13c14536d6..c83a65c0a7 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -70,7 +70,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icons-mx.mask-image('3035'); + @include icons-mx.icon('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 7a2957ae37..44a961ebfa 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -174,7 +174,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.mask-image(2105); + @include icons-mx.icon(2105); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 80668675d8..cf66b80140 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -113,10 +113,10 @@ input[type='radio'], } ~ .invalid-feedback::before { - @include icons-mx.mask-image('warning-solid'); + @include icons-mx.icon('warning-solid'); } ~ .valid-feedback::before { - @include icons-mx.mask-image('success-solid'); + @include icons-mx.icon('success-solid'); } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index d126fa08e1..1ff244ef7a 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,7 +9,7 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; -@mixin mask-image($name) { +@mixin icon($name) { mask-image: var(--post-icon-#{$name}); background-color: currentColor; color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color @@ -24,6 +24,19 @@ } } +@mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { + display: inline-block; + width: $width; + height: $height; + 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%; +} + @mixin remove-icon() { mask-image: none; } From 436c2b7621a43477b41f0c8e775d1b4678b2e8cf Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:14:18 +0200 Subject: [PATCH 128/159] changed the examples --- .changeset/giant-clocks-chew.md | 2 +- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 3d0504c689..2747479a82 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -24,7 +24,7 @@ AFTER: @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.mask-image('accessibility'); + @include post.post-icon('accessibility'); // optionally add styles for the icon color: #fc0; diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 38c64b7fc7..19680059ca 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -4,7 +4,7 @@ @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.mask-image('accessibility'); + @include post.post-icon('accessibility'); // optionally add styles for the icon color: #fc0; From cfa617d28c1222ec70147c0976a9a3c1ba92501e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:18:30 +0200 Subject: [PATCH 129/159] slight changes --- .changeset/giant-clocks-chew.md | 15 ++++++++------- .../stories/foundations/icons/mixin.sample.scss | 13 +++++++------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 2747479a82..665cfe54e5 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `icon` and `post-icon` mixins have been removed and replaced with more flexible `mask-image` mixin. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. +The `post-icon` mixin has been refactored. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss @@ -24,11 +24,12 @@ AFTER: @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.post-icon('accessibility'); - - // optionally add styles for the icon - color: #fc0; - width: 1em; - height: 1em; + @include post.post-icon( + $name: 'accessibility', + // optional + $color: '#fc0', + $width: 1em, + $height: 1em + ); } ``` diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 19680059ca..a125ea49cd 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -4,10 +4,11 @@ @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.post-icon('accessibility'); - - // optionally add styles for the icon - color: #fc0; - width: 1em; - height: 1em; + @include post.post-icon( + $name: 'accessibility', + // optional + $color: '#fc0', + $width: 1em, + $height: 1em + ); } From 8d2597183372f09f95809fd6093888fcbb46cfb2 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:21:27 +0200 Subject: [PATCH 130/159] removed redundant code --- packages/documentation/.storybook/styles/preview.scss | 4 ---- .../src/stories/foundations/icons/icon.styles.scss | 8 -------- packages/styles/src/components/chip.scss | 6 ------ packages/styles/src/components/form-input.scss | 2 -- 4 files changed, 20 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 4f93ad6329..78631d2447 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -242,10 +242,6 @@ $toolbar-icons: ( &::before { content: ''; margin-right: 0.5rem; - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.15em; @include post.icon($icon-name); } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 3454e511b7..d9cb4ed688 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -29,14 +29,6 @@ $resizer-max-width: 64px; background-color: post.$info; } -.my-accessibility-icon, -.letter-icon { - display: inline-block; - width: 1em; - height: 1em; - vertical-align: -0.15em; -} - .my-accessibility-icon { @include post.icon('accessibility'); } diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 69cd855f68..b89dc26fbd 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -8,12 +8,6 @@ tokens.$default-map: components.$post-chip; @include icons-mx.custom-property('closex', 'checkmark'); -button.chip-dismissible::after, -.chip-selectable input:checked + label::before { - display: inline-block; - vertical-align: -0.15em; -} - button.chip-dismissible { $button-size: tokens.get('close-size', components.$post-close); $icon-size: tokens.get('close-icon-size', components.$post-close); diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index de37afb23e..3627a86a52 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -210,10 +210,8 @@ input.form-control { position: relative; &::after { - display: inline-block; width: tokens.get('input-sizing-icon'); height: tokens.get('input-sizing-icon'); - vertical-align: -0.15em; } &:has(> input.form-control.is-valid:not(:disabled))::after, From da544f8b15ee1ca6aabd5bdec82e9852e0853672 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:24:24 +0200 Subject: [PATCH 131/159] fixed linting --- .../src/lib/primeng-theme/_icons.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index a1e612338c..491154bd08 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,7 +1,19 @@ @use '@swisspost/design-system-styles/core' as post; // Load all icon CSS files used in this component -@include post.custom-property('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070'); +@include post.custom-property( + '2040', + '2015', + '2113', + '2060', + '2127', + '2112', + '3026', + '3022', + '3035', + '2043', + '2070' +); @mixin custom-icon($icon) { display: inline-block; From f3d1d479214f8e6a0914aa37d249f3c418fb1f0d Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:26:59 +0200 Subject: [PATCH 132/159] added the missing properties --- packages/documentation/.storybook/styles/preview.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 78631d2447..c9bb2a1bcb 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -242,6 +242,8 @@ $toolbar-icons: ( &::before { content: ''; margin-right: 0.5rem; + width: 1em; + height: 1em; @include post.icon($icon-name); } } From 036ea5901cbe056b08ddc9d80891cf6107f6de6e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 14:52:22 +0200 Subject: [PATCH 133/159] added the missing properties --- .../src/stories/foundations/icons/icon.styles.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index d9cb4ed688..33d3ec6f2c 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -29,6 +29,12 @@ $resizer-max-width: 64px; background-color: post.$info; } +.my-accessibility-icon, +.letter { + width: 1em; + height: 1em; +} + .my-accessibility-icon { @include post.icon('accessibility'); } From 7aa4b876f6d1df7cf2072896475454834c9d0290 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Tue, 21 Oct 2025 15:18:59 +0200 Subject: [PATCH 134/159] removed repetition --- .../src/stories/foundations/icons/icon.styles.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 33d3ec6f2c..d718524e87 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -29,16 +29,17 @@ $resizer-max-width: 64px; background-color: post.$info; } -.my-accessibility-icon, -.letter { +%icon-size { width: 1em; height: 1em; } .my-accessibility-icon { + @extend %icon-size; @include post.icon('accessibility'); } .letter-icon { + @extend %icon-size; @include post.icon('letter'); -} \ No newline at end of file +} From cec20155f11a8878a20e5eeff1a5a20549c64cb9 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Wed, 22 Oct 2025 09:16:20 +0200 Subject: [PATCH 135/159] removed redundant code --- .../src/stories/foundations/icons/icon.styles.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index d718524e87..67c55730a0 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -29,17 +29,8 @@ $resizer-max-width: 64px; background-color: post.$info; } -%icon-size { +.letter-icon { width: 1em; height: 1em; -} - -.my-accessibility-icon { - @extend %icon-size; - @include post.icon('accessibility'); -} - -.letter-icon { - @extend %icon-size; @include post.icon('letter'); } From f2480c90609ac0b89abd24861f04bb328752a28c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 10:12:59 +0100 Subject: [PATCH 136/159] renamed the `post-icon` mixin to `icon` --- .changeset/giant-clocks-chew.md | 4 ++-- .../components/post-mainnavigation/post-mainnavigation.scss | 2 +- packages/documentation/.storybook/styles/preview.scss | 2 +- .../src/stories/foundations/icons/icon.styles.scss | 2 +- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 2 +- packages/styles/src/components/card.scss | 2 +- packages/styles/src/components/chip.scss | 4 ++-- packages/styles/src/components/form-input.scss | 4 ++-- packages/styles/src/components/list-check.scss | 2 +- packages/styles/src/components/stepper.scss | 2 +- packages/styles/src/components/validation.scss | 4 ++-- packages/styles/src/mixins/_icons.scss | 4 ++-- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 665cfe54e5..5501e2af39 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been refactored. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. +The `post-icon` mixin has been renamed to `icon` and refactored. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. BEFORE: ```scss @@ -24,7 +24,7 @@ AFTER: @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.post-icon( + @include post.icon( $name: 'accessibility', // optional $color: '#fc0', diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index b71669a2cb..011c4a8840 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -49,7 +49,7 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.icon(2113); + @include icons.mask-image(2113); height: 24px; width: 24px; } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index c9bb2a1bcb..9dbfa391fa 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -244,7 +244,7 @@ $toolbar-icons: ( margin-right: 0.5rem; width: 1em; height: 1em; - @include post.icon($icon-name); + @include post.mask-image($icon-name); } } } diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index 67c55730a0..d4e8609c8d 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -32,5 +32,5 @@ $resizer-max-width: 64px; .letter-icon { width: 1em; height: 1em; - @include post.icon('letter'); + @include post.mask-image('letter'); } diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index a125ea49cd..90e3f9016e 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -4,7 +4,7 @@ @include post.custom-property('accessibility', './path/to/icon/folder'); .my-icon { - @include post.post-icon( + @include post.icon( $name: 'accessibility', // optional $color: '#fc0', diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 491154bd08..888a2fda7c 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -24,7 +24,7 @@ display: none; } - @include post.icon($icon); + @include post.mask-image($icon); } plusicon { diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 8d9e8d1d5f..269aee38d4 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,7 +104,7 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.icon(3020); + @include icons-mx.mask-image(3020); content: ''; display: inline-block; width: icons.$icon-size-default; diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index b89dc26fbd..a1bfe013b9 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -50,7 +50,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.icon('closex'); + @include icons-mx.mask-image('closex'); } &:hover::after { @@ -114,7 +114,7 @@ button.chip-dismissible { } width: tokens.get('chip-selectable-icon'); height: tokens.get('chip-selectable-icon'); - @include icons-mx.icon('checkmark'); + @include icons-mx.mask-image('checkmark'); } .badge { diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 3627a86a52..7c8625318a 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -223,7 +223,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.icon('success-solid'); + @include icons-mx.mask-image('success-solid'); color: tokens.get('post-validation-success', components.$post-validation); } @@ -236,7 +236,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.icon('warning-solid'); + @include icons-mx.mask-image('warning-solid'); color: tokens.get('post-validation-error', components.$post-validation); } diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index c83a65c0a7..779aab13f7 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -70,7 +70,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icons-mx.icon('3035'); + @include icons-mx.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 44a961ebfa..7a2957ae37 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -174,7 +174,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.icon(2105); + @include icons-mx.mask-image(2105); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index cf66b80140..80668675d8 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -113,10 +113,10 @@ input[type='radio'], } ~ .invalid-feedback::before { - @include icons-mx.icon('warning-solid'); + @include icons-mx.mask-image('warning-solid'); } ~ .valid-feedback::before { - @include icons-mx.icon('success-solid'); + @include icons-mx.mask-image('success-solid'); } } diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 1ff244ef7a..d2a44c2cfe 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -9,7 +9,7 @@ @use './../mixins/utilities'; @use './../utilities/env-variables' as icon-version; -@mixin icon($name) { +@mixin mask-image($name) { mask-image: var(--post-icon-#{$name}); background-color: currentColor; color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color @@ -24,7 +24,7 @@ } } -@mixin post-icon($name, $color: inherit, $width: 1em, $height: 1em) { +@mixin icon($name, $color: inherit, $width: 1em, $height: 1em) { display: inline-block; width: $width; height: $height; From 8103a235b55710a1d297bde2676488628ceacb54 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 10:16:25 +0100 Subject: [PATCH 137/159] fixed linting --- packages/styles/src/components/chip.scss | 2 +- packages/styles/src/components/list-check.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index a1bfe013b9..afeaaaf3c8 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -50,7 +50,7 @@ button.chip-dismissible { @include utilities.high-contrast-mode() { background-color: ButtonText; } - @include icons-mx.mask-image('closex'); + @include icons-mx.mask-image('closex'); } &:hover::after { diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 779aab13f7..13c14536d6 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -70,7 +70,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icons-mx.mask-image('3035'); + @include icons-mx.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { From 688d6197e3e5eb076d217b17592330cf72997aea Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 10:39:58 +0100 Subject: [PATCH 138/159] added the path to the mixin --- .changeset/giant-clocks-chew.md | 2 +- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- packages/styles/src/mixins/_icons.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 5501e2af39..d57214d4ce 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -21,7 +21,7 @@ BEFORE: AFTER: ```scss // load icon at the top of your file -@include post.custom-property('accessibility', './path/to/icon/folder'); +@include post.custom-property('./path/to/icon/folder', 'accessibility'); .my-icon { @include post.icon( diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 90e3f9016e..50bb807ac9 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // load icon at the top of your file -@include post.custom-property('accessibility', './path/to/icon/folder'); +@include post.custom-property('./path/to/icon/folder', 'accessibility'); .my-icon { @include post.icon( diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index d2a44c2cfe..ef217309aa 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,10 +16,10 @@ forced-color-adjust: preserve-parent-color; } -@mixin custom-property($names...) { +@mixin custom-property($path: '../icons/temp', $names...) { @each $name in $names { @at-root { - @include meta.load-css('../icons/temp/#{$name}'); + @include meta.load-css('#{$path}/#{$name}'); } } } From 4500cda80e91bbed14b5a9b7e50bdc2db1a69c4f Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 12:37:04 +0100 Subject: [PATCH 139/159] fixed the calling icon --- packages/documentation/.storybook/styles/preview.scss | 2 +- .../src/stories/foundations/icons/icon.styles.scss | 2 +- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 4 ++-- packages/styles/src/components/chip.scss | 2 +- packages/styles/src/components/form-input.scss | 2 +- packages/styles/src/components/validation.scss | 2 +- packages/styles/src/mixins/_icons.scss | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 9dbfa391fa..4215d57eed 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -12,7 +12,7 @@ tokens.$default-map: utilities.$post-color; -@include post.custom-property('chevrondown', 'resizeexpand', 'link', 'code'); +@include post.custom-property(('chevrondown', 'resizeexpand', 'link', 'code')); $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss index d4e8609c8d..59ea051d5d 100644 --- a/packages/documentation/src/stories/foundations/icons/icon.styles.scss +++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.custom-property('accessibility', 'letter'); +@include post.custom-property(('accessibility', 'letter')); $resizer-padding: 1rem; $resizer-border-width: 1px; diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 888a2fda7c..57adb667e0 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // Load all icon CSS files used in this component -@include post.custom-property( +@include post.custom-property(( '2040', '2015', '2113', @@ -13,7 +13,7 @@ '3035', '2043', '2070' -); +)); @mixin custom-icon($icon) { display: inline-block; diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index afeaaaf3c8..3f5781e3aa 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -6,7 +6,7 @@ tokens.$default-map: components.$post-chip; -@include icons-mx.custom-property('closex', 'checkmark'); +@include icons-mx.custom-property(('closex', 'checkmark')); button.chip-dismissible { $button-size: tokens.get('close-size', components.$post-close); diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 7c8625318a..970e421c5f 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -8,7 +8,7 @@ tokens.$default-map: components.$post-text-input; -@include icons-mx.custom-property('success-solid', 'warning-solid'); +@include icons-mx.custom-property(('success-solid', 'warning-solid')); input.form-control { display: block; diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss index 80668675d8..e824313d9b 100644 --- a/packages/styles/src/components/validation.scss +++ b/packages/styles/src/components/validation.scss @@ -6,7 +6,7 @@ tokens.$default-map: components.$post-validation; -@include icons-mx.custom-property('warning-solid', 'success-solid'); +@include icons-mx.custom-property(('warning-solid', 'success-solid')); /* Default feedback message classes diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index ef217309aa..7ab204d13c 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -16,7 +16,7 @@ forced-color-adjust: preserve-parent-color; } -@mixin custom-property($path: '../icons/temp', $names...) { +@mixin custom-property($names, $path: '../icons/temp') { @each $name in $names { @at-root { @include meta.load-css('#{$path}/#{$name}'); From 4801c93a3543b8c93e604af2f331e7987acb8307 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 12:50:35 +0100 Subject: [PATCH 140/159] fixed the linting --- packages/styles/src/components/form-input.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss index 970e421c5f..ffd4f03504 100644 --- a/packages/styles/src/components/form-input.scss +++ b/packages/styles/src/components/form-input.scss @@ -223,7 +223,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 2; pointer-events: none; - @include icons-mx.mask-image('success-solid'); + @include icons-mx.mask-image('success-solid'); color: tokens.get('post-validation-success', components.$post-validation); } @@ -236,7 +236,7 @@ input.form-control { right: tokens.get('input-validation-icon-position-inline-end'); z-index: 1; pointer-events: none; - @include icons-mx.mask-image('warning-solid'); + @include icons-mx.mask-image('warning-solid'); color: tokens.get('post-validation-error', components.$post-validation); } From 57ee02481264c8b613bde67d0c003a6a06873f0b Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:01:26 +0100 Subject: [PATCH 141/159] fixed the linting --- .../src/lib/primeng-theme/_icons.scss | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 57adb667e0..9b34f9f881 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,19 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // Load all icon CSS files used in this component -@include post.custom-property(( - '2040', - '2015', - '2113', - '2060', - '2127', - '2112', - '3026', - '3022', - '3035', - '2043', - '2070' -)); +@include post.custom-property(('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070')); @mixin custom-icon($icon) { display: inline-block; From 0749824eb53f0b7749de3b88d34a1a5ce88a1ea6 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:07:57 +0100 Subject: [PATCH 142/159] fixed the mixin call --- .changeset/giant-clocks-chew.md | 2 +- .../src/stories/foundations/icons/mixin.sample.scss | 2 +- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index d57214d4ce..1f4478be3e 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -21,7 +21,7 @@ BEFORE: AFTER: ```scss // load icon at the top of your file -@include post.custom-property('./path/to/icon/folder', 'accessibility'); +@include post.custom-property($names: 'accessibility', $path: './path/to/icon/folder'); .my-icon { @include post.icon( diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index 50bb807ac9..bc3cdd4ec2 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // load icon at the top of your file -@include post.custom-property('./path/to/icon/folder', 'accessibility'); +@include post.custom-property($names: 'accessibility', $path: './path/to/icon/folder'); .my-icon { @include post.icon( diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 9b34f9f881..a763e95dd4 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -1,7 +1,9 @@ @use '@swisspost/design-system-styles/core' as post; // Load all icon CSS files used in this component -@include post.custom-property(('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070')); +@include post.custom-property( + ('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070') +); @mixin custom-icon($icon) { display: inline-block; From c5e949df6e21b597cbeca2e81946b602419d102c Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:31:39 +0100 Subject: [PATCH 143/159] refactored the changeset --- .changeset/giant-clocks-chew.md | 9 +++++++-- .../src/stories/foundations/icons/mixin.sample.scss | 8 ++++++-- packages/styles/src/mixins/_icons.scss | 5 +++++ 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 1f4478be3e..4f417ce6d1 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -20,8 +20,13 @@ BEFORE: AFTER: ```scss -// load icon at the top of your file -@include post.custom-property($names: 'accessibility', $path: './path/to/icon/folder'); +// 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'); .my-icon { @include post.icon( diff --git a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss index bc3cdd4ec2..e739dfeaa9 100644 --- a/packages/documentation/src/stories/foundations/icons/mixin.sample.scss +++ b/packages/documentation/src/stories/foundations/icons/mixin.sample.scss @@ -1,7 +1,11 @@ @use '@swisspost/design-system-styles/core' as post; -// load icon at the top of your file -@include post.custom-property($names: 'accessibility', $path: './path/to/icon/folder'); +// 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'); .my-icon { @include post.icon( diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 7ab204d13c..7ebb660a28 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -17,6 +17,11 @@ } @mixin custom-property($names, $path: '../icons/temp') { + // Convert single string to list + @if type-of($names) == 'string' { + $names: ($names,); + } + @each $name in $names { @at-root { @include meta.load-css('#{$path}/#{$name}'); From a85b50952670726e734d60378713fe958d7b5ef7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:33:15 +0100 Subject: [PATCH 144/159] refactored the changeset --- .changeset/giant-clocks-chew.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 4f417ce6d1..6e54de4194 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -21,7 +21,6 @@ BEFORE: AFTER: ```scss // Load icon(s) at the top of your file - // For a single icon: @include post.custom-property('accessibility', './path/to/icon/folder'); From e0d3338a9263ff165ca7975bff849c117281e800 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:37:07 +0100 Subject: [PATCH 145/159] refactored the changeset --- .changeset/giant-clocks-chew.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/giant-clocks-chew.md b/.changeset/giant-clocks-chew.md index 6e54de4194..db4742c6c4 100644 --- a/.changeset/giant-clocks-chew.md +++ b/.changeset/giant-clocks-chew.md @@ -3,7 +3,7 @@ '@swisspost/design-system-icons': major --- -The `post-icon` mixin has been renamed to `icon` and refactored. Icons must now be loaded separately using the `custom-property` mixin at the top of the file. +The `post-icon` mixin has been renamed to `icon` and now requires icons to be preloaded using the `custom-property` mixin at the top of your file. BEFORE: ```scss From 3f0b8fb1e65dc9b7f695a66b5cff1fab134743e5 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 13:41:58 +0100 Subject: [PATCH 146/159] fixed linting --- packages/styles/src/mixins/_icons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index 7ebb660a28..f1d8b19bda 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -18,10 +18,10 @@ @mixin custom-property($names, $path: '../icons/temp') { // Convert single string to list - @if type-of($names) == 'string' { - $names: ($names,); + @if meta.type-of($names) == 'string' { + $names: ($names); } - + @each $name in $names { @at-root { @include meta.load-css('#{$path}/#{$name}'); From f63b6aebb51d1a06f21bbb31c9afc3d483f434e7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:00:46 +0100 Subject: [PATCH 147/159] removed redundant code --- packages/styles/src/mixins/_icons.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/styles/src/mixins/_icons.scss b/packages/styles/src/mixins/_icons.scss index f1d8b19bda..7ab204d13c 100644 --- a/packages/styles/src/mixins/_icons.scss +++ b/packages/styles/src/mixins/_icons.scss @@ -17,11 +17,6 @@ } @mixin custom-property($names, $path: '../icons/temp') { - // Convert single string to list - @if meta.type-of($names) == 'string' { - $names: ($names); - } - @each $name in $names { @at-root { @include meta.load-css('#{$path}/#{$name}'); From c64798d932d019e8b12bd827e020412cf8d7e278 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:15:39 +0100 Subject: [PATCH 148/159] changed post-icons with ui icons --- .../components/post-mainnavigation/post-mainnavigation.scss | 4 ++-- packages/styles/src/components/card.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss index 011c4a8840..e225babbbf 100644 --- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss +++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss @@ -10,7 +10,7 @@ @use '@swisspost/design-system-styles/variables/elevation'; @use '@swisspost/design-system-styles/variables/color'; -@include icons.custom-property('2113'); +@include icons.custom-property('chevrondown'); post-mainnavigation { // reset links and buttons @@ -49,7 +49,7 @@ post-mainnavigation { post-megadropdown-trigger button { &::after { content: ''; - @include icons.mask-image(2113); + @include icons.mask-image('chevrondown'); height: 24px; width: 24px; } diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index a0e430a373..d3708ebd8d 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -10,7 +10,7 @@ tokens.$default-map: components.$post-cards; -@include icons-mx.custom-property(3020); +@include icons-mx.custom-property('arrowright'); .card { display: flex; From 84c2b5ec05082daac05d358a2a5cd4f09f9a2a09 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:35:01 +0100 Subject: [PATCH 149/159] changed the icon in the stepper --- packages/styles/src/components/stepper.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 80ad3ea91d..e8761da2ff 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -12,7 +12,7 @@ tokens.$default-map: utilities.$post-spacing; -@include icons-mx.custom-property(2105); +@include icons-mx.custom-property('checkmark'); // for backward compatibility .stepper-container { @@ -174,7 +174,7 @@ tokens.$default-map: utilities.$post-spacing; // check icon .stepper-link::after { - @include icons-mx.mask-image(2105); + @include icons-mx.mask-image('checkmark'); display: block; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); From d69808b023c035cfd4391b288fbada07fd3a0bf2 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:39:33 +0100 Subject: [PATCH 150/159] changed the icon in the stepper and list-check --- packages/styles/src/components/list-check.scss | 8 ++------ packages/styles/src/components/stepper.scss | 10 ++++------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 5870c998ad..13c14536d6 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -67,6 +67,8 @@ ul.list-check { margin-block: calc(-1 * tokens.get('list-check-text-padding')); top: tokens.get('list-check-padding-icon'); left: tokens.get('list-check-padding-icon'); + width: tokens.get('list-check-sizing-icon'); + height: tokens.get('list-check-sizing-icon'); content: ''; @include icons-mx.mask-image('3035'); color: tokens.get('list-check-color-icon-fg'); @@ -75,12 +77,6 @@ ul.list-check { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); } - @include icon-mixin.post-icon( - 'checkmark', - $color: tokens.get('list-check-color-icon-fg'), - $width: tokens.get('list-check-sizing-icon'), - $height: tokens.get('list-check-sizing-icon') - ); } } } diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index e8761da2ff..5d1cab517f 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -68,6 +68,7 @@ tokens.$default-map: utilities.$post-spacing; &::before, &::after { content: ''; + display: block; position: absolute; inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2); @@ -179,7 +180,10 @@ tokens.$default-map: utilities.$post-spacing; position: absolute; top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2); z-index: 1; + height: stepper.$stepper-indicator-check-icon-size; + width: stepper.$stepper-indicator-check-icon-size; transition: stepper.$stepper-indicator-transition; + color: stepper.$stepper-indicator-color; .stepper-item:first-child > & { left: calc( @@ -199,12 +203,6 @@ tokens.$default-map: utilities.$post-spacing; .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & { content: ''; } - @include icons-mx.post-icon( - 'checkmark', - stepper.$stepper-indicator-color, - stepper.$stepper-indicator-check-icon-size, - stepper.$stepper-indicator-check-icon-size - ); } // hover/focus state From cc543aadfe4060cb608ffab4d4f2b0dcac1a0726 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:43:46 +0100 Subject: [PATCH 151/159] changed the icon in the card --- packages/styles/src/components/card.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index d3708ebd8d..d057c2c617 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,13 +104,11 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.mask-image(3020); + @include icons-mx.mask-image('arrowright'); content: ''; - @include icons-mx.post-icon( - 'arrowright', - $width: icons.$icon-size-default, - $height: icons.$icon-size-default - ); + display: inline-block; + width: icons.$icon-size-default; + height: icons.$icon-size-default; } } } From 12ab3b0f0414f28058c3add662db3294a3e8ebb2 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:52:09 +0100 Subject: [PATCH 152/159] changed the icon in the list-check --- packages/styles/src/components/list-check.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index 13c14536d6..c638b67d90 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -6,7 +6,7 @@ tokens.$default-map: components.$post-listcheck; -@include icons-mx.custom-property('3035'); +@include icons-mx.custom-property('checkmark'); ul.list-check { @include utilities.reset-list; @@ -70,7 +70,7 @@ ul.list-check { width: tokens.get('list-check-sizing-icon'); height: tokens.get('list-check-sizing-icon'); content: ''; - @include icons-mx.mask-image('3035'); + @include icons-mx.mask-image('checkmark'); color: tokens.get('list-check-color-icon-fg'); @include media.max(sm) { From 156f6289437d38fd792dc263abc86b5749d049a7 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 14:55:00 +0100 Subject: [PATCH 153/159] removed the extra spaces --- packages/styles/src/components/list-check.scss | 1 - packages/styles/src/components/stepper.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/styles/src/components/list-check.scss b/packages/styles/src/components/list-check.scss index c638b67d90..27054a1c16 100644 --- a/packages/styles/src/components/list-check.scss +++ b/packages/styles/src/components/list-check.scss @@ -72,7 +72,6 @@ ul.list-check { content: ''; @include icons-mx.mask-image('checkmark'); color: tokens.get('list-check-color-icon-fg'); - @include media.max(sm) { margin-block: tokens.get('list-check-icon-container-block'); padding-inline: tokens.get('list-check-icon-container-inline'); diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 5d1cab517f..2f6606f56a 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -68,7 +68,6 @@ tokens.$default-map: utilities.$post-spacing; &::before, &::after { content: ''; - display: block; position: absolute; inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2); From 7454f3941c419812caf3e7a091bba6e1ea37778e Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 15:10:35 +0100 Subject: [PATCH 154/159] updated the icons in the primeng package --- .../projects/styles-primeng/src/lib/primeng-theme/_icons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index a763e95dd4..7526316978 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -2,7 +2,7 @@ // Load all icon CSS files used in this component @include post.custom-property( - ('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070') + ('plus', 'trash', 'chevrondown', 'filter', 'updown', 'chevronup', 'arrowup', 'arrowdown', 'checkmark', 'closex', 'burger') ); @mixin custom-icon($icon) { From 4102f570a8df9ff300fe6dd79ea0107f62a4041a Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 15:13:45 +0100 Subject: [PATCH 155/159] fixed the linting --- .../src/lib/primeng-theme/_icons.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index 7526316978..e996e51d1c 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -2,7 +2,19 @@ // Load all icon CSS files used in this component @include post.custom-property( - ('plus', 'trash', 'chevrondown', 'filter', 'updown', 'chevronup', 'arrowup', 'arrowdown', 'checkmark', 'closex', 'burger') + ( + 'plus', + 'trash', + 'chevrondown', + 'filter', + 'updown', + 'chevronup', + 'arrowup', + 'arrowdown', + 'checkmark', + 'closex', + 'burger' + ) ); @mixin custom-icon($icon) { From 4bf9fb03308ea9f200f7ca65b1821d7ba1aef1d2 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 17:43:39 +0100 Subject: [PATCH 156/159] updated the icons to ui icons --- .../src/lib/primeng-theme/_icons.scss | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss index e996e51d1c..0d305e5577 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_icons.scss @@ -30,49 +30,49 @@ } plusicon { - @include custom-icon(2040); + @include custom-icon('plus'); } trashicon { - @include custom-icon(2015); + @include custom-icon('trash'); } chevrondownicon { - @include custom-icon(2113); + @include custom-icon('chevrondown'); } filtericon { - @include custom-icon(2060); + @include custom-icon('filter'); } sortalticon { - @include custom-icon(2127); + @include custom-icon('updown'); } sortamountupalticon { - @include custom-icon(2112); + @include custom-icon('chevronup'); } sortamountdownicon { - @include custom-icon(2113); + @include custom-icon('chevrondown'); } arrowupicon { - @include custom-icon(3026); + @include custom-icon('arrowup'); } arrowdownicon { - @include custom-icon(3022); + @include custom-icon('arrowdown'); } checkicon { - @include custom-icon(3035); + @include custom-icon('checkmark'); } timesicon { - @include custom-icon(2043); + @include custom-icon('closex'); } .p-datatable-reorderablerow-handle { - @include custom-icon(2070); + @include custom-icon('burger'); } From cc9450b1c9c47ee40c9d977cbdd8115e6c34e48b Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 18:00:41 +0100 Subject: [PATCH 157/159] updated the icons to ui icons --- packages/styles/src/components/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index 0108efb9c2..c899a61c3b 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,7 +104,7 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.icon(3020); + @include icons-mx.icon('arrowright'); content: ''; display: inline-block; width: icons.$icon-size-default; From ca6da8230c52a16daa854e169500fe67c4852c34 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 18:02:10 +0100 Subject: [PATCH 158/159] fixed the mixin --- packages/styles/src/components/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss index c899a61c3b..d057c2c617 100644 --- a/packages/styles/src/components/card.scss +++ b/packages/styles/src/components/card.scss @@ -104,7 +104,7 @@ tokens.$default-map: components.$post-cards; -ms-flex-align: center; &::before { - @include icons-mx.icon('arrowright'); + @include icons-mx.mask-image('arrowright'); content: ''; display: inline-block; width: icons.$icon-size-default; From ec75eeedc3e0cdab8269c8848efccfead052a495 Mon Sep 17 00:00:00 2001 From: alionazherdetska Date: Mon, 27 Oct 2025 18:25:42 +0100 Subject: [PATCH 159/159] reset the redundant changes --- packages/styles/src/variables/_icons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/variables/_icons.scss b/packages/styles/src/variables/_icons.scss index cea284a0b2..e8ce60b8f0 100644 --- a/packages/styles/src/variables/_icons.scss +++ b/packages/styles/src/variables/_icons.scss @@ -13,7 +13,7 @@ $svg-post-path: "'%3E%3C/path%3E%3C/svg%3E"; $other-icons: () !default; $error-icon-name: 'error'; -$error-icon-svg-path: var(--post-signal-icon-error); +$error-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM21.88 20.46C22.27 20.85 22.27 21.48 21.88 21.87C21.68 22.07 21.43 22.16 21.17 22.16C20.91 22.16 20.66 22.06 20.46 21.87L16 17.41L11.54 21.87C11.34 22.07 11.09 22.16 10.83 22.16C10.57 22.16 10.32 22.06 10.12 21.87C9.73 21.48 9.73 20.85 10.12 20.46L14.58 16L10.12 11.54C9.73 11.15 9.73 10.52 10.12 10.13C10.51 9.74 11.14 9.74 11.53 10.13L15.99 14.59L20.45 10.13C20.84 9.74 21.47 9.74 21.86 10.13C22.25 10.52 22.25 11.15 21.86 11.54L17.4 16L21.86 20.46H21.88Z'; $other-icons: map.merge( ( $error-icon-name: $error-icon-svg-path, @@ -22,7 +22,7 @@ $other-icons: map.merge( ); $success-icon-name: 'success'; -$success-icon-svg-path: var(--post-signal-icon-success); +$success-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'; $other-icons: map.merge( ( $success-icon-name: $success-icon-svg-path, @@ -31,7 +31,7 @@ $other-icons: map.merge( ); $warning-icon-name: 'warning'; -$warning-icon-svg-path: var(--post-signal-icon-warning); +$warning-icon-svg-path: 'M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'; $other-icons: map.merge( ( $warning-icon-name: $warning-icon-svg-path,