From 66787425438b118939f58f53601ffbfaefd9203f Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Wed, 22 Jan 2025 11:19:13 +0100
Subject: [PATCH] :lipstick: Error borders uses danger-strong consistently
 (#3512)

---
 @navikt/core/css/darkside/form/combobox.darkside.css      | 6 +++---
 @navikt/core/css/darkside/form/file-upload.darkside.css   | 4 ++--
 .../core/css/darkside/form/radio-checkbox.darkside.css    | 3 +--
 @navikt/core/css/darkside/form/search.darkside.css        | 8 ++++----
 @navikt/core/css/darkside/form/select.darkside.css        | 4 ++--
 @navikt/core/css/darkside/form/text-field.darkside.css    | 4 ++--
 @navikt/core/css/darkside/form/textarea.darkside.css      | 4 ++--
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
index 82c0a38c77..ec948c7588 100644
--- a/@navikt/core/css/darkside/form/combobox.darkside.css
+++ b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -117,11 +117,11 @@
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
diff --git a/@navikt/core/css/darkside/form/file-upload.darkside.css b/@navikt/core/css/darkside/form/file-upload.darkside.css
index 89b614b9f6..a63deb1d19 100644
--- a/@navikt/core/css/darkside/form/file-upload.darkside.css
+++ b/@navikt/core/css/darkside/form/file-upload.darkside.css
@@ -89,7 +89,7 @@
 
 .navds-dropzone--error > .navds-dropzone__area {
   border-color: transparent;
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
@@ -165,7 +165,7 @@ li.navds-file-item {
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .navds-file-item__icon {
diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
index 4c7d85bbb5..2d7a916e1b 100644
--- a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
+++ b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
@@ -152,13 +152,12 @@
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
-  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
diff --git a/@navikt/core/css/darkside/form/search.darkside.css b/@navikt/core/css/darkside/form/search.darkside.css
index 69b8d4c78d..5f9f39930e 100644
--- a/@navikt/core/css/darkside/form/search.darkside.css
+++ b/@navikt/core/css/darkside/form/search.darkside.css
@@ -127,13 +127,13 @@
 
 /* --------------------------- Search Error-state --------------------------- */
 .navds-search--error .navds-search__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
   box-shadow:
-    inset -2px 0 0 0 var(--ax-border-danger),
-    inset 0 0 0 1px var(--ax-border-danger);
+    inset -2px 0 0 0 var(--ax-border-danger-strong),
+    inset 0 0 0 1px var(--ax-border-danger-strong);
 
   &.navds-search__input--simple {
-    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 
diff --git a/@navikt/core/css/darkside/form/select.darkside.css b/@navikt/core/css/darkside/form/select.darkside.css
index 51e74e9a27..f2f05e3ba8 100644
--- a/@navikt/core/css/darkside/form/select.darkside.css
+++ b/@navikt/core/css/darkside/form/select.darkside.css
@@ -66,8 +66,8 @@
 /* --------------------------- Select Error-state --------------------------- */
 .navds-select--error {
   > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
   }
 
   > * select:hover,
diff --git a/@navikt/core/css/darkside/form/text-field.darkside.css b/@navikt/core/css/darkside/form/text-field.darkside.css
index da75c726f1..7be09ae23a 100644
--- a/@navikt/core/css/darkside/form/text-field.darkside.css
+++ b/@navikt/core/css/darkside/form/text-field.darkside.css
@@ -39,8 +39,8 @@
 }
 
 .navds-text-field--error .navds-text-field__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
 .navds-text-field--readonly .navds-text-field__input {
diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css
index 53b752601e..89dc7d116a 100644
--- a/@navikt/core/css/darkside/form/textarea.darkside.css
+++ b/@navikt/core/css/darkside/form/textarea.darkside.css
@@ -90,8 +90,8 @@
 }
 
 .navds-textarea--error .navds-textarea__input:not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
-  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+  border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {