@oslokommune/punkt-css 9.3.2 → 9.4.1

package/dist/css/pkt-elements.css

@@ -25,97 +25,316 @@
  * Background: light, dark
  */
 .pkt-btn {
-  --btn-link-bg: var(--color-blue-dark);
-  --btn-link-bc: var(--color-blue-dark);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-active);
-  --btn-focus-bc: var(--color-active);
-  --btn-focus-txt: var(--color-white);
-  --btn-focus-outline: var(--color-focus);
-  --btn-hover-bg: var(--color-active);
-  --btn-hover-bc: var(--color-active);
-  --btn-hover-txt: var(--color-white);
-  --btn-active-bg: var(--color-active);
-  --btn-active-bc: var(--color-active);
-  --btn-active-txt: var(--color-white);
-  --btn-disabled-bg: var(--color-gray);
-  --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-disabled);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
 }
 
 [data-mode=dark] .pkt-btn {
-  --btn-link-bg: var(--color-blue-light);
-  --btn-link-bc: var(--color-blue-light);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-blue);
-  --btn-focus-bc: var(--color-blue);
-  --btn-focus-txt: var(--color-blue-dark);
-  --btn-focus-outline: var(--color-focus);
-  --btn-hover-bg: var(--color-blue);
-  --btn-hover-bc: var(--color-blue);
-  --btn-hover-txt: var(--color-blue-dark);
-  --btn-active-bg: var(--color-blue);
-  --btn-active-bc: var(--color-blue);
-  --btn-active-txt: var(--color-blue-dark);
-  --btn-disabled-bg: var(--color-gray);
-  --btn-disabled-bc: var(--color-gray);
-  --btn-disabled-txt: var(--color-disabled);
-}
-[data-mode=dark] .pkt-btn--green-dark-outline, [data-mode=dark] .pkt-btn--green-outline, [data-mode=dark] .pkt-btn--blue-outline, [data-mode=dark] .pkt-btn--beige-dark-outline, [data-mode=dark] .pkt-btn--yellow-outline, [data-mode=dark] .pkt-btn--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+}
+[data-mode=dark] .pkt-btn--green-dark {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-dark-green-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--green-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--green-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--blue-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--beige-light {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-light-beige-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--beige-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--yellow-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--red-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn--secondary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-transparent);
-  --btn-focus-txt: var(--color-active);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
 }
 
 [data-mode=dark] .pkt-btn--secondary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-white);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-transparent);
