From 6e1d079ea6a62db9b9909f400065558d4ab6779c Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Thu, 17 Aug 2023 14:47:35 +0200
Subject: [PATCH 1/9] add different bgs-story example to radio

---
 .../react/src/form/radio/radio.stories.tsx    | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 5444a9e83f..724eef3cf7 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -119,3 +119,34 @@ export const UUDemo = () => (
     </RadioGroup>
   </div>
 );
+
+export const DifferentBackgroundDemo = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
+      defaultValue="3"
+    >
+      <Radio value="1">Griffing</Radio>
+      <Radio value="2">Smygard</Radio>
+      <Radio value="3">Håsblås</Radio>
+      <Radio value="4">Ravnklo</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Hvilken frukt vil du ha?"
+      defaultValue="eple"
+      className="bg-blue-100"
+      style={{ backgroundColor: "grey" }}
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Når har du ferie?"
+      defaultValue="1"
+      style={{ backgroundColor: "lightblue" }}
+    >
+      <Radio value="1">August</Radio>
+      <Radio value="2">Juli</Radio>
+    </RadioGroup>
+  </div>
+);

From 2381d47c8926ce5355dc063435173f323a8f4d1d Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Thu, 17 Aug 2023 15:37:43 +0200
Subject: [PATCH 2/9] add more bgs-stories to radio

---
 .../core/react/src/form/radio/radio.stories.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index 724eef3cf7..fa37d60f28 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -148,5 +148,22 @@ export const DifferentBackgroundDemo = () => (
       <Radio value="1">August</Radio>
       <Radio value="2">Juli</Radio>
     </RadioGroup>
+    <RadioGroup
+      legend="Alt er feil"
+      error="Du gjør alt feil"
+      style={{ backgroundColor: "lightblue" }}
+    >
+      <Radio value="1">Feil</Radio>
+      <Radio value="2">Feil</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Du får ikke endre denne"
+      readOnly
+      defaultValue="1"
+      style={{ backgroundColor: "lightgray" }}
+    >
+      <Radio value="1">Ikke</Radio>
+      <Radio value="2">Prøv</Radio>
+    </RadioGroup>
   </div>
 );

From 23943f2b3d6c976006d1c9d547e2ab958375cfd2 Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Thu, 17 Aug 2023 15:56:42 +0200
Subject: [PATCH 3/9] radio border get darker with background

---
 @navikt/core/css/form/radio-checkbox.css | 70 ++++++++++++++----------
 1 file changed, 42 insertions(+), 28 deletions(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 9e49f8eeb1..5069e9298c 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -31,13 +31,21 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: 1.5rem;
-  height: 1.5rem;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  height: 1.25rem;
+  width: 1.25rem;
+  margin: 2px;
   border-radius: var(--a-border-radius-medium);
   flex-shrink: 0;
 }
 
+/*
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  height: calc(1.5rem - 2px);
+  width: calc(1.5rem - 2px);
+  margin: 2px;
+*/
+
 .navds-radio__label::before {
   border-radius: var(--a-border-radius-full);
 }
@@ -70,25 +78,25 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
   }
 }
 
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
   }
 }
 
@@ -128,31 +136,31 @@
 
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
   }
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
   }
 }
 
@@ -164,13 +172,15 @@
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+/* :hover without focus-visible or any other pseudo-class
+ */
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
   .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   }
 }
 
@@ -183,14 +193,18 @@
   > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
+/* box shadow til alle pseudo-klasser av .navds-checkbox__input
+
+*/
+
 .navds-checkbox--error
   > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -198,7 +212,7 @@
     > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
   }
 }
 
@@ -207,7 +221,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
@@ -215,7 +229,7 @@
   + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 @supports not selector(:focus-visible) {
@@ -224,7 +238,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
   }
 
   .navds-checkbox--error
@@ -232,7 +246,7 @@
     + .navds-checkbox__label::before,
   .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
     background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
   }
 }
 
