@swisspost/design-system-styles 7.1.0 → 7.2.0

package/mixins/_animation.scss

@@ -36,13 +36,10 @@
   &:not(:disabled):not(.disabled) > span {
     &::after {
       @if ($stroke-width == null) {
-        background-image: url(icons.get-colored-svg-url($icon-name, $color));
+        background-image: url('#{icons.get-colored-svg-url($icon-name, $color)}');
       } @else {
-        background-image: url(icons.add-stroke-color(
-          icons.get-colored-svg-url($icon-name, $color),
-          $color,
-          $stroke-width
-        ));
+        $icon: icons.get-colored-svg-url($icon-name, $color);
+        background-image: url('#{icons.add-stroke-color($icon, $color, $stroke-width)}');
       }
     }
   }

package/mixins/_form-checks.scss

@@ -12,23 +12,14 @@
 
 @mixin form-check-icons($color) {
   &[type='radio']:checked {
-    background-image: url(icons.add-fill-color(
-      form-check.$form-check-radio-checked-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.add-fill-color(form-check.$form-check-radio-checked-bg-icon, $color)}');
   }
 
   &[type='checkbox']:checked {
-    background-image: url(icons.get-colored-svg-url(
-      form-check.$form-check-input-checked-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.get-colored-svg-url(form-check.$form-check-input-checked-bg-icon, $color)}');
   }
 
   &[type='checkbox']:indeterminate {
-    background-image: url(icons.get-colored-svg-url(
-      form-check.$form-check-input-indeterminate-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.get-colored-svg-url(form-check.$form-check-input-indeterminate-bg-icon, $color)}');
   }
 }

package/mixins/_forms.scss

@@ -42,7 +42,7 @@
 }
 
 @mixin form-lg {
-  font-size: type.$font-size-16;
+  font-size: type.$font-size-16 !important;
   line-height: forms.$input-line-height-lg;
   min-height: forms.$input-height-lg;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -18,12 +18,16 @@
   },
   "peerDependencies": {
     "@ng-bootstrap/ng-bootstrap": "^15.0.0 || ^16.0.0",
+    "@angular/core": "^16.0.0 || ^17.0.0",
     "bootstrap": "~5.3.0"
   },
   "peerDependenciesMeta": {
     "@ng-bootstrap/ng-bootstrap": {
       "optional": true
     },
+    "@angular/core": {
+      "optional": true
+    },
     "bootstrap": {
       "optional": true
     }
@@ -33,25 +37,25 @@
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "7.1.0",
-    "@types/node": "20.12.7",
+    "@swisspost/design-system-icons": "7.2.0",
+    "@types/node": "20.14.0",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
-    "glob": "10.3.15",
-    "gulp": "4.0.2",
+    "glob": "10.4.1",
+    "gulp": "5.0.0",
     "gulp-newer": "^1.4.0",
     "gulp-postcss": "10.0.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
     "postcss": "8.4.38",
     "postcss-scss": "4.0.9",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
     "rimraf": "5.0.7",
-    "sass": "1.77.1",
-    "stylelint": "16.5.0",
+    "sass": "1.77.5",
+    "stylelint": "16.6.1",
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.0",
-    "stylelint-scss": "6.3.0",
+    "stylelint-scss": "6.3.1",
     "typescript": "5.3.3"
   },
   "sass": {

package/variables/components/_accordion.scss

@@ -50,12 +50,9 @@ $accordion-button-hover-color: color.$black !default;
 $accordion-button-font-weight: type.$font-weight-bold !default;
 $accordion-button-line-height: type.$line-height-copy !default;
 $accordion-icon-width: spacing.$size-large !default;
-$_accordion-chevron: icons.get-colored-svg-url(2113, $accordion-button-color);
-$_accordion-active-chevron: icons.get-colored-svg-url(2113, $accordion-button-active-color);
-$_accordion-hcm-chevron: icons.get-colored-svg-url(2113, color.$white);
-$accordion-button-icon: url($_accordion-chevron);
-$accordion-button-active-icon: url($_accordion-active-chevron);
-$accordion-hcm-icon: url($_accordion-hcm-chevron);
+$accordion-button-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-color)}');
+$accordion-button-active-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-active-color)}');
+$accordion-hcm-icon: url('#{icons.get-colored-svg-url(2113, color.$white)}');
 $accordion-header-font-curve: 'regular' !default;
 $accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
 $accordion-heading-font-curve: $accordion-header-font-curve !default;