-  --btn-focus-bc: var(--color-active-light);
-  --btn-focus-txt: var(--color-active-light);
-  --btn-hover-bg: var(--color-active-light);
-  --btn-hover-bc: var(--color-active-light);
-  --btn-active-bg: var(--color-active-light);
-  --btn-active-bc: var(--color-active-light);
-}
-[data-mode=dark] .pkt-btn--secondary--green-dark-outline, [data-mode=dark] .pkt-btn--secondary--green-outline, [data-mode=dark] .pkt-btn--secondary--blue-outline, [data-mode=dark] .pkt-btn--secondary--beige-dark-outline, [data-mode=dark] .pkt-btn--secondary--yellow-outline, [data-mode=dark] .pkt-btn--secondary--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
+  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
+}
+[data-mode=dark] .pkt-btn--secondary--green-dark {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-dark-green-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--green-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--green-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--blue-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--beige-light {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-light-beige-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--yellow-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--secondary--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--secondary--red-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-transparent);
-  --btn-link-txt: var(--color-blue-dark);
-  --btn-focus-bg: var(--color-gray);
-  --btn-focus-txt: var(--color-active);
-  --btn-hover-bg: var(--color-gray);
-  --btn-hover-bc: var(--color-gray);
-  --btn-hover-txt: var(--color-active);
-  --btn-disabled-bg: var(--color-transparent);
-  --btn-disabled-bc: var(--color-transparent);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
 }
 
 [data-mode=dark] .pkt-btn--tertiary {
-  --btn-link-bg: var(--color-transparent);
-  --btn-link-bc: var(--color-transparent);
-  --btn-link-txt: var(--color-white);
-  --btn-focus-bg: var(--color-blue-5);
-  --btn-focus-bc: var(--color-active);
-  --btn-hover-bg: var(--color-blue-5);
-  --btn-hover-bc: var(--color-blue-5);
-  --btn-active-bg: var(--color-blue-dark-10);
-  --btn-active-bc: var(--color-transparent);
-  --btn-disabled-bg: var(--color-transparent);
-  --btn-disabled-bc: var(--color-transparent);
-}
-[data-mode=dark] .pkt-btn--tertiary--green-dark-outline, [data-mode=dark] .pkt-btn--tertiary--green-outline, [data-mode=dark] .pkt-btn--tertiary--blue-outline, [data-mode=dark] .pkt-btn--tertiary--beige-dark-outline, [data-mode=dark] .pkt-btn--tertiary--yellow-outline, [data-mode=dark] .pkt-btn--tertiary--red-outline {
-  color: var(--color-white);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-dark {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-dark-green-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--green {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--green-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--blue {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--blue-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--beige-light {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-light-beige-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--yellow {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--yellow-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+}
+[data-mode=dark] .pkt-btn--tertiary--red {
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+}
+[data-mode=dark] .pkt-btn--tertiary--red-outline {
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 
 .pkt-btn {
@@ -130,9 +349,9 @@
   -ms-user-select: none;
   user-select: none;
   vertical-align: top;
-  background-color: var(--btn-link-bg);
-  border: 2px solid var(--btn-link-bc);
-  color: var(--btn-link-txt);
+  background-color: var(--pkt-color-button-background-normal);
+  border: 2px solid var(--pkt-color-button-border-normal);
+  color: var(--pkt-color-button-text-normal);
   text-decoration: none;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
@@ -156,36 +375,36 @@
   flex-shrink: 0;
 }
 .pkt-btn:link, .pkt-btn:visited {
-  color: var(--btn-link-txt);
+  color: var(--pkt-color-button-text-normal);
 }
 a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
-  background-color: var(--btn-focus-bg);
-  color: var(--btn-focus-txt);
-  border-color: var(--btn-focus-bc);
-  outline: 4px solid var(--btn-focus-outline);
+  background-color: var(--pkt-color-button-background-focus);
+  color: var(--pkt-color-button-text-focus);
+  border-color: var(--pkt-color-button-border-focus);
+  outline: 4px solid var(--pkt-color-border-states-focus);
   text-decoration: none;
 }
 
 a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
-  background-color: var(--btn-hover-bg);
-  border-color: var(--btn-hover-bc);
-  color: var(--btn-hover-txt);
+  background-color: var(--pkt-color-button-background-hover);
+  border-color: var(--pkt-color-button-border-hover);
+  color: var(--pkt-color-button-text-hover);
   outline: 0;
   text-decoration: underline;
 }
 
 a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
-  background-color: var(--btn-active-bg);
-  border-color: var(--btn-active-bc);
-  color: var(--btn-active-txt);
+  background-color: var(--pkt-color-button-background-active);
+  border-color: var(--pkt-color-button-border-active);
+  color: var(--pkt-color-button-text-active);
   outline: 0;
   text-decoration: none;
 }
 
 .pkt-btn:disabled {
-  background-color: var(--btn-disabled-bg);
-  border-color: var(--btn-disabled-bc);
-  color: var(--btn-disabled-txt);
+  background-color: var(--pkt-color-button-background-disabled);
+  border-color: var(--pkt-color-button-border-disabled);
+  color: var(--pkt-color-button-text-disabled);
   cursor: inherit;
 }
 .pkt-btn--small {
@@ -243,64 +462,80 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 0;
 }
 .pkt-btn--green-dark {
-  --btn-link-bg: var(--color-green-dark);
-  --btn-link-bc: var(--color-green-dark);
-  --btn-link-txt: var(--color-white);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-dark-green-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
 }
 .pkt-btn--green-dark-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-green-dark);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--green {
-  --btn-link-bg: var(--color-green);
-  --btn-link-bc: var(--color-green);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--green-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-green);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--blue {
-  --btn-link-bg: var(--color-blue);
-  --btn-link-bc: var(--color-blue);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--blue-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-blue);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--beige-light {
-  --btn-link-bg: var(--color-beige-light);
-  --btn-link-bc: var(--color-beige-light);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-light-beige-1000
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--beige-dark-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-beige-dark);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--yellow {
-  --btn-link-bg: var(--color-yellow);
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--yellow-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-yellow);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--red {
-  --btn-link-bg: var(--color-red);
-  --btn-link-bc: var(--color-red);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-btn--red-outline {
-  --btn-link-bg: transparent;
-  --btn-link-bc: var(--color-red);
-  --btn-link-txt: var(--color-blue-dark);
+  --pkt-color-button-background-normal: var(
+    --pkt-color-brand-neutrals-transparent
+  );
+  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
 
 /* 
@@ -329,7 +564,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   margin-bottom: 1.5rem;
 }
 .pkt-form-group:focus-within {
-  color: var(--color-active);
+  color: var(--pkt-color-brand-warm-blue-1000);
 }
 .pkt-form-label {
   width: 100%;
@@ -345,8 +580,8 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
 }
 .pkt-form-validation {
   animation: enter 0.2s ease-in forwards;
-  background-color: var(--color-red);
-  border: 2px solid var(--color-red);
+  background-color: var(--pkt-color-brand-red-1000);
+  border: 2px solid var(--pkt-color-brand-red-1000);
   font-size: 0.875rem;
   line-height: 2rem;
   margin: 1rem 0 0;
@@ -354,20 +589,20 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   transform-origin: 0 0;
 }
 .pkt-form-validation--warning {
-  background-color: var(--color-yellow);
-  border-color: var(--color-yellow);
+  background-color: var(--pkt-color-brand-yellow-1000);
+  border-color: var(--pkt-color-brand-yellow-1000);
 }
 .pkt-form-validation--error {
-  background-color: var(--color-red);
-  border-color: var(--color-red);
+  background-color: var(--pkt-color-brand-red-1000);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-form-input, .pkt-form-textarea {
   appearance: none;
   background-clip: padding-box;
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  border: 2px solid var(--pkt-color-brand-dark-blue-1000);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-brand-dark-blue-1000);
   display: block;
   font-size: 1rem;
   font-weight: 400;
@@ -381,29 +616,30 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
    */
 }
 .pkt-form-input:focus, .pkt-form-textarea:focus {
-  background-color: var(--color-white);
-  border-color: var(--color-active);
-  box-shadow: 0 0 var(--color-active);
-  color: var(--color-active);
-  outline: 2px solid var(--color-active);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  border-color: var(--pkt-color-brand-warm-blue-1000);
+  box-shadow: 0 0 var(--pkt-color-brand-warm-blue-1000);
+  color: var(--pkt-color-brand-warm-blue-1000);
+  outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
 }
 .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
-  color: var(--color-grayscale-30);
-  opacity: 1; /* 1 */
+  color: var(--pkt-color-grays-gray-300);
+  opacity: 1;
+  /* 1 */
 }
 .pkt-form-input + .pkt-form-validation, .pkt-form-textarea + .pkt-form-validation {
   display: none;
 }
 .pkt-form-input:not(:placeholder-shown):invalid, .pkt-form-textarea:not(:placeholder-shown):invalid {
-  border-color: var(--color-red);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-form-input:not(:placeholder-shown):invalid + .pkt-form-validation, .pkt-form-textarea:not(:placeholder-shown):invalid + .pkt-form-validation {
   display: inherit;
 }
 .pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
-  background-color: var(--color-gray);
-  border-color: var(--color-grayscale-30);
-  color: var(--color-grayscale-30);
+  background-color: var(--pkt-color-brand-neutrals-200);
+  border-color: var(--pkt-color-grays-gray-300);
+  color: var(--pkt-color-grays-gray-300);
   cursor: inherit;
 }
 /* 
@@ -411,51 +647,35 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
  * 
  * 
  */
+.pkt-input-check {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+}
+[data-mode=dark] .pkt-input-check {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+}
+
 .pkt-input-check {
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
-  --choice-norm-bg: var(--color-white);
-  --choice-norm-bc: var(--color-blue-dark);
-  --choice-norm-txt: var(--color-blue-dark);
-  --choice-hover-txt: var(--color-active);
-  --choice-hover-checked-bg: var(--color-active);
-  --choice-focus-visible-txt: var(--color-active);
-  --choice-focus-visible-checked-bg: var(--color-active);
-  --choice-disabled-bg: var(--color-disabled-light);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-disabled);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-gray);
-  --choice-tile-checked-bc: var(--color-blue-dark);
-  --choice-tile-focus-bg: var(--color-white);
-  --choice-tile-focus-bc: var(--color-active);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-active);
-  --choice-tile-active-bc: var(--color-blue-dark);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-  --choice-error-bc: var(--color-red);
-  --choice-error-bg: var(--color-red-30);
-  --checkbox-hover-bg: var(--color-white);
-  --checkbox-hover-bc: var(--color-active);
-  --checkbox-focus-visible-bg: var(--color-white);
-  --checkbox-focus-visible-bc: var(--color-active);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-active);
-  --checkbox-active-bc: var(--color-blue-dark);
-  --checkbox-active-ol: var(--color-blue-dark);
-  --checkbox-checked-cb-bg: var(--color-blue-dark);
-  --checkbox-checked-bc: var(--color-blue-dark);
-  --radio-hover-outline: var(--color-active);
-  --radio-checked-bg: var(--color-blue-dark);
-  --radio-checked-bc: var(--color-white);
-  --radio-checked-bs: var(--color-blue-dark);
-  --radio-focus-visible-bc: var(--color-active);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-white);
-  --radio-focus-visible-checked-bg: var(--color-active);
-  --radio-error-checked-bg: var(--color-blue-dark);
 }
 .pkt-input-check__input {
   display: flex;
@@ -466,6 +686,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.5rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-input-check__input-helptext {
   font-size: 0.875rem;
@@ -473,16 +694,16 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   letter-spacing: -0.2px;
   line-height: 1.375rem;
   padding-top: 0.5rem;
-  color: var(--choice-norm-txt);
+  color: var(--pkt-color-text-body-default);
   max-width: 21.875rem;
 }
 .pkt-input-check__input:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--choice-hover-txt);