@@ -274,7 +288,7 @@
   > .navds-radio__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-radio__label::before {
   background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -284,17 +298,17 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
   background-color: var(--a-icon-subtle);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 

From 44dc902c0f7c9cdac960350ddb04fd04b166ab7f Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Thu, 17 Aug 2023 16:02:37 +0200
Subject: [PATCH 4/9] yarn changeset

---
 .changeset/curvy-lions-raise.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/curvy-lions-raise.md

diff --git a/.changeset/curvy-lions-raise.md b/.changeset/curvy-lions-raise.md
new file mode 100644
index 0000000000..ca227fc30b
--- /dev/null
+++ b/.changeset/curvy-lions-raise.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+:bug: radio border blir mørkere hvis bakgrunnen blir det

From 23d1d5333bed945784012fc100060fb64904703c Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Tue, 22 Aug 2023 13:31:52 +0200
Subject: [PATCH 5/9] stories

---
 .../src/form/checkbox/checkbox.stories.tsx    | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 3c885cd343..67f51cb1b2 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -224,3 +224,83 @@ export const Readonly = () => (
     </Checkbox>
   </div>
 );
+
+export const DifferentBackgroundDemo = () => {
+  const [checked, setChecked] = useState([true, false, false]);
+
+  const toggleChecked = (index) => {
+    setChecked((checked) =>
+      checked.map((value, i) => (i === index ? !value : value))
+    );
+  };
+  return (
+    <div className="colgap">
+      <CheckboxGroup
+        legend="Hvem vant Rumpeldunkserien i første året til Harry Potter?"
+        defaultValue={["3"]}
+      >
+        <Checkbox value="1">Griffing</Checkbox>
+        <Checkbox value="2">Smygard</Checkbox>
+        <Checkbox value="3">Håsblås</Checkbox>
+        <Checkbox value="4">Ravnklo</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Hvilke frukter vil du ha?"
+        defaultValue={["eple"]}
+        className="bg-blue-100"
+        style={{ backgroundColor: "grey" }}
+      >
+        <Checkbox value="eple">Eple</Checkbox>
+        <Checkbox value="druer">Druer</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Når har du ferie?"
+        defaultValue={["1"]}
+        style={{ backgroundColor: "lightblue" }}
+      >
+        <Checkbox value="1">August</Checkbox>
+        <Checkbox value="2">Juli</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Alt er feil"
+        error="Du gjør alt feil"
+        style={{ backgroundColor: "lightblue" }}
+      >
+        <Checkbox value="1">Feil</Checkbox>
+        <Checkbox value="2">Feil</Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup
+        legend="Du får ikke endre denne"
+        readOnly
+        defaultValue={["1"]}
+        style={{ backgroundColor: "lightgray" }}
+      >
+        <Checkbox value="1">Ikke</Checkbox>
+        <Checkbox value="2">Prøv</Checkbox>
+      </CheckboxGroup>
+      <span className="bg-blue-100">Faux checkbox group</span>
+      <CheckboxGroup legend="Hvilke filtre vil du bruke?">
+        <Checkbox
+          checked={checked[0] && checked[1] && checked[2]}
+          indeterminate={new Set(checked).size === 2} // if both false and true are present
+          onChange={(e) =>
+            setChecked([e.target.checked, e.target.checked, e.target.checked])
+          }
+        >
+          Alle
+        </Checkbox>
+        <div style={{ paddingLeft: "2rem" }}>
+          <Checkbox checked={checked[0]} onChange={() => toggleChecked(0)}>
+            Filter 1
+          </Checkbox>
+          <Checkbox checked={checked[1]} onChange={() => toggleChecked(1)}>
+            Filter 2
+          </Checkbox>
+          <Checkbox checked={checked[2]} onChange={() => toggleChecked(2)}>
+            Filter 3
+          </Checkbox>
+        </div>
+      </CheckboxGroup>
+    </div>
+  );
+};

From 612655ca40aa5812ac1f7a0f38fa878a0c603313 Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Tue, 22 Aug 2023 13:34:35 +0200
Subject: [PATCH 6/9] remove background image checkbox

---
 @navikt/core/css/form/radio-checkbox.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 4b546c6125..ec384df62a 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -315,7 +315,6 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuNjUpIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }

From 44b2d1e9e77521c6a756a9fe54e61109176074bd Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Tue, 22 Aug 2023 13:37:11 +0200
Subject: [PATCH 7/9] story checkbox indereminate background

