From a8c709cf624f49f6f5d26a70b60fde949d2fde44 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 14 Nov 2023 09:13:51 +0100
Subject: [PATCH] Handle properly the orange in the documentation

---
 site/assets/scss/_component-examples.scss   |  4 ++--
 site/assets/scss/_toc.scss                  |  2 ++
 site/assets/scss/_variables.scss            | 10 +++++-----
 site/content/docs/5.3/utilities/spacing.md  |  2 +-
 site/layouts/partials/home/get-started.html |  2 +-
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ab11f22e56..2f84cdde27 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -314,9 +314,9 @@
   min-height: 16.625rem; // Boosted mod: instead of `15rem`
 
   > div {
-    color: var(--bs-body-bg);
+    color: $black;
     background-color: var(--bd-primary-light);
-    border: 1px solid var(--bd-primary);
+    border: 1px solid var(--bs-primary);
 
     > span {
       position: absolute;
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index f26e2a4c4a..d807702424 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,6 +1,8 @@
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
+  --bd-toc-active-border-left-color: var(--bs-primary); // Boosted mod
+
   @include media-breakpoint-up(lg) {
     position: sticky;
     top: $offset-top; // Boosted mod
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 2e92776f41..302d2ba4a0 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -1,7 +1,8 @@
 // Local docs variables
-$bd-primary:       $primary; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
-$bd-primary-light: lighten(saturate($bd-primary, 5%), 15%); // Boosted mod
+$bd-primary-light: lighten(saturate($primary, 5%), 15%); // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$bd-primary-dark:  darken(saturate($brand-orange, 5%), 15%); // Boosted mod
 $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 // Boosted mod: np $bd-purple-light
@@ -12,12 +13,10 @@ $bd-callout-variants: info, warning, danger !default;
 
 :root,
 [data-bs-theme="light"] {
-  --bd-primary: #{$bd-primary}; // Boosted mod
   --bd-primary-light: #{$bd-primary-light}; // Boosted mod
   // Boosted mod: no --bd-purple
   --bd-violet: #{$bd-violet};
   // Boosted mod: no --bd-accent
-  --bd-primary-rgb: #{to-rgb($bd-primary)}; // Boosted mod
   --bd-primary-light-rgb: #{to-rgb($bd-primary-light)}; // Boosted mod
   // Boosted mod: no --bd-violet-rgb
   // Boosted mod: no --bd-accent-rgb
@@ -29,10 +28,11 @@ $bd-callout-variants: info, warning, danger !default;
   // Boosted mod: no --bd-callout-link
   // Boosted mod: no --bd-callout-code-color
   --bd-pre-bg: var(--bs-tertiary-bg);
-  --bd-toc-active-border-left-color: var(--bd-primary); // Boosted mod
 }
 
 @include color-mode(dark, true) {
+  --bd-primary-light: #{$bd-primary-dark}; // Boosted mod
+  --bd-primary-light-rgb: #{to-rgb($bd-primary-dark)}; // Boosted mod
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
   // Boosted mod: no --bd-toc-color
diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md
index ac1faa15d3..1478e72a15 100644
--- a/site/content/docs/5.3/utilities/spacing.md
+++ b/site/content/docs/5.3/utilities/spacing.md
@@ -77,7 +77,7 @@ Here are some representative examples of these classes:
 Additionally, Boosted also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
 
 <div class="bd-example">
-  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-primary-light-rgb),.15); border: rgba(var(--bd-primary-rgb),.3) solid 1px;">
+  <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-primary-light-rgb),.15); border: rgba(var(--bs-primary-rgb),.3) solid 1px;">
     Centered element
   </div>
 </div>
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index ae93104255..b8c8849d3f 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -1,5 +1,5 @@
 <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-primary-rgb);">
+  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="mb-3 lh-sm fw-semibold">Get started any way you&nbsp;want</h2>