@swisspost/design-system-styles 6.5.0 → 6.6.0

package/layouts/portal/_grid.scss

@@ -16,6 +16,7 @@
   }
 }
 
+//deprecated
 // px-gutters class is used to manipulate border collapse in product-cards
 .row.px-gutters {
   margin-right: -(commons.$border-width);
@@ -48,6 +49,7 @@
     }
   }
 
+  //deprecated
   .vertical-gutters {
     margin-bottom: -(portal-variables.$grid-gutter-width-rg);
 
@@ -58,6 +60,7 @@
   }
 }
 
+//deprecated
 @each $breakpoint in grid.$grid-breakpoints-list {
   .container-fluid-#{$breakpoint} {
     @include media-breakpoint-only($breakpoint) {
@@ -67,12 +70,14 @@
   }
 }
 
+//deprecated
 .container-reset-right-rg-up {
   @include media-breakpoint-up(rg) {
     margin-left: 0;
   }
 }
 
+//deprecated
 .container-reset-left-rg-up {
   @include media-breakpoint-up(rg) {
     margin-right: 0;

package/mixins/_accordion.scss

@@ -0,0 +1,16 @@
+@use './../mixins/color' as color-mx;
+@use './../functions/contrast';
+@use './../variables/color';
+
+@mixin background-color() {
+  // make light gray the default accordion color
+  @include color-mx.colored-background(color.$gray-background);
+
+  // make the accordion white on any background other than white
+  @each $name, $color in color.$background-colors {
+    .bg-#{$name} & {
+      $accordion-bg: if($color == color.$white, color.$gray-background, color.$white);
+      @include color-mx.colored-background($accordion-bg);
+    }
+  }
+}

package/mixins/_elevation.scss

@@ -0,0 +1,6 @@
+@use 'sass:map';
+@use '../variables/elevation';
+
+@mixin elevation($level) {
+  box-shadow: map.get(elevation.$elevation-map, $level);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -33,27 +33,26 @@
     "bootstrap": "5.3.2"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "1.0.16",
-    "@types/node": "18.19.2",
+    "@swisspost/design-system-icons": "1.1.0",
+    "@types/node": "18.19.7",
     "autoprefixer": "10.4.16",
     "copyfiles": "2.4.1",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
-    "gulp-postcss": "9.0.1",
+    "gulp-postcss": "9.1.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "postcss-scss": "4.0.9",
-    "prettier": "3.1.0",
+    "prettier": "3.2.2",
     "rimraf": "5.0.5",
-    "sass": "1.69.5",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-sass-guidelines": "10.0.0",
-    "stylelint-prettier": "4.1.0",
-    "stylelint-scss": "5.3.1",
+    "sass": "1.69.7",
+    "stylelint": "16.1.0",
+    "stylelint-config-sass-guidelines": "11.0.0",
+    "stylelint-prettier": "5.0.0",
+    "stylelint-scss": "6.0.0",
     "typescript": "4.9.5"
   },
   "sass": {
@@ -62,6 +61,17 @@
     ],
     "outputDir": "./dist"
   },
+  "keywords": [
+    "scss",
+    "components",
+    "web-components",
+    "collections",
+    "patterns",
+    "library",
+    "design-system",
+    "ui",
+    "frontend"
+  ],
   "scripts": {
     "start": "gulp watch",
     "build": "pnpm clean && gulp build",

package/placeholders/_close.scss

@@ -14,6 +14,7 @@
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
+  cursor: pointer;
 
   &::before {
     @include icons-mx.icon(2043);
@@ -30,4 +31,9 @@
   &:disabled {
     color: close.$close-disabled-color;
   }
+
+  @include utilities-mx.high-contrast-mode() {
+    color: CanvasText;
+    forced-color-adjust: none;
+  }
 }

package/variables/_color.scss

@@ -47,7 +47,7 @@ $warning: #f49e00;
 $info: #cce4ee;
 
 // Signal Colors
-$success-green: #2c871d;
+$success-green: #2c871d; /* When value is changed, please changed as well the copied value in ../functions/_contrast.scss, @function light-or-dark()*/
 $error-red: #a51728;
 $warning-orange: #f49e00;
 $success-background: #c0debb;

package/variables/components/_badge.scss

@@ -14,7 +14,10 @@ $badge-height: button.$btn-height-rg;
 $badge-gap: spacing.$size-mini;
 $badge-border-color: var(--post-gray-60);
 $badge-border-width: commons.$border-thick;
-$badge-transition: color 250ms, background-color 250ms, border-color 250ms;
+$badge-transition:
+  color 250ms,
+  background-color 250ms,
+  border-color 250ms;
 $badge-hover-color: color.$black;
 $badge-hover-bg-color: color.$gray-10;
 $badge-active-color: color.$black;

package/variables/components/_breadcrumbs.scss

@@ -1,3 +1,4 @@
+@use 'sass:string';
 @use './../color';
 @use './../commons';
 
@@ -16,6 +17,6 @@ $breadcrumb-divider-color: color.$gray-60 !default;
 $breadcrumb-link-color: color.$gray-60 !default;
 $breadcrumb-hover-color: color.$black !default;
 $breadcrumb-active-color: color.$gray-60 !default;
-$breadcrumb-divider: quote('/') !default;
+$breadcrumb-divider: string.quote('/') !default;
 
 $breadcrumb-border-radius: commons.$border-radius !default;

package/variables/components/_form-check.scss

@@ -74,7 +74,8 @@ $form-check-feedback-margin-top: spacing.$size-small-regular !default;
 $form-switch-padding-start: 0 !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-border-color}' stroke-width='2' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: background-position animation.$transition-base-timing,
