From 532cb6fde6e216ec9eccacddac35f8b1992e582e Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 30 Apr 2024 11:28:49 +0200
Subject: [PATCH] fix(styles): add focus color on datepicker component (#2061)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: oliverschuerch <oliver.schuerch@post.ch>
Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../styles/src/components/datepicker.scss     | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
index cb96e89931..51aaa2639e 100644
--- a/packages/styles/src/components/datepicker.scss
+++ b/packages/styles/src/components/datepicker.scss
@@ -5,7 +5,9 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
+@use './../mixins/utilities';
 
 @use './../themes/bootstrap/core' as b;
 
@@ -20,6 +22,10 @@ ngb-datepicker.dropdown-menu {
 
 ngb-datepicker-navigation {
   justify-content: space-between;
+
+  button.ngb-dp-arrow-btn {
+    @include utilities.focus-style();
+  }
 }
 
 ngb-datepicker-navigation-select.ngb-dp-navigation-select {
@@ -30,12 +36,6 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
     border: 0;
     background-position: right;
 
-    &:focus {
-      border-radius: commons.$border-radius;
-      background-color: transparent;
-      box-shadow: inset 0 0 0 commons.$border-thick color.$black;
-    }
-
     + select {
       margin-left: 0.5rem;
     }
@@ -94,12 +94,20 @@ span.ngb-dp-navigation-chevron {
   &.hidden {
     flex-grow: 1;
   }
-}
 
-.ngb-dp-day > .btn-light {
-  width: 40px !important;
-  height: 40px !important;
-  line-height: 40px;
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+
+  > [ngbDatepickerDayView] {
+    width: 40px !important;
+    height: 40px !important;
+    line-height: 40px;
+
+    &.active:not(.bg-primary) {
+      outline: none;
+    }
+  }
 }
 
 .ngb-dp-day > .text-white {
@@ -149,6 +157,10 @@ span.ngb-dp-navigation-chevron {
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
   }
+
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
 }
 
 .form-control-sm ~ .ngb-dp-open {