Merge remote-tracking branch 'origin/main' into update-tokens

.changeset/honest-numbers-end.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed ´switch´ alignment for long labels.

.github/actions/artifact-download/action.yaml

@@ -32,7 +32,7 @@ runs:
   using: composite
   steps:
     - name: Download artifact
-      uses: dawidd6/action-download-artifact@v6
+      uses: dawidd6/action-download-artifact@v7
       with:
         name: ${{ inputs.name }}
         run_id: ${{ github.event.workflow_run.id }}

package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/swisspost/design-system/issues"
   },
   "scripts": {
-    "bootstrap": "pnpm install && pnpm -r build",
+    "bootstrap": "pnpm install && pnpm -r --filter \"!*-integration\" build",
     "start": "pnpm docs:start",
     "start:clean": "pnpm bootstrap && pnpm start",
     "test": "pnpm -r test",

packages/intranet-header-workspace/package.json

@@ -49,7 +49,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "ng-packagr": "18.1.0",
-    "npm-run-all2": "5.0.0",
+    "npm-run-all2": "7.0.1",
     "rimraf": "6.0.1",
     "typescript": "5.5.4",
     "wait-on": "8.0.1"

packages/styles/gulpfile.js

@@ -118,8 +118,8 @@ gulp.task('sass', () => {
     .src('./src/**/*.scss')
     .pipe(
       gulpSass({
-        outputStyle: 'compressed',
-        includePaths: options.includePaths,
+        style: 'compressed',
+        loadPaths: options.loadPaths,
         quietDeps: true,
       }),
     )
@@ -136,7 +136,7 @@ gulp.task('sass:dev', () => {
     .pipe(sourcemaps.init())
     .pipe(
       gulpSass({
-        includePaths: options.includePaths,
+        loadPaths: options.loadPaths,
         quietDeps: true,
       }),
     )
@@ -153,7 +153,7 @@ gulp.task(
   gulp.series('temporarily-copy-token-files', () => {
     return gulp.src('./tests/**/*.scss').pipe(
       gulpSass.sync({
-        includePaths: options.includePaths,
+        loadPaths: [...options.loadPaths, './'],
         quietDeps: true,
       }),
     );

packages/styles/package.json

@@ -58,7 +58,7 @@
     "gulp": "5.0.0",
     "gulp-newer": "^1.4.0",
     "gulp-postcss": "10.0.0",
-    "gulp-sass": "5.1.0",
+    "gulp-sass": "6.0.0",
     "jest": "29.7.0",
     "postcss": "8.4.40",
     "postcss-scss": "4.0.9",
@@ -73,7 +73,7 @@
     "vite": "5.4.8"
   },
   "sass": {
-    "includePaths": [
+    "loadPaths": [
       "node_modules"
     ],
     "outputDir": "./dist"

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

@@ -94,7 +94,7 @@
         }
 
         &:hover ~ label {
-          color: tokens.get('switch-element-hover-bg', components.$post-switch);
+          color: tokens.get('switch-text-enabled-fg', components.$post-switch);
 
           @include utility-mx.high-contrast-mode() {
             color: Highlight;
@@ -103,8 +103,7 @@
       }
 
       &[disabled] ~ label {
-        color: tokens.get('switch-element-disabled-bg', components.$post-switch);
-
+        color: tokens.get('switch-text-disabled-fg', components.$post-switch);
         @include utility-mx.high-contrast-mode() {
           color: GrayText;
         }

packages/styles/src/components/switch.scss

@@ -17,12 +17,6 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
 .form-switch {
   display: flex;
 
-  @include utility-mx.focus-style() {
-    &:has(> input:only-child) {
-      border-radius: tokens.get('switch-border-radius-round');
-    }
-  }
-
   .form-check-input {
     appearance: none;
     cursor: pointer;
@@ -31,6 +25,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
     align-items: center;
     height: tokens.get('switch-element-height');
     width: tokens.get('switch-element-width');
+    margin-block: tokens.get('switch-icon-padding-container');
     border: tokens.get('switch-border-width') tokens.get('switch-border-style-default')
       tokens.get('switch-element-enabled-stroke');
     border-radius: tokens.get('switch-border-radius-round');
@@ -179,7 +174,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
     }
   }
 
-  &:hover > .form-check-input:not([disabled]) {
+  &:has(input:not([disabled]):hover) input {
     background-color: tokens.get('switch-element-hover-bg');
     border-color: tokens.get('switch-element-hover-stroke');
 
@@ -189,7 +184,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
     }
 
     &:checked::before {
-      background-color: tokens.get('switch-element-hover-bg');
+      background-color: tokens.get('switch-icon-hover');
     }
 
     @include utility-mx.high-contrast-mode {