@swisspost/design-system-styles 6.3.0 → 6.4.0

package/components/_index.scss

@@ -9,6 +9,7 @@
 @use 'button';
 @use 'button-group';
 @use 'card';
+@use 'choice-control-card';
 @use 'carousel';
 @use 'close';
 @use 'elevation';

package/components/choice-control-card.scss

@@ -0,0 +1,146 @@
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/spacing';
+@use '../mixins/utilities';
+
+.radio-button-card,
+.checkbox-button-card {
+  --post-card-select--hover-bg: #{color.$gray-10};
+
+  position: relative;
+  display: flex;
+  gap: 0 spacing.$size-mini;
+
+  width: 100%;
+
+  color: color.$gray-80;
+  background-color: color.$white;
+  border: 2px solid color.$gray-60;
+  border-radius: commons.$border-radius;
+  padding: spacing.$size-regular;
+  transition: color 100ms ease-in-out, background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
+
+  // Checked
+  &:where(:has(input:checked), .checked) {
+    --post-card-select--hover-bg: #{color.$yellow};
+    background-color: color.$yellow;
+    border-color: color.$gray-60;
+
+    input {
+      background-color: color.$white !important;
+    }
+  }
+
+  // Focus
+  &:where(:has(input:focus-visible), .focused) {
+    background-color: var(--post-card-select--hover-bg);
+    outline: 2px solid color.$black;
+    outline-offset: 2px;
+    border-color: color.$black;
+
+    input {
+      border-color: color.$black;
+    }
+  }
+
+  // Hover
+  &:where(:hover:not(:has(input:disabled)), :hover:not(.disabled)) {
+    border-color: color.$black;
+    color: color.$black;
+    background-color: var(--post-card-select--hover-bg);
+
+    input {
+      border-color: color.$black;
+    }
+
+    @include utilities.high-contrast-mode() {
+      border-color: Highlight;
+      transition: none;
+    }
+  }
+
+  // Disabled
+  &:has(input:disabled),
+  &.disabled {
+    border-color: color.$gray-20;
+    color: color.$gray-40 !important;
+
+    > * {
+      cursor: default;
+    }
+  }
+
+  &:has(input:disabled:checked),
+  &.disabled.checked {
+    background-color: color.$gray-10;
+  }
+
+  // Error
+  &:has(input[aria-invalid]),
+  &:has(input.is-invalid),
+  &.is-invalid {
+    color: color.$error;
+    border-color: color.$error;
+
+    ~ .invalid-feedback {
+      display: block;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  > * {
+    cursor: pointer;
+  }
+
+  post-icon {
+    width: 2em;
+    height: 2em;
+    margin-left: spacing.$size-mini;
+    pointer-events: none;
+  }
+
+  input {
+    border-color: color.$gray-80;
+    background-color: color.$white;
+    transition: border-color 100ms ease-in-out;
+    grid-column: 1 / 2;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .form-check-label {
+    padding-left: 0;
+
+    &::before {
+      // This spans up the click area of the label to the whole
+      // card in order to make it clickable natively.
+      content: '';
+      position: absolute;
+      inset: -2px;
+    }
+
+    span {
+      // Lift spans above the before element to make them selectable
+      position: relative;
+    }
+  }
+
+  input,
+  .form-check-label {
+    margin-block: 0.25rem;
+  }
+
+  // Align input and label if there is an icon
+  &:has(post-icon) {
+    input,
+    .form-check-label {
+      margin-top: 0.25rem;
+    }
+  }
+}

package/components/datepicker.scss

@@ -5,6 +5,7 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../mixins/icons' as icons-mx;
 
 ngb-datepicker {
   // Conversion for compatibility
@@ -131,7 +132,9 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
+  .pi-3203,
   .pi-calendar {
+    @include icons-mx.pi(3203);
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
@@ -142,6 +145,7 @@ span.ngb-dp-navigation-chevron {
   height: forms.$input-height-inner-sm;
   width: forms.$input-height-inner-sm;
 
+  .pi-3203,
   .pi-calendar {
     width: datepicker.$ngb-dp-icon-size-sm;
     height: datepicker.$ngb-dp-icon-size-sm;
@@ -158,6 +162,7 @@ span.ngb-dp-navigation-chevron {
   height: forms.$input-height-inner-lg;
   width: forms.$input-height-inner-lg;
 
+  .pi-3203,
   .pi-calendar {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;
@@ -200,40 +205,63 @@ input[ngbDatepicker] {
   }
 }
 
-.form-control[ngbDatepicker] {
+.form-control[ngbdatepicker] {
+  padding-right: 3rem;
+
   &.is-invalid,
   &.is-valid,
   &.show-ng-validation.ng-touched.ng-invalid,
   &.show-ng-validation.ng-touched.ng-valid {
-    padding-right: 1rem;
     background-position: calc(100% - #{forms.$input-height-inner}) center;
   }
 
+  &.is-invalid {
+    padding-right: 5rem;
+  }
+
   .form-floating > &,
   &.form-control-lg {
+    padding-right: 4rem;
+
     &.is-invalid,
     &.is-valid,
     &.show-ng-validation.ng-touched.ng-invalid,
     &.show-ng-validation.ng-touched.ng-valid {
       background-position: calc(100% - #{forms.$input-height-inner-lg}) center !important;
     }
+
+    &.is-invalid {
+      padding-right: 6rem;
+    }
   }
 
   &.form-control-rg {
+    padding-right: 2.5rem;
+
     &.is-invalid,
     &.is-valid,
     &.show-ng-validation.ng-touched.ng-invalid,
     &.show-ng-validation.ng-touched.ng-valid {
       background-position: calc(100% - #{forms.$input-height-inner-rg}) center;
     }
+
+    &.is-invalid {
+      padding-right: 4.5rem;
+    }
   }
 
   &.form-control-sm {
+    padding-right: 2rem;
+
     &.is-invalid,
     &.is-valid,
     &.show-ng-validation.ng-touched.ng-invalid,
     &.show-ng-validation.ng-touched.ng-valid {
       background-position: calc(100% - #{forms.$input-height-inner-sm}) center;
     }
+
+    &.is-invalid {
+      padding-right: 3.5rem;
+    }
   }
 }

package/components/dropdown.scss

@@ -43,20 +43,41 @@
   }
 }
 
+$gray-arrow-down: icons.get-colored-svg-url('2052', color.$gray-80);
+$white-arrow-down: icons.get-colored-svg-url('2052', color.$white);
+$gray-arrow-up: icons.get-colored-svg-url('2051', color.$gray-80);
+$white-arrow-up: icons.get-colored-svg-url('2051', color.$white);
+$hcm-arrow-down: icons.get-colored-svg-url('2052', buttonText);
+$hcm-arrow-up: icons.get-colored-svg-url('2052', buttonText);
+
 .dropdown-toggle {
   &::after {
     @extend %toggler-icon;
-    background-image: url(icons.get-colored-svg-url('2052', color.$gray-80));
+    background-image: url($gray-arrow-down);
+    @include utilities.high-contrast-mode() {
+      background-image: url($hcm-arrow-down);
+    }
+  }
+
+  &.btn-primary::after {
+    background-image: url($white-arrow-down);
     @include utilities.high-contrast-mode() {
-      background-image: url(icons.get-colored-svg-url('2052', color.$white));
+      background-image: url($hcm-arrow-down);
     }
   }
 
   &[aria-expanded='true'] {
     &::after {
-      background-image: url(icons.get-colored-svg-url('2051', color.$gray-80));
+      background-image: url($gray-arrow-up);
+      @include utilities.high-contrast-mode() {
+        background-image: url($hcm-arrow-up);
+      }
+    }
+
+    &.btn-primary::after {
+      background-image: url($white-arrow-up);
       @include utilities.high-contrast-mode() {
-        background-image: url(icons.get-colored-svg-url('2051', color.$white));
+        background-image: url($hcm-arrow-up);
       }
     }
   }
@@ -64,17 +85,31 @@
   .dropup & {
     &::after {
       @extend %toggler-icon;
-      background-image: url(icons.get-colored-svg-url('2051', color.$gray-80));
+      background-image: url($gray-arrow-up);
       @include utilities.high-contrast-mode() {
-        background-image: url(icons.get-colored-svg-url('2051', color.$white));
+        background-image: url($hcm-arrow-up);
+      }
+    }
+
+    &.btn-primary::after {
+      background-image: url($white-arrow-up);
+      @include utilities.high-contrast-mode() {
+        background-image: url($hcm-arrow-up);
       }
     }
 
     &[aria-expanded='true'] {
       &::after {
-        background-image: url(icons.get-colored-svg-url('2052', color.$gray-80));
+        background-image: url($gray-arrow-down);
+        @include utilities.high-contrast-mode() {
+          background-image: url($hcm-arrow-down);
+        }
+      }
+
+      &.btn-primary::after {
+        background-image: url($white-arrow-down);
         @include utilities.high-contrast-mode() {
-          background-image: url(icons.get-colored-svg-url('2052', color.$white));
+          background-image: url($hcm-arrow-down);
         }
       }
     }

package/components/form-check.scss

@@ -51,9 +51,9 @@
       cursor: form-check.$form-check-label-cursor;
     }
 
-    &[type='radio']:checked,
-    &[type='checkbox']:checked,
-    &[type='checkbox']:indeterminate {
+    &[type='radio']:checked:not(.is-invalid),
+    &[type='checkbox']:checked:not(.is-invalid),
+    &[type='checkbox']:indeterminate:not(.is-invalid) {
       @include form-checks-mixins.form-check-color(form-check.$form-check-input-checked-color);
     }
 
@@ -71,8 +71,8 @@
       }
     }
 
-    &[type='radio']:hover:not(:disabled),
-    &[type='checkbox']:hover:not(:disabled) {
+    &[type='radio']:hover:not(:disabled):not(.is-invalid),
+    &[type='checkbox']:hover:not(:disabled):not(.is-invalid) {
       @include form-checks-mixins.form-check-color(form-check.$form-check-input-hover-color);
     }
   }

package/components/tabs/_tab-title.scss

@@ -0,0 +1,152 @@
+@forward './../../variables/options';
+
+@use './../../mixins/color' as color-mx;
+@use './../../mixins/utilities' as utilities-mx;
+@use './../../variables/color';
+@use './../../variables/spacing';
+@use './../../variables/components/nav';
+
+.tab-title {
+  display: inline-block;
+  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);
+  text-decoration: none;
+
+  &:focus {
+    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.$nav-tabs-focus-box-shadow-width;
+      right: nav.$nav-tabs-focus-box-shadow-width - 1px;
+      bottom: 0;
+      left: nav.$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;
+    }
+  }
+
+  // Tabs with dark backgrounds
+  @include color-mx.on-dark-background() {
+    &: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);
+    }
+  }
+
+  @include utilities-mx.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;
+      }
+    }
+  }
+}
+
+// Careful, this generates a lot of code
+@each $key, $color in color.$background-colors {
+  .bg-#{$key} {
+    .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/components/tabs/_tabs-wrapper.scss

@@ -0,0 +1,69 @@
+@forward './../../variables/options';
+
+@use './../../mixins/utilities' as utilities-mx;
+@use './../../variables/color';
+@use './../../variables/spacing';
+@use './../../variables/components/nav';
+
+.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-mx.high-contrast-mode() {
+    &::after {
+      background-color: ButtonBorder;
+    }
+  }
+}
+
+.tabs {
+  @include utilities-mx.reset-list;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  white-space: nowrap;
+
+  // Scrolling fix to 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-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;
+    }
+  }
+}

package/components/tabs/index.scss

@@ -0,0 +1,2 @@
+@use 'tabs-wrapper';
+@use 'tab-title';

package/functions/_icons.scss

@@ -1,10 +1,20 @@
 @use 'sass:map';
+@use 'sass:meta';
 
 @use './color';
 @use './utilities';
 @use './../variables/icons';
 
 @function add-fill-color($svg, $color) {
+  @if (meta.type-of($color) == string) {
+    @return set-svg-properties(
+      $svg,
+      (
+        'fill': $color,
+      )
+    );
+  }
+
   $opacity: alpha($color);
   $color: color.get-hex-string($color);
   $clean-color: utilities.replace('#{$color}', '#', '%23');