@swisspost/design-system-styles 6.5.1 → 6.6.1

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/_forms.scss

@@ -27,12 +27,26 @@
   background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
 }
 
-@mixin form-control-rg {
+@mixin form-rg {
   padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
   font-size: type.$font-size-regular;
   line-height: forms.$input-line-height-rg;
 }
 
+@mixin form-sm {
+  font-size: type.$font-size-14;
+  line-height: forms.$input-line-height-sm;
+  min-height: forms.$input-height-sm;
+  padding-block: forms.$input-padding-y-sm;
+  padding-inline: forms.$input-padding-x-sm;
+}
+
+@mixin form-lg {
+  font-size: type.$font-size-16;
+  line-height: forms.$input-line-height-lg;
+  min-height: forms.$input-height-lg;
+}
+
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.5.1",
+  "version": "6.6.1",
   "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.17",
-    "@types/node": "18.19.5",
-    "autoprefixer": "10.4.16",
+    "@swisspost/design-system-icons": "1.2.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.0.1",
+    "gulp-postcss": "9.1.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "5.0.2",
     "postcss": "8.4.33",
     "postcss-scss": "4.0.9",
-    "prettier": "3.1.1",
+    "prettier": "3.2.5",
     "rimraf": "5.0.5",
-    "sass": "1.69.7",
-    "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.2",
+    "sass": "1.70.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-sass-guidelines": "11.0.0",
+    "stylelint-prettier": "5.0.0",
+    "stylelint-scss": "6.1.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/variables/_type.scss

@@ -41,6 +41,7 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
+$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 

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/_button.scss

@@ -19,7 +19,7 @@ $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !d
 $input-btn-line-height: type.$line-height-copy !default;
 
 $input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-x-sm: spacing.$size-small-regular !default;
 $input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !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/_form-select.scss

@@ -7,8 +7,6 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$form-select-bg-size: 32px 32px !default;
-$form-select-bg-size-sm: 24px 24px !default;
 $_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
 $form-select-indicator: url($_form-select-indicator-icon) !default;
 $form-select-indicator-disabled: url(icons.get-colored-svg-url(

package/variables/components/_form-validation.scss

@@ -25,5 +25,7 @@ $form-feedback-custom-color: color.$success !default;
 $form-feedback-custom-bg: color.$success !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
+rgba($form-feedback-valid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !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;
 
@@ -21,13 +24,13 @@ $input-line-height: type.$line-height-copy !default;
 
 $input-padding-y-sm: button.$input-btn-padding-y-sm !default;
 $input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-copy !default;
+$input-line-height-sm: type.$line-height-sm !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: spacing.$size-small-large !default;
+$input-padding-y-lg: sizing.px-to-rem(11) !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
@@ -60,26 +63,25 @@ $input-height-border: $input-border-width * 2 !default;
 
 $input-height-content: type.$font-size-base * $input-line-height !default;
 $input-height-inner: $input-height-content + ($input-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height: $input-height-inner + sizing.px-to-rem($input-height-border) !default;
 
-$input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
-$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-content-sm: type.$font-size-14 * 1 !default;
+$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
+$input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;
 
-$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
+$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default;
 $form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
-  ($input-padding-y-sm * 2) !default;
-$form-floating-input-height-sm: calc(
-  #{$form-floating-input-height-inner-sm} + #{$input-height-border}
-) !default;
+  (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup
+$form-floating-input-height-sm: $form-floating-input-height-inner-sm +
+  sizing.px-to-rem($input-height-border) !default;
 
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
 
-$input-height-content-lg: type.$font-size-medium * $input-line-height-lg !default;
-$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.px-to-rem(2) !default; // - 2px and remove approximation in Figma
+$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
+$input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;
 
 $input-transition:
   border-color 0.15s ease-in-out,
@@ -116,14 +118,14 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
-$form-floating-height: $input-height-lg;
+$form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
 $form-floating-line-height: type.$line-height-copy;
 $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
-$form-floating-label-height: $input-height-inner-lg;
+$form-floating-label-height: $form-floating-height;
 $form-floating-label-color: $input-placeholder-color;
 $form-floating-label-font-size: type.$font-size-bigger-regular;
 $form-floating-label-font-size-small: type.$font-size-tiny;
@@ -132,10 +134,8 @@ $form-floating-label-scale: math.div(
   $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
-$form-floating-label-padding-t: calc(
-  #{$input-border-width} + #{$form-floating-label-height * 0.5} - #{$form-floating-label-font-size *
-    type.$line-height-copy * 0.5}
-);
+$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size *
+  type.$line-height-copy * 0.5;
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
@@ -148,10 +148,9 @@ $form-floating-transition-out:
 $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;
-$form-floating-label-font-size-placeholder-sm: type.$font-size-14; // TODO: replace with input font-size after adjustment
-$form-floating-padding-x-sm: $input-padding-x-sm;
+$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
+$form-floating-padding-x-sm: spacing.$size-regular;
 $form-floating-padding-y-sm: $input-padding-y-sm;
-$form-floating-label-height-sm: $form-floating-input-height-inner-sm;
-$form-floating-label-padding-t-sm: calc(
-  #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-sm}
-);
+$form-floating-label-height-sm: $form-floating-input-height-sm;
+$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
+  $form-floating-label-font-size-sm;

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;