From 37772a4b858ac78802d6d9216fb4669595e8823b Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 4 Sep 2023 17:02:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20update=20DatePicker=20seg?=
 =?UTF-8?q?ments=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on QA feedbacks we just want a background color for the focused
segments.
---
 .changeset/modern-badgers-draw.md                         | 5 +++++
 packages/react/src/components/Forms/DatePicker/index.scss | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/modern-badgers-draw.md

diff --git a/.changeset/modern-badgers-draw.md b/.changeset/modern-badgers-draw.md
new file mode 100644
index 0000000..a086490
--- /dev/null
+++ b/.changeset/modern-badgers-draw.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add a background color to DatePicker segments
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 998396e..2c6c048 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -70,6 +70,11 @@
         &--empty {
           color: var(--c--components--forms-field--color);
         }
+
+        &:focus-visible {
+          background-color: var(--c--theme--colors--primary-100);
+          outline: none;
+        }
       }
     }