@swisspost/design-system-styles 6.3.0 → 6.4.1

package/variables/components/_stepper.scss

@@ -14,17 +14,11 @@ $stepper-indicator-font-size: type.$font-size-regular;
 $stepper-indicator-font-weight: type.$font-weight-base;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color);
-$stepper-indicator-check-icon: url($_stepper-indicator-check-icon);
+$stepper-indicator-check-icon-size: spacing.$size-large;
 $stepper-indicator-hover-color: color.$white;
 $stepper-indicator-hover-bg: color.$black;
 $stepper-indicator-hover-outline: forms.$input-focus-outline-thickness solid
   var(--post-contrast-color);
-$_stepper-indicator-hover-check-icon: icon-fn.get-colored-svg-url(
-  '2105',
-  $stepper-indicator-hover-color
-);
-$stepper-indicator-hover-check-icon: url($_stepper-indicator-hover-check-icon);
 $stepper-indicator-future-bg: color.$gray-60;
 $stepper-indicator-future-color: color.$white;
 
@@ -34,3 +28,10 @@ $stepper-link-hover-color: color.$black;
 $stepper-link-current-color: color.$black;
 $stepper-link-current-font-size: type.$font-size-regular;
 $stepper-link-current-font-weight: type.$font-weight-bold;
+
+// DEPRECATED
+$stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
+$stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url(
+    '2105',
+    $stepper-indicator-hover-color
+)}');

package/variables/components/_topic-teaser.scss

@@ -9,6 +9,11 @@ $content-cols: (
   xl: 7,
 );
 
