@swisspost/design-system-styles 7.2.0 → 7.3.0

package/layouts/portal/_type.scss

@@ -68,7 +68,6 @@
 
   p {
     margin-top: 0;
-    font-weight: type.$font-weight-light;
   }
 
   h5,

package/mixins/_color.scss

@@ -24,12 +24,12 @@
 // Selector for styles to be applied on dark backgrounds
 @mixin on-dark-background($contains: false) {
   @if $contains == true {
-    &:is(#{color.$dark-backgrounds}),
-    :is(#{color.$dark-backgrounds}) & {
+    &:where(#{color.$dark-backgrounds}),
+    :where(#{color.$dark-backgrounds}) & {
       @content;
     }
   } @else {
-    :is(#{color.$dark-backgrounds}) & {
+    :where(#{color.$dark-backgrounds}) & {
       @content;
     }
   }

package/mixins/_utilities.scss

@@ -83,6 +83,13 @@
   }
 }
 
+@mixin not-disabled-hover {
+  &:not(:disabled):hover,
+  &.pretend-hover {
+    @content;
+  }
+}
+
 @mixin focus-style-none {
   outline: none;
 }
@@ -149,18 +156,17 @@
 @mixin disabled-style($additional-selector: '') {
   &:disabled#{$additional-selector} {
     pointer-events: none;
-    color: var(--post-gray-40);
+    color: var(--post-gray-60);
     border-color: var(--post-gray-40);
     border-style: dashed;
     background-clip: padding-box;
     text-decoration: line-through;
+    // In case rules need to be slightly adjusted
+    @content;
 
     @include high-contrast-mode() {
       color: GrayText;
       border-color: GrayText;
     }
-
-    // In case rules need to be slightly adjusted
-    @content;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -37,25 +37,25 @@
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "7.2.0",
-    "@types/node": "20.14.0",
+    "@swisspost/design-system-icons": "7.3.0",
+    "@types/node": "20.14.9",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
-    "glob": "10.4.1",
+    "glob": "11.0.0",
     "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": "8.4.39",
     "postcss-scss": "4.0.9",
     "prettier": "3.3.2",
-    "rimraf": "5.0.7",
-    "sass": "1.77.5",
+    "rimraf": "6.0.1",
+    "sass": "1.77.6",
     "stylelint": "16.6.1",
     "stylelint-config-sass-guidelines": "11.1.0",
     "stylelint-prettier": "5.0.0",
-    "stylelint-scss": "6.3.1",
+    "stylelint-scss": "6.3.2",
     "typescript": "5.3.3"
   },
   "sass": {

package/placeholders/_button.scss

@@ -2,27 +2,6 @@
 @use './../mixins/color' as color-mx;
 @use './../variables/components/button';
 
-%btn-default {
-  border: button.$btn-border-width solid var(--post-gray-60);
-
-  @include utilities.not-disabled-focus-hover() {
-    border-color: var(--post-contrast-color);
-  }
-
-  @include color-mx.on-dark-background() {
-    border-color: var(--post-contrast-color);
-
-    @include utilities.not-disabled-focus-hover() {
-      border-color: var(--post-gray-40);
-    }
-  }
-
-  &:disabled {
-    border-color: var(--post-gray-40);
-    color: var(--post-gray-60);
-  }
-}
-
 %btn-transparent-background {
   @include utilities.not-disabled-focus-hover() {
     color: var(--post-contrast-color);

package/placeholders/_text.scss

@@ -18,7 +18,6 @@
 
     li {
       margin-bottom: paragraph.$text-bottom-space * 0.5;
-      font-weight: type.$font-weight-light;
 
       &::before {
         content: '\2013';
@@ -78,7 +77,6 @@
     li {
       @extend %font-curve-regular;
       @extend %text-bottom-spacer;
-      font-weight: type.$font-weight-light;
 
       &::before {
         content: '\2013';
@@ -131,7 +129,6 @@
     counter-reset: li-counter;
 
     li {
-      font-weight: type.$font-weight-light;
       counter-increment: li-counter;
 
       &::before {

package/variables/_type.scss

@@ -232,7 +232,7 @@ $blockquote-footer-font-size: math.div(
   $lead-font-size * sizing.strip-unit($small-font-size),
   100
 ) !default;
-$blockquote-cite-font-weight: $font-weight-light !default;
+$blockquote-cite-font-weight: $font-weight-normal !default;
 
 $hr-border-color: rgba(color.$black, 0.1) !default; // Design System
 $hr-border-color-light: rgba(color.$white, 0.4) !default; // Design System only

package/variables/components/_accordion.scss

@@ -32,7 +32,7 @@ $accordion-icon-transition: transform animation.$transition-base-timing !default
 $accordion-icon-transform: rotate(-180deg) !default;
 
 $accordion-body-padding: $accordion-gap $accordion-padding $accordion-padding !default;
-$accordion-body-font-weight: type.$font-weight-light !default;
+$accordion-body-font-weight: type.$font-weight-normal !default;
 
 // Deprecated
 $accordion-padding-x: spacing.$size-regular !default;

package/variables/components/_form-select.scss

@@ -5,10 +5,10 @@
 $form-select-border-radius: forms.$input-border-radius;
 $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-disabled-border-color: color.$gray-40;
 $form-select-indicator-color: color.$black;
 $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-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-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;
 

package/variables/components/_forms.scss

@@ -37,8 +37,8 @@ $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.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-color: var(--post-gray-60); // Design System only
+$input-disabled-border-color: var(--post-gray-40); // Design System only
 $input-disabled-border-style: spacing.$size-line dashed;
 
 $input-color: color.$black !default;

package/variables/components/_notification.scss

@@ -10,7 +10,7 @@ $notification-box-shadow: 0 2px 4px 0 rgba(color.$black, 0.2) !default;
 $notification-border-radius: commons.$border-radius !default;
 $notification-gap: spacing.$size-small-large !default;
 $notification-body-gap: spacing.$size-micro !default;
-$notification-font-weight: type.$font-weight-light !default;
+$notification-font-weight: type.$font-weight-normal !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
 $notification-heading-font-weight: type.$headings-font-weight !default;
 $notification-buttons-gap: spacing.$size-mini !default;

package/variables/components/_tables.scss

@@ -4,35 +4,42 @@
 @use './../spacing';
 @use './../type';
 
+// Bootstrap variables
 $table-cell-padding-y: spacing.$size-small-regular !default;
-$table-cell-padding-x: $table-cell-padding-y !default;
-$table-cell-padding: $table-cell-padding-y $table-cell-padding-x !default;
-
-$table-cell-padding-y-sm: spacing.$size-micro !default;
-$table-cell-padding-x-sm: $table-cell-padding-y-sm !default;
-$table-cell-padding-sm: $table-cell-padding-y-sm $table-cell-padding-x-sm !default;
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
+$table-cell-padding-x: spacing.$size-mini !default;
+$table-cell-padding-y-sm: spacing.$size-mini !default;
+$table-cell-padding-x-sm: spacing.$size-micro !default;
+$table-cell-vertical-align: top !default;
+$table-color: var(--post-contrast-color) !default;
 $table-bg: transparent !default;
 $table-accent-bg: transparent !default;
-$table-hover-bg: rgba(color.$black, 0.075) !default;
-$table-active-bg: $table-hover-bg !default;
-
+$table-th-font-weight: type.$font-weight-bold !default;
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 1 !default;
+$table-striped-bg: color.$light !default;
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 1 !default;
+$table-active-bg: color.$yellow !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 1 !default;
+$table-hover-bg: color.$gray-10 !default;
+$table-border-factor: 1 !default;
 $table-border-width: commons.$border-width !default;
-$table-border-color: rgba(var(--post-contrast-color-rgb), 0.4) !default;
-$table-group-separator-color: rgba(var(--post-contrast-color-rgb), 0.4) !default;
+$table-border-color: color.$gray-10 !default;
+$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+$table-group-separator-color: color.$gray-10 !default;
+$table-caption-color: var(--post-gray-60) !default;
+$table-bg-scale: -80% !default;
 
-$table-head-color: color.$gray-40 !default;
+// Custom variables
+$table-cell-padding: $table-cell-padding-y $table-cell-padding-x !default;
+$table-cell-padding-sm: $table-cell-padding-y-sm $table-cell-padding-x-sm !default;
 
+// DEPRECATED
+$table-head-color: red !default;
 $table-dark-bg: color.$gray-80 !default;
 $table-dark-accent-bg: rgba(color.$white, 0.05) !default;
 $table-dark-hover-bg: rgba(color.$white, 0.075) !default;
 $table-dark-border-color: sass-color.adjust(color.$gray-80, $lightness: 7.5%) !default;
 $table-dark-color: color.$black !default;
-
-$table-striped-order: odd !default;
-
-$table-caption-color: type.$text-muted !default;