From cf542e4fa9014acea768c64a334a12494e2db402 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 6 Sep 2023 17:08:33 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20fix=20DatePicker,=20Selec?=
 =?UTF-8?q?t,=20Input=20success=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is based on recent QA report.
---
 .changeset/popular-rings-knock.md                     |  5 +++++
 .../react/src/components/Forms/DatePicker/index.scss  |  8 ++++++--
 packages/react/src/components/Forms/Field/index.scss  |  2 +-
 packages/react/src/components/Forms/Input/index.scss  | 11 ++++++++++-
 packages/react/src/components/Forms/Select/index.scss | 10 +++++++++-
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/popular-rings-knock.md

diff --git a/.changeset/popular-rings-knock.md b/.changeset/popular-rings-knock.md
new file mode 100644
index 0000000..1951cff
--- /dev/null
+++ b/.changeset/popular-rings-knock.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+fix DatePicker, Select, Input success colors
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index a7674cd..47abd52 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -170,9 +170,13 @@
     &:not(.c__date-picker--disabled) {
       &:hover {
         .c__date-picker__wrapper {
-          border-color: var(--c--theme--colors--success-200);
+          border-color: var(--c--theme--colors--success-800);
           &__toggle {
-            color: var(--c--theme--colors--success-200);
+            color: var(--c--theme--colors--success-800);
+          }
+
+          label {
+            color: var(--c--theme--colors--success-800);
           }
         }
       }
diff --git a/packages/react/src/components/Forms/Field/index.scss b/packages/react/src/components/Forms/Field/index.scss
index ccbfc43..6b5cfa1 100644
--- a/packages/react/src/components/Forms/Field/index.scss
+++ b/packages/react/src/components/Forms/Field/index.scss
@@ -38,7 +38,7 @@
     color: var(--c--theme--colors--success-600);
 
     .c__field__text {
-      color: var(--c--theme--colors--success-800);
+      color: var(--c--theme--colors--success-600);
     }
   }
 
diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss
index f4ea572..e8f4691 100644
--- a/packages/react/src/components/Forms/Input/index.scss
+++ b/packages/react/src/components/Forms/Input/index.scss
@@ -102,9 +102,18 @@
   &--success {
     border-color: var(--c--theme--colors--success-600);
 
+    .labelled-box label {
+      color: var(--c--theme--colors--success-600);
+    }
+
     &:not(.c__input__wrapper--disabled) {
       &:hover {
-        border-color: var(--c--theme--colors--success-400);
+        border-color: var(--c--theme--colors--success-800);
+        color: var(--c--theme--colors--success-800);
+
+        .labelled-box label {
+          color: var(--c--theme--colors--success-800);
+        }
       }
     }
   }
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index 1b9a69b..f458f6d 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/packages/react/src/components/Forms/Select/index.scss
@@ -189,11 +189,19 @@
 
     .c__select__wrapper {
       border-color: var(--c--theme--colors--success-600);
+
+      label {
+        color: var(--c--theme--colors-success-600);
+      }
     }
 
     &:not(.c__select__wrapper--disabled) {
       .c__select__wrapper:hover {
-        border-color: var(--c--theme--colors--success-400);
+        border-color: var(--c--theme--colors--success-800);
+
+        label {
+          color: var(--c--theme--colors--success-800);
+        }
       }
     }
   }