Merge branch 'main' into 2048-header-re-animate-and-document-main-slot

swisspost · Dec 20, 2023 · 52a2a75 · 52a2a75
2 parents 2138132 + 015a566
commit 52a2a75
Show file tree

Hide file tree

Showing 6 changed files with 218 additions and 1,078 deletions.
diff --git a/.changeset/nasty-turtles-judge.md b/.changeset/nasty-turtles-judge.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Changed color of text on the success background (#2c911c) to white from black for better contrast according to WCAG 3.0
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -47,22 +47,24 @@
     "@percy/cli": "1.27.4",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.8.1",
+    "@stencil/core": "4.8.2",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.7",
-    "@types/jest": "27.5.2",
+    "@types/jest": "29.5.11",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "bootstrap": "5.3.2",
     "cypress": "13.6.1",
     "cypress-storybook": "0.5.1",
     "eslint": "8.55.0",
     "eslint-plugin-react": "7.33.2",
-    "jest": "27.5.1",
-    "jest-cli": "27.5.1",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.5",
     "sass": "1.69.5",
+    "ts-jest": "29.1.1",
     "typescript": "4.9.5"
   }
 }
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
@@ -54,7 +54,7 @@
     "@percy/cli": "1.27.4",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.8.1",
+    "@stencil/core": "4.8.2",
     "@stencil/sass": "3.0.7",
     "@stencil/store": "2.0.11",
     "@types/body-scroll-lock": "3.1.2",
@@ -70,14 +70,15 @@
     "cypress-storybook": "0.5.1",
     "eslint-plugin-react": "7.33.2",
     "globby": "14.0.0",
-    "jest": "27.5.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "rimraf": "5.0.5",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-scss": "4.0.0",
     "rollup-plugin-visualizer": "5.11.0",
     "sass": "1.69.5",
     "start-server-and-test": "2.0.3",
-    "ts-jest": "27.1.5",
+    "ts-jest": "29.1.1",
     "typescript": "4.9.5"
   }
 }
diff --git a/packages/styles/src/functions/_contrast.scss b/packages/styles/src/functions/_contrast.scss
@@ -48,6 +48,15 @@
 }
 
 @function light-or-dark($background, $light-color: #fff, $dark-color: #000) {
+  /*
+  exception for Success-color issue #2227
+  the color is statically defined because the reference to the variable from here
+  would create a loop
+  */
+  @if ($background == #2c911c) {
+    @return 'dark';
+  }
+
   // Contrast ratio with a light color
   $contrast-light: contrast-ratio($background, $light-color);
 

diff --git a/packages/styles/src/variables/_color.scss b/packages/styles/src/variables/_color.scss
@@ -47,7 +47,7 @@ $warning: #f49e00;
 $info: #cce4ee;
 
 // Signal Colors
-$success-green: #2c871d;
+$success-green: #2c871d; /* When value is changed, please changed as well the copied value in ../functions/_contrast.scss, @function light-or-dark()*/
 $error-red: #a51728;
 $warning-orange: #f49e00;
 $success-background: #c0debb;