---
 @navikt/core/react/src/form/checkbox/checkbox.stories.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index 67f51cb1b2..c049e7b86b 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -278,8 +278,10 @@ export const DifferentBackgroundDemo = () => {
         <Checkbox value="1">Ikke</Checkbox>
         <Checkbox value="2">Prøv</Checkbox>
       </CheckboxGroup>
-      <span className="bg-blue-100">Faux checkbox group</span>
-      <CheckboxGroup legend="Hvilke filtre vil du bruke?">
+      <CheckboxGroup
+        legend="Hvilke filtre vil du bruke?"
+        style={{ backgroundColor: "darkgrey" }}
+      >
         <Checkbox
           checked={checked[0] && checked[1] && checked[2]}
           indeterminate={new Set(checked).size === 2} // if both false and true are present

From dd58dca02589b667e7396fae03591d9dcabe8079 Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Tue, 22 Aug 2023 14:08:13 +0200
Subject: [PATCH 8/9] added disabled story radio checkbox

---
 .../core/react/src/form/checkbox/checkbox.stories.tsx    | 9 +++++++++
 @navikt/core/react/src/form/radio/radio.stories.tsx      | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
index c049e7b86b..699fbc8344 100644
--- a/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
+++ b/@navikt/core/react/src/form/checkbox/checkbox.stories.tsx
@@ -278,6 +278,15 @@ export const DifferentBackgroundDemo = () => {
         <Checkbox value="1">Ikke</Checkbox>
         <Checkbox value="2">Prøv</Checkbox>
       </CheckboxGroup>
+      <CheckboxGroup
+        legend="Denne er disabled"
+        disabled
+        defaultValue={["1"]}
+        style={{ backgroundColor: "grey" }}
+      >
+        <Checkbox value="1">Klarer du</Checkbox>
+        <Checkbox value="2">Å lese dette?</Checkbox>
+      </CheckboxGroup>
       <CheckboxGroup
         legend="Hvilke filtre vil du bruke?"
         style={{ backgroundColor: "darkgrey" }}
diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx
index fa37d60f28..87f7f9ae04 100644
--- a/@navikt/core/react/src/form/radio/radio.stories.tsx
+++ b/@navikt/core/react/src/form/radio/radio.stories.tsx
@@ -165,5 +165,14 @@ export const DifferentBackgroundDemo = () => (
       <Radio value="1">Ikke</Radio>
       <Radio value="2">Prøv</Radio>
     </RadioGroup>
+    <RadioGroup
+      legend="Denne er disabled"
+      disabled
+      defaultValue="1"
+      style={{ backgroundColor: "lightgray" }}
+    >
+      <Radio value="1">Klarer du</Radio>
+      <Radio value="2">Å lese dette?</Radio>
+    </RadioGroup>
   </div>
 );

From c49a86d109af2f571608008891f31d5c73928bc8 Mon Sep 17 00:00:00 2001
From: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no>
Date: Wed, 23 Aug 2023 10:03:05 +0200
Subject: [PATCH 9/9] testing out borders instead of box-shadow for base, then
 shadow for pseudo-classes

---
 @navikt/core/css/form/radio-checkbox.css | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index ec384df62a..c558672f3c 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -31,21 +31,14 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
   height: 1.25rem;
   width: 1.25rem;
   margin: 2px;
   border-radius: var(--a-border-radius-medium);
   flex-shrink: 0;
+  border: 2px solid var(--ac-radio-checkbox-border, var(--a-border-default));
 }
 
-/*
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  height: calc(1.5rem - 2px);
-  width: calc(1.5rem - 2px);
-  margin: 2px;
-*/
-
 .navds-radio__label::before {
   border-radius: var(--a-border-radius-full);
 }
@@ -78,25 +71,25 @@
 
 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:focus + .navds-checkbox__label::before,
   .navds-radio__input:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--a-border-focus);
   }
 }
 
 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
   .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--a-border-focus);
   }
 }
 
@@ -154,13 +147,13 @@
 
 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  /* box-shadow: 0 0 0 1px white, 0px 0px 0 3px var(--a-border-focus, blue); */
 }
 
 @supports not selector(:focus-visible) {
   .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
   .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px red, 1px 1px 0 2px var(--a-border-focus, blue);
   }
 }