@swisspost/design-system-styles 6.2.4 → 6.2.6

package/mixins/_button.scss

@@ -20,10 +20,13 @@
 
 @mixin button-size($size: md) {
   min-height: map.get(button.$btn-height-map, $size);
-  padding: 0 map.get(button.$btn-padding-x-map, $size);
   font-size: map.get(button.$btn-font-size-map, $size);
   gap: map.get(button.$btn-padding-x-map, $size) * 0.5;
 
+  &:where(:not(.btn-link, .btn-tertiary)) {
+    padding: 0 map.get(button.$btn-padding-x-map, $size);
+  }
+
   > .pi {
     width: map.get(button.$btn-icon-size-map, $size);
     height: map.get(button.$btn-icon-size-map, $size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.2.4",
+  "version": "6.2.6",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -21,31 +21,31 @@
     "@angular-devkit/schematics": "=15.0.4",
     "@angular/core": "=15.0.4",
     "@popperjs/core": "2.11.8",
-    "bootstrap": "5.3.0",
+    "bootstrap": "5.3.1",
     "cheerio": "1.0.0-rc.12",
     "prettier": "2.8.8"
   },
   "devDependencies": {
     "@angular/compiler": "=15.0.4",
-    "@percy/cli": "1.26.1",
+    "@percy/cli": "1.26.2",
     "@percy/cypress": "3.1.2",
-    "@swisspost/design-system-icons": "1.0.7",
-    "@types/node": "18.16.18",
+    "@swisspost/design-system-icons": "1.0.9",
+    "@types/node": "18.17.1",
     "autoprefixer": "10.4.14",
     "copyfiles": "2.4.1",
-    "cypress": "12.15.0",
+    "cypress": "12.17.2",
     "cypress-storybook": "0.5.1",
-    "glob": "10.3.0",
+    "glob": "10.3.3",
     "gulp": "4.0.2",
     "gulp-postcss": "9.0.1",
     "gulp-sass": "5.1.0",
-    "jest": "29.5.0",
+    "jest": "29.6.2",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.24",
+    "postcss": "8.4.27",
     "postcss-scss": "4.0.6",
     "rimraf": "5.0.1",
-    "sass": "1.63.6",
-    "stylelint": "15.9.0",
+    "sass": "1.64.1",
+    "stylelint": "15.10.2",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "2.0.0",
@@ -69,7 +69,7 @@
     "prebuild": "pnpm clean",
     "build": "npm-run-all --parallel styles:build schematics:build",
     "styles:build": "gulp build",
-    "test": "jest --onlyChanged",
+    "test": "gulp sass:tests",
     "clean": "rimraf out-tsc dist",
     "format": "prettier src/**/*.scss --write",
     "lint": "stylelint src/**/*.scss",

package/placeholders/_button.scss

@@ -3,23 +3,35 @@
 @use './../variables/components/button';
 
 %btn-default {
-  border: button.$btn-border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
+  border: button.$btn-border-width solid var(--post-gray-60);
 
   @include utilities.not-disabled-focus-hover() {
     border-color: var(--post-contrast-color);
-    color: var(--post-contrast-color); // Override <a> color
   }
 
   @include color-mx.on-dark-background() {
     border-color: var(--post-contrast-color);
 
     @include utilities.not-disabled-focus-hover() {
-      border-color: rgba(var(--post-contrast-color-rgb), 0.4);
+      border-color: var(--post-gray-40);
     }
   }
 
   &:disabled {
-    border-color: rgba(var(--post-contrast-color-rgb), 0.4);
-    color: rgba(var(--post-contrast-color-rgb), 0.6);
+    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);
+  }
+
+  // Invert icon on dark backgrounds
+  @include color-mx.on-dark-background() {
+    .pi {
+      filter: invert(1);
+    }
   }
 }

package/variables/_type.scss

@@ -29,6 +29,7 @@ $font-size-small-huge: sizing.px-to-rem(48px);
 $font-size-huge: sizing.px-to-rem(56px);
 
 // New
+$font-size-12: sizing.px-to-rem(12px);
 $font-size-14: sizing.px-to-rem(14px);
 $font-size-16: sizing.px-to-rem(16px);
 $font-size-18: sizing.px-to-rem(18px);

package/variables/components/_button.scss

@@ -43,7 +43,7 @@ $btn-padding-x-sm: spacing.$size-regular !default;
 $btn-animation-distance-sm: spacing.$size-mini !default;
 // Design System only
 $btn-height-sm: 2rem;
-$btn-font-size-sm: type.$font-size-tiny !default;
+$btn-font-size-sm: type.$font-size-12 !default;
 $btn-icon-size-sm: spacing.$size-regular !default;
 
 // rg
@@ -52,7 +52,7 @@ $btn-padding-x-rg: spacing.$size-large !default;
 $btn-animation-distance-rg: 0.625rem !default;
 // Design System only
 $btn-height-rg: 2.5rem;
-$btn-font-size-rg: type.$font-size-regular !default;
+$btn-font-size-rg: type.$font-size-14 !default;
 $btn-icon-size-rg: 1.125rem !default;
 
 // md
@@ -61,7 +61,7 @@ $btn-padding-x-md: spacing.$size-big !default;
 $btn-animation-distance-md: spacing.$size-small-regular !default;
 // Design System only
 $btn-height-md: 3rem;
-$btn-font-size-md: type.$font-size-regular !default;
+$btn-font-size-md: type.$font-size-16 !default;
 $btn-icon-size-md: spacing.$size-small-large !default;
 
 // lg
@@ -70,7 +70,7 @@ $btn-padding-x-lg: spacing.$size-bigger-big !default;
 $btn-animation-distance-lg: spacing.$size-regular !default;
 // Design System only
 $btn-height-lg: 3.5rem;
-$btn-font-size-lg: type.$font-size-bigger-regular !default;
+$btn-font-size-lg: type.$font-size-18 !default;
 $btn-icon-size-lg: spacing.$size-large !default;
 
 // Available button sizes except the default, which is md