From 96753bb568e3ff27e17575b2ab3a0fc10ca0830f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Fri, 7 Jun 2024 15:21:47 +0200
Subject: [PATCH] Updated testpage

---
 .../BaseContrastOverview.module.css           | 23 +++++++++++
 .../BaseContrastOverview.tsx                  | 39 +++++++++++++------
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.module.css b/apps/theme/app/testside/BaseContrastOverview/BaseContrastOverview.module.css
index 2821287a33..56f6851104 100644
--- 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
index 8ef1e3a5ba..2a430933b1 100644
--- 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>
     );
   };