@swisspost/design-system-styles 6.6.4 → 7.1.0

package/mixins/_accordion.scss

@@ -4,12 +4,12 @@
 
 @mixin background-color() {
   // make light gray the default accordion color
-  @include color-mx.colored-background(color.$gray-background);
+  @include color-mx.colored-background(color.$gray);
 
   // 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);
+      $accordion-bg: if($color == color.$white, color.$gray, color.$white);
       @include color-mx.colored-background($accordion-bg);
     }
   }

package/mixins/_button.scss

@@ -16,8 +16,7 @@
   font: inherit;
   -webkit-user-select: none;
           user-select: none;
-  -webkit-appearance: button;
-          appearance: button; // for input
+  appearance: button; // for input
 }
 
 @mixin button-size($size: md) {

package/mixins/_chip.scss

@@ -0,0 +1,36 @@
+@use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as *;
+
+@use './../variables/components/badge';
+@use './../variables/components/chip';
+@use './../mixins/utilities';
+
+@mixin chip-styles {
+  @include border-radius(chip.$chip-border-radius);
+  display: inline-flex;
+  align-items: center;
+  height: chip.$chip-height;
+  max-width: chip.$chip-max-width;
+  padding-inline: chip.$chip-padding-x;
+  border: chip.$chip-border-width solid chip.$chip-border-color;
+  gap: chip.$chip-gap;
+  line-height: chip.$chip-line-height;
+  font-size: chip.$chip-font-size;
+  font-weight: chip.$chip-font-weight;
+  color: chip.$chip-color;
+  background-color: chip.$chip-bg;
+  transition: chip.$chip-transition;
+
+  > .chip-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+@mixin chip-styles-sm {
+  height: chip.$chip-height-sm;
+  font-size: chip.$chip-font-size-sm;
+  gap: chip.$chip-gap-sm;
+  padding-inline: chip.$chip-padding-x-sm;
+}

package/mixins/_forms.scss

@@ -47,6 +47,7 @@
   min-height: forms.$input-height-lg;
 }
 
+/* Deprecated use the one in utilities.scss */
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;

package/mixins/_icons.scss

@@ -29,9 +29,7 @@
     $final-color: map.get(color.$background-colors, $color);
 
     @if (not $final-color) {
-      $valid-colors: map.keys(color.$background-colors);
-
-      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{$valid-colors}.";
+      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{map.keys(color.$background-colors)}.";
     }
   }
   border-color: $final-color;

package/mixins/_index.scss

@@ -1,6 +1,6 @@
 @forward 'animation';
-@forward 'badge';
 @forward 'button';
+@forward 'chip';
 @forward 'color';
 @forward 'focus';
 @forward 'form-checks';

package/mixins/_utilities.scss

@@ -1,3 +1,6 @@
+@use '../variables/spacing';
+@use '../variables/commons';
+
 @mixin reset-list() {
   margin: 0;
   padding: 0;
@@ -79,3 +82,85 @@
     @content;
   }
 }
