@swisspost/design-system-styles 6.4.0 → 6.4.1

package/mixins/_animation.scss

@@ -31,6 +31,7 @@
   }
 }
 
+// DEPRECATED
 @mixin hover-animation-svg-icon($color, $icon-name, $stroke-width: null) {
   &:not(:disabled):not(.disabled) > span {
     &::after {

package/mixins/_button.scss

@@ -27,7 +27,8 @@
     padding: 0 map.get(button.$btn-padding-x-map, $size);
   }
 
-  > .pi {
+  > .pi,
+  > post-icon {
     width: map.get(button.$btn-icon-size-map, $size);
     height: map.get(button.$btn-icon-size-map, $size);
   }

package/mixins/_color.scss

@@ -5,9 +5,14 @@
 @use './../variables/color';
 
 // mixin to correctly set CSS variables for any colored background
-@mixin colored-background($color) {
+@mixin colored-background($color, $allow-alpha: true) {
   --post-bg-rgb: #{color-fn.rgb-values($color)};
-  @extend %color-background-rgba;
+
+  @if ($allow-alpha) {
+    @extend %color-background-rgba;
+  } @else {
+    @extend %color-background-rgb;
+  }
 
   @if (contrast-fn.light-or-dark($color) == 'dark') {
     @extend %color-background-dark-variables;

package/mixins/_forms.scss

@@ -1,6 +1,6 @@
 @use './../variables/color';
 @use './../variables/type';
-@use './../variables/components/form-feedback';
+@use './../variables/components/form-validation';
 @use './../variables/components/forms';
 @use './../variables/components/tooltips';
 @use './../mixins/utilities';
@@ -20,77 +20,11 @@
   /* stylelint-enable */
 }
 
-// override
-/// The entire mixin had to be overriden to adjust the feedback on custom controls.
-/// For the most part, it is exactly like the mixin.
-@mixin form-validation-state($state, $color, $icon) {
-  .#{$state}-feedback {
-    display: none;
-    width: 100%;
-    margin-top: form-feedback.$form-feedback-margin-top;
-    color: $color;
-    font-size: form-feedback.$form-feedback-font-size;
-  }
-
-  // Deprecated
-  .#{$state}-tooltip {
-    display: none;
-    position: absolute;
-    z-index: 5;
-    top: 100%;
-    max-width: 100%; // Contain to parent when possible
-    margin-top: 0.1rem;
-    padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
-    border-radius: tooltips.$tooltip-border-radius;
-    color: color-contrast($color);
-    font-size: tooltips.$tooltip-font-size;
-    line-height: type.$line-height-copy;
-
-    /* Keeping borders gray while maintaining a green background on tooltips */
-    @if ($state == 'valid') {
-      background-color: rgba(form-feedback.$form-feedback-valid-bg, tooltips.$tooltip-opacity);
-    } @else {
-      background-color: rgba($color, tooltips.$tooltip-opacity);
-    }
-  }
-
-  .form-control,
-  .form-select {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      border-color: $color;
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 forms.$input-focus-width rgba($color, 0.25);
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .form-check-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      ~ .form-check-label {
-        color: $color;
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-}
-
 @mixin icon-placement {
-  padding-right: form-feedback.$form-feedback-icon-offset + form-feedback.$form-feedback-icon-size;
+  padding-right: form-validation.$form-feedback-icon-offset +
+    form-validation.$form-feedback-icon-size;
   background-repeat: no-repeat;
-  background-position: calc(100% - #{form-feedback.$form-feedback-icon-offset}) center;
+  background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
 }
 
 @mixin form-control-rg {

package/mixins/_notification.scss

@@ -14,9 +14,9 @@
   $font-size: map.get(notification.$notification-font-size-map, $size);
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
   $padding-y: map.get(notification.$notification-padding-y-map, $size);
-  $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
 
   position: relative;
+  box-sizing: border-box;
   min-height: 2 * $padding-y + $icon-size;
   box-shadow: notification.$notification-box-shadow;
   border-radius: notification.$notification-border-radius;
@@ -26,16 +26,6 @@
   font-size: $font-size;
   font-weight: notification.$notification-font-weight;
 
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    height: $icon-size;
-    width: $icon-size;
-    left: $padding-x;
-    top: $padding-y;
-  }
-
   &.no-icon {
     min-height: 2 * $padding-y + close.$close-size;
     padding-inline-start: $padding-x;
@@ -53,14 +43,47 @@
     }
   }
 
-  // for notifications with mask-image icons
+  // for notifications with mask-image icons and post-icon override
+  &::before {
+    content: '';
+    display: block;
+  }
+
+  &::before,
+  > post-icon {
+    position: absolute;
+    height: $icon-size;
+    width: $icon-size;
+    left: $padding-x;
+    top: $padding-y;
+  }
+
   &.no-icon,
   &[class^='pi-'],
   &[class*=' pi-'] {
     &::before {
       content: unset;
     }
+
+    > post-icon {
+      display: none;
+    }
+  }
+
+  @include utilities-mx.high-contrast-mode {
+    filter: none !important;
+    background-color: transparent !important;
+    border: 2px solid WindowText;
   }
+}
+
+@mixin notification-body($size) {
+  $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: notification.$notification-body-gap;
 
   a {
     font-weight: notification.$notification-link-font-weight;
@@ -70,28 +93,34 @@
     margin-block: $hr-margin-block !important;
   }
 
-  > *:only-child {
+  > :only-child,
+  > post-icon:first-child + :last-child {
     @include notification-heading($size);
   }
 
-  @include utilities-mx.high-contrast-mode {
-    filter: none !important;
-    background-color: transparent !important;
-    border: 2px solid WindowText;
+  > * {
+    margin: 0;
   }
 }
 
 @mixin notification-variant($color, $icon) {
-  @include color-mx.colored-background($color);
+  @include color-mx.colored-background($color, $allow-alpha: false);
 
+  // default icon (mask-image)
   &:not(.no-icon, [class^='pi-'], [class*=' pi-'])::before {
     @include icons-mx.icon($icon);
   }
+
+  // icon override (post-icon)
+  > post-icon {
+    background-color: $color;
+  }
 }
 
 @mixin notification-dismissible($size, $close: 'btn-close') {
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
 
+  pointer-events: auto;
   position: relative;
   padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size;
 
@@ -101,7 +130,7 @@
     inset-inline-end: $padding-x;
   }
 
-  > .#{$close}:first-child + *:last-child {
+  > .#{$close}:first-child + :last-child {
     @include notification-heading($size);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -21,36 +21,36 @@
     "@angular-devkit/schematics": "=15.0.4",
     "@angular/core": "=15.0.4",
     "@popperjs/core": "2.11.8",
-    "bootstrap": "5.3.1",
+    "bootstrap": "5.3.2",
     "cheerio": "1.0.0-rc.12",
     "prettier": "2.8.8"
   },
   "devDependencies": {
     "@angular/compiler": "=15.0.4",
-    "@percy/cli": "1.26.3",
+    "@percy/cli": "1.27.2",
     "@percy/cypress": "3.1.2",
-    "@swisspost/design-system-icons": "1.0.11",
-    "@types/node": "18.17.12",
-    "autoprefixer": "10.4.15",
+    "@swisspost/design-system-icons": "1.0.12",
+    "@types/node": "18.18.0",
+    "autoprefixer": "10.4.16",
     "copyfiles": "2.4.1",
-    "cypress": "12.17.4",
+    "cypress": "13.2.0",
     "cypress-storybook": "0.5.1",
-    "glob": "10.3.3",
+    "glob": "10.3.7",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
     "gulp-postcss": "9.0.1",
     "gulp-sass": "5.1.0",
-    "jest": "29.6.4",
+    "jest": "29.7.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.28",
-    "postcss-scss": "4.0.7",
+    "postcss": "8.4.30",
+    "postcss-scss": "4.0.8",
     "rimraf": "5.0.1",
-    "sass": "1.66.1",
+    "sass": "1.68.0",
     "stylelint": "15.10.3",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "2.0.0",
-    "stylelint-scss": "5.1.0",
+    "stylelint-scss": "5.2.1",
     "typescript": "4.9.5"
   },
   "sass": {

package/placeholders/_dropdown.scss

@@ -5,7 +5,4 @@
   height: 1em;
   margin-left: 0.5rem;
   border: 0;
-  background-repeat: no-repeat;
-  background-size: 1em;
-  vertical-align: top;
 }

package/placeholders/_index.scss

@@ -1,3 +1,2 @@
 @use './dropdown';
-@use './notification';
 @use './text';

package/placeholders/_text.scss

@@ -3,7 +3,7 @@
 @use './../variables/spacing';
 @use './../variables/type';
 @use './../variables/color';
-@use './../mixins';
+@use './../mixins/size' as size-mx;
 @use './../mixins/type' as type-mx;
 @use './../variables/components/paragraph';
 
@@ -145,14 +145,14 @@
   .h-highlighted {
     @extend %font-curve-regular;
     @extend %text-bottom-spacer;
-    @include mixins.bezel-regular;
+    @include size-mx.bezel-regular;
     background-color: rgba(map.get(color.$background-colors, 'nightblue-bright'), 0.1);
 
     @include media-breakpoint-up(lg) {
-      @include mixins.bezel-medium;
+      @include size-mx.bezel-medium;
     }
     @include media-breakpoint-up(xxl) {
-      @include mixins.bezel-large;
+      @include size-mx.bezel-large;
     }
   }
 }

package/themes/bootstrap/_core.scss

@@ -10,3 +10,5 @@
 
 @import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
+
+@import './overrides-mixins';

package/themes/bootstrap/_overrides-mixins.scss

@@ -0,0 +1,33 @@
+@use './../../variables/components/tooltips';
+
+// Keep this mixin override: it is necessary to clear Bootstrap styles for .is-(in)valid and .(in)valid-feedback
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: $color,
+  $focus-box-shadow,
+  $border-color
+) {
+  // DEPRECATED
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
+    margin-top: 0.1rem;
+    @include font-size(tooltips.$tooltip-font-size);
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
+    @include border-radius(tooltips.$tooltip-border-radius);
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+}

package/themes/bootstrap/_overrides-variables.scss

@@ -20,9 +20,8 @@
 @forward './../../variables/components/dropdowns';
 @forward './../../variables/components/figures';
 @forward './../../variables/components/form-check';
-@forward './../../variables/components/form-feedback';
+@forward './../../variables/components/form-validation';
 @forward './../../variables/components/form-select';
-@forward './../../variables/components/form-switch';
 @forward './../../variables/components/forms';
 @forward './../../variables/components/list-group';
 @forward './../../variables/components/modal';

package/variables/components/_datatable.scss

@@ -11,13 +11,6 @@
 $datatable-header-font-weight: type.$font-weight-bold;
 $datatable-header-unsorted-color: color.$gray-60;
 
-$_chevron-up: icons.get-colored-svg-url('2112', color.$gray-80);
-$_chevron-down: icons.get-colored-svg-url('2113', color.$gray-80);
-$_chevron-double: icons.get-colored-svg-url('2127', color.$gray-80);
-$datatable-sort-asc-icon: url($_chevron-up);
-$datatable-sort-desc-icon: url($_chevron-down);
-$datatable-sort-unset-icon: url($_chevron-double);
-
 $datatable-cell-bg: color.$gray-background-light;
 $datatable-cell-padding-x: spacing.$size-regular;
 $datatable-cell-padding-y: spacing.$size-mini;
@@ -45,9 +38,12 @@ $datatable-button-width: calc(100% - 2 * #{$datatable-button-margin});
 $datatable-button-height: $datatable-button-width;
 $datatable-button-focus-shadow: button.$btn-focus-box-shadow;
 
-$_pencil: icons.get-colored-svg-url('3193', color.$gray-80);
-$datatable-editable-icon: url($_pencil);
-
 $datatable-progressbar-height: spacing.$size-micro;
 $datatable-progressbar-backgroundcolor: color.$gray-10;
 $datatable-progressbar-activecolor: color.$yellow;
+
+// DEPRECATED
+$datatable-sort-asc-icon: url('#{icons.get-colored-svg-url('2112', color.$gray-80)}');
+$datatable-sort-desc-icon: url('#{icons.get-colored-svg-url('2113', color.$gray-80)}');
+$datatable-sort-unset-icon: url('#{icons.get-colored-svg-url('2127', color.$gray-80)}');
+$datatable-editable-icon: url('#{icons.get-colored-svg-url('3193', color.$gray-80)}');

package/variables/components/_form-check.scss

@@ -2,17 +2,41 @@
 @use './../color';
 @use './../spacing';
 @use './../type';
+@use './../animation';
 @use './../../functions/icons';
 @use './../../functions/sizing';
 
+$form-check-row-gap: spacing.$size-small-regular !default;
+$form-check-column-gap: spacing.$size-mini !default;
+$form-check-margin-bottom: spacing.$size-regular !default;
+$form-check-inline-margin-left: spacing.$size-large !default;
+$form-check-input-size: spacing.$size-large !default;
+$form-check-input-border-width: forms.$input-border-width !default;
+$form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
+
+$form-switch-column-gap: spacing.$size-regular !default;
+$form-switch-height: spacing.$size-big !default;
+$form-switch-width: 2 * spacing.$size-big !default;
+$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default;
+$form-switch-checked-bg: var(--post-success) !default;
+$form-switch-disabled-bg: color.$gray-20 !default;
+$form-switch-background-image: linear-gradient(
+  to right,
+  #{$form-switch-bg} 50%,
+  #{$form-switch-checked-bg} 50%
+) !default;
+$form-switch-color: color.$white !default;
+$form-switch-border-color: color.$gray-60 !default;
+$form-switch-checked-border-color: color.$black !default;
+$form-switch-disabled-border-color: color.$gray-40 !default;
+$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
+
+// DEPRECATED
 $form-check-input-width: spacing.$size-large !default;
 $form-check-min-height: $form-check-input-width !default;
 $form-check-padding-start: 0 !default;
-$form-check-margin-bottom: spacing.$size-regular !default;
-
 $form-check-input-color: forms.$input-border-color !default;
 $form-check-input-bg: transparent !default;
-$form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-border: $form-check-input-border-width solid $form-check-input-color !default;
 $form-check-input-border-radius: forms.$input-border-radius !default;
 $form-check-radio-border-radius: 50% !default;
@@ -21,34 +45,47 @@ $form-check-input-focus-width: forms.$input-focus-width !default;
 $form-check-input-focus-box-shadow: 0 0 0 $form-check-input-focus-width
   rgba($form-check-input-focus-border, 0.25) !default;
 $form-check-input-active-filter: none;
-
 $form-check-input-hover-color: forms.$input-focus-border-color !default;
-
 $form-check-input-checked-color: forms.$input-focus-border-color !default;
 $form-check-input-checked-bg-color: transparent !default;
 $form-check-input-checked-border-color: $form-check-input-checked-color !default;
 $form-check-input-checked-bg-icon: 3035 !default;
 $form-check-input-checked-bg-image: url('#{icons.get-colored-svg-url($form-check-input-checked-bg-icon, $form-check-input-checked-color)}') !default;
 $form-check-radio-checked-bg-icon: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3E%3Ccircle r='2'%3E%3C/circle%3E%3C/svg%3E" !default;
-
 $form-check-radio-checked-bg-image: url('#{icons.add-fill-color($form-check-radio-checked-bg-icon, $form-check-input-checked-color)}') !default;
-
 $form-check-input-indeterminate-color: $form-check-input-checked-color !default;
 $form-check-input-indeterminate-bg-color: transparent !default;
 $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-color !default;
 $form-check-input-indeterminate-bg-icon: 2039 !default;
 $form-check-input-indeterminate-bg-image: url('#{icons.get-colored-svg-url($form-check-input-indeterminate-bg-icon, $form-check-input-indeterminate-color)}') !default;
-
 $form-check-inline-margin-end: spacing.$size-large !default;
-
 $form-check-label-cursor: pointer !default;
 $form-check-label-color: forms.$form-label-color !default;
+$form-check-label-padding-x: spacing.$size-mini !default;
 $form-check-label-padding-top: (
     $form-check-input-width + sizing.px-to-rem($form-check-input-border-width) -
       type.$line-height-copy
   ) * 0.5 !default;
-$form-check-label-padding-x: spacing.$size-mini !default;
 $form-check-label-padding-start: $form-check-label-padding-top 0 0 $form-check-label-padding-x !default;
 $form-check-label-padding-end: $form-check-label-padding-top $form-check-label-padding-x 0 0 !default;
-
 $form-check-feedback-margin-top: spacing.$size-small-regular !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;
+$form-switch-checked-bg-image-size: $form-switch-height;
+$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
+$form-switch-linear-gradient: linear-gradient(
+  to right,
+  #{$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-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;

package/variables/components/{_form-feedback.scss → _form-validation.scss}

@@ -1,25 +1,29 @@
-@use 'sass:map';
-
 @use './../color';
 @use './../spacing';
 @use './../type';
+@use './../components/button';
+@use './../components/forms';
 
 // Bootstrap variables
 $form-feedback-margin-top: 0 !default;
 $form-feedback-font-size: type.$font-size-regular !default;
 $form-feedback-valid-color: color.$gray-60 !default;
-$form-feedback-invalid-color: map.get(color.$background-colors, 'danger') !default;
-$form-feedback-icon-valid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,50.588235%25,22.745098%25);fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A");
-$form-feedback-icon-invalid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A");
+$form-feedback-invalid-color: color.$error !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,50.588235%25,22.745098%25);fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
 
 // Design System custom variables
-$form-feedback-icon-size: 2rem; // Equals 24pt [svg-size]
-$form-feedback-icon-offset: map.get(spacing.$post-sizes, 'mini');
-$form-feedback-valid-bg: map.get(color.$background-colors, 'success') !default;
+$form-feedback-padding-x: button.$input-btn-padding-x !default;
+$form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
+$form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
+$form-feedback-icon-offset: spacing.$size-mini !default;
+$form-feedback-valid-bg: color.$success !default;
 $form-feedback-valid-text: color.$white !default;
-$form-feedback-invalid-bg: map.get(color.$background-colors, 'danger') !default;
+$form-feedback-invalid-bg: color.$error !default;
 $form-feedback-invalid-text: color.$white !default;
-$form-feedback-custom-color: map.get(color.$background-colors, 'success') !default;
-$form-feedback-custom-bg: map.get(color.$background-colors, 'success') !default;
+$form-feedback-custom-color: color.$success !default;
+$form-feedback-custom-bg: color.$success !default;
+$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
+  rgba($form-feedback-invalid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;

package/variables/components/_forms.scss

@@ -47,10 +47,10 @@ $input-border-radius-rg: 0 !default;
 $input-border-radius-sm: 0 !default;
 
 $input-focus-bg: $input-bg !default;
-$input-focus-border-color: color.$black !default;
+$input-focus-border-color: var(--post-contrast-color-rgb) !default;
 $input-focus-color: $input-color !default;
 $input-focus-width: button.$input-btn-focus-width !default;
-$input-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
+$input-focus-box-shadow: 0 0 0 $input-focus-width rgba($input-focus-border-color, 0.25) !default;
 $input-focus-outline-thickness: spacing.$size-line;
 
 $input-placeholder-color: color.$gray-60 !default;

package/variables/components/_index.scss

@@ -9,9 +9,8 @@
 @forward 'dropdowns';
 @forward 'figures';
 @forward 'form-check';
-@forward 'form-feedback';
+@forward 'form-validation';
 @forward 'form-select';
-@forward 'form-switch';
 @forward 'forms';
 @forward 'list-group';
 @forward 'modal';

package/variables/components/_notification.scss

@@ -11,7 +11,7 @@ $notification-body-gap: spacing.$size-micro !default;
 $notification-font-weight: type.$font-weight-light !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
 $notification-heading-font-weight: type.$headings-font-weight !default;
-$notification-buttons-margin-start: spacing.$size-mini !default;
+$notification-buttons-gap: spacing.$size-mini !default;
 
 $notification-padding-x-map: () !default;
 $notification-padding-x-map: map-merge(
@@ -82,3 +82,6 @@ $notification-variants: join(
     'error' color.$error 2104
   )
 );
+
+// deprecated
+$notification-buttons-margin-start: $notification-buttons-gap !default;

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,