Updated testpage

digdir · Jun 7, 2024 · 96753bb · 96753bb
1 parent fcaee44
commit 96753bb
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.module.css b/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.module.css
@@ -26,3 +26,26 @@
 .dark {
   background-color: #131c27;
 }
+
+.contrastCircle {
+  height: 12px;
+  width: 12px;
+  background-color: white;
+  border: 1px solid rgb(184, 184, 184);
+  border-radius: 50%;
+}
+
+.contrastCircleBlack {
+  background-color: black;
+}
+
+.contrastBox {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+}
+
+.dark .contrastBox {
+  color: white;
+}
diff --git a/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.tsx b/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.tsx
@@ -4,7 +4,10 @@ import { useEffect, useState } from 'react';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
-import { getContrastFromLightness } from '../../../utils/colorUtils';
+import {
+  getContrastFromLightness,
+  getContrastFromHex,
+} from '../../../utils/colorUtils';
 import { calculateContrastOneColor } from '../../../utils/themeUtils';
 
 import classes from './BaseContrastOverview.module.css';
@@ -83,17 +86,29 @@ export const BaseContrastOverview = () => {
 
   const Box = ({ color }: BoxProps) => {
     return (
-      <div
-        className={classes.box}
-        style={{
-          backgroundColor: color,
-          color: calculateContrastOneColor(color),
-        }}
-      >
-        <CheckmarkIcon
-          title='a11y-title'
-          fontSize='3.5rem'
-        />
+      <div>
+        <div
+          className={classes.box}
+          style={{
+            backgroundColor: color,
+            color: calculateContrastOneColor(color),
+          }}
+        >
+          <CheckmarkIcon
+            title='a11y-title'
+            fontSize='3.5rem'
+          />
+        </div>
+        <div className={classes.contrastBox}>
+          <div className={cl(classes.contrastCircle)}></div>
+          <div>{getContrastFromHex(color, '#ffffff').toFixed(1)}</div>
+        </div>
+        <div className={classes.contrastBox}>
+          <div
+            className={cl(classes.contrastCircle, classes.contrastCircleBlack)}
+          ></div>
+          <div>{getContrastFromHex(color, '#000000').toFixed(1)}</div>
+        </div>
       </div>
     );
   };