@swisspost/design-system-styles 6.6.0 → 6.6.2

package/mixins/_forms.scss

@@ -27,12 +27,26 @@
   background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
 }
 
-@mixin form-control-rg {
+@mixin form-rg {
   padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
   font-size: type.$font-size-regular;
   line-height: forms.$input-line-height-rg;
 }
 
+@mixin form-sm {
+  font-size: type.$font-size-14;
+  line-height: forms.$input-line-height-sm;
+  min-height: forms.$input-height-sm;
+  padding-block: forms.$input-padding-y-sm;
+  padding-inline: forms.$input-padding-x-sm;
+}
+
+@mixin form-lg {
+  font-size: type.$font-size-16;
+  line-height: forms.$input-line-height-lg;
+  min-height: forms.$input-height-lg;
+}
+
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;

package/mixins/_icons.scss

@@ -11,6 +11,8 @@
   -webkit-mask-image: url('#{icon-fn.get-svg-url($name)}');
           mask-image: url('#{icon-fn.get-svg-url($name)}');
   background-color: currentColor;
+  color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color
+  forced-color-adjust: preserve-parent-color;
 }
 
 @mixin remove-icon() {

package/mixins/_notification.scss

@@ -72,8 +72,7 @@
 
   @include utilities-mx.high-contrast-mode {
     filter: none !important;
-    background-color: transparent !important;
-    border: 2px solid WindowText;
+    border: 2px solid CanvasText;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -33,26 +33,25 @@
     "bootstrap": "5.3.2"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "1.1.0",
-    "@types/node": "18.19.7",
-    "autoprefixer": "10.4.16",
+    "@swisspost/design-system-icons": "1.3.0",
+    "@types/node": "18.19.14",
+    "autoprefixer": "10.4.17",
     "copyfiles": "2.4.1",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-newer": "^1.4.0",
-    "gulp-postcss": "9.1.0",
+    "gulp-postcss": "10.0.0",
     "gulp-sass": "5.1.0",
     "jest": "29.7.0",
-    "npm-run-all": "4.1.5",
     "postcss": "8.4.33",
     "postcss-scss": "4.0.9",
-    "prettier": "3.2.2",
+    "prettier": "3.2.5",
     "rimraf": "5.0.5",
-    "sass": "1.69.7",
-    "stylelint": "16.1.0",
+    "sass": "1.70.0",
+    "stylelint": "16.2.1",
     "stylelint-config-sass-guidelines": "11.0.0",
     "stylelint-prettier": "5.0.0",
-    "stylelint-scss": "6.0.0",
+    "stylelint-scss": "6.1.0",
     "typescript": "4.9.5"
   },
   "sass": {

package/variables/_heading.scss

@@ -30,8 +30,7 @@ $heading-sizes-h4: (
 );
 
 $heading-sizes-h5: (
-  xs: type.$font-size-14,
-  sm: type.$font-size-16,
+  xs: type.$font-size-16,
   md: type.$font-size-18,
   xxl: type.$font-size-20,
 );

package/variables/_type.scss

@@ -41,6 +41,7 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
+$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 

package/variables/components/_button.scss

@@ -19,7 +19,7 @@ $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !d
 $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-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-x-sm: spacing.$size-small-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;

package/variables/components/_form-select.scss

@@ -7,8 +7,6 @@ $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-bg-size: 32px 32px !default;
-$form-select-bg-size-sm: 24px 24px !default;
 $_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(
@@ -20,4 +18,5 @@ $form-select-indicator-success: url(icons.get-colored-svg-url(
   color.$success-green
 )) !default;
 $form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
-$form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !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;

package/variables/components/_form-validation.scss

@@ -25,5 +25,7 @@ $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-valid-box-shadow: 0 0 0 forms.$input-focus-width
+rgba($form-feedback-valid-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

@@ -24,13 +24,13 @@ $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-copy !default;
+$input-line-height-sm: type.$line-height-sm !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: spacing.$size-small-large !default;
+$input-padding-y-lg: sizing.px-to-rem(11) !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
@@ -63,26 +63,25 @@ $input-height-border: $input-border-width * 2 !default;
 
 $input-height-content: type.$font-size-base * $input-line-height !default;
 $input-height-inner: $input-height-content + ($input-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height: $input-height-inner + sizing.px-to-rem($input-height-border) !default;
 
-$input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
-$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-content-sm: type.$font-size-14 * 1 !default;
+$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
+$input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;
 
-$form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
+$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default;
 $form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
-  ($input-padding-y-sm * 2) !default;
-$form-floating-input-height-sm: calc(
-  #{$form-floating-input-height-inner-sm} + #{$input-height-border}
-) !default;
+  (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup
+$form-floating-input-height-sm: $form-floating-input-height-inner-sm +
+  sizing.px-to-rem($input-height-border) !default;
 
 $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
 $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
 $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
 
-$input-height-content-lg: type.$font-size-medium * $input-line-height-lg !default;
-$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.px-to-rem(2) !default; // - 2px and remove approximation in Figma
+$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
+$input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;
 
 $input-transition:
   border-color 0.15s ease-in-out,
@@ -119,14 +118,14 @@ $form-range-input-height-ie: 6rem !default;
 
 $form-file-button-hover-bg: $input-bg;
 
-$form-floating-height: $input-height-lg;
+$form-floating-height: $input-height-lg * $input-line-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
 $form-floating-line-height: type.$line-height-copy;
 $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;
-$form-floating-label-height: $input-height-inner-lg;
+$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;
@@ -135,10 +134,8 @@ $form-floating-label-scale: math.div(
   $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
-$form-floating-label-padding-t: calc(
-  #{$input-border-width} + #{$form-floating-label-height * 0.5} - #{$form-floating-label-font-size *
-    type.$line-height-copy * 0.5}
-);
+$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size *
+  type.$line-height-copy * 0.5;
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
@@ -151,10 +148,9 @@ $form-floating-transition-out:
 $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; // TODO: replace with input font-size after adjustment
-$form-floating-padding-x-sm: $input-padding-x-sm;
+$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
+$form-floating-padding-x-sm: spacing.$size-regular;
 $form-floating-padding-y-sm: $input-padding-y-sm;
-$form-floating-label-height-sm: $form-floating-input-height-inner-sm;
-$form-floating-label-padding-t-sm: calc(
-  #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-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;

package/variables/components/_spinners.scss

@@ -1,16 +1,33 @@
+@use 'sass:math';
 @use './../color';
 @use './../spacing';
+@use './../type';
+@use './../../functions/sizing';
 
 // Spinners
 
 $spinner-color-primary: color.$yellow !default;
-$spinner-color-secondary: color.$gray-10 !default;
+$spinner-color-secondary: color.$gray-60 !default;
 
-$spinner-size: spacing.$size-huge !default;
+$spinner-size: type.$font-size-56 !default;
 $spinner-border-width: 6px !default;
 
-$spinner-size-sm: spacing.$size-big !default;
+$spinner-duration: 3.125s !default;
+$spinner-speed-reduced-motion: math.div(1, 8) !default;
+
+$spinner-size-map: (
+  16: type.$font-size-16,
+  24: type.$font-size-24,
+  32: type.$font-size-32,
+  40: type.$font-size-40,
+  48: type.$font-size-48,
+  // 56 is already defined as default
+  80: sizing.px-to-rem(80px),
+);
+
+// DEPRECATED
+$spinner-size-sm: type.$font-size-40 !default;
 $spinner-border-width-sm: spacing.$size-micro !default;
 
-$spinner-size-xs: spacing.$size-small-regular !default;
+$spinner-size-xs: type.$font-size-16 !default;
 $spinner-border-width-xs: spacing.$size-line !default;