Dark mode: handle orange in the doc (#2371)

Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Dec 26, 2023 · 90a5934 · 90a5934
1 parent e028df2
commit 90a5934
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git 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-highlight-color); // Boosted mod: instead of `var(--bs-body-bg)`
+    // Boosted mod: no `color`
     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
@@ -34,7 +34,7 @@
       &:hover,
       &.active {
         color: var(--bd-toc-color);
-        border-left-color: var(--bd-toc-active-border-left-color); // Boosted mod: instead of `--bd-toc-color`
+        border-left-color: var(--bs-primary); // Boosted mod: instead of `--bd-toc-color`
       }
 
       &.active {

diff --git 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
@@ -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
@@ -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>