@swisspost/design-system-styles 6.6.4 → 7.1.0

package/components/stepper.scss

@@ -1,226 +1,371 @@
-@use './../mixins/size' as size-mx;
+@use 'sass:math';
+
 @use './../mixins/icons' as icons-mx;
+@use './../mixins/size' as size-mx;
 @use './../mixins/utilities';
 
-@use './../variables/spacing';
 @use './../variables/color';
+@use './../variables/commons';
 @use './../variables/components/stepper';
 
 @use './../themes/bootstrap/core' as *;
 
+// for backward compatibility
 .stepper-container {
   @include size-mx.responsive-size('big', 'margin-bottom');
-  position: relative;
-}
-
-.stepper-bar {
-  height: stepper.$stepper-bar-height;
-  margin-top: stepper.$stepper-indicator-height * 0.5;
-  margin-bottom: -1 * (stepper.$stepper-bar-height + stepper.$stepper-indicator-height) * 0.5;
 
-  .progress-bar {
-    background-color: color.$yellow;
+  > .stepper-bar {
+    display: none;
   }
 }
 
 .stepper {
+  // start a counter for the step numbers
   counter-reset: step-index;
 
-  list-style: none;
-  padding: 0 (0.5 * stepper.$stepper-indicator-height);
-  margin: 0;
+  @include utilities.reset-list;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(#{0.5 * stepper.$stepper-indicator-height}, 1fr));
-  justify-items: center;
+  position: relative;
+  overflow: hidden;
+
+  // the first column is half a step wide to make sure the separators are the same size even on small screens
+  grid-template-columns: math.div(stepper.$stepper-indicator-size, 2);
+
+  // all other columns are 1 fraction of the available space ase we don't know the number of steps
+  grid-auto-columns: minmax(0, 1fr);
+
+  // we use a padding and negative margin on the last step for the same reason we need the first column
+  padding-inline-end: math.div(stepper.$stepper-indicator-size, 2);
 }
 
 .stepper-item {
-  counter-increment: step-index;
+  grid-row: 1;
   position: relative;
-  display: flex;
-  flex-direction: column;
-  transition: color 250ms;
 
-  // Stepper indicator styles
-  &::before {
-    content: '';
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: stepper.$stepper-indicator-height;
-    width: stepper.$stepper-indicator-height;
-    margin-bottom: -1 * stepper.$stepper-indicator-height;
-    color: stepper.$stepper-indicator-color;
-    background-color: stepper.$stepper-indicator-bg;
-    border: stepper.$stepper-indicator-border-width solid stepper.$stepper-indicator-border-color;
-    border-radius: 50%;
-    font-size: stepper.$stepper-indicator-font-size;
-    font-weight: stepper.$stepper-indicator-font-weight;
-    transition: background 250ms;
-  }
-
-  &[aria-current] ~ ::before {
-    color: stepper.$stepper-indicator-future-color;
-    background-color: stepper.$stepper-indicator-future-bg;
+  &:not(:first-child) {
+    padding-inline-start: math.div(stepper.$stepper-link-spacing, 2);
   }
 
-  &:is(:focus-visible, :focus-within)::before {
-    outline: stepper.$stepper-indicator-hover-outline;
+  &:not(:last-child) {
+    padding-inline-end: math.div(stepper.$stepper-link-spacing, 2);
+    grid-column: span 2;
   }
 
-  // Check icon (for completed steps only)
+  // progress bar
+  &::before,
   &::after {
-    @include icons-mx.icon(2105);
     content: '';
-    position: absolute;
     display: block;
-    top: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
-    height: stepper.$stepper-indicator-check-icon-size;
-    width: stepper.$stepper-indicator-check-icon-size;
+    position: absolute;
+    inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2);
+    height: stepper.$stepper-bar-height;
+    background-color: stepper.$stepper-bar-color;
+    inset-inline: 0 0;
   }
 
-  &[aria-current],
-  &[aria-current] ~ & {
-    pointer-events: none;
-
+  &:not(:first-child, :last-child) {
     &::before {
-      content: counter(step-index);
+      inset-inline-end: 50%;
     }
 
     &::after {
-      content: unset;
+      inset-inline-start: 50%;
     }
   }
 
-  // First stepper item - left aligned
-  &:first-child {
-    justify-self: start;
-    align-items: start;
-    transform: translateX(#{-0.5 * stepper.$stepper-indicator-height});
+  // current and completed steps are preceded by a yellow segment (except for the first step)
+  &:not(&[aria-current='step'] ~ *, :first-child)::before,
+  // completed steps are also followed by a yellow segment (except for the last step)
+  &:not([aria-current='step']:not(:last-child), &[aria-current='step'] ~ *)::after {
+    background-color: stepper.$stepper-bar-fill-color;
+    z-index: 1;
+  }
+}
 
-    &::after {
-      left: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
-    }
+.stepper-link {
+  // -webkit-box is needed for line-clamp: https://caniuse.com/css-line-clamp
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  text-decoration: none;
+  color: stepper.$stepper-link-color;
+  width: -moz-fit-content;
+  width: fit-content;
+  line-height: stepper.$stepper-link-line-height;
+
+  // not adding ellipsis if the like doesn't have a title for accessibility reasons
+  &:not([title]) {
+    -webkit-line-clamp: initial;
   }
 
-  // Last stepper item - right aligned
-  &:last-child {
-    justify-self: end;
-    align-items: end;
-    text-align: right;
-    margin-right: -0.5 * stepper.$stepper-indicator-height;
+  .stepper-item:not(:first-child, :last-child) > & {
+    margin-inline: auto;
+    text-align: center;
+  }
 
-    &::after {
-      right: 0.5 * (stepper.$stepper-indicator-height - stepper.$stepper-indicator-check-icon-size);
-    }
+  .stepper-item:last-child > & {
+    margin-inline-start: auto;
+    margin-inline-end: -1 * math.div(stepper.$stepper-indicator-size, 2); // negative margin matching the container padding
+    text-align: end;
   }
 
-  // Other stepper items - centered
-  &:not(:first-child):not(:last-child) {
-    grid-column-end: span 2;
-    align-items: center;
+  .stepper-item[aria-current='step'] > & {
+    color: stepper.$stepper-link-current-color;
+    font-weight: stepper.$stepper-link-current-font-weight;
+  }
+}
 
-    &::after {
-      left: calc(50% - #{0.5 * stepper.$stepper-indicator-check-icon-size});
-    }
+// step indicator
+.stepper-link::before {
+  counter-increment: step-index;
+  content: counter(step-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  height: stepper.$stepper-indicator-size;
+  width: stepper.$stepper-indicator-size;
+  box-sizing: border-box;
+  margin-block-end: stepper.$stepper-link-gap;
+  color: stepper.$stepper-indicator-color;
+  background-color: stepper.$stepper-indicator-bg;
+  border: stepper.$stepper-indicator-border-width solid stepper.$stepper-indicator-border-color;
+  border-radius: 50%;
+  font-weight: stepper.$stepper-indicator-font-weight;
+  text-indent: initial;
+  transition: stepper.$stepper-indicator-transition;
+
+  .stepper-item:not(:first-child, :last-child) > & {
+    margin-inline: auto;
   }
 
-  &:hover {
-    color: stepper.$stepper-indicator-hover-color;
+  .stepper-item:last-child > & {
+    margin-inline-start: auto;
+  }
 
-    &::before {
-      background-color: stepper.$stepper-indicator-hover-bg;
-    }
+  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
+    color: transparent;
+  }
+
+  .stepper-item[aria-current='step'] ~ .stepper-item > & {
+    color: stepper.$stepper-indicator-future-color;
+    background-color: stepper.$stepper-indicator-future-bg;
   }
 }
 
-.stepper-link {
+// check icon
+.stepper-link::after {
+  @include icons-mx.icon(2105);
+  display: block;
+  position: absolute;
+  top: math.div((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), 2);
   z-index: 1;
-  padding-top: stepper.$stepper-indicator-height + stepper.$stepper-link-gap;
-  text-decoration: none;
-  color: stepper.$stepper-link-color;
-  transition: color 250ms;
-  text-align: center;
+  height: stepper.$stepper-indicator-check-icon-size;
+  width: stepper.$stepper-indicator-check-icon-size;
+  transition: stepper.$stepper-indicator-transition;
+  color: stepper.$stepper-indicator-color;
+
+  .stepper-item:first-child > & {
+    left: math.div(
+      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
+      2
+    );
+  }
 
-  .stepper-item[aria-current] > & {
-    color: stepper.$stepper-link-current-color;
-    font-size: stepper.$stepper-link-current-font-size;
-    font-weight: stepper.$stepper-link-current-font-weight;
+  .stepper-item:not(:first-child, :last-child) > & {
+    left: calc(50% - #{math.div(stepper.$stepper-indicator-check-icon-size, 2)});
+  }
+
+  .stepper-item:last-child > & {
+    right: math.div(
+      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
+      2
+    );
   }
 
-  @at-root a:hover#{&},
-    :focus-visible#{&} {
-    color: stepper.$stepper-link-hover-color;
+  // show only for completed steps
+  .stepper-item:not([aria-current='step'], .stepper-item[aria-current='step'] ~ *) > & {
+    content: '';
+  }
+}
+
+// hover/focus state
+.stepper-link:is(a[href]) {
+  @include utilities.focus-style {
+    border-radius: commons.$border-radius;
   }
 
-  &:focus-visible {
-    outline: none;
+  @include utilities.focus-hover-style-custom() {
+    color: stepper.$stepper-link-color;
+
+    .stepper-item[aria-current='step'] > & {
+      color: stepper.$stepper-link-current-color;
+    }
+
+    // step indicator
+    &::before,
+    .stepper-item[aria-current='step'] ~ .stepper-item > &::before {
+      color: stepper.$stepper-indicator-hover-color;
+      background-color: stepper.$stepper-indicator-hover-bg;
+    }
+
+    // check icon
+    &::after {
+      color: stepper.$stepper-indicator-hover-color;
+    }
   }
 }
 
+// smaller screens
 @include media-breakpoint-down(rg) {
-  .stepper-item {
-    &:not([aria-current]) .stepper-link {
-      overflow: hidden;
-      white-space: nowrap;
+  .stepper-item:first-child,
+  .stepper-item:last-child {
+    padding-inline: 0;
+  }
+
+  .stepper-item[aria-current='step'] {
+    // using "display: contents" on the stepper-item and stepper-link so that label, indicator and progress bar can be directly placed in the grid
+    display: contents;
+
+    > .stepper-link {
+      display: contents;
+    }
+
+    // progress bar
+    &::before {
+      grid-row: -1;
+      margin-block-start: math.div(
+        (stepper.$stepper-indicator-size - stepper.$stepper-bar-height),
+        2
+      );
+      position: static;
+    }
+
+    &:not(:last-child) > .stepper-link::before {
+      grid-row: -1;
+    }
+
+    &:not(:first-child, :last-child)::after {
+      inset-inline-start: 0;
+    }
+  }
+
+  .stepper-item:not([aria-current='step']) {
+    grid-row: -1;
+    justify-self: stretch;
+
+    // hide completed and future step labels
+    > .stepper-link {
+      -webkit-line-clamp: initial;
+      line-height: 0;
       text-indent: 100%;
-      width: stepper.$stepper-indicator-height;
     }
   }
-}
 
-@include utilities.high-contrast-mode() {
-  .stepper-bar {
-    background-color: CanvasText;
-    border: 0 none;
+  .stepper-link {
+    white-space: nowrap;
+    width: 100%;
+  }
 
-    .progress-bar {
-      background-color: Highlight;
+  // step indicator
+  .stepper-link::before {
+    .stepper-item[aria-current='step']:first-child > & {
+      order: -1;
+    }
+
+    .stepper-item[aria-current='step']:not(:first-child, :last-child) > & {
+      margin-inline-start: 0;
+      transform: translateX(-50%);
+    }
+
+    .stepper-item[aria-current='step']:last-child > & {
+      position: absolute;
+      z-index: 2;
+      inset-block-start: 0;
+      inset-inline-end: 0;
     }
   }
+}
 
+@include utilities.high-contrast-mode {
   .stepper-item {
-    &::before {
-      width: calc(#{stepper.$stepper-indicator-height} + 2 * #{spacing.$size-line});
-      height: calc(#{stepper.$stepper-indicator-height} + 2 * #{spacing.$size-line});
-      line-height: calc(#{stepper.$stepper-indicator-height} + 2 * #{spacing.$size-line});
-      color: ButtonText;
-      background-color: ButtonFace;
-      border: 0;
-      outline: spacing.$size-line solid VisitedText;
-      outline-offset: -3 * spacing.$size-line;
-      margin-top: -1 * spacing.$size-line;
+    &::before,
+    &::after {
+      background-color: CanvasText;
     }
 
-    &[aria-current] ~ &::before {
-      outline-color: ButtonBorder;
+    &:not(&[aria-current='step'] ~ &, :first-child)::before,
+    &:not([aria-current='step']:not(:last-child), &[aria-current='step'] ~ *)::after {
+      background-color: Highlight;
     }
+  }
 
-    &[aria-current]::before {
-      outline-color: Highlight;
+  .stepper-link {
+    &::before {
+      forced-color-adjust: none;
     }
 
-    &:is(:focus-visible, :focus-within)::before {
-      border: spacing.$size-line solid Highlight;
-      line-height: stepper.$stepper-indicator-height;
-      outline-color: VisitedText;
+    .stepper-item[aria-current='step'] > & {
+      &::before {
+        background-color: Canvas;
+        color: CanvasText;
+      }
     }
 
-    &[aria-current] ~ &:is(:focus-visible, :focus-within)::before {
-      outline-color: ButtonBorder;
+    .stepper-item[aria-current='step'] ~ .stepper-item > &,
+    .stepper-item:not([aria-current='step']) > & {
+      &::before {
+        color: Canvas;
+        border-color: Canvas;
+        background-color: CanvasText;
+      }
+    }
+
+    &::after {
+      color: Canvas;
     }
   }
 
-  .stepper-link {
-    color: VisitedText;
+  .stepper-link:is(a[href]) {
+    .stepper-item[aria-current='step'] > & {
+      @include utilities.focus-hover-style-custom() {
+        &::before {
+          border-color: Highlight;
+        }
+      }
+    }
 
-    .stepper-item[aria-current] ~ .stepper-item > & {
-      color: CanvasText;
+    .stepper-item[aria-current='step'] ~ .stepper-item > & {
+      &::before {
+        color: Canvas;
+      }
+
+      @include utilities.focus-hover-style-custom() {
+        &::before {
+          background-color: Highlight;
+          color: HighlightText;
+        }
+      }
     }
 
-    .stepper-item[aria-current] > & {
-      color: Highlight;
+    .stepper-item:not([aria-current='step']) > & {
+      &::before {
+        background-color: LinkText;
+      }
+
+      @include utilities.focus-hover-style-custom() {
+        &::before {
+          background-color: Highlight;
+        }
+
+        &::after {
+          color: HighlightText;
+        }
+      }
     }
   }
 }

package/components/subnavigation.scss

@@ -46,11 +46,6 @@ $module-name: 'subnavigation';
     @include media-breakpoint-up(xl) {
       min-height: subnavigation.$subnavigation-height-xl;
     }
-
-    .badge {
-      margin-left: subnavigation.$subnavigation-result-margin-left;
-      color: inherit;
-    }
   }
 
   &-link {
@@ -59,12 +54,14 @@ $module-name: 'subnavigation';
     @include transition(
       color animation.$transition-time-default animation.$transition-easing-default
     );
+
     display: flex;
     position: relative;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     height: 100%;
+    gap: subnavigation.$subnavigation-result-margin-left;
     padding: subnavigation.$subnavigation-link-padding-xs;
     color: subnavigation.$subnavigation-link-color;
     text-decoration: none;

package/components/tables.scss

@@ -53,6 +53,6 @@
   }
 
   > tbody > tr {
-    background-color: color.$gray-background;
+    background-color: color.$gray;
   }
 }

package/components/tabs/_tabs-wrapper.scss

@@ -12,7 +12,7 @@
   background-color: rgba(
     var(--post-contrast-color-rgb),
     0.02
-  ); // 0.02 gets as close as possible to color.$gray-background-light on white background
+  ); // 0.02 gets as close as possible to color.$light on white background
 
   // Create a line that lies below the active but above the passive elements
   // This way hover works smoothly with the background color

package/components/tag.scss

@@ -0,0 +1,82 @@
+@use 'sass:map';
+@forward './../variables/options';
+@use './../variables/color';
+@use './../variables/components/tag';
+@use './../functions/contrast' as contrast-fn;
+
+// style `.tag` only if is not descendant of a `<pre>` element
+// as `<pre><div class="tag">...</div><pre>` is usually used by code highlight tools
+
+// `.tag` selector can be removed (leave only `.tag:where(:has(:not(pre)))`)as soon as Firefox ESR v128 is released and rolled out
+// https://whattrainisitnow.com/calendar/
+.tag,
+.tag:where(:has(:not(pre))) {
+  --post-tag-bg: #{tag.$tag-default-background};
+  --post-tag-fg: #{contrast-fn.get-best-contrast-text(tag.$tag-default-background)};
+
+  display: inline-flex;
+  align-items: center;
+  gap: tag.$tag-gap;
+  padding: tag.$tag-padding-y tag.$tag-padding-x;
+  max-width: tag.$tag-max-width;
+  background-color: var(--post-tag-bg);
+  border: tag.$tag-border-width solid transparent;
+  border-radius: tag.$tag-border-radius;
+  font-size: tag.$tag-font-size;
+  line-height: tag.$tag-line-height;
+  white-space: nowrap;
+  color: var(--post-tag-fg);
+
+  post-icon {
+    flex: 0 0 auto;
+    width: tag.$tag-icon-size;
+    height: tag.$tag-icon-size;
+  }
+
+  .tag-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    svg,
+    img {
+      display: inline-block;
+      height: tag.$tag-icon-size !important;
+      vertical-align: text-top;
+    }
+  }
+
+  &.tag-sm {
+    line-height: tag.$tag-sm-line-height;
+
+    .tag-icon {
+      width: tag.$tag-sm-icon-size;
+      height: tag.$tag-sm-icon-size;
+    }
+  }
+
+  @each $key, $color in tag.$tag-backgrounds {
+    &.tag-#{$key} {
+      --post-tag-bg: #{$color};
+      --post-tag-fg: #{contrast-fn.get-best-contrast-text($color)};
+    }
+  }
+
+  &.tag-white {
+    border-color: var(--post-contrast-color);
+  }
+
+  // Can be removed completely as soon as Firefox ESR v128 is released and rolled out
+  // https://whattrainisitnow.com/calendar/
+  pre & {
+    display: inline;
+    padding: initial;
+    max-width: initial;
+    background: initial;
+    border: initial;
+    border-radius: initial;
+    font-size: inherit;
+    line-height: inherit;
+    white-space: unset;
+  }
+}

package/components/topic-teaser.scss

@@ -40,8 +40,7 @@
         padding-right: 0;
         // webkit subpixel-issue fix
         margin-right: -1px;
-        -webkit-clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
-                clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
+        clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
       }
 
       > .row {

package/components/utilities.scss

@@ -73,7 +73,6 @@ span.spacer {
   a {
     color: inherit;
 
-    &:focus,
     &:hover {
       opacity: 0.8;
     }
@@ -83,7 +82,6 @@ span.spacer {
 a {
   color: var(--post-contrast-color);
 
-  &:focus,
   &:hover {
     color: rgba(var(--post-contrast-color-rgb), 0.8);
   }

package/functions/_color.scss

@@ -33,3 +33,15 @@
 
   @return string.unquote('\##{string.to-lower-case($hex)}');
 }
+
+// Source: https://gist.github.com/certainlyakey/e9c0d8f5c87ff47e3d5b
+@function encode-uri-color($string) {
+  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
+    $hex: string.slice(color.ie-hex-str($string), 4);
+    $string: string.unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}