@swisspost/design-system-styles 7.0.0 → 7.2.0

package/components/_index.scss

@@ -9,9 +9,9 @@
 @use 'button';
 @use 'button-group';
 @use 'card';
-@use 'chip';
-@use 'choice-control-card';
+@use 'card-control';
 @use 'carousel';
+@use 'chip';
 @use 'close';
 @use 'elevation';
 @use 'error-container';

package/components/button-group.scss

@@ -6,31 +6,21 @@
 
 @use './../mixins/utilities';
 @use './../variables/color';
+@use './../variables/spacing';
 @use './../variables/components/button';
 @use './../variables/components/forms';
 
 .btn-group {
   max-width: 100%;
+  flex-wrap: wrap;
+  row-gap: spacing.$size-micro;
+  padding-inline-start: button.$btn-border-width;
 
   > .btn {
     white-space: normal;
     cursor: pointer;
-
-    // added a transition delay on the "z-index" so the button only moves back after all other transitions
-    z-index: 0;
-    transition:
-      z-index 0s ease (0.5 * button.$btn-transition-duration),
-      button.$btn-transition;
-
-    @include utilities.high-contrast-mode() {
-      transition: none !important;
-    }
-  }
-
-  > .btn:hover {
-    // remove the transition delay on the "z-index" for all raised states so the button moves forward before other transitions
-    z-index: 2 !important;
-    transition: button.$btn-transition;
+    flex: 0 1 auto;
+    margin-inline-start: -1 * button.$btn-border-width;
   }
 
   > .btn-secondary {
@@ -52,8 +42,5 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
-
-  &:is(:focus-visible, :focus-within, .pretend-focus) + .btn {
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
-  }
+  @include utilities.focus-style('+ .btn');
 }

package/components/button.scss

@@ -9,7 +9,7 @@
 @use './../variables/type';
 @use './../variables/spacing';
 @use './../mixins/color' as color-mx;
-@use './../mixins/icons';
+@use './../mixins/icons' as icon-mx;
 @use './../mixins/utilities';
 @use './../mixins/forms';
 @use './../mixins/button' as button-mx;
@@ -138,22 +138,48 @@
 }
 
 // Animated