package/variables/components/_button.scss

@@ -18,16 +18,16 @@ $input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !defau
 $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
 $input-btn-line-height: type.$line-height-copy !default;
 
-$input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-small-regular !default;
+$input-btn-padding-y-sm: spacing.$size-micro !default;
+$input-btn-padding-x-sm: spacing.$size-regular !default;
 $input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
 $input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
 $input-btn-line-height-rg: type.$line-height-copy !default;
 
-$input-btn-padding-y-lg: spacing.$size-small-large - $input-btn-border-width-rem !default;
-$input-btn-padding-x-lg: spacing.$size-large - $input-btn-border-width-rem !default;
+$input-btn-padding-y-lg: spacing.$size-small-regular !default;
+$input-btn-padding-x-lg: spacing.$size-regular !default;
 $input-btn-line-height-lg: type.$line-height-copy !default;
 
 $input-btn-focus-width: 0.125rem !default; // 2px

package/variables/components/_close.scss

@@ -15,9 +15,7 @@ $btn-close-width: spacing.$size-large !default;
 $btn-close-height: $btn-close-width !default;
 $btn-close-padding-x: spacing.$size-regular !default;
 $btn-close-color: color.$black !default;
-$_btn-close-icon-url: icons.get-colored-svg-url('2043', $btn-close-color) !default;
-$_btn-close-icon-hcm-url: icons.get-colored-svg-url('2043', color.$white) !default;
-$btn-close-bg: url($_btn-close-icon-url) !default;
-$btn-close-hcm-bg: url($_btn-close-icon-hcm-url) !default;
+$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default;
+$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default;
 $btn-close-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;

package/variables/components/_form-select.scss

@@ -7,31 +7,15 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
-$form-select-indicator: url($_form-select-indicator-icon) !default;
-$form-select-indicator-disabled: url(icons.get-colored-svg-url(
-  '2113',
-  $form-select-disabled-color
-)) !default;
-$form-select-indicator-hcm-dark: url(icons.get-colored-svg-url('2113', color.$white)) !default;
-$form-select-indicator-hcm-light: url(icons.get-colored-svg-url('2113', color.$black)) !default;
+$form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-indicator-color)}') !default;
+$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-color)}') !default;
+$form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
+$form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;
 
-$form-select-indicator-success: url(icons.get-colored-svg-url('2105', color.$success)) !default;
-$form-select-indicator-success-hcm-dark: url(icons.get-colored-svg-url(
-  '2105',
-  color.$white
-)) !default;
-$form-select-indicator-success-hcm-light: url(icons.get-colored-svg-url(
-  '2105',
-  color.$black
-)) !default;
+$form-select-indicator-success: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
+$form-select-indicator-success-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
+$form-select-indicator-success-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
 
-$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error)) !default;
-$form-select-indicator-error-hcm-dark: url(icons.get-colored-svg-url(
-  '2104',
-  color.$white
-)) !default;
-$form-select-indicator-error-hcm-light: url(icons.get-colored-svg-url(
-  '2104',
-  color.$black
-)) !default;
+$form-select-indicator-error: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
+$form-select-indicator-error-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
+$form-select-indicator-error-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;

package/variables/components/_form-validation.scss

@@ -4,25 +4,24 @@
 @use './../components/button';
 @use './../components/forms';
 @use './../../functions/icons';
+@use './../../functions/sizing';
 
 // Bootstrap variables
 $form-feedback-margin-top: 0 !default;
 $form-feedback-font-size: type.$font-size-12 !default;
 $form-feedback-valid-color: color.$gray-60 !default;
 $form-feedback-invalid-color: color.$error !default;
-$form-feedback-icon-valid: url(icons.get-colored-svg-url('2105', color.$success)) !default;
-$form-feedback-icon-valid-hcm-dark: url(icons.get-colored-svg-url('2105', color.$white)) !default;
-$form-feedback-icon-valid-hcm-light: url(icons.get-colored-svg-url('2105', color.$black)) !default;
-$form-feedback-icon-invalid: url(icons.get-colored-svg-url('2104', color.$error)) !default;
-$form-feedback-icon-invalid-hcm-dark: url(icons.get-colored-svg-url('2104', color.$white)) !default;
-$form-feedback-icon-invalid-hcm-light: url(icons.get-colored-svg-url(
-  '2104',
-  color.$black
-)) !default;
+$form-feedback-icon-valid: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
+$form-feedback-icon-valid-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
+$form-feedback-icon-valid-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
+$form-feedback-icon-invalid: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
+$form-feedback-icon-invalid-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
+$form-feedback-icon-invalid-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;
 
 // Design System custom variables
