@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/mixins/_list.scss

@@ -0,0 +1,112 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+@mixin list-bullet($child-selector: 'li') {
+  list-style: none;
+  margin-block: tokens.get('list-bullet-margin-block', elements.$post-listbullet);
+  padding-inline-start: calc(
+    #{tokens.get('list-bullet-item-icon-size', elements.$post-listbullet)} + #{tokens.get(
+        'list-bullet-item-icon-gap-inline',
+        elements.$post-listbullet
+      )}
+  );
+
+  > #{$child-selector} {
+    margin: 0;
+    padding-inline: 0;
+    padding-block: tokens.get('list-bullet-item-text-padding-block', elements.$post-listbullet);
+
+    ~ #{$child-selector} {
+      margin-block-start: tokens.get('list-bullet-item-gap-block', elements.$post-listbullet);
+    }
+
+    &::before {
+      display: block;
+      content: '';
+      box-sizing: content-box;
+      float: inline-start;
+      margin-block-start: calc(
+        (#{tokens.get('body-line-height', elements.$post-body)} * 0.5em) -
+          (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * 0.5)
+      );
+      margin-inline-start: calc(
+        (#{tokens.get('list-bullet-item-icon-size', elements.$post-listbullet)} * -0.5) +
+          (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * -0.5) +
+          (#{tokens.get('post-list-bullet-item-icon-gap-inline', elements.$post-listbullet)} * -1)
+      );
+      width: tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet);
+      height: tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet);
+      background-color: currentColor;
+      border-radius: 50%;
+    }
+  }
+}
+
+@mixin list-number($child-selector: 'li') {
+  margin-block: tokens.get('list-number-item-gap-block', elements.$post-listnumber);
+  padding-inline-end: tokens.get('list-number-item-gap-block', elements.$post-listnumber);
+  padding-inline-start: calc(
+    tokens.get('list-number-item-icon-size', elements.$post-listnumber) +
+      tokens.get('list-number-item-icon-gap-inline', elements.$post-listnumber)
+  );
+
+  > #{$child-selector} {
+    margin-block-end: tokens.get('list-number-margin-block', elements.$post-listnumber);
+    padding-inline-start: tokens.get('list-number-item-icon-gap-inline', elements.$post-listnumber);
+    padding-block: tokens.get('list-number-item-text-padding-block', elements.$post-listnumber);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+@mixin list-inline($child-selector: 'li') {
+  @include list-unstyled($child-selector) {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: tokens.get('list-bullet-item-gap-block', elements.$post-listbullet);
+    column-gap: calc(
+      tokens.get('post-list-bullet-item-icon-gap-inline', elements.$post-listbullet) * 2
+    );
+    margin-block: tokens.get('list-bullet-margin-block', elements.$post-listbullet);
+  }
+}
+
+@mixin list-revert($child-selector: 'li') {
+  all: revert;
+  @content;
+
+  > #{$child-selector} {
+    all: revert;
+
+    ~ #{$child-selector} {
+      all: revert;
+    }
+
+    &::before {
+      all: revert;
+    }
+  }
+}
+
+@mixin list-unstyled($child-selector: 'li') {
+  all: unset;
+  display: block;
+  list-style: none;
+  @content;
+
+  > #{$child-selector} {
+    all: unset;
+    display: list-item;
+
+    ~ #{$child-selector} {
+      all: unset;
+      display: list-item;
+    }
+
+    &::before {
+      all: unset;
+    }
+  }
+}

package/mixins/_media.scss

@@ -1,4 +1,18 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../functions/breakpoint';
+
+$offset: 0.02;
+
+/**
+  Creates a min-width breakpoint with the given value
+  @param $device-size A pixel value or a key for the breakpoints map
+*/
 @mixin min($device-size) {
+  @if (meta.type-of($device-size) == 'string') {
+    $device-size: breakpoint.min-width($device-size);
+  }
+
   @if $device-size != 0 {
     @media screen and (min-width: $device-size) {
       @content;
@@ -8,14 +22,56 @@
   }
 }
 
+/**
+  Creates a max-width breakpoint with the given value
+  @param $device-size A pixel value or a key for the breakpoints map
+*/
 @mixin max($device-size) {
-  @media screen and (max-width: ($device-size - 0.01)) {
+  @if (meta.type-of($device-size) == 'string') {
+    $device-size: breakpoint.min-width($device-size);
+  }
+
+  @media screen and (max-width: ($device-size - $offset)) {
     @content;
   }
 }
 
+/**
+  Creates an in-between breakpoint with the given values
+  @param $min-size A pixel value or a key for the breakpoints map
+  @param $max-size A pixel value or a key for the breakpoints map
+*/
 @mixin between($min-size, $max-size) {
-  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
+  @if (meta.type-of($min-size) == 'string') {
+    $min-size: breakpoint.min-width($min-size);
+  }
+  @if (meta.type-of($max-size) == 'string') {
+    $max-size: breakpoint.min-width($max-size);
+  }
+
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) {
     @content;
   }
 }
+
+/**
+  Creates a breakpoint with only the given value
+  @param $size A key for the breakpoint to target
+*/
+@mixin only($size) {
+  @if (meta.type-of($size) == 'string') {
+    $min-size: breakpoint.min-width($size);
+    $next: breakpoint.next($size);
+    $max-size: breakpoint.min-width($next);
+
+    @if $max-size != null {
+      @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) {
+        @content;
+      }
+    } @else if $max-size == null {
+      @media screen and (min-width: $min-size) {
+        @content;
+      }
+    }
+  }
+}