+
+.btn-animated,
+.btn-animated-start {
+  &:not(.btn-link, .btn-tertiary) {
+    &::after {
+      @include icon-mx.icon(2111);
+      content: '';
+      display: block;
+      height: 2em;
+      width: 2em;
+      position: absolute;
+      transition:
+        opacity 250ms,
+        transform 250ms;
+      opacity: 0;
+    }
+
+    > span {
+      transition: transform 250ms;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      @include utilities.not-disabled-focus-hover() {
+        &::after {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      > span {
+        // Initially transform to place text in the right rendering context for a smooth animation
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
 .btn-animated:not(.btn-link, .btn-tertiary) {
   &::after {
-    content: '';
-    position: absolute;
-    right: button.$btn-padding-x-md - button.$btn-animation-distance-md;
-    width: 0.625em;
-    height: 0.625em;
-    transform: rotateZ(315deg)
-      translate(button.$btn-border-width * -1, button.$btn-border-width * -1);
-    transform-origin: center center;
-    transition:
-      opacity 250ms,
-      transform 250ms;
-    border-right: button.$btn-border-width solid currentColor;
-    border-bottom: button.$btn-border-width solid currentColor;
-    opacity: 0;
+    right: button.$btn-padding-x-md - button.$btn-animation-distance-md -
+      (math.div(button.$btn-font-size-md * 2, 3));
+    transform: translateX(button.$btn-border-width * -1);
   }
 
   @each $size in button.$btn-non-default-sizes {
@@ -161,14 +187,11 @@
       right: map.get(button.$btn-padding-x-map, $size) - map.get(
           button.$btn-animation-distance-map,
           $size
-        );
+        ) -
+        (math.div(map.get(button.$btn-font-size-map, $size) * 2, 3));
     }
   }
 
-  > span {
-    transition: transform 250ms;
-  }
-
   // Only animate when user prefers to see animations
   @media (prefers-reduced-motion: no-preference) {
     @include utilities.not-disabled-focus-hover() {
@@ -181,16 +204,40 @@
           transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
         }
       }
+    }
+  }
+}
 
-      &::after {
-        transform: rotateZ(315deg) translate(0, 0);
-        opacity: 1;
-      }
+.btn-animated-start:not(.btn-link, .btn-tertiary) {
+  &::after {
+    @include icon-mx.icon(2110);
+    left: button.$btn-padding-x-md - button.$btn-animation-distance-md -
+      (math.div(button.$btn-font-size-md * 2, 3));
+    transform: translateX(button.$btn-border-width);
+  }
+
+  @each $size in button.$btn-non-default-sizes {
+    &.btn-#{$size}::after {
+      left: map.get(button.$btn-padding-x-map, $size) - map.get(
+          button.$btn-animation-distance-map,
+          $size
+        ) -
+        (math.div(map.get(button.$btn-font-size-map, $size) * 2, 3));
     }
+  }
 
-    > span {
-      // Initially transform to place text in the right rendering context for a smooth animation
-      transform: translateX(0);
+  // Only animate when user prefers to see animations
+  @media (prefers-reduced-motion: no-preference) {
+    @include utilities.not-disabled-focus-hover() {
+      > span {
+        transform: translateX(map.get(button.$btn-animation-distance-map, md));
+      }
+
+      @each $size in button.$btn-non-default-sizes {
+        &.btn-#{$size} > span {
+          transform: translateX(map.get(button.$btn-animation-distance-map, $size));
+        }
+      }
     }
   }
 }

package/components/card-control.scss

@@ -0,0 +1,322 @@
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/spacing';
+@use '../variables/components/forms';
+@use '../variables/components/form-check';
+@use '../mixins/utilities';
+
+/*
+* There are a whole bunch of !important statments in this file.
+* They are necessary and should not be removed, because we need to override the .form-check styles here.
+*/
+
+fieldset {
+  .radio-button-card,
+  .checkbox-button-card {
+    &:not(:last-child) {
+      margin-bottom: spacing.$size-regular;
+    }
+  }
+}
+
+.radio-button-card,
+.checkbox-button-card {
+  --post-card-control-border-color: #{color.$gray-60};
+  --post-card-control-bg: #{color.$white};
+  --post-card-control-color: #{color.$gray-80};
+  --post-card-control-input-border-color: #{color.$gray-80};
+  --post-card-control-input-bg: #{color.$white};
+
+  display: grid;
+  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
+  gap: 0 spacing.$size-mini;
+  position: relative;
+  padding: spacing.$size-regular;
+  width: 100%;
+  background-color: var(--post-card-control-bg);
+  border: spacing.$size-line solid var(--post-card-control-border-color);
+  border-radius: commons.$border-radius;
+  color: var(--post-card-control-color);
+  cursor: pointer;
+
+  input.form-check-input[type] {
+    grid-area: input;
+    position: relative;
+    z-index: 2;
+    margin: spacing.$size-micro 0;
+    background-color: var(--post-card-control-input-bg) !important;
+    border-color: var(--post-card-control-input-border-color) !important;
+    color: var(--post-card-control-input-border-color) !important;
+    cursor: inherit;
+    transition: none;
+
+    &:focus,
+    &:focus-visible {
+      box-shadow: none;
+    }
+
+    ~ label.form-check-label {
+      color: inherit !important;
+    }
+  }
+
+  label.form-check-label {
+    grid-area: label;
+    margin: spacing.$size-micro 0;
+    padding: 0;
+    border-radius: inherit;
+    transition: none;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      inset: spacing.$size-line * -1;
+      border-radius: inherit;
+    }
+
+    > * {
+      display: block;
+      // Lift content above the :before element to make it selectable
+      position: relative;
+      z-index: 2;
+    }
+
+    &:not(:has(+ post-icon)) {
+      grid-area: 1 / label / 1 / icon;
+    }
+  }
+
+  .card-control--content {
+    grid-area: content;
+  }
+
+  post-icon {
+    grid-area: icon;
+    width: spacing.$size-big;
+    height: spacing.$size-big;
+    pointer-events: none;
+  }
+
+  &:where(:not(:has(input:disabled)), :not(.disabled)) {
+    &:where(:has(input:checked), .checked) {
+      --post-card-control-border-color: #{color.$black};
+      --post-card-control-bg: #{color.$yellow};
+    }
+
+    &:where(:has(input:invalid), :has(input[aria-invalid]), :has(input.is-invalid), .is-invalid) {
+      --post-card-control-border-color: #{color.$error};
+      --post-card-control-color: #{color.$error};
+      --post-card-control-input-border-color: #{color.$error};
+    }
+
+    &:where(:hover) {
+      --post-card-control-border-color: #{color.$gray-80};
+      --post-card-control-bg: #{color.$gray-60};
+      --post-card-control-color: #{color.$white};
+      --post-card-control-input-border-color: #{color.$black};
+    }
+
+    input:focus-visible ~ label::before {
+      outline-offset: forms.$input-focus-outline-thickness;
+      outline: forms.$input-focus-outline-thickness solid commons.$outline-color;
+    }
+  }
+
+  &:where(:has(input:disabled), .disabled) {
+    --post-card-control-border-color: #{color.$gray-60};
+    --post-card-control-bg: transparent;
+    --post-card-control-color: #{color.$gray-60};
+    --post-card-control-input-border-color: #{color.$gray-60};
+    --post-card-control-input-bg: transparent;
+
+    border-style: dashed;
+    text-decoration: line-through;
+    cursor: default;
+
+    input.form-check-input[type] {
+      border: 0 none;
+      padding: form-check.$form-check-input-border-width;
+    }
+  }
+
+  @include utilities.high-contrast-mode() {
+    --post-card-control-border-color: FieldText;
+    --post-card-control-bg: Field;
+    --post-card-control-color: FieldText;
+    --post-card-control-input-border-color: FieldText;
+    --post-card-control-input-bg: Field;
+
+    outline: spacing.$size-line solid Field;
+    outline-offset: spacing.$size-line * -2;
+
+    input.form-check-input[type] {
+      outline: spacing.$size-line solid Field;
+      background-color: Field !important;
+
+      &::after {
+        border-color: Field !important;
+      }
+    }
+
+    label.form-check-label,
+    .card-control--content {
+      background-color: var(--post-card-control-bg) !important;
+    }
+
+    &:where(:not(:has(input:disabled)), :not(.disabled)) {
+      &:where(:has(input:checked), .checked) {
+        --post-card-control-border-color: FieldText;
+        --post-card-control-bg: SelectedItem;
+        --post-card-control-color: SelectedItemText;
+        --post-card-control-input-border-color: FieldText;
+
+        input.form-check-input[type] {
+          &::after {
+            background-color: FieldText !important;
+          }
+        }
+      }
+
+      &:where(:hover) {
+        --post-card-control-border-color: Highlight;
+        --post-card-control-bg: Field;
+        --post-card-control-color: FieldText;
+        --post-card-control-input-border-color: Highlight;
+      }
+    }
+
+    &:where(:has(input:disabled), .disabled) {
+      --post-card-control-border-color: GrayText;
+      --post-card-control-bg: Field;
+      --post-card-control-color: FieldText;
+      --post-card-control-input-border-color: GrayText;
+      --post-card-control-input-bg: Field;
+
+      &:where(:has(input:checked), .checked) {
+        --post-card-control-bg: SelectedItem;
+        --post-card-control-color: SelectedItemText;
+
+        position: relative;
+        background-color: Field;
+
+        &::before {
+          display: block;
+          content: '';
+          position: absolute;
+          inset: spacing.$size-line;
+          background-color: SelectedItem;
+          z-index: 1;
+        }
+
+        > * {
+          position: relative;
+          z-index: 2;
+        }
+
+        input.form-check-input[type] {
+          &::after {
+            background-color: FieldText !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $bg in color.$dark-backgrounds {
+  #{$bg} {
+    .radio-button-card,
+    .checkbox-button-card {
+      --post-card-control-border-color: #{color.$white};
+      --post-card-control-bg: transparent;
+      --post-card-control-color: #{color.$white};
+      --post-card-control-input-border-color: #{color.$white};
+      --post-card-control-input-bg: transparent;
+
+      &:where(:not(:has(input:disabled)), :not(.disabled)) {
+        &:where(:has(input:checked), .checked) {
+          --post-card-control-border-color: #{color.$yellow};
+          --post-card-control-bg: #{color.$yellow};
+          --post-card-control-color: #{color.$gray-80};
+          --post-card-control-input-border-color: #{color.$gray-80};
+          --post-card-control-input-bg: #{color.$white};
+        }
+
+        &:where(
+            :has(input:invalid),
+            :has(input[aria-invalid]),
+            :has(input.is-invalid),
+            .is-invalid
+          ) {
+          --post-card-control-border-color: #{color.$error};
+          --post-card-control-bg: #{color.$error-background};
+          --post-card-control-color: #{color.$error};
+          --post-card-control-input-border-color: #{color.$error};
+          --post-card-control-input-bg: #{color.$white};
+
+          &:where(:has(input:checked), .checked) {
+            --post-card-control-bg: #{color.$yellow};
+          }
+        }
+
+        &:where(:hover) {
+          --post-card-control-border-color: #{color.$black};
+          --post-card-control-bg: #{color.$gray-20};
+          --post-card-control-color: #{color.$black};
+          --post-card-control-input-border-color: #{color.$black};
+          --post-card-control-input-bg: #{color.$white};
+        }
+
+        input:focus-visible ~ label::before {
+          outline-color: color.$white;
+        }
+      }
+
+      &:where(:has(input:disabled), .disabled) {
+        --post-card-control-border-color: color.$white-alpha-80;
+        --post-card-control-bg: transparent;
+        --post-card-control-color: color.$white-alpha-80;
+        --post-card-control-input-border-color: color.$white-alpha-80;
+        --post-card-control-input-bg: transparent;
+      }
+
+      @include utilities.high-contrast-mode() {
+        --post-card-control-border-color: FieldText;
+        --post-card-control-bg: Field;
+        --post-card-control-color: FieldText;
+        --post-card-control-input-border-color: FieldText;
+        --post-card-control-input-bg: Field;
+
+        &:where(:not(:has(input:disabled)), :not(.disabled)) {
+          &:where(:has(input:checked), .checked) {
+            --post-card-control-border-color: FieldText;
+            --post-card-control-bg: SelectedItem;
+            --post-card-control-color: SelectedItemText;
+            --post-card-control-input-border-color: FieldText;
+          }
+
+          &:where(:hover) {
+            --post-card-control-border-color: Highlight;
+            --post-card-control-bg: Field;
+            --post-card-control-color: FieldText;
+            --post-card-control-input-border-color: Highlight;
+          }
+        }
+
+        &:where(:has(input:disabled), .disabled) {
+          --post-card-control-border-color: GrayText;
+          --post-card-control-bg: Field;
+          --post-card-control-color: FieldText;
+          --post-card-control-input-border-color: GrayText;
+          --post-card-control-input-bg: Field;
+
+          &:where(:has(input:checked), .checked) {
+            --post-card-control-bg: SelectedItem;
+            --post-card-control-color: SelectedItemText;
+          }
+        }
+      }
+    }
+  }
+}

package/components/datepicker.scss

@@ -5,7 +5,9 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
+@use './../mixins/utilities';
 
 @use './../themes/bootstrap/core' as b;
 
@@ -20,6 +22,10 @@ ngb-datepicker.dropdown-menu {
 
 ngb-datepicker-navigation {
   justify-content: space-between;
+
+  button.ngb-dp-arrow-btn {
+    @include utilities.focus-style();
+  }
 }
 
 ngb-datepicker-navigation-select.ngb-dp-navigation-select {
@@ -30,12 +36,6 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
     border: 0;
     background-position: right;
 
-    &:focus {
-      border-radius: commons.$border-radius;
-      background-color: transparent;
-      box-shadow: inset 0 0 0 commons.$border-thick color.$black;
-    }
-
     + select {
       margin-left: 0.5rem;
     }
@@ -94,12 +94,20 @@ span.ngb-dp-navigation-chevron {
   &.hidden {
     flex-grow: 1;
   }
-}
 
-.ngb-dp-day > .btn-light {
-  width: 40px !important;
-  height: 40px !important;
-  line-height: 40px;
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+
+  > [ngbDatepickerDayView] {
+    width: 40px !important;
+    height: 40px !important;
+    line-height: 40px;
+
+    &.active:not(.bg-primary) {
+      outline: none;
+    }
+  }
 }
 
 .ngb-dp-day > .text-white {
@@ -149,17 +157,9 @@ span.ngb-dp-navigation-chevron {
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
   }
-}
 
-.form-control-sm ~ .ngb-dp-open {
-  height: forms.$input-height-inner-sm;
-  width: forms.$input-height-inner-sm;
-
-  .pi-3203,
-  .pi-calendar,
-  post-icon {
-    width: datepicker.$ngb-dp-icon-size-sm;
-    height: datepicker.$ngb-dp-icon-size-sm;
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
   }
 }
 
@@ -170,7 +170,7 @@ span.ngb-dp-navigation-chevron {
 
 .form-floating > .ngb-dp-open,
 .form-control-lg ~ .ngb-dp-open {
-  height: forms.$input-height-inner-lg;
+  height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2});
   width: forms.$input-height-inner-lg;
 
   .pi-3203,
@@ -181,6 +181,10 @@ span.ngb-dp-navigation-chevron {
   }
 }
 
+.form-control-sm ~ .ngb-dp-open {
+  height: calc(#{forms.$form-floating-label-height-sm} - #{forms.$input-border-width * 2});
+}
+
 input[ngbDatepicker] {
   // Hide the x on IE/Edge input fields
   &::-ms-clear {