+$form-switch-transition:
+  background-position animation.$transition-base-timing,
   background-color animation.$transition-time-default !default;
 $form-switch-checked-color: color.$white !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-checked-border-color}' stroke-width='2' fill='#{$form-switch-checked-color}'/></svg>") !default;

package/variables/components/_forms.scss

@@ -12,6 +12,9 @@
 
 // Forms
 
+$form-bg-size: 32px !default;
+$form-bg-size-sm: 24px !default;
+
 $form-label-margin-bottom: 0.5rem !default;
 $form-label-color: var(--post-contrast-color) !default;
 

package/variables/components/_nav.scss

@@ -1,3 +1,4 @@
+@use 'sass:color' as sass-color;
 @use './../color';
 @use './../commons';
 @use './../type';
@@ -10,7 +11,9 @@ $nav-link-font-size: null !default;
 $nav-link-font-weight: null !default;
 $nav-link-color: color.$gray-60 !default;
 $nav-link-hover-color: color.$black !default;
-$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+$nav-link-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out !default;
 $nav-link-disabled-color: color.$gray-20 !default;
 
@@ -29,11 +32,13 @@ $nav-pills-link-active-bg: color.$gray-80 !default;
 // Design System custom variables
 $nav-link-padding: spacing.$spacer !default;
 
-$nav-tabs-link-hover-bg: lighten(color.$gray-10, 5%) !default;
+$nav-tabs-link-hover-bg: sass-color.adjust(color.$gray-10, $lightness: 5%) !default;
 $nav-tabs-link-text-color: color.$gray-60 !default;
 $nav-tabs-link-active-font-weight: bold !default;
 
-$nav-tabs-focus-box-shadow: 0 0 0 1px color.$white, 0 0 0 2px color.$gray-80 !default;
+$nav-tabs-focus-box-shadow:
+  0 0 0 1px color.$white,
+  0 0 0 2px color.$gray-80 !default;
 $nav-tabs-focus-box-shadow-width: 2px !default;
 
 $nav-tabs-i-border-color: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;

package/variables/components/_notification.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:list';
 @use './../color';
 @use './../commons';
 @use './../spacing';
@@ -14,7 +16,7 @@ $notification-heading-font-weight: type.$headings-font-weight !default;
 $notification-buttons-gap: spacing.$size-mini !default;
 
 $notification-padding-x-map: () !default;
-$notification-padding-x-map: map-merge(
+$notification-padding-x-map: map.merge(
   $notification-padding-x-map,
   (
     'alert': spacing.$size-small-large,
@@ -23,7 +25,7 @@ $notification-padding-x-map: map-merge(
 );
 
 $notification-padding-y-map: () !default;
-$notification-padding-y-map: map-merge(
+$notification-padding-y-map: map.merge(
   $notification-padding-y-map,
   (
     'alert': spacing.$size-regular,
@@ -32,7 +34,7 @@ $notification-padding-y-map: map-merge(
 );
 
 $notification-font-size-map: () !default;
-$notification-font-size-map: map-merge(
+$notification-font-size-map: map.merge(
   $notification-font-size-map,
   (
     'alert': type.$font-size-base,
@@ -41,7 +43,7 @@ $notification-font-size-map: map-merge(
 );
 
 $notification-heading-font-size-map: () !default;
-$notification-heading-font-size-map: map-merge(
+$notification-heading-font-size-map: map.merge(
   $notification-heading-font-size-map,
   (
     'alert': type.$font-size-bigger-regular,
@@ -50,7 +52,7 @@ $notification-heading-font-size-map: map-merge(
 );
 
 $notification-hr-margin-block-map: () !default;
-$notification-hr-margin-block-map: map-merge(
+$notification-hr-margin-block-map: map.merge(
   $notification-hr-margin-block-map,
   (
     'alert': spacing.$size-mini spacing.$size-small-regular,
@@ -59,7 +61,7 @@ $notification-hr-margin-block-map: map-merge(
 );
 
 $notification-icon-size-map: () !default;
-$notification-icon-size-map: map-merge(
+$notification-icon-size-map: map.merge(
   $notification-icon-size-map,
   (
     'alert': spacing.$size-small-huge,
@@ -68,7 +70,7 @@ $notification-icon-size-map: map-merge(
 );
 
 $notification-variants: () !default;
-$notification-variants: join(
+$notification-variants: list.join(
   $notification-variants,
   (
     'primary' color.$gray-80 3134,

package/variables/components/_tables.scss

@@ -1,3 +1,4 @@
+@use 'sass:color' as sass-color;
 @use './../color';
 @use './../commons';
 @use './../spacing';
@@ -29,7 +30,7 @@ $table-head-color: color.$gray-40 !default;
 $table-dark-bg: color.$gray-80 !default;
 $table-dark-accent-bg: rgba(color.$white, 0.05) !default;
 $table-dark-hover-bg: rgba(color.$white, 0.075) !default;
-$table-dark-border-color: lighten(color.$gray-80, 7.5%) !default;
+$table-dark-border-color: sass-color.adjust(color.$gray-80, $lightness: 7.5%) !default;
 $table-dark-color: color.$black !default;
 
 $table-striped-order: odd !default;