package/mixins/_notification.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 
 @use './color' as color-mx;
 @use './icons' as icons-mx;
@@ -8,42 +9,42 @@
 @use './../variables/spacing';
 @use './../variables/components/close';
 @use './../variables/components/notification';
+@use '../tokens/components';
+@use '../tokens/elements';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-banner;
 
 @mixin notification-size($size) {
+  $default-var: list.nth(notification.$notification-variants, 1);
   $icon-size: map.get(notification.$notification-icon-size-map, $size);
-  $font-size: map.get(notification.$notification-font-size-map, $size);
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
   $padding-y: map.get(notification.$notification-padding-y-map, $size);
-
-  position: relative;
+  $elevation: map.get(notification.$notification-elevation-map, $size);
+  $gap: map.get(notification.$notification-gap-map, $size);
+  min-height: calc(#{$icon-size} + (2 * #{$padding-y}));
   box-sizing: border-box;
-  min-height: 2 * $padding-y + $icon-size;
-  box-shadow: notification.$notification-box-shadow;
-  border-radius: notification.$notification-border-radius;
-  padding: $padding-y $padding-x;
-  padding-inline-start: $padding-x + $icon-size + notification.$notification-gap;
-  margin-block-end: notification.$notification-margin-bottom;
-  font-size: $font-size;
-  font-weight: notification.$notification-font-weight;
 
-  &.no-icon {
-    min-height: 2 * $padding-y + close.$close-size;
-    padding-inline-start: $padding-x;
-  }
+  box-shadow: $elevation;
+  border-radius: tokens.get('banner-border-radius');
 
-  // for notifications with .pi-* icons (deprecated)
-  &[class^='pi-'],
-  &[class*=' pi-'] {
-    background-size: $icon-size;
-    background-position: $padding-x $padding-y;
-    background-repeat: no-repeat;
+  padding: $padding-y $padding-x;
+  padding-inline-start: calc(#{$padding-x} + #{$icon-size} + #{$gap});
+  font-weight: notification.$notification-font-weight;
+  border-style: tokens.get('banner-border-style');
+  border-width: tokens.get('banner-border-width');
+  position: relative;
+  color: tokens.get('body-color', elements.$post-body);
 
-    &.no-icon {
-      background-image: none;
-    }
-  }
+  // Set the neutral notification as the default color
+  @include notification-variant(
+    list.nth($default-var, 2),
+    list.nth($default-var, 3),
+    list.nth($default-var, 4),
+    list.nth($default-var, 5),
+    list.nth($default-var, 6)
+  );
 
-  // for notifications with mask-image icons and post-icon override
   &::before {
     content: '';
     display: block;
@@ -58,9 +59,10 @@
     top: $padding-y;
   }
 
-  &.no-icon,
-  &[class^='pi-'],
-  &[class*=' pi-'] {
+  &.no-icon {
+    min-height: calc(2 * $padding-y + close.$close-size);
+    padding-inline-start: $padding-x;
+
     &::before {
       content: unset;
     }
@@ -79,10 +81,13 @@
 @mixin notification-body($size) {
   $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: notification.$notification-body-gap;
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: notification.$notification-body-gap;
+  }
 
   a {
     font-weight: notification.$notification-link-font-weight;
@@ -92,22 +97,24 @@
     margin-block: $hr-margin-block !important;
   }
 
-  > :only-child,
-  > post-icon:first-child + :last-child {
-    @include notification-heading($size);
-  }
-
   > * {
     margin: 0;
   }
 }
 
-@mixin notification-variant($color, $icon) {
-  @include color-mx.colored-background($color, $allow-alpha: false);
+@mixin notification-variant($color, $icon, $border-color, $icon-color, $scheme) {
+  background-color: $color;
+  border-color: $border-color;
+  color-scheme: $scheme;
 
   // default icon (mask-image)
-  &:not(.no-icon, [class^='pi-'], [class*=' pi-'])::before {
+  &:not(.no-icon)::before {
     @include icons-mx.icon($icon);
+    color: $icon-color;
+
+    @include utilities-mx.high-contrast-mode {
+      color: CanvasText;
+    }
   }
 
   // Prevent flashing when using post-icon
@@ -118,28 +125,27 @@
   // icon override (post-icon), needed when :has is not supported
   > post-icon {
     background-color: $color;
+    color: $icon-color;
   }
 }
 
 @mixin notification-dismissible($size, $close: 'btn-close') {
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
+  $gap: map.get(notification.$notification-gap-map, $size);
 
-  pointer-events: auto;
-  position: relative;
-  padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size;
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    pointer-events: auto;
+    position: relative;
+  }
+
+  &:not(.banner-action):not(.alert-action) {
+    padding-inline-end: calc(#{$padding-x} + #{$gap} + #{close.$close-size});
+  }
 
   > .#{$close} {
     position: absolute;
     inset-block-start: spacing.$spacer;
     inset-inline-end: $padding-x;
   }
-
-  > .#{$close}:first-child + :last-child {
-    @include notification-heading($size);
-  }
-}
-
-@mixin notification-heading($size) {
-  font-size: map.get(notification.$notification-heading-font-size-map, $size);
-  font-weight: notification.$notification-heading-font-weight;
 }

package/mixins/_utilities.scss

@@ -1,9 +1,16 @@
+@use './../themes/bootstrap/core' as *;
+
+@use '../functions/tokens';
+@use '../tokens/helpers';
+@use '../tokens/components';
+
 @use '../variables/spacing';
 @use '../variables/commons';
+@use '../variables/breakpoints';
 
 @mixin reset-list() {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  padding-inline-start: 0;
   list-style: none;
 }
 
@@ -63,14 +70,36 @@
   pointer-events: none;
 }
 
-@mixin generate-utility-class($classname, $size, $property, $value) {
-  .#{$classname}-#{$size}-r {
-    #{$property}: $value !important;
+@mixin high-contrast-mode() {
+  @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+    @content;
   }
 }
 
-@mixin high-contrast-mode() {
-  @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+@mixin high-contrast-mode-dark() {
+  @media (forced-colors: active) and (prefers-color-scheme: dark),
+    (-ms-high-contrast: white-on-black) {
+    @content;
+  }
+}
+
+@mixin high-contrast-mode-light() {
+  @media (forced-colors: active) and (prefers-color-scheme: light),
+    (-ms-high-contrast: black-on-white) {
+    @content;
+  }
+}
+
+@mixin high-contrast-mode-dark() {
+  @media (forced-colors: active) and (prefers-color-scheme: dark),
+    (-ms-high-contrast: white-on-black) {
+    @content;
+  }
+}
+
+@mixin high-contrast-mode-light() {
+  @media (forced-colors: active) and (prefers-color-scheme: light),
+    (-ms-high-contrast: black-on-white) {
     @content;
   }
 }
@@ -91,26 +120,19 @@
 }
 
 @mixin focus-style-none {
-  outline: none;
+  outline: none !important;
 }
 
-@mixin focus-style(
-  $additional-selector: '',
-  $offset: spacing.$size-line,
-  $width: spacing.$size-line,
-  $color: var(--post-focus-color),
-  $style: solid
-) {
+@mixin focus-style($additional-selector: '') {
   &#{$additional-selector} {
-    outline-style: none !important; // !important is needed to override bootstrap .form-control:focus
-    outline-offset: $offset !important;
-    outline-width: $width !important;
-    outline-color: $color !important;
+    outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
+    outline: tokens.get('focus-outline-color', helpers.$post-focus) none
+      tokens.get('focus-outline-width', helpers.$post-focus) !important;
   }
 
   // :has(:focus-visible) mimic a focus-visible-within pseudo-class
   &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
-    outline-style: $style !important;
+    outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
     // In case rules need to be slightly adjusted
     @content;
 
@@ -122,7 +144,7 @@
   // 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: $style !important;
+      outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
       // In case rules need to be slightly adjusted
       @content;
 
@@ -160,11 +182,10 @@
 @mixin disabled-style($additional-selector: '') {
   &:disabled#{$additional-selector} {
     pointer-events: none;
-    color: var(--post-gray-60);
-    border-color: var(--post-gray-40);
-    border-style: dashed;
+    color: tokens.get('input-color-disabled-fg', components.$post-text-input);
+    border-color: tokens.get('input-color-disabled-border', components.$post-text-input);
+    border-style: tokens.get('input-border-style-disabled', components.$post-text-input);
     background-clip: padding-box;
-    text-decoration: line-through;
     // In case rules need to be slightly adjusted
     @content;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.21",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -38,31 +38,31 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "9.0.0-next.2",
-    "@swisspost/design-system-tokens": "9.0.0-next.2",
-    "@types/node": "20.14.14",
-    "autoprefixer": "10.4.19",
+    "@swisspost/design-system-icons": "9.0.0-next.21",
+    "@swisspost/design-system-tokens": "9.0.0-next.21",
+    "@types/node": "22.10.5",
+    "autoprefixer": "10.4.20",
     "copyfiles": "2.4.1",
     "glob": "11.0.0",
     "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": "8.4.49",
     "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
     "rimraf": "6.0.1",
-    "sass": "1.78.0",
-    "stylelint": "16.9.0",
+    "sass-embedded": "1.78.0",
+    "stylelint": "16.12.0",
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.2",
-    "stylelint-scss": "6.5.1",
+    "stylelint-scss": "6.10.0",
     "typescript": "5.5.4",
-    "vite": "5.4.8"
+    "vite": "6.0.9"
   },
   "sass": {
-    "includePaths": [
+    "loadPaths": [
       "node_modules"
     ],
     "outputDir": "./dist"
@@ -79,13 +79,13 @@
     "frontend"
   ],
   "scripts": {
-    "start": "gulp watch",
     "play": "vite --open",
+    "start": "gulp watch",
     "build": "pnpm clean && gulp build",
-    "unit": "gulp sass:tests",
     "clean": "rimraf out-tsc dist src/tokens/temp",
-    "format": "prettier src/**/*.scss --write",
+    "unit": "gulp sass:tests",
     "lint": "stylelint src/**/*.scss !src/tokens/temp/**",
-    "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix"
+    "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix",
+    "format": "prettier src/**/*.scss --write"
   }
 }

package/palettes/_mixins.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../functions/tokens';
+@use '../placeholders/schemes';
+@use '../tokens/elements';
+@use '../tokens/palettes';
+
+@use './variables' as *;
+
+@forward './utilities';
+
+@mixin palettes($theme) {
+  body {
+    background-color: var(--post-current-palette-bg) !important;
+
+    &:not([data-color-scheme='dark']) {
+      @include palette-tokens($default-palette, $theme, 'light');
+    }
+
+    &[data-color-scheme='dark'] {
+      @include palette-tokens($default-palette, $theme, 'dark');
+    }
+  }
+
+  @each $palette in $palettes {
+    .palette-#{$palette} {
+      // Redefining the body color is necessary to ensure that the new color scheme is applied correctly.
+      // Known limitation: body color may be incorrect with nested parent with different `data-color-scheme` values.
+      color: tokens.get('body-color', elements.$post-body);
+      background-color: var(--post-current-palette-bg) !important;
+
+      // Light scheme explicitly set on the palette:
+      &[data-color-scheme='light'],
+
+      // No scheme explicitly set on the palette, but parent has a light scheme:
+      &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])),
+
+      // No scheme explicitly set on the palette, and no scheme on the parent either:
+      &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *) {
+        @include palette-tokens($palette, $theme, 'light', $override-scheme: true);
+      }
+
+      // Dark scheme explicitly set on the palette:
+      &[data-color-scheme='dark'],
+
+      // No scheme explicitly set on the palette, but parent has a dark scheme:
+      &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
+        @include palette-tokens($palette, $theme, 'dark', $override-scheme: true);
+      }
+    }
+  }
+}
+
+@mixin palette-tokens($name, $theme, $scheme, $override-scheme: false) {
+  $palette: map.get(meta.module-variables(palettes), '#{$theme}-#{$scheme}');
+
+  @if (not $palette) {
+    @error 'Palette #{$theme}-#{$scheme} not found.';
+  }
+
+  --post-current-palette-fg: #{tokens.get('palettes-color-#{$name}-fg', $palette)};
+  --post-current-palette-bg: #{tokens.get('palettes-color-#{$name}-bg', $palette)};
+
+  @if ($override-scheme == true) {
+    $bg-scheme: tokens.get('palettes-color-#{$name}-bg-scheme', $palette);
+
+    @if ($bg-scheme == 'light') {
+      @extend %color-scheme-light;
+    } @else {
+      @extend %color-scheme-dark;
+    }
+  }
+}

package/palettes/_utilities.scss

@@ -0,0 +1,3 @@
+.palette-text {
+  color: var(--post-current-palette-fg);
+}

package/palettes/_variables.scss

@@ -0,0 +1,2 @@
+$default-palette: 'default';
+$palettes: $default-palette, 'alternate', 'brand', 'accent';