From e3b17a9d93ab5fd01db90b81febe49df1e7d2c57 Mon Sep 17 00:00:00 2001
From: charliemidtlyng <charlie.midtlyng@bekk.no>
Date: Thu, 14 Dec 2023 15:01:02 +0100
Subject: [PATCH] Radio- og checkbox-panel skal bruke aksels design tokens

---
 src/components/panel/CheckboxPanel.tsx | 17 ++++++++++++-----
 src/components/panel/RadioPanel.tsx    | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/panel/CheckboxPanel.tsx b/src/components/panel/CheckboxPanel.tsx
index c230ea7fa..03ce8349d 100644
--- a/src/components/panel/CheckboxPanel.tsx
+++ b/src/components/panel/CheckboxPanel.tsx
@@ -2,6 +2,13 @@ import React, { PropsWithChildren } from 'react';
 import { Checkbox } from '@navikt/ds-react';
 import classnames from 'classnames';
 import styled from 'styled-components';
+import {
+  ABlue100,
+  ABlue500,
+  ABorderActionSelected,
+  ABorderDefault,
+  AShadowMedium,
+} from '@navikt/ds-tokens/dist/tokens';
 
 interface Properties extends React.InputHTMLAttributes<HTMLInputElement> {
   name?: string | undefined;
@@ -14,7 +21,7 @@ const StyledCheckbox = styled(Checkbox)`
   &.checkbox-panel {
     width: 100%;
     background-color: #fff;
-    border: 1px solid #6a6a6a;
+    border: 1px solid ${ABorderDefault};
     border-radius: 0.25rem;
     display: block;
     position: relative;
@@ -24,18 +31,18 @@ const StyledCheckbox = styled(Checkbox)`
     font-weight: 400;
 
     &.active {
-      background-color: #cce1ff;
+      background-color: ${ABlue100};
       border: 1px solid transparent;
     }
 
     &:hover {
-      border: 1px solid #0067c5;
-      box-shadow: #a0a0a0 0 2px 1px 0;
+      border: 1px solid ${ABlue500};
+      box-shadow: ${AShadowMedium};
       cursor: pointer;
     }
 
     &:focus-visible {
-      outline: rgba(0, 52, 125, 1) solid 1px;
+      outline: ${ABorderActionSelected} solid 1px;
     }
 
     .navds-checkbox__label {
diff --git a/src/components/panel/RadioPanel.tsx b/src/components/panel/RadioPanel.tsx
index fd2168c39..066e3034f 100644
--- a/src/components/panel/RadioPanel.tsx
+++ b/src/components/panel/RadioPanel.tsx
@@ -2,6 +2,13 @@ import React, { PropsWithChildren } from 'react';
 import { Radio } from '@navikt/ds-react';
 import classnames from 'classnames';
 import styled from 'styled-components';
+import {
+  ABlue100,
+  ABlue500,
+  ABorderActionSelected,
+  ABorderDefault,
+  AShadowMedium,
+} from '@navikt/ds-tokens/dist/tokens';
 
 interface Properties extends React.InputHTMLAttributes<HTMLInputElement> {
   name?: string | undefined;
@@ -14,7 +21,7 @@ const StyledRadio = styled(Radio)`
   &.radio-panel {
     width: 100%;
     background-color: #fff;
-    border: 1px solid #6a6a6a;
+    border: 1px solid ${ABorderDefault};
     border-radius: 0.25rem;
     display: block;
     position: relative;
@@ -24,18 +31,18 @@ const StyledRadio = styled(Radio)`
     font-weight: 400;
 
     &.active {
-      background-color: #cce1ff;
+      background-color: ${ABlue100};
       border: 1px solid transparent;
     }
 
     &:hover {
-      border: 1px solid #0067c5;
-      box-shadow: #a0a0a0 0 2px 1px 0;
+      border: 1px solid ${ABlue500};
+      box-shadow: ${AShadowMedium};
       cursor: pointer;
     }
 
     &:focus-visible {
-      outline: rgba(0, 52, 125, 1) solid 1px;
+      outline: ${ABorderActionSelected} solid 1px;
     }
 
     .navds-radio__label {