@swisspost/design-system-styles 6.6.1 → 6.6.3

package/layouts/portal/_type.scss

@@ -53,6 +53,11 @@
   h5,
   .h5 {
     margin-top: map.get(spacing.$post-sizes, 'bigger-big');
+
+    // Temporary resolution to avoid margin-top spreading inside Notification Overlay
+    .modal-dialog & {
+      margin-top: 0;
+    }
   }
 
   h5,

package/mixins/_badge.scss

@@ -7,7 +7,10 @@
   border-color: transparent;
 
   @include utilities.high-contrast-mode() {
+    background-color: Highlight;
     border-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none; // Disable "readability backplate" on blink browser that interferes with the colors on this case
   }
 }
 
@@ -19,4 +22,10 @@
   > .badge {
     background-color: badge.$badge-nested-active-bg-color;
   }
+
+  @include utilities.high-contrast-mode() {
+    background-color: SelectedItem;
+    color: SelectedItemText;
+    forced-color-adjust: none; // Disable "readability backplate" on blink browser that interferes with the colors on this case
+  }
 }

package/mixins/_icons.scss

@@ -11,6 +11,8 @@
   -webkit-mask-image: url('#{icon-fn.get-svg-url($name)}');
           mask-image: url('#{icon-fn.get-svg-url($name)}');
   background-color: currentColor;
+  color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color
+  forced-color-adjust: preserve-parent-color;
 }
 
 @mixin remove-icon() {

package/mixins/_notification.scss

@@ -72,8 +72,7 @@
 
   @include utilities-mx.high-contrast-mode {
     filter: none !important;
-    background-color: transparent !important;
-    border: 2px solid WindowText;
+    border: 2px solid CanvasText;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.6.1",
+  "version": "6.6.3",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -33,17 +33,16 @@
     "bootstrap": "5.3.2"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "1.2.0",
+    "@swisspost/design-system-icons": "1.3.0",
     "@types/node": "18.19.14",
     "autoprefixer": "10.4.17",
     "copyfiles": "2.4.1",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
-    "gulp-postcss": "9.1.0",
+    "gulp-postcss": "10.0.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
-    "npm-run-all2": "5.0.2",
     "postcss": "8.4.33",
     "postcss-scss": "4.0.9",
     "prettier": "3.2.5",

package/placeholders/_close.scss

@@ -35,5 +35,9 @@
   @include utilities-mx.high-contrast-mode() {
     color: CanvasText;
     forced-color-adjust: none;
+
+    @include utilities-mx.not-disabled-focus-hover() {
+      color: Highlight;
+    }
   }
 }

package/variables/_breakpoints.scss

@@ -7,5 +7,5 @@ $grid-breakpoints: (
   md: 780px,
   lg: 1024px,
   xl: 1280px,
-  xxl: 1441px,
+  xxl: 1440px,
 ) !default;

package/variables/_heading.scss

@@ -30,8 +30,7 @@ $heading-sizes-h4: (
 );
 
 $heading-sizes-h5: (
-  xs: type.$font-size-14,
-  sm: type.$font-size-16,
+  xs: type.$font-size-16,
   md: type.$font-size-18,
   xxl: type.$font-size-20,
 );

package/variables/components/_form-select.scss

@@ -18,4 +18,5 @@ $form-select-indicator-success: url(icons.get-colored-svg-url(
   color.$success-green
 )) !default;
 $form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
-$form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !default;
+$form-select-indicator-hcm-dark: url(icons.get-colored-svg-url('2113', color.$white)) !default;
+$form-select-indicator-hcm-light: url(icons.get-colored-svg-url('2113', color.$black)) !default;

package/variables/components/_form-validation.scss

@@ -17,12 +17,12 @@ $form-feedback-padding-x: button.$input-btn-padding-x !default;
 $form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
 $form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
 $form-feedback-icon-offset: spacing.$size-mini !default;
-$form-feedback-valid-bg: color.$success !default;
+$form-feedback-valid-bg: color.$success-green !default;
 $form-feedback-valid-text: color.$white !default;
 $form-feedback-invalid-bg: color.$error !default;
 $form-feedback-invalid-text: color.$white !default;
-$form-feedback-custom-color: color.$success !default;
-$form-feedback-custom-bg: color.$success !default;
+$form-feedback-custom-color: color.$success-green !default;
+$form-feedback-custom-bg: color.$success-green !default;
 $form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
   rgba($form-feedback-invalid-color, 0.25) !default;
 $form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width

package/variables/components/_forms.scss

@@ -36,7 +36,7 @@ $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
-$input-disabled-color: color.$gray-40; // Design System only
+$input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
 
 $input-color: color.$black !default;

package/variables/components/_notification.scss

@@ -74,7 +74,7 @@ $notification-variants: list.join(
   $notification-variants,
   (
     'primary' color.$gray-80 3134,
-    'success' color.$success 2105,
+    'success' color.$success-green 2105,
     'danger' color.$error 2104,
     'warning' color.$warning 2104,
     'info' color.$info 2106,

package/variables/components/_spinners.scss

@@ -1,16 +1,33 @@
+@use 'sass:math';
 @use './../color';
 @use './../spacing';
+@use './../type';
+@use './../../functions/sizing';
 
 // Spinners
 
 $spinner-color-primary: color.$yellow !default;
-$spinner-color-secondary: color.$gray-10 !default;
+$spinner-color-secondary: color.$gray-60 !default;
 
-$spinner-size: spacing.$size-huge !default;
+$spinner-size: type.$font-size-56 !default;
 $spinner-border-width: 6px !default;
 
-$spinner-size-sm: spacing.$size-big !default;
+$spinner-duration: 3.125s !default;
+$spinner-speed-reduced-motion: math.div(1, 8) !default;
+
+$spinner-size-map: (
+  16: type.$font-size-16,
+  24: type.$font-size-24,
+  32: type.$font-size-32,
+  40: type.$font-size-40,
+  48: type.$font-size-48,
+  // 56 is already defined as default
+  80: sizing.px-to-rem(80px),
+);
+
+// DEPRECATED
+$spinner-size-sm: type.$font-size-40 !default;
 $spinner-border-width-sm: spacing.$size-micro !default;
 
-$spinner-size-xs: spacing.$size-small-regular !default;
+$spinner-size-xs: type.$font-size-16 !default;
 $spinner-border-width-xs: spacing.$size-line !default;