+  color: var(--pkt-color-input-text-hover);
 }
 .pkt-input-check__input-checkbox {
   appearance: none;
-  background-color: var(--choice-norm-bg);
-  border: 2px solid var(--choice-norm-bc);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
@@ -496,33 +717,31 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: none;
   width: 1.25rem;
   height: 1.25rem;
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-norm-bc);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:focus-visible:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--choice-focus-visible-txt);
+  color: var(--pkt-color-input-text-hover);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:hover {
-  background-color: var(--checkbox-hover-bg);
-  border-color: var(--checkbox-hover-bc);
+  border-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:active:not(:disabled) {
-  background-color: var(--checkbox-active-bg);
-  border-color: var(--checkbox-active-bc);
-  outline: 6px solid var(--checkbox-active-ol);
+  border-color: var(--pkt-color-input-border-active);
+  outline: 6px solid var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
-  background-color: var(--checkbox-focus-visible-bg);
-  border-color: var(--checkbox-focus-visible-bc);
-  outline: 4px solid var(--checkbox-focus-visible-ol);
+  border-color: var(--pkt-color-input-border-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
   outline-offset: 0;
 }
 .pkt-input-check__input-checkbox[type=radio]:hover {
-  outline-color: var(--radio-hover-outline);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+  outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
   position: relative;
-  background-color: var(--checkbox-checked-cb-bg);
+  background-color: var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]::before {
   content: "";
@@ -531,13 +750,8 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: blue;
   z-index: -1;
 }
-.pkt-input-check__input-checkbox:checked[type=checkbox]:checked::before {
-  background-color: blue;
-  border: 6px solid var(--checkbox-checked-cb-bc);
-}
 .pkt-input-check__input-checkbox:checked[type=checkbox]::after {
   content: "";
   position: absolute;
@@ -551,71 +765,70 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
 }
 .pkt-input-check__input-checkbox:checked[type=radio] {
-  background-color: var(--radio-checked-bg);
-  border: 3px solid var(--radio-checked-bc);
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-checked-bs);
+  background-color: var(--pkt-color-input-border-normal);
+  border: 3px solid var(--pkt-color-input-background-normal);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible {
-  background-color: var(--choice-focus-visible-checked-bg);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]:hover {
-  background-color: var(--choice-hover-checked-bg);
+  background-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=radio]:focus-visible {
-  background-color: var(--radio-focus-visible-checked-bg);
-  border: 3px solid var(--radio-focus-visible-checked-bc);
+  background-color: var(--pkt-color-input-border-active);
+  border: 3px solid var(--pkt-color-input-background-normal);
   outline: none;
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc), 0px 0px 0px 0.375rem var(--radio-focus-visible-ol);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
 }
 .pkt-input-check__input-checkbox:checked[type=radio]:hover {
-  box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc);
-  background-color: var(--choice-hover-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+  background-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox] {
-  background-color: var(--choice-disabled-bg);
-  border-color: var(--choice-disabled-bc);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
   cursor: not-allowed;
-  outline-color: var(--choice-disabled-bc);
 }
 .pkt-input-check__input-checkbox:disabled[type=radio] {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-bc);
-  background-color: var(--choice-disabled-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
   cursor: not-allowed;
-  outline-color: var(--choice-disabled-bc);
+  outline-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled:checked[type=checkbox] {
-  background-color: var(--choice-disabled-checked-bg);
-  border-color: var(--choice-disabled-checked-bc);
+  background-color: var(--pkt-color-input-border-disabled);
+  border-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled:checked[type=radio] {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-checked-bc);
-  background-color: var(--choice-disabled-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-input-border-disabled);
 }
 .pkt-input-check__input-checkbox:disabled + .pkt-inputwrapper {
-  color: var(--choice-disabled-txt);
+  color: var(--pkt-color-input-text-disabled);
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox--error[type=checkbox]:checked::after {
   filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
 }
-.pkt-input-check__input-checkbox--error[type=checkbox], .pkt-input-check__input-checkbox--error[type=checkbox]:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled), .pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked::before {
-  background-color: var(--choice-error-bg);
-  border-color: var(--choice-error-bc);
-  outline-color: var(--choice-error-bc);
+.pkt-input-check__input-checkbox--error[type=checkbox], .pkt-input-check__input-checkbox--error[type=checkbox]:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=checkbox]:checked:hover, .pkt-input-check__input-checkbox--error[type=checkbox]:active:not(:disabled), .pkt-input-check__input-checkbox--error:checked[type=checkbox]:checked::before {
+  background-color: var(--pkt-color-surface-default-faded-red);
+  border-color: var(--pkt-color-input-border-error);
+  outline-color: var(--pkt-color-input-border-error);
 }
 .pkt-input-check__input-checkbox--error[type=radio], .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:hover, .pkt-input-check__input-checkbox--error[type=radio]:active:not(:disabled) {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-  background-color: var(--choice-error-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-surface-default-faded-red);
 }
 .pkt-input-check__input-checkbox--error[type=radio]:checked, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible, .pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible + .pkt-input-check__input--tile {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-  background-color: var(--radio-error-checked-bg);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input-checkbox--error[type=radio]:checked:hover, .pkt-input-check__input-checkbox--error[type=radio]:checked:focus-visible {
-  background-color: var(--choice-hover-checked-bg);
+  background-color: var(--pkt-color-input-border-active);
 }
 .pkt-input-check__input--tile {
-  border: 2px solid var(--choice-tile-norm-bc);
+  border: 2px solid var(--pkt-color-border-subtle);
   padding: 1rem;
   width: 21.875rem;
   position: relative;
@@ -637,71 +850,33 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   right: -2px;
   bottom: -2px;
   top: -2px;
-  border: 2px solid var(--choice-tile-checked-bc);
+  border: 2px solid var(--pkt-color-border-default);
   pointer-events: none;
 }
 .pkt-input-check__input--tile:focus-within {
-  background-color: var(--choice-tile-focus-bg);
-  border-color: var(--choice-tile-focus-bc);
-  outline: 4px solid var(--choice-tile-focus-ol);
+  background-color: var(--pkt-color-input-background-normal);
+  border-color: var(--pkt-color-border-states-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
+}
+.pkt-input-check__input--tile:hover:not(.pkt-input-check__input--tile-disabled) {
+  border-color: var(--pkt-color-border-states-hover);
 }
 .pkt-input-check__input--tile:hover > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
-  border-color: var(--choice-tile-hover-bc);
+  border-color: var(--pkt-color-border-states-hover);
 }
 .pkt-input-check__input--tile:active:not(:disabled) > .pkt-input-check__input-checkbox:checked + .pkt-input-check__input-label:before {
-  border-color: var(--choice-tile-active-bc);
+  border-color: var(--pkt-color-border-states-active);
 }
 .pkt-input-check__input--tile:disabled {
-  border-color: var(--choice-tile-disabled-bc);
+  border-color: var(--pkt-color-border-states-disabled);
 }
 .pkt-input-check__input--tile .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible {
-  box-shadow: 0px 0px 0px 0.125rem var(--choice-tile-focus-bc);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
 }
 .pkt-input-check__input--tile .pkt-input-check__input-checkbox[type=checkbox]:focus-visible {
   outline: none;
 }
 
-[data-mode=dark] .pkt-input-check {
-  --choice-norm-bg: var(--color-blue-dark);
-  --choice-norm-bc: var(--color-white);
-  --choice-norm-txt: var(--color-white);
-  --choice-hover-txt: var(--color-active-light);
-  --choice-hover-checked-bg: var(--color-active-light);
-  --choice-focus-visible-txt: var(--color-active-light);
-  --choice-focus-visible-checked-bg: var(--color-active-light);
-  --choice-disabled-bg: var(--color-white);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-white);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-grayscale-60);
-  --choice-tile-checked-bc: var(--color-white);
-  --choice-tile-focus-bg: var(--color-blue-dark);
-  --choice-tile-focus-bc: var(--color-active-light);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-blue-light);
-  --choice-tile-active-bc: var(--color-blue-light);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-  --checkbox-hover-bg: var(--color-blue-dark);
-  --checkbox-hover-bc: var(--color-active-light);
-  --checkbox-focus-visible-bg: var(--color-blue-dark);
-  --checkbox-focus-visible-bc: var(--color-active-light);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-hover-active);
-  --checkbox-active-bc: var(--color-blue-light);
-  --checkbox-active-ol: var(--color-active-light);
-  --checkbox-checked-cb-bg: var(--color-white);
-  --checkbox-checked-bc: var(--color-blue-light);
-  --radio-hover-outline: var(--color-active-light);
-  --radio-checked-bg: var(--color-white);
-  --radio-checked-bc: var(--color-blue-dark);
-  --radio-checked-bs: var(--color-white);
-  --radio-focus-visible-bc: var(--color-blue-light);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-blue-dark);
-  --radio-focus-visible-checked-bg: var(--color-blue-light);
-  --radio-error-checked-bg: var(--color-white);
-}
 [data-mode=dark] .pkt-input-check__input-checkbox[type=checkbox]::after {
   filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
 }
