Skip to content

Commit

Permalink
fix(styles): changes success-green to be treated as a dark background…
Browse files Browse the repository at this point in the history
… color (#2358)

Co-authored-by: Loïc Fürhoff <[email protected]>
  • Loading branch information
b1aserlu and imagoiq authored Dec 13, 2023
1 parent 30c87ed commit 015a566
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/nasty-turtles-judge.md
Original file line number Diff line number Diff line change
@@ -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
9 changes: 9 additions & 0 deletions packages/styles/src/functions/_contrast.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
2 changes: 1 addition & 1 deletion packages/styles/src/variables/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 015a566

Please sign in to comment.