From eb87aed5a8c217c5a844de950ffb507455f17b56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Mon, 16 Dec 2024 16:04:29 +0100
Subject: [PATCH] chore: styling

---
 packages/ffe-datepicker/less/dateinput.less | 67 ++++++++++++++++++---
 packages/ffe-datepicker/less/theme.less     |  2 +
 2 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/packages/ffe-datepicker/less/dateinput.less b/packages/ffe-datepicker/less/dateinput.less
index f40908991d..06d7ebef5d 100644
--- a/packages/ffe-datepicker/less/dateinput.less
+++ b/packages/ffe-datepicker/less/dateinput.less
@@ -9,14 +9,67 @@
         display: block;
     }
 
-    &:has([aria-invalid='true']), &:has([aria-invalid='true']):hover{
-        border-color: var(--ffe-g-error-color);
-        border-style: solid;
+    &:focus-within {
+        border-color: var(--ffe-v-datepicker-bg-color);
+        box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+        outline: none;
+
+        & + .ffe-datepicker__button {
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    border-color: var(--ffe-v-datepicker-bg-color);
+                    box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+                    outline: none;
+                }
+            }
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:focus-within:hover {
+            border-color: transparent;
+        }
     }
 
     &.ffe-input-field {
         display: flex;
         align-items: center;
+
+        &--invalid {
+            border-color: var(--ffe-g-error-color);
+            border-style: solid;
+
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    border-color: var(--ffe-g-error-color);
+                    box-shadow: none;
+                }
+                &:focus-within:hover {
+                    border-color: var(--ffe-v-datepicker-bg-color);
+                }
+            }
+
+            &:focus-within {
+                border-color: var(--ffe-v-datepicker-bg-color);
+                box-shadow: 0 0 0 2px var(--ffe-g-error-color);
+                outline: none;
+            }
+
+            & + .ffe-datepicker__button {
+                &:focus-visible {
+                    border-color: var(--ffe-g-error-color);
+                    border-style: solid;
+                }
+
+                @media (hover: hover) and (pointer: fine) {
+                    &:hover {
+                        border-color: var(--ffe-v-datepicker-bg-color);
+                        box-shadow: 0 0 0 2px var(--ffe-g-error-color);
+                        outline: none;
+                    }
+                }
+            }
+        }
     }
 
     &__field {
@@ -27,7 +80,7 @@
         }
 
         &:focus {
-            background-color: var(--ffe-farge-frost-30);
+            background-color: var(--ffe-v-datepicker-spinbutton-hover-color);
             outline: none;
         }
 
@@ -35,11 +88,11 @@
             display: none;
         }
 
-        &[role="spinbutton"][aria-invalid='true'] {
+        &[role='spinbutton'][aria-invalid='true'] {
             border-color: transparent;
             border-style: none;
         }
-        &[role="spinbutton"][aria-invalid='true']:focus {
+        &[role='spinbutton'][aria-invalid='true']:focus {
             box-shadow: none;
         }
     }
@@ -48,8 +101,6 @@
     }
 }
 
-
-
 .ffe-datepicker {
     position: relative;
     display: grid;
diff --git a/packages/ffe-datepicker/less/theme.less b/packages/ffe-datepicker/less/theme.less
index 9bb7ec84c8..e41517ccb1 100644
--- a/packages/ffe-datepicker/less/theme.less
+++ b/packages/ffe-datepicker/less/theme.less
@@ -12,6 +12,7 @@
     --ffe-v-datepicker-date-color-hover: var(--ffe-farge-vann);
     --ffe-v-datepicker-date-color-focus: var(--ffe-farge-vann);
     --ffe-v-datepicker-date-color-disabled: var(--ffe-farge-varmgraa);
+    --ffe-v-datepicker-spinbutton-hover-color: var(--ffe-farge-frost-30);
 
     @media (prefers-color-scheme: dark) {
         .regard-color-scheme-preference {
@@ -27,6 +28,7 @@
             --ffe-v-datepicker-date-color-hover: var(--ffe-farge-vann-70);
             --ffe-v-datepicker-date-color-focus: var(--ffe-farge-vann-70);
             --ffe-v-datepicker-date-color-disabled: var(--ffe-farge-graa);
+            --ffe-v-datepicker-spinbutton-hover-color: var(--ffe-farge-vann);
         }
     }
 }