From f98f71d1780bf9eb77a30846d1e5ecb228f46609 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Mon, 9 Oct 2023 11:08:36 +0200
Subject: [PATCH] Add color mode on labels

---
 scss/_variables.scss               |  7 ++--
 scss/forms/_labels.scss            |  2 +-
 site/content/docs/5.3/dark-mode.md | 52 ++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 25a58e40e5..3f168797df 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1063,7 +1063,7 @@ $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 $font-weight-bold !default; // Boosted mod: instead of `null`
 $form-text-line-height:                 $line-height-sm !default; // Boosted mod
-$form-text-color:                       var(--#{$prefix}secondary-color) !default;
+$form-text-color:                       var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -1071,9 +1071,10 @@ $form-label-margin-bottom:              .5rem !default; // Boosted mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                $font-weight-bold !default;
-$form-label-color:                      null !default;
-$form-label-disabled-color:             $gray-500 !default; // Boosted mod
+$form-label-color:                      var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // Boosted mod
 $form-label-required-margin-left:       .1875rem !default; // Boosted mod
+$form-label-required-color:             var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-helper-variables
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 69cdae120f..8531f92071 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -18,7 +18,7 @@
 
 .is-required::after {
   margin-left: $form-label-required-margin-left;
-  color: $accessible-orange;
+  color: $form-label-required-color;
   content: "*";
 }
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index e082496210..ae59c18522 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -745,6 +745,58 @@ Additional variables for dark-mode (temporary)
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="light" readonly>
 </div>
 
+### Labels, required fields & text
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #282d55;">
+  <label class="form-label" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="dark">Form label</label>
+  <div class="form-text" data-bs-theme="dark">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+  <label class="form-label" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required" data-bs-theme="light">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="light">Form label</label>
+  <div class="form-text" data-bs-theme="light">Form text helper</div>
+</div>
+
 ### Range
 
 <h4 class="mt-3">No theme</h4>