+$content-gap: (
+  rg: 32px,
+  xl: 40px,
+);
+
 $image-cols: (
   xs: 10,
   rg: 8,

package/components/form-feedback.scss

@@ -1,44 +0,0 @@
-@forward './../variables/options';
-
-@use './../variables';
-@use './../variables/components/form-feedback';
-@use './../variables/components/form-select';
-@use './../variables/components/forms';
-@use './../variables/components/button';
-@use './../mixins/forms' as forms-mixins;
-@use './../mixins/utilities' as utility-mixins;
-
-.invalid-feedback,
-.valid-feedback {
-  margin-bottom: 0;
-
-  @include utility-mixins.high-contrast-mode() {
-    color: HighlightText !important;
-    background-color: Highlight !important;
-    forced-color-adjust: none;
-  }
-}
-
-.invalid-feedback {
-  padding: button.$input-btn-padding-x * 0.5 button.$input-btn-padding-x;
-  background: form-feedback.$form-feedback-invalid-bg;
-  color: form-feedback.$form-feedback-invalid-text;
-}
-
-.valid-feedback {
-  padding: button.$input-btn-padding-x * 0.5 button.$input-btn-padding-x;
-  background: form-feedback.$form-feedback-valid-bg;
-  color: form-feedback.$form-feedback-valid-text;
-}
-
-.valid-feedback.custom-feedback {
-  background: form-feedback.$form-feedback-custom-bg;
-  color: form-feedback.$form-feedback-custom-text;
-}
-
-.was-validated .form-control:invalid,
-.form-control.is-invalid,
-.was-validated .form-control:valid,
-.form-control.is-valid {
-  background-size: form-feedback.$form-feedback-icon-size;
-}

package/components/tabs.scss

@@ -1,214 +0,0 @@
-@forward './../variables/options';
-
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/nav' as n;
-
-@use './../variables/components/nav';
-@use './../variables/spacing';
-@use './../variables/commons';
-@use './../variables/color';
-@use './../mixins/color' as color-mx;
-@use './../mixins/utilities';
-
-.tabs-wrapper {
-  position: relative;
-  padding-top: spacing.$spacer;
-  border: 0;
-  background-color: color.$gray-background-light;
-
-  // Create a line that lies below the active but above the passive elements
-  // This way hover works smoothly with the background color
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 1px;
-    background-color: nav.$nav-tabs-border-color;
-  }
-
-  // Small hack to save a lot of code and provide a lot of flexibility to tabs coloring
-  .tabs {
-    background-color: transparent !important;
-  }
-
-  @include utilities.high-contrast-mode() {
-    &::after {
-      background-color: ButtonBorder;
-    }
-  }
-}
-
-.tabs {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-
-  /* prevent scroll chaining on x scroll */
-  overscroll-behavior-x: contain;
-  white-space: nowrap;
-
-  // Scrolling fix, make the tabs scroll a little more so the right most tab is not
-  // flush with the window border
-  &::after {
-    content: '';
-    display: block;
-    flex: 1 0 auto;
-    width: nav.$nav-link-padding-x;
-  }
-
-  .tab-title {
-    position: relative;
-    box-sizing: border-box;
-    padding: nav.$nav-link-padding;
-    transition: background-color 100ms;
-    border-right: 1px solid transparent;
-    border-left: 1px solid transparent;
-    outline-color: currentColor;
-    opacity: 0.7;
-    color: var(--post-contrast-color);
-
-    &:focus {
-      opacity: 0.7;
-      background-color: unset;
-      color: var(--post-contrast-color);
-    }
-
-    &:hover {
-      opacity: 1;
-      background-color: nav.$nav-tabs-link-active-bg;
-      color: var(--post-contrast-color);
-    }
-
-    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-    &:focus-visible {
-      outline: transparent;
-      opacity: 1;
-      background-color: nav.$nav-tabs-link-active-bg;
-      color: var(--post-contrast-color);
-      box-shadow: none;
-
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: $nav-tabs-focus-box-shadow-width;
-        right: $nav-tabs-focus-box-shadow-width - 1px;
-        bottom: 0;
-        left: $nav-tabs-focus-box-shadow-width - 1px;
-        box-shadow: nav.$nav-tabs-focus-box-shadow;
-      }
-    }
-
-    &.active {
-      z-index: 1; // Lift above the line and make focus visible all around
-      border-right-color: nav.$nav-tabs-border-color;
-      border-left-color: nav.$nav-tabs-border-color;
-      opacity: 1;
-      background-color: nav.$nav-tabs-link-active-bg;
-      color: var(--post-contrast-color);
-      font-weight: 700;
-
-      // Create a line that does not suffer from border corner mitering
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        right: -1px;
-        left: -1px;
-        height: spacing.$size-micro;
-        background-color: nav.$nav-tabs-link-active-border-color;
-      }
-    }
-
-    @include utilities.high-contrast-mode() {
-      opacity: 1;
-      border-left-color: Canvas;
-      border-right-color: Canvas;
-      color: LinkText;
-
-      &:hover,
-      &:focus,
-      &:focus-within,
-      &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-micro);
-      }
-
-      &.active {
-        border-left-color: ButtonText;
-        border-right-color: ButtonText;
-        color: Highlight;
-
-        &::before {
-          background-color: Highlight;
-        }
-      }
-    }
-  }
-
-  // Tabs with dark backgrounds
-  @include color-mx.on-dark-background(true) {
-    .tab-title {
-      &:hover {
-        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
-      }
-
-      &:focus-visible {
-        background-color: rgba(nav.$nav-tabs-link-active-bg, 0.2);
-      }
-    }
-  }
-}
-
-.tab-content {
-  padding-top: spacing.$spacer;
-  padding-bottom: spacing.$spacer;
-}
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tabs-wrapper {
-      background-color: $color;
-    }
-
-    .tab-title {
-      background-color: $color;
-
-      &.active {
-        background-color: $color;
-      }
-    }
-
-    .nav-item {
-      background-color: $color;
-    }
-  }
-}
-
-[class*='bg-'] .tab-title.active {
-  &:focus {
-    &::after {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  // write supports for selectors this way: https://stackoverflow.com/a/62666132
-  // need to include * otherwise it throws build error
-  @supports #{'\selector(*:focus-visible)'} {
-    &:focus {
-      &::after {
-        background-color: unset;
-      }
-    }
-
-    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-    &:focus-visible {
-      &::after {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}

package/placeholders/_notification.scss

@@ -1,13 +0,0 @@
-@use './../variables/components/notification';
-@use './../variables/components/close';
-
-%notification-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: notification.$notification-body-gap;
-
-  > * {
-    margin: 0;
-  }
-}

package/variables/components/_form-switch.scss

@@ -1,38 +0,0 @@
-@use './../color';
-@use './../type';
-@use './../spacing';
-@use './../animation';
-
-// Design System custom variables
-$form-switch-border-color: color.$gray-60 !default;
-$form-switch-checked-border-color: color.$black !default;
-
-// Bootstrap variables
-$form-switch-color: color.$white !default;
-$form-switch-width: 2 * spacing.$size-big !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,
-  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;
-$form-switch-focus-bg-image: $form-switch-checked-bg-image;
-
-// Design System custom variables
-$form-switch-height: spacing.$size-big !default;
-$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default;
-$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
-$form-switch-checked-bg: var(--post-success) !default;
-$form-switch-checked-bg-image-size: $form-switch-height;
-$form-switch-linear-gradient: linear-gradient(
-  to left,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-);
-$form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height)
-  $form-switch-height;
-$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
-$form-switch-label-padding-x: spacing.$size-regular !default;
-$form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default;
-$form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;