chore: styling

Author: tuva-odegard

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,19 +80,19 @@
         }
 
         &:focus {
-            background-color: var(--ffe-farge-frost-30);
+            background-color: var(--ffe-v-datepicker-spinbutton-hover-color);
             outline: none;
         }
 
         &::-ms-clear {
             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;

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);
         }
     }
 }