beautifies the example and changes the infobox on the color story docs

swisspost · Dec 13, 2023 · 1a8eb03 · 1a8eb03
1 parent d9f0c7d
commit 1a8eb03
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/packages/documentation/src/stories/foundation/color/color.blocks.tsx b/packages/documentation/src/stories/foundation/color/color.blocks.tsx
@@ -4,21 +4,34 @@ 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 }}>
-          <ul className="list-unstyled ps-1 d-flex flex-column align-content-end">
-            <li>
-              <span className="white">white</span>
-            </li>
-            <li>
-              <span className="black">black</span>
-            </li>
-          </ul>
+        <div
+          className="color__tile"
+          style={{
+            backgroundColor: props.color,
+            color:
+              contrastBlack >= contrastWhite
+                ? SCSS_VARIABLES.brand.black
+                : SCSS_VARIABLES.brand.white,
+          }}
+        >
+          <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">
@@ -33,14 +46,6 @@ export const ColorSwatch = (props: { name: string; color: string; noCSS?: boolea
           <dd>
             <code>post.${props.name}</code>
           </dd>
-          <dt>contrast to black</dt>
-          <dd>
-            <code>{SCSS_VARIABLES.contrast.black[props.name]}</code>
-          </dd>
-          <dt>contrast to white</dt>
-          <dd>
-            <code>{SCSS_VARIABLES.contrast.white[props.name]}</code>
-          </dd>
         </dl>
       </div>
     </article>

diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -17,10 +17,8 @@ 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. There may be a better solution than coloring elements individually.
+  sufficiently contrasting. In the colour tiles below, we have inserted the corresponding contrast values against white and black.
 
-For example, use the <LinkTo kind="utilities-background" story="docs">background utilities</LinkTo> to get elements
-with a specific background color and the best possible contrast color for its content.
 
 </div>
 

diff --git a/packages/documentation/src/stories/foundation/color/color.styles.scss b/packages/documentation/src/stories/foundation/color/color.styles.scss
@@ -51,9 +51,9 @@
     }
   }
   .black {
-    color: post.$black;
+    background-color: post.$black;
   }
   .white {
-    color: post.$white;
+    background-color: post.$white;
   }
 }