+
+@mixin focus-style-none {
+  outline: none;
+}
+
+@mixin focus-style($additional-selector: '') {
+  &#{$additional-selector} {
+    outline-style: none !important; // !important is needed to override bootstrap .form-control:focus
+    outline-offset: spacing.$size-line !important;
+    outline-width: spacing.$size-line !important;
+    outline-color: var(--post-focus-color) !important;
+  }
+
+  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
+    outline-style: solid !important;
+
+    @include high-contrast-mode() {
+      outline-color: Highlight !important;
+    }
+
+    // In case rules need to be slightly adjusted
+    @content;
+  }
+
+  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
+  @supports not selector(:has(:focus-visible)) {
+    &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
+      outline-style: solid !important;
+
+      @include high-contrast-mode() {
+        outline-color: Highlight !important;
+      }
+
+      // In case rules need to be slightly adjusted
+      @content;
+    }
+  }
+}
+
+@mixin focus-style-custom($additional-selector: '') {
+  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
+    @content;
+  }
+
+  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
+  @supports not selector(:has(:focus-visible)) {
+    &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
+      @content;
+    }
+  }
+}
+
+@mixin focus-hover-style-custom($additional-selector: '') {
+  @include focus-style-custom($additional-selector) {
+    @content;
+  }
+
+  &:hover#{$additional-selector} {
+    @content;
+  }
+}
+
+@mixin disabled-style($additional-selector: '') {
+  &:disabled#{$additional-selector} {
+    pointer-events: none;
+    color: var(--post-gray-40);
+    border-color: var(--post-gray-40);
+    border-style: dashed;
+    background-clip: padding-box;
+    text-decoration: line-through;
+
+    @include high-contrast-mode() {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    // In case rules need to be slightly adjusted
+    @content;
+  }
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.6.4",
+  "version": "7.1.0",
   "description": "Design System Styles for the Swiss Post web platform.",
-  "author": "Swiss Post <oss@post.ch>",
+  "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     "linkDirectory": true
   },
   "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.0 || ^16.0.0",
     "bootstrap": "~5.3.0"
   },
   "peerDependenciesMeta": {
@@ -30,29 +30,29 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "bootstrap": "5.3.2"
+    "bootstrap": "5.3.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "1.4.0",
-    "@types/node": "18.19.14",
-    "autoprefixer": "10.4.17",
+    "@swisspost/design-system-icons": "7.1.0",
+    "@types/node": "20.12.7",
+    "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
-    "glob": "10.3.10",
+    "glob": "10.3.15",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
     "gulp-postcss": "10.0.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
-    "postcss": "8.4.33",
+    "postcss": "8.4.38",
     "postcss-scss": "4.0.9",
     "prettier": "3.2.5",
-    "rimraf": "5.0.5",
-    "sass": "1.70.0",
-    "stylelint": "16.2.1",
-    "stylelint-config-sass-guidelines": "11.0.0",
+    "rimraf": "5.0.7",
+    "sass": "1.77.1",
+    "stylelint": "16.5.0",
+    "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.0",
-    "stylelint-scss": "6.1.0",
-    "typescript": "4.9.5"
+    "stylelint-scss": "6.3.0",
+    "typescript": "5.3.3"
   },
   "sass": {
     "includePaths": [

package/placeholders/_badge.scss

@@ -1,59 +1,7 @@
-@use './../themes/bootstrap/core' as *;
-
 @use './../variables/components/badge';
 
-%badge {
-  @include border-radius($badge-border-radius);
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: badge.$badge-gap;
-  padding: $badge-padding-y $badge-padding-x;
-  border: badge.$badge-border-width solid badge.$badge-border-color;
-  height: badge.$badge-height;
-  font-size: badge.$badge-font-size;
-  font-weight: $badge-font-weight;
-  line-height: inherit;
-  color: $badge-color;
-  text-align: center;
-  vertical-align: baseline;
-  max-width: 100%;
-
-  > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  > .badge {
-    padding: $size-micro;
-    height: badge.$badge-nested-height;
-    min-width: badge.$badge-nested-height;
-    color: badge.$badge-nested-color;
-    background-color: badge.$badge-nested-bg-color;
-    border-color: badge.$badge-nested-border-color;
-    font-size: badge.$badge-nested-font-size;
-  }
-
-  > .badge,
-  > .btn-close {
-    margin-right: -1 * (badge.$badge-padding-x - badge.$badge-nested-translate-x);
-  }
-
-  &.badge-sm {
-    height: badge.$badge-height-sm;
-    font-size: badge.$badge-font-size-sm;
-    gap: badge.$badge-gap-sm;
-
-    > .badge,
-    > .btn-close {
-      margin-right: -1 * (badge.$badge-padding-x - badge.$badge-nested-translate-x-sm);
-    }
-  }
-
-  // Quick fix for badges in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
+%badge-sm {
+  --post-badge-height: #{badge.$badge-height-sm};
+  --post-badge-padding-x: #{badge.$badge-padding-x-sm};
+  font-size: badge.$badge-font-size-sm;
 }

package/placeholders/_button.scss

@@ -30,6 +30,8 @@
 
   // Invert icon on dark backgrounds
   @include color-mx.on-dark-background() {
+    color: var(--post-contrast-color);
+
     .pi {
       filter: invert(1);
     }

package/placeholders/_close.scss

@@ -6,11 +6,14 @@
 
 @use './../variables/animation';
 @use './../variables/color';
+@use './../variables/commons';
 @use './../variables/components/close';
 
 %btn-close {
   @include button-mx.reset-button;
-  @include forms-mx.focus-outline;
+  @include utilities-mx.focus-style() {
+    border-radius: commons.$border-radius;
+  }
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
@@ -24,6 +27,10 @@
     width: close.$close-size;
   }
 
+  @include color-mx.on-dark-background() {
+    color: var(--post-contrast-color);
+  }
+
   @include utilities-mx.not-disabled-focus-hover() {
     color: close.$close-hover-color;
   }

package/placeholders/_color.scss

@@ -19,6 +19,7 @@
 // light background variables
 %color-background-light-variables {
   --post-contrast-color: #{color.$black};
+  --post-focus-color: #{color.$focus-light};
   --post-contrast-color-inverted: #{color.$white};
 
   @each $name, $color in color.$post-grays {
@@ -37,6 +38,14 @@
     --post-#{$name}-rgb: #{color-fn.rgb-values($color)};
   }
 
+  @each $name, $color in color.$post-black-alphas {
+    --post-black-#{$name}-rgba: #{$color};
+  }
+
+  @each $name, $color in color.$post-white-alphas {
+    --post-white-#{$name}-rgba: #{$color};
+  }
+
   @each $name, $color in color.$background-colors {
     --post-#{$name}-rgb: #{color-fn.rgb-values($color)};
   }
@@ -45,6 +54,7 @@
 // dark background variables
 %color-background-dark-variables {
   --post-contrast-color: #{color.$white};
+  --post-focus-color: #{color.$focus-dark};
   --post-contrast-color-inverted: #{color.$black};
   --post-dark: #{color.$light};
   --post-light: #{color.$dark};

package/themes/bootstrap/_overrides-color.scss

@@ -11,16 +11,6 @@
  * but should not be used.
 */
 
-// $grays are defined in post colors
-// $colors are defined in post colors
-
-$primary: color.$gray-80;
-$secondary: color.$gray-60;
-// $success: color.$success; // Is already defined as $sucess in post-colors
-// $info: color.$info; // Is already defined as $info in post-colors
-// $warning: color.$warning; // Is already defined as $warning in post-colors
-$danger: color.$error;
-
 // Colors that can be used as a background
 $colors: () !default;
 
@@ -28,13 +18,13 @@ $theme-colors: () !default;
 $theme-colors: map.merge(
   $theme-colors,
   (
-    'primary': $primary,
-    'secondary': $secondary,
+    'primary': color.$primary,
+    'secondary': color.$secondary,
     'light': color.$light,
     'dark': color.$dark,
   )
 );
-$theme-colors: map.merge($theme-colors, color.$contextual-colors);
+$theme-colors: map.merge($theme-colors, color.$signal-colors);
 
 // Contrast colors are ok
 
@@ -42,4 +32,4 @@ $body-bg: color.$white;
 $body-color: color.$black;
 
 $component-active-color: color.$white !default;
-$component-active-bg: $primary !default;
+$component-active-bg: color.$primary !default;

package/themes/bootstrap/_overrides-variables.scss

@@ -15,6 +15,7 @@
 @forward './../../variables/components/button';
 @forward './../../variables/components/card';
 @forward './../../variables/components/carousel';
+@forward './../../variables/components/chip';
 @forward './../../variables/components/close';
 @forward './../../variables/components/datepicker';
 @forward './../../variables/components/dropdowns';

package/variables/_color.scss

@@ -6,23 +6,50 @@
  * Colors used by the post style guide
  */
 
-// The one and only
-$yellow: #fc0;
-
 // Grayscale
-$gray-background: #f4f3f1;
-$gray-background-light: #faf9f8;
-
-$white: #fff;
 $gray-10: hsl(0, 0%, 90%);
 $gray-20: hsl(0, 0%, 80%);
 $gray-40: hsl(0, 0%, 60%);
 $gray-60: hsl(0, 0%, 40%);
 $gray-80: hsl(0, 0%, 20%);
-$black: #000;
 
+// Black alpha
+$black-alpha-10: rgba(0, 0, 0, 0.1);
+$black-alpha-20: rgba(0, 0, 0, 0.2);
+$black-alpha-40: rgba(0, 0, 0, 0.4);
+$black-alpha-60: rgba(0, 0, 0, 0.6);
+$black-alpha-80: rgba(0, 0, 0, 0.8);
+
+// White alpha
+$white-alpha-10: rgba(255, 255, 255, 0.1);
+$white-alpha-20: rgba(255, 255, 255, 0.2);
+$white-alpha-40: rgba(255, 255, 255, 0.4);
+$white-alpha-60: rgba(255, 255, 255, 0.6);
+$white-alpha-80: rgba(255, 255, 255, 0.8);
+
+// Brand
+$yellow: #fc0; // The one and only
+$white: #fff;
+$light: #faf9f8;
+$gray: #f4f3f1;
 $dark: $gray-80;
-$light: $gray-background-light;
+$black: #000;
+$primary: $gray-80;
+$secondary: $gray-60;
+
+// Focus
+$focus-light: #1976c8;
+$focus-dark: $white;
+
+// Signal Colors
+$success: #2c871d; /* When value is changed, please changed as well the copied value in ../functions/_contrast.scss, @function light-or-dark()*/
+$error: #a51728;
+$warning: #f49e00;
+$info: #cce4ee;
+
+$success-background: #c0debb;
+$error-background: #ffdade;
+$warning-background: #fce2b2;
 
 // Accent colors
 $nightblue-dark: #004976;
@@ -38,22 +65,6 @@ $olive-bright: #aa9d2e;
 $aubergine-dark: #523178;
 $aubergine-bright: #7566a0;
 
-// Contextual colors (deprecated)
-$success: #2c911c;
-$success-text: #255e1c;
-$error: #a51728;
-$error-text: #8f0d1c;
-$warning: #f49e00;
-$info: #cce4ee;
-
-// Signal Colors
-$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;
-$error-background: #ffdade;
-$warning-background: #fce2b2;
-
 /**
  * Maps. Allow maps to have custom colors from the project
  * by always merging into a default empty map
@@ -71,14 +82,27 @@ $post-grays: map.merge(
   )
 );
 
-$contextual-colors: () !default;
-$contextual-colors: map.merge(
-  $contextual-colors,
+$post-black-alphas: () !default;
+$post-black-alphas: map.merge(
+  $post-black-alphas,
   (
-    'info': $info,
-    'success': $success,
-    'warning': $warning,
-    'danger': $error,
+    'alpha-10': $black-alpha-10,
+    'alpha-20': $black-alpha-20,
+    'alpha-40': $black-alpha-40,
+    'alpha-60': $black-alpha-60,
+    'alpha-80': $black-alpha-80,
+  )
+);
+
+$post-white-alphas: () !default;
+$post-white-alphas: map.merge(
+  $post-white-alphas,
+  (
+    'alpha-10': $white-alpha-10,
+    'alpha-20': $white-alpha-20,
+    'alpha-40': $white-alpha-40,
+    'alpha-60': $white-alpha-60,
+    'alpha-80': $white-alpha-80,
   )
 );
 
@@ -86,12 +110,20 @@ $signal-colors: () !default;
 $signal-colors: map.merge(
   $signal-colors,
   (
-    'success-green': $success-green,
-    'error-red': $error-red,
-    'warning-orange': $warning-orange,
+    'success': $success,
+    'warning': $warning,
+    'error': $error,
+    'info': $info,
+  )
+);
+
+$signal-background-colors: () !default;
+$signal-background-colors: map.merge(
+  $signal-background-colors,
+  (
     'success-background': $success-background,
-    'error-background': $error-background,
     'warning-background': $warning-background,
+    'error-background': $error-background,
   )
 );
 
@@ -120,24 +152,52 @@ $background-colors: map.merge(
   $background-colors,
   (
     'yellow': $yellow,
+    'white': $white,
     'light': $light,
-    'gray': $gray-background,
+    'gray': $gray,
     'dark': $dark,
-    'primary': $gray-80,
-    'white': $white,
     'black': $black,
+    'primary': $primary,
+    'secondary': $secondary,
   )
 );
 
-// Merge with the other lists
-$background-colors: map.merge($background-colors, $contextual-colors);
-$background-colors: map.merge($background-colors, $accent-colors);
+$notification-colors: () !default;
+$notification-colors: list.join(
+  $notification-colors,
+  (
+    // When changed, check $notification-variants as well in packages/styles/src/variables/components/_notification.scss
+    'primary' $gray-80,
+    'success' $success,
+    'danger' $error,
+    'warning' $warning,
+    'info' $info,
+    'gray' $gray,
+    // deprecated
+    'notification' $gray-80,
+    'error' $error
+  )
+);
+
+// Merge with the other color maps
 $background-colors: map.merge($background-colors, $signal-colors);
+$background-colors: map.merge($background-colors, $signal-background-colors);
+$background-colors: map.merge($background-colors, $accent-colors);
 
 // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
 $dark-backgrounds: () !default;
-@each $colorname, $color in $background-colors {
+@each $color-name, $color in $background-colors {
+  @if (contrast-fn.light-or-dark($color) == 'dark') {
+    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma);
+  }
+}
+@each $color-name, $color in $notification-colors {
   @if (contrast-fn.light-or-dark($color) == 'dark') {
-    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$colorname}', $separator: comma);
+    $dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma);
+    $dark-backgrounds: list.append(
+      $dark-backgrounds,
+      'post-alert[type=#{$color-name}]',
+      $separator: comma
+    );
   }
 }

package/variables/_commons.scss

@@ -11,6 +11,8 @@ $border-radius: 4px !default;
 $border-radius-sm: $border-radius !default;
 $border-radius-rg: $border-radius !default;
 $border-radius-lg: $border-radius !default;
+$border-radius-pill: 50rem !default;
+$border-radius-round: 50% !default;
 
 $box-shadow-sm: 0 0 4px 0 rgba(color.$black, 0.4) !default;
 $box-shadow: 0 0 5px 0 rgba(color.$black, 0.3) !default;

package/variables/_features.scss

@@ -13,6 +13,4 @@ $enable-hover-media-query: false;
 $enable-grid-classes: true;
 
 // Prefix for :root CSS variables
-// TODO: this variable will change from "$variable-prefix" to "$prefix" in bootstrap@5.2
-// https://getbootstrap.com/docs/5.2/customize/css-variables/#prefix
-$variable-prefix: 'bs-' !default;
+$prefix: 'bs-' !default;

package/variables/_icons.scss

@@ -1,5 +1,7 @@
 @use 'sass:map';
 @use './components/forms';
+@use '../variables/color';
+@use '../functions/color' as color-fn;
 
 @import './../svg-icon-map';
 
@@ -9,7 +11,8 @@ $svg-post-path: "'%3E%3C/path%3E%3C/svg%3E";
 $svg-pre-colored-icon-map: () !default;
 
 $svg-pi-success-name: 'success';
-$svg-pi-success-path: "'%3E%3C/path%3E%3Ccircle fill='%232C911C' cx='15.9' cy='16.2' r='10.9'/%3E%3Cpolygon fill='%23FFFFFF' points='21.2,11.2 22.2,12.3 14.4,20.1 10.2,15.9 11.3,14.9 14.4,18 '/%3E%3Cpath d='";
+$svg-pi-success-path: "'%3E%3C/path%3E%3Ccircle fill='" + color-fn.encode-uri-color(color.$success) +
+  "' cx='15.9' cy='16.2' r='10.9'/%3E%3Cpolygon fill='%23FFFFFF' points='21.2,11.2 22.2,12.3 14.4,20.1 10.2,15.9 11.3,14.9 14.4,18 '/%3E%3Cpath d='";
 $svg-pre-colored-icon-map: map.merge(
   (
     $svg-pi-success-name: $svg-pi-success-path,