From 61680e4fa0b6abe695b88308db164f758cbd9d0d Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 16 Aug 2023 10:38:49 +0200
Subject: [PATCH 1/2] =?UTF-8?q?:art:=20Checkbox=20checkmark=20er=20n=C3=A5?=
 =?UTF-8?q?=20svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/soft-buttons-hope.md               |  6 ++++++
 @navikt/core/css/form/radio-checkbox.css      | 21 ++++++++++++++-----
 .../core/react/src/form/checkbox/Checkbox.tsx | 17 +++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/soft-buttons-hope.md

diff --git a/.changeset/soft-buttons-hope.md b/.changeset/soft-buttons-hope.md
new file mode 100644
index 00000000000..b6d6870b87e
--- /dev/null
+++ b/.changeset/soft-buttons-hope.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Checkbox: Checkmark er nå SVG-ikon og ikke Base64
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 9e49f8eeb1c..2472f628870 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -114,14 +114,22 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 0.375rem center;
-  background-repeat: no-repeat;
-  background-size: 0.8125rem;
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(0.375rem);
+  pointer-events: none;
+}
+
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 0.25rem center;
 }
@@ -283,11 +291,14 @@
 }
 
 .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);
   background-color: var(--__ac-radio-checkbox-readonly-bg);
 }
 
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--a-icon-subtle);
+}
+
 .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);
   background-color: var(--a-icon-subtle);
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
index 212a0252b7e..68b64312259 100644
--- a/@navikt/core/react/src/form/checkbox/Checkbox.tsx
+++ b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -86,6 +86,23 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           }}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <span className="navds-checkbox__icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="13"
+              height="10"
+              viewBox="0 0 13 10"
+              fill="none"
+              focusable={false}
+              role="img"
+              aria-hidden
+            >
+              <path
+                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
           <span
             className={cl("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,

From 3da3c06bd7da22af81ae1da3e97e5bde295be44f Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 16 Aug 2023 10:50:03 +0200
Subject: [PATCH 2/2] :bug: Fikset small-variant av checkbox

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

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index 2472f628870..c37a9ae5743 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -130,6 +130,11 @@
   pointer-events: none;
 }
 
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+  height: 1.25rem;
+}
+
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
   background-position: 0.25rem center;
 }