feat(documentation): adds contrast ratios against black & white to co…

…lor documentation
swisspost · Dec 13, 2023 · aed4eb8 · aed4eb8
1 parent 1a8eb03
commit aed4eb8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/angry-shirts-sing.md b/.changeset/angry-shirts-sing.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added contrast ratios agains black & white to color documentation.
diff --git a/packages/documentation/src/stories/foundation/color/color.blocks.tsx b/packages/documentation/src/stories/foundation/color/color.blocks.tsx
@@ -4,8 +4,8 @@ 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];
+  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">

diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -17,7 +17,7 @@ They theme our elements and components.
 
 <div className="alert alert-info alert-md mt-regular">
   For accessibility reasons, you should always make sure that your individually created color combinations are
-  sufficiently contrasting. In the colour tiles below, we have inserted the corresponding contrast values against white and black.
+  sufficiently contrasting. In the colour tiles below, we have inserted the corresponding contrast ratios against white and black.
 
 
 </div>