feat(dark mode): Boosted dark mode colors prototype (#1858)

Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
Orange-OpenSource · Mar 20, 2023 · cfbbf3a · cfbbf3a
1 parent 6e3d3b8
commit cfbbf3a
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 50 deletions.
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -8,50 +8,50 @@
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark:        tint-color($success, 40%) !default;
-$info-text-emphasis-dark:           tint-color($info, 40%) !default;
-$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
-$light-text-emphasis-dark:          $gray-100 !default;
-$dark-text-emphasis-dark:           $gray-300 !default;
+$primary-text-emphasis-dark:        $primary !default; // Boosted mod: isntead of `tint-color($primary, 40%)`
+$secondary-text-emphasis-dark:      $secondary !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
+$success-text-emphasis-dark:        null !default; // Boosted mod: instead of `tint-color($success, 40%)`
+$info-text-emphasis-dark:           null !default; // Boosted mod: instead of `tint-color($info, 40%)`
+$warning-text-emphasis-dark:        null !default; // Boosted mod: instead of `tint-color($warning, 40%)`
+$danger-text-emphasis-dark:         null !default; // Boosted mod: instead of `tint-color($danger, 40%)`
+$light-text-emphasis-dark:          $light !default; // Boosted mod: instead of `$gray-100`
+$dark-text-emphasis-dark:           null !default; // Boosted mod: instead of `$gray-300`
 // scss-docs-end theme-text-dark-variables
 
 // scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark:            shade-color($success, 80%) !default;
-$info-bg-subtle-dark:               shade-color($info, 80%) !default;
-$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
-$light-bg-subtle-dark:              $gray-800 !default;
-$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+$primary-bg-subtle-dark:            $primary !default; // Boosted mod: instead of `shade-color($primary, 80%)`
+$secondary-bg-subtle-dark:          $secondary !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
+$success-bg-subtle-dark:            $success !default; // Boosted mod: instead of `shade-color($success, 80%)`
+$info-bg-subtle-dark:               $info !default; // Boosted mod: instead of `shade-color($info, 80%)`
+$warning-bg-subtle-dark:            $warning !default; // Boosted mod: instead of `shade-color($warning, 80%)`
+$danger-bg-subtle-dark:             $danger !default; // Boosted mod: instead of `shade-color($danger, 80%)`
+$light-bg-subtle-dark:              $light !default; // Boosted mod: instead of `$gray-800`
+$dark-bg-subtle-dark:               $dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
-$success-border-subtle-dark:        shade-color($success, 40%) !default;
-$info-border-subtle-dark:           shade-color($info, 40%) !default;
-$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
-$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
-$light-border-subtle-dark:          $gray-700 !default;
-$dark-border-subtle-dark:           $gray-800 !default;
+$primary-border-subtle-dark:        $primary !default; // Boosted mod: instead of `shade-color($primary, 40%)`
+$secondary-border-subtle-dark:      $secondary !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
+$success-border-subtle-dark:        $success !default; // Boosted mod: instead of `shade-color($success, 40%)`
+$info-border-subtle-dark:           $info !default; // Boosted mod: instead of `shade-color($info, 40%)`
+$warning-border-subtle-dark:        $warning !default; // Boosted mod: instead of `shade-color($warning, 40%)`
+$danger-border-subtle-dark:         $danger !default; // Boosted mod: instead of `shade-color($danger, 40%)`
+$light-border-subtle-dark:          $light !default; // Boosted mod: instead of `$gray-700`
+$dark-border-subtle-dark:           $dark !default; // Boosted mod: instead of `$gray-800`
 // scss-docs-end theme-border-subtle-dark-variables
 
-$body-color-dark:                   $gray-500 !default;
-$body-bg-dark:                      $gray-900 !default;
+$body-color-dark:                   $gray-300 !default; // Boosted mod: instead of `$gray-500`
+$body-bg-dark:                      $black !default; // Boosted mod: instead of `$gray-900`
 $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
 $body-secondary-bg-dark:            $gray-800 !default;
 $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
-$body-emphasis-color-dark:          $gray-100 !default;
+$body-tertiary-bg-dark:             #414141 !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
+$body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $gray-700 !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
+$border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
 $headings-color-dark:               null !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
-$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
+$link-hover-color-dark:             $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -646,13 +646,13 @@ $outline-offset:              $outline-width !default; // Deprecated in v5.2.3
 $focus-visible-zindex:                5 !default; // Boosted mod
 
 $focus-visible-inner-width:           2px !default; // Boosted mod
-$focus-visible-inner-color:           $white !default; // Boosted mod
-$focus-visible-inner-color-inverted:  $black !default; // Boosted mod
+$focus-visible-inner-color:           var(--#{$prefix}body-bg) !default; // Boosted mod
+$focus-visible-inner-color-inverted:  var(--#{$prefix}emphasis-color) !default; // Boosted mod
 
 $focus-visible-outer-width:           3px !default;  // Boosted mod
 $focus-visible-outer-offset:          $focus-visible-inner-width !default; // Boosted mod
-$focus-visible-outer-color:           $black !default; // Boosted mod
-$focus-visible-outer-color-inverted:  $white !default; // Boosted mod
+$focus-visible-outer-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$focus-visible-outer-color-inverted:  var(--#{$prefix}body-bg) !default; // Boosted mod
 // scss-docs-end focus-visible-variables
 
 // scss-docs-start box-shadow-variables
@@ -873,7 +873,7 @@ $table-cell-vertical-align:             top !default;
 $table-line-height:                     1.25 !default; // Boosted mod
 
 $table-color:                           var(--#{$prefix}body-color) !default;
-$table-bg:                              $body-bg !default; // Boosted mod
+$table-bg:                              var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `transparent`
 $table-accent-bg:                       transparent !default;
 
 $table-th-font-weight:                  null !default;
@@ -906,8 +906,8 @@ $table-striped-columns-order:           even !default;
 
 $table-group-separator-color:           currentcolor !default;
 
-$table-caption-color:                   var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod
-$table-caption-color-inverted:          $white !default; // Boosted mod
+$table-caption-color:                   var(--#{$boosted-prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$table-caption-color-inverted:          var(--#{$prefix}body-bg) !default; // Boosted mod
 $table-caption-padding-y:               .75rem !default; // Boosted mod
 
 // Boosted mod: no $table-bg-scale
@@ -1659,7 +1659,7 @@ $card-inner-border-radius:          subtract($card-border-radius, $card-border-w
 $card-cap-padding-y:                $card-spacer-bottom * .5 !default; // Boosted mod
 $card-cap-padding-x:                $card-spacer-x !default;
 $card-cap-bg:                       var(--#{$prefix}body-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
-$card-cap-color:                    $white !default;
+$card-cap-color:                    var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `null`
 $card-cap-font-weight:              $font-weight-bold !default; // Boosted mod
 $card-height:                       null !default;
 $card-color:                        null !default;
@@ -1797,7 +1797,7 @@ $toast-max-width:                   21.875rem !default;
 $toast-padding-x:                   $spacer * .5 !default;
 $toast-padding-y:                   $spacer * .25 !default;
 $toast-font-size:                   .875rem !default;
-$toast-color:                       $black !default;
+$toast-color:                       null !default;
 $toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
 $toast-border-width:                var(--#{$prefix}border-width) !default;
 $toast-border-color:                var(--#{$prefix}border-color-translucent) !default; // Boosted mod
@@ -2032,7 +2032,7 @@ $breadcrumb-padding-y:              .5rem !default;
 $breadcrumb-padding-x:              0 !default;
 $breadcrumb-item-padding-x:         $spacer * .5 !default;
 $breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-color:                  $black !default; // Boosted mod
+$breadcrumb-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-active-color:           null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
@@ -2129,7 +2129,7 @@ $btn-close-height:              $btn-close-width !default;
 $btn-close-padding:             var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
 $btn-close-border-width:        var(--#{$prefix}border-width) !default; // Boosted mod
 $btn-close-border-color:        transparent !default; // Boosted mod
-$btn-close-color:               $black !default;
+$btn-close-color:               var(--#{$prefix}emphasis-color) !default;
 $btn-close-bg:                  var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
 // Boosted mod
 // fusv-disable

diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss
@@ -60,7 +60,7 @@ body {
 // Design guidelines
 
 .ods-guidelines {
-  background-color: $gray-300;
+  background-color: var(--bs-secondary-bg);
 
   .card a:hover::before {
     position: absolute;

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
@@ -32,7 +32,7 @@
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
     --bd-callout-color: var(--bs-emphasis-color); // Boosted mod: instead of `var(--bs-#{$variant}-text-emphasis)`
-    // Boosted mod: no `--bd-callout-bg`
+    --bd-callout-bg: var(--bs-tertiary-bg);
     --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -397,7 +397,7 @@
 }
 
 .highlight-toolbar {
-  background-color: $gray-100; // Boosted mod: instead of `var(--bd-pre-bg)`
+  background-color: var(--bd-pre-bg);
   border: solid $gray-400; // Boosted mod
   border-width: 1px 0; // Boosted mod
 }

diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md
@@ -30,7 +30,7 @@ For a list of tags of an article, for example, add a heading (`<h1>–<h6>`) to
   <li><span class="tag">Bird</span></li>
   <li>
     <span class="tag">
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M32 7a13 13 0 01-3.8 1.1 6.6 6.6 0 003-3.6c-1.4.7-2.8 1.3-4.3 1.6a6.6 6.6 0 00-11.1 6A18.6 18.6 0 012.2 5a6.6 6.6 0 002 8.9c-1 0-2-.4-3-.9v.1c0 3.2 2.4 5.9 5.4 6.5a6.6 6.6 0 01-3 0 6.6 6.6 0 006.1 4.6A13.2 13.2 0 010 27.1a18.6 18.6 0 0028.7-16.6C30 9.5 31.1 8.4 32 7z'/></svg>
+      <svg xmlns='http://www.w3.org/2000/svg' fill="currentColor" viewBox='0 0 32 32'><path d='M32 7a13 13 0 01-3.8 1.1 6.6 6.6 0 003-3.6c-1.4.7-2.8 1.3-4.3 1.6a6.6 6.6 0 00-11.1 6A18.6 18.6 0 012.2 5a6.6 6.6 0 002 8.9c-1 0-2-.4-3-.9v.1c0 3.2 2.4 5.9 5.4 6.5a6.6 6.6 0 01-3 0 6.6 6.6 0 006.1 4.6A13.2 13.2 0 010 27.1a18.6 18.6 0 0028.7-16.6C30 9.5 31.1 8.4 32 7z'/></svg>
       Twitter
     </span>
   </li>

diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
@@ -27,7 +27,7 @@ Supporting colors can also be used as the background color for title bars, but n
 The image should not overlap on title and the title shouldn't wrap. If this happens, please **transform your title bar** into a white/black one without any image.
 
 {{< example class="p-0">}}
-<div class="bg-white title-bar">
+<div class="bg-body title-bar">
   <div class="container-xxl">
     <h1 class="display-1">Title</h1>
   </div>

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
@@ -70,7 +70,7 @@ <h1 class="title">Travel</h1>
   </nav>
 </header>
 <main class="bd-content order-1">
-  <div class="bg-white title-bar">
+  <div class="bg-body title-bar">
     <div class="container-xxl d-block">
       <div class="row">
         <div class="col-sm-12 col-lg-5 offset-lg-3">

diff --git a/site/content/docs/5.3/examples/title-bars/index.html b/site/content/docs/5.3/examples/title-bars/index.html
@@ -11,7 +11,7 @@
 ---
 
 <main>
-  <div class="bg-white title-bar">
+  <div class="bg-body title-bar">
     <div class="container-xxl">
       <h1 class="display-1">Title</h1>
     </div>

diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
@@ -3,7 +3,7 @@
 
   <!-- Boosted mod: Orange rendering that handles "Guidelines" page as well -->
   <main class="bd-content order-1" id="content">
-    <div class="bg-white title-bar mb-2 mb-md-0">
+    <div class="bg-body title-bar mb-2 mb-md-0">
       <div class="container-xxl">
         <h1 class="display-1">{{ .Title | markdownify }}</h1>
       </div>