-$form-feedback-padding-x: button.$input-btn-padding-x !default;
-$form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
+$form-feedback-padding-x: spacing.$size-regular !default;
+$form-feedback-padding-y: sizing.px-to-rem(6);
+$form-feedback-padding-y-sm: spacing.$size-micro;
 $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;

package/variables/components/_forms.scss

@@ -15,8 +15,9 @@
 $form-bg-size: 32px !default;
 $form-bg-size-sm: 24px !default;
 
-$form-label-margin-bottom: 0.5rem !default;
+$form-label-margin-bottom: spacing.$size-mini !default;
 $form-label-color: var(--post-contrast-color) !default;
+$form-label-font-size-sm: type.$font-size-14;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
@@ -24,23 +25,24 @@ $input-line-height: type.$line-height-copy !default;
 
 $input-padding-y-sm: button.$input-btn-padding-y-sm !default;
 $input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-sm !default;
+$input-line-height-sm: type.$line-height-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: sizing.px-to-rem(11) !default;
+$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
-$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
+$input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;
 $input-disabled-color: rgba(var(--post-contrast-color-rgb), 0.6); // Design System only
 $input-disabled-border-color: color.$gray-40; // Design System only
+$input-disabled-border-style: spacing.$size-line dashed;
 
 $input-color: color.$black !default;
-$input-border-color: color.$gray-60 !default;
+$input-border-color: color.$gray-80 !default;
 $input-border-width: button.$input-btn-border-width !default;
 $input-box-shadow: none !default;
 
@@ -49,11 +51,11 @@ $input-border-radius-lg: 0 !default;
 $input-border-radius-rg: 0 !default;
 $input-border-radius-sm: 0 !default;
 
-$input-focus-bg: $input-bg !default;
-$input-focus-border-color: var(--post-contrast-color-rgb) !default;
-$input-focus-color: $input-color !default;
+$input-focus-bg: inherit !default;
+$input-focus-border-color: inherit !default;
+$input-focus-color: inherit !default;
 $input-focus-width: button.$input-btn-focus-width !default;
-$input-focus-box-shadow: 0 0 0 $input-focus-width rgba($input-focus-border-color, 0.25) !default;
+$input-focus-box-shadow: none !default;
 $input-focus-outline-thickness: spacing.$size-line;
 
 $input-placeholder-color: color.$gray-60 !default;
@@ -126,9 +128,9 @@ $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
 $form-floating-label-height: $form-floating-height;
-$form-floating-label-color: $input-placeholder-color;
-$form-floating-label-font-size: type.$font-size-bigger-regular;
-$form-floating-label-font-size-small: type.$font-size-tiny;
+$form-floating-label-color: color.$gray-80;
+$form-floating-label-font-size: type.$font-size-16;
+$form-floating-label-font-size-small: type.$font-size-12;
 $form-floating-label-scale: math.div(
   $form-floating-label-font-size-small,
   $form-floating-label-font-size
@@ -149,8 +151,21 @@ $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;
 $form-floating-label-font-size-placeholder-sm: type.$font-size-14;
+$form-floating-label-scale-sm: math.div(
+  $form-floating-label-font-size-sm,
+  $form-floating-label-font-size-placeholder-sm
+);
+$form-floating-label-upscale-sm: math.div(1, $form-floating-label-scale-sm);
 $form-floating-padding-x-sm: spacing.$size-regular;
 $form-floating-padding-y-sm: $input-padding-y-sm;
+$form-floating-label-translate-x-sm: $form-floating-padding-x-sm *
+  (1 - $form-floating-label-scale-sm);
 $form-floating-label-height-sm: $form-floating-input-height-sm;
 $form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
   $form-floating-label-font-size-sm;
+
+$form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size *
+  $form-floating-line-height * $form-floating-label-scale; // The Space needed for the label on focus
+$form-floating-textarea-padding-t-sm: spacing.$size-mini +
+  $form-floating-label-font-size-placeholder-sm * $input-line-height-sm *
+  $form-floating-label-scale-sm;