feat(documentation): adds contrastValues and an example text for colo…

…rs story (#2376)

Different than suggested in the ticket I used the actual function that
is used in the design system to calculate the contrast.
In Terms of presentation I do not have a good idea how it should be
done.

There is however already a page that shows the proper text for each
backround.

https://next.design-system.post.ch/?path=/docs/utilities-background--docs
Maybe this would also be the more appropriate place to add the contrast
information.

---------

Co-authored-by: Oliver Schürch <[email protected]>
Co-authored-by: Loïc Fürhoff <[email protected]>

.changeset/angry-shirts-sing.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added contrast ratios agains black & white to color documentation.

packages/documentation/src/stories/foundation/color/color.blocks.tsx

@@ -4,13 +4,32 @@ import scss from './color.module.scss';
 export const SCSS_VARIABLES = parse(scss);
 
 export const ColorSwatch = (props: { name: string; color: string; noCSS?: boolean }) => {
+  let contrastWhite: number = SCSS_VARIABLES.contrast.white[props.name];
+  let contrastBlack: number = SCSS_VARIABLES.contrast.black[props.name];
   return (
     <article className="color-swatch">
       <div className="color-swatch__description">
         <h3 className="description__title h6">{props.name}</h3>
       </div>
       <div className="color-swatch__color">
-        <div className="color__tile" style={{ backgroundColor: props.color }} />
+        <div
+          className="color__tile"
+          style={{
+            backgroundColor: props.color,
+            color: SCSS_VARIABLES.text.color[props.name],
+          }}
+        >
+          <div className="h-100 px-2 d-flex flex-column align-items-end justify-content-center">
+            <div className="d-flex align-items-center">
+              <span className="fs-tiny">{Number(contrastWhite).toFixed(2)}</span>
+              <div className="h-mini w-mini ms-mini  white"></div>
+            </div>
+            <div className="d-flex align-items-center">
+              <span className="fs-tiny">{Number(contrastBlack).toFixed(2)}</span>
+              <div className="h-mini w-mini ms-mini black"></div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="color-swatch__props">
         <dl>

packages/documentation/src/stories/foundation/color/color.docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Source } from '@storybook/blocks';
-import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
+import { PostTabHeader, PostTabPanel, PostTabs, PostAlert } from '@swisspost/design-system-components-react';
 import { forEach } from '../../../utils/react';
 import * as ColorStories from './color.stories';
 import { ColorSwatch, SCSS_VARIABLES } from './color.blocks';
@@ -14,14 +14,17 @@ import SampleScss from './color-use-scss.sample.scss?raw';
 In the following, you can see the Swiss Post specific colors.<br/>
 They theme our elements and components.
 
-<div className="alert alert-info alert-md mt-regular">
+<PostAlert type="info">
+<p slot="heading">Notes for Accessibility</p>
+  <p>
   For accessibility reasons, you should always make sure that your individually created color combinations are
   sufficiently contrasting. There may be a better solution than coloring elements individually.
 
 For example, use the [background utilities](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to get elements
 with a specific background color and the best possible contrast color for its content.
+</p>
 
-</div>
+</PostAlert>
 
 ## Brand colors
 

packages/documentation/src/stories/foundation/color/color.module.scss

@@ -1,5 +1,25 @@
+@use 'sass:map';
+@use 'sass:list';
 @use '@swisspost/design-system-styles/core' as post;
 
+$all_exported_colors: () !default;
+$all_exported_colors: map.merge(
+  $all_exported_colors,
+  (
+    'yellow': post.$yellow,
+    'white': post.$white,
+    'black': post.$black,
+    'light': post.$light,
+    'dark': post.$dark,
+    'gray-background-light': post.$gray-background-light,
+    'gray-background': post.$gray-background,
+  )
+);
+$all_exported_colors: map.merge($all_exported_colors, post.$post-grays);
+$all_exported_colors: map.merge($all_exported_colors, post.$contextual-colors);
+$all_exported_colors: map.merge($all_exported_colors, post.$accent-colors);
+$all_exported_colors: map.merge($all_exported_colors, post.$signal-colors);
+
 :export {
   brand_yellow: post.$yellow;
   brand_white: post.$white;
@@ -42,4 +62,9 @@
       signal_solid_#{$colorName}: $value;
     }
   }
+  @each $colorName, $value in $all_exported_colors {
+    text_color_#{$colorName}: post.get-best-contrast-text($value);
+    contrast_black_#{$colorName}: post.contrast-ratio($value, post.$black);
+    contrast_white_#{$colorName}: post.contrast-ratio($value, post.$white);
+  }
 }

packages/documentation/src/stories/foundation/color/color.styles.scss

@@ -50,4 +50,10 @@
       }
     }
   }
+  .black {
+    background-color: post.$black;
+  }
+  .white {
+    background-color: post.$white;
+  }
 }

packages/styles/src/functions/_contrast.scss

@@ -53,7 +53,7 @@
   the color is statically defined because the reference to the variable from here
   would create a loop
   */
-  @if ($background == #2c911c) {
+  @if ($background == #2c871d) {
     @return 'dark';
   }