@@ -711,7 +886,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
  */
 .pkt-hr {
   border: 0;
-  border-top: 1px solid var(--color-grayscale-20);
+  border-top: 1px solid var(--pkt-color-grays-gray-200);
 }
 
 /* 
@@ -741,6 +916,42 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 /* Common styles for all inputs */
+.pkt-input, .pkt-select select,
+.pkt-select:is(select),
+.pkt-input-prefix,
+.pkt-input-suffix,
+.pkt-input-icon,
+.pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
+}
+
+[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
+[data-mode=dark] .pkt-select:is(select), [data-mode=dark] .pkt-input-prefix, [data-mode=dark] .pkt-input-suffix, [data-mode=dark] .pkt-input-icon, [data-mode=dark] .pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
+}
+
 .pkt-input, .pkt-select select,
 .pkt-select:is(select) {
   font-size: 1.125rem;
@@ -750,10 +961,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   display: flex;
   align-items: center;
   appearance: none;
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
 }
@@ -777,7 +988,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -785,44 +996,44 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select) option, .pkt-select select:is(select) option,
 .pkt-select:is(select) option {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  color: var(--pkt-color-input-text-normal);
   font-weight: normal;
 }
 .pkt-input::placeholder, .pkt-select select::placeholder,
 .pkt-select:is(select)::placeholder {
-  color: var(--color-grayscale-50);
+  color: var(--pkt-color-text-placeholder);
   opacity: 1;
 }
 .pkt-input:hover, .pkt-select select:hover,
 .pkt-select:hover:is(select), .pkt-input.pkt-input--hover, .pkt-select select.pkt-input--hover,
 .pkt-input--hover.pkt-select:is(select) {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input:focus-visible, .pkt-select select:focus-visible,
 .pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-select select.pkt-input__textinput--focus,
 .pkt-input__textinput--focus.pkt-select:is(select) {
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:focus, .pkt-select select:focus,
 .pkt-select:focus:is(select) {
   outline: none;
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:disabled, .pkt-select select:disabled,
 .pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-select select:disabled::placeholder,
 .pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly], .pkt-select select[readonly],
 [readonly].pkt-select:is(select) {
   opacity: 1;
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
   cursor: inherit;
 }
 .pkt-input:disabled:active, .pkt-select select:disabled:active,
 .pkt-select:disabled:active:is(select) {
-  border: 2px solid var(--color-disabled);
+  border: 2px solid var(--pkt-color-input-border-disabled);
 }
 .pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon {
   font-size: 1.125rem;
@@ -833,8 +1044,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   align-items: center;
   width: auto;
   height: 3rem;
-  border: 2px solid var(--color-blue-dark);
+  border: 2px solid var(--pkt-color-input-border-normal);
   flex-shrink: 0;
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-input-background-normal);
 }
 .pkt-input-prefix {
   padding: 0.5rem 0rem 0.5rem 1rem;
@@ -844,7 +1057,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 1px;
   margin-left: 0.5rem;
   height: 100%;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-suffix {
   padding: 0.5rem 1rem 0.5rem 0rem;
@@ -859,7 +1072,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 1px;
   margin-right: 0.5rem;
   height: 1.5rem;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-icon {
   padding: 0.5rem 1rem;
@@ -871,12 +1084,11 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin-left: 0.5rem;
 }
 .pkt-input--counter-error, .pkt-input--counter-error:focus {
-  border-color: var(--color-red);
-  background-color: var(--color-red-30);
+  border-color: var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-surface-default-faded-red);
 }
 .pkt-input--counter-error:focus {
-  --focus-outline: var(--color-red);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
 }
 .pkt-input__container {
   display: flex;
@@ -905,19 +1117,17 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
 .pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within {
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  outline: 2px solid var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-select select, .pkt-select .pkt-input__container:focus-within select,
 .pkt-input__container:focus-within .pkt-select:is(select),
 .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-input__container:focus-within .pkt-input-icon {
-  outline: 0;
-  border-color: var(--color-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__counter {
   font-size: 0.875rem;
@@ -932,14 +1142,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
-  color: var(--color-red);
-}
-
-[data-mode=dark] .pkt-input-prefix,
-[data-mode=dark] .pkt-input-suffix,
-[data-mode=dark] .pkt-input-icon {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-error);
 }
 
 /* 
@@ -988,7 +1191,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   padding-right: 0;
 }
 .pkt-list-horizontal.bordered li + li {
-  border-left: 1px solid var(--color-grayscale-60);
+  border-left: 1px solid var(--pkt-color-grays-gray-600);
 }
 
 .pkt-dl,
@@ -1064,7 +1267,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--dark {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #2a2859;
+  background-color: #2A2859;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1094,7 +1297,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--danger {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #ff8274;
+  background-color: #FF8274;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1124,7 +1327,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--grey {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f2f2f2;
+  background-color: #F2F2F2;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1150,7 +1353,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--success {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #43f8b6;
+  background-color: #43F8B6;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1180,7 +1383,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--warning {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f9c66b;
+  background-color: #F9C66B;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1206,7 +1409,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-section--info {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #b3f5ff;
+  background-color: #B3F5FF;
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -1246,7 +1449,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
     }
   }
   */
-  border: 1px solid;
+  border: 1px solid #2C2C2C;
 }
 @media screen and (min-width: 35.938rem) {
   .pkt-section--frame {
@@ -1286,8 +1489,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   color: black;
   font-weight: 500;
   text-align: left;
-  background: #f2f2f2;
-  border-bottom: 1px solid #f2f2f2;
+  background: #F2F2F2;
+  border-bottom: 1px solid #F2F2F2;
 }
 .pkt-table__th:first-child {
   border-top-left-radius: 2px;
@@ -1299,10 +1502,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-table td {
   padding: 0.5rem;
   text-align: left;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid #F2F2F2;
 }
 .pkt-table td.strong {
-  border-top: 1px solid #f2f2f2;
+  border-top: 1px solid #F2F2F2;
   font-weight: 500;
 }
 .pkt-table tbody tr:hover > td {
@@ -1310,15 +1513,15 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-table--info .pkt-table__th {
   background: rgba(249, 198, 107, 0.25);
-  border-bottom: 1px solid #f9c66b;
+  border-bottom: 1px solid #F9C66B;
 }
 .pkt-table--success .pkt-table__th {
   background: rgba(199, 246, 201, 0.25);
-  border-bottom: 1px solid #c7f6c9;
+  border-bottom: 1px solid #C7F6C9;
 }
 .pkt-table--strong .pkt-table__th {
   background: rgba(42, 40, 89, 0.25);
-  border-bottom: 1px solid #2a2859;
+  border-bottom: 1px solid #2A2859;
 }
 .pkt-table--shadow {
   background: white;