@swisspost/design-system-styles 5.3.2 → 5.4.1

package/layouts/portal/_type.scss

@@ -4,6 +4,8 @@
 
 @use './../../variables/spacing';
 @use './../../variables/type';
+@use './../../variables/components/paragraph';
+@use './../../mixins/type' as type-mx;
 @use './../../placeholders/text';
 
 @mixin styles {
@@ -77,7 +79,7 @@
   }
 
   .lead {
-    @extend %font-curve-bigger-regular;
-    @extend %text-bottom-spacer;
+    @include type-mx.font-curve('bigger-regular');
+    margin-bottom: paragraph.$text-bottom-space;
   }
 }

package/mixins/_button.scss

@@ -4,7 +4,7 @@
 @use './../variables/type';
 @use './../variables/color';
 @use './../placeholders/color' as color-ph;
-@use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 @use 'utilities';
 
 @mixin reset-button {
@@ -46,12 +46,21 @@
     border-color: transparent;
     background-color: $color;
 
-    @if (color-fn.get-contrast-color($color) == #fff) {
+    @if (contrast-fn.light-or-dark($color) == 'dark') {
       color: color.$white;
+    } @else {
+      color: color.$black;
     }
 
     @include utilities.not-disabled-focus-hover() {
-      background-color: darken($color, 10%);
+      $darkened-color: darken($color, 10%);
+      background-color: $darkened-color;
+
+      @if (contrast-fn.light-or-dark($darkened-color) == 'dark') {
+        color: color.$white;
+      } @else {
+        color: color.$black;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "5.3.2",
+  "version": "5.4.1",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -28,9 +28,13 @@
   },
   "devDependencies": {
     "@angular/compiler": "14.2.12",
-    "@types/node": "18.13.0",
+    "@percy/cli": "1.20.0",
+    "@percy/cypress": "3.1.2",
+    "@types/node": "18.14.0",
     "autoprefixer": "10.4.13",
     "copyfiles": "2.4.1",
+    "cypress": "12.6.0",
+    "cypress-storybook": "0.5.1",
     "glob": "8.1.0",
     "gulp": "4.0.2",
     "gulp-postcss": "9.0.1",
@@ -40,8 +44,8 @@
     "postcss": "8.4.21",
     "postcss-scss": "4.0.6",
     "rimraf": "4.1.2",
-    "sass": "1.58.1",
-    "stylelint": "15.1.0",
+    "sass": "1.58.3",
+    "stylelint": "15.2.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "2.0.0",
@@ -59,16 +63,17 @@
     "migrations": "./schematics/migrations.json"
   },
   "scripts": {
-    "clean": "rimraf out-tsc dist/*",
     "start": "npm-run-all --parallel styles:start schematics:start",
+    "styles:start": "gulp watch",
     "prebuild": "pnpm clean",
     "build": "npm-run-all --parallel styles:build schematics:build",
+    "styles:build": "gulp build",
+    "test": "jest --onlyChanged",
+    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js",
+    "clean": "rimraf out-tsc dist/*",
     "format": "prettier src/**/*.scss --write",
     "lint": "stylelint src/**/*.scss",
     "lint:fix": "stylelint src/**/*.scss --fix",
-    "test": "jest --onlyChanged",
-    "styles:start": "gulp watch",
-    "styles:build": "gulp build",
     "schematics:start": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json --watch",
     "schematics:build": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json"
   }

package/placeholders/_notifications.scss

@@ -9,7 +9,7 @@
 
 @use './../mixins/utilities';
 @use './../mixins/icons' as icon-mixin;
-@use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 @use './../placeholders/color' as color-ph;
 @use './text';
 
@@ -93,7 +93,7 @@
 }
 
 @each $name, $color, $icon in alert.$alert-list {
-  $is-light-bg: color-fn.get-contrast-color($color) != #000;
+  $is-light-bg: contrast-fn.light-or-dark($color) == "dark";
 
   %notification-#{$name} {
     @if ($is-light-bg) {

package/variables/_color.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:list';
-@use './../functions/color' as color-fn;
+@use './../functions/contrast' as contrast-fn;
 
 /**
  * Colors used by the post style guide
@@ -114,7 +114,7 @@ $background-colors: map.merge($background-colors, $accent-colors);
 // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
 $dark-backgrounds: () !default;
 @each $colorname, $color in $background-colors {
-  @if (color-fn.get-contrast-color($color) != #000) {
+  @if (contrast-fn.light-or-dark($color) == 'dark') {
     $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$colorname}', $separator: comma);
   }
 }