@swisspost/design-system-styles 6.6.4 → 7.1.0

package/components/_index.scss

@@ -9,10 +9,12 @@
 @use 'button';
 @use 'button-group';
 @use 'card';
-@use 'choice-control-card';
+@use 'card-control';
 @use 'carousel';
+@use 'chip';
 @use 'close';
 @use 'elevation';
+@use 'error-container';
 @use 'form-range';
 @use 'form-select';
 @use 'form-textarea';
@@ -40,6 +42,7 @@
 @use 'transitions';
 @use 'type';
 @use 'utilities';
+@use 'tag';
 
 // Imports depending on source order to override bootstrap styles
 @use 'datepicker';

package/components/alert.scss

@@ -65,10 +65,15 @@
       padding-inline-end: notification.$notification-gap + close.$close-size;
     }
 
+    &.no-icon > .alert-content {
+      padding-inline-start: 0;
+    }
+
     > .alert-buttons {
       display: flex;
 
-      > .btn {
+      > .btn,
+      > ::slotted(.btn) {
         flex: 1 0 0;
         width: 100%;
 

package/components/badge.scss

@@ -1,85 +1,32 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/badge' as bb;
-
-@use './../variables/components/badge';
-@use './../variables/components/forms';
-@use './../variables/components/form-check';
-@use './../variables/color';
-@use './../mixins/utilities';
-@use './../mixins/forms' as forms-mx;
-@use './../mixins/badge' as badge-mx;
+@use './../mixins/color' as color-mx;
 @use './../placeholders/badge' as badge-ph;
-@use './../functions/icons' as icons-fn;
+@use './../variables/components/badge';
 
 .badge {
-  @extend %badge;
-}
-
-a,
-button {
-  &.badge {
-    @include forms-mx.focus-outline;
-    background-color: transparent;
-    text-decoration: none;
-    transition: badge.$badge-transition;
-
-    @include utilities.not-disabled-focus-hover {
-      @include badge-mx.badge-hover-state;
-    }
-
-    &:active,
-    &.active {
-      @include badge-mx.badge-active-state;
-    }
-  }
-}
-
-.badge-check {
-  &-label {
-    @extend %badge;
-    @include forms-mx.focus-outline;
-    transition: badge.$badge-transition;
-    cursor: pointer;
-  }
-
-  &-input {
-    @include utilities.visuallyhidden;
-  }
-
-  &-input:focus-visible + &-label {
-    outline-offset: forms.$input-focus-outline-thickness;
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
-  }
-
-  &-input:not(:checked) + &-label:hover {
-    @include badge-mx.badge-hover-state;
-  }
-
-  &-input:checked + &-label {
-    @include badge-mx.badge-active-state;
-  }
-}
-
-@include utilities.high-contrast-mode() {
-  .badge-check {
-    &-input:focus-visible + &-label {
-      border-color: Highlight;
-      outline-color: Highlight;
-    }
-
-    &-input:checked + &-label {
-      &:hover {
-        @include badge-mx.badge-hover-state;
-      }
-    }
-  }
-
-  button.badge,
-  a.badge,
-  .badge-check-label {
-    transition: none;
+  --post-badge-height: #{badge.$badge-height};
+  --post-badge-padding-x: #{badge.$badge-padding-x};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  height: var(--post-badge-height);
+  min-width: calc(var(--post-badge-height) - 2 * var(--post-badge-padding-x));
+  padding-inline: var(--post-badge-padding-x);
+  border: badge.$badge-border;
+  border-radius: badge.$badge-border-radius;
+  font-size: badge.$badge-font-size;
+  background-color: badge.$badge-bg;
+  color: badge.$badge-color;
+
+  &:empty {
+    --post-badge-height: #{badge.$badge-height-empty};
+    --post-badge-padding-x: #{badge.$badge-padding-x-empty};
+  }
+
+  &.badge-sm {
+    @extend %badge-sm;
   }
 }

package/components/button-group.scss

@@ -40,6 +40,7 @@
   > .btn-secondary.active,
   > .btn-check:checked + .btn-secondary {
     background-color: color.$yellow;
+    color: color.$black;
 
     @include utilities.high-contrast-mode() {
       background-color: Highlight;
@@ -51,8 +52,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

@@ -5,10 +5,11 @@
 
 @use './../variables/components/button';
 @use './../variables/color';
+@use './../variables/commons';
 @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;
@@ -18,7 +19,9 @@
 
 .btn {
   @include button-mx.button-size();
-  @include forms.focus-outline();
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
 
   // Resets
   display: inline-flex;
@@ -60,7 +63,8 @@
     }
 
     &:disabled {
-      color: var(--post-gray-80);
+      color: var(--post-contrast-color);
+      background-color: var(--post-gray-40);
     }
   }
 
@@ -134,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 {
@@ -157,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() {
@@ -177,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));
+        }
+      }
     }
   }
 }
@@ -203,7 +254,7 @@
   @include button-mx.button-color-variant($name, $color);
 }
 
-// Intranet contextual buttons
-@each $name, $color in color.$contextual-colors {
+// Intranet signal buttons
+@each $name, $color in color.$signal-colors {
   @include button-mx.button-color-variant($name, $color);
 }

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/carousel.scss

@@ -117,7 +117,7 @@
 }
 
 .caption-light .carousel-caption {
-  background-color: rgba(color.$gray-background-light, 0.85);
+  background-color: rgba(color.$light, 0.85);
   color: color.$black;
 }