feat: handle dark background for basic elements like links and code (#…

…1038)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

.bundlewatch.config.json

@@ -2,19 +2,19 @@
   "files": [
     {
       "path": "./dist/css/boosted-grid.css",
-      "maxSize": "9.9 kB"
+      "maxSize": "10.0 kB"
     },
     {
       "path": "./dist/css/boosted-grid.min.css",
-      "maxSize": "9.0 kB"
+      "maxSize": "9.2 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "3.4 kB"
+      "maxSize": "3.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
-      "maxSize": "3.2 kB"
+      "maxSize": "3.3 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "26.8 kB"
+      "maxSize": "27.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_root.scss

@@ -58,3 +58,26 @@
   // scss-docs-end root-body-variables
   // stylelint-enable custom-property-empty-line-before
 }
+
+// Boosted mod
+[class*="-dark"],
+.bg-secondary {
+  --#{$boosted-variable-prefix}link-color: #{$link-color-dark};
+  --#{$boosted-variable-prefix}link-hover-color: #{$link-hover-color-dark};
+  --#{$boosted-variable-prefix}caption-color: #{$table-caption-color-dark};
+  --#{$boosted-variable-prefix}code-color: #{$code-color-dark};
+  --#{$boosted-variable-prefix}kbd-color: #{$kbd-color-dark};
+  --#{$boosted-variable-prefix}kbd-bg: #{$kbd-bg-dark};
+  --#{$boosted-variable-prefix}pre-color: #{$pre-color-dark};
+
+  [class*="bg-"]:not(&):not(.bg-transparent) {
+    --#{$boosted-variable-prefix}link-color: #{$link-color};
+    --#{$boosted-variable-prefix}link-hover-color: #{$link-hover-color};
+    --#{$boosted-variable-prefix}caption-color: #{$table-caption-color};
+    --#{$boosted-variable-prefix}code-color: #{$code-color};
+    --#{$boosted-variable-prefix}kbd-color: #{$kbd-color};
+    --#{$boosted-variable-prefix}kbd-bg: #{$kbd-bg};
+    --#{$boosted-variable-prefix}pre-color: #{$pre-color};
+  }
+}
+// End mod

scss/_variables.scss

@@ -454,17 +454,17 @@ $body-text-align:           null !default;
 //
 // Style anchor elements.
 
-$link-color:                              $black !default;
+$link-color:                              var(--#{$boosted-variable-prefix}link-color, $black) !default; // Boosted mod
+$link-color-dark:                         $white !default; // Boosted mod
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        $accessible-orange !default;
+$link-hover-color:                        var(--#{$boosted-variable-prefix}link-hover-color, $accessible-orange) !default; // Boosted mod
+$link-hover-color-dark:                   $brand-orange !default; // Boosted mod
 $link-hover-decoration:                   null !default;
 
-
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
-
 // Boosted mod
 $linked-chevron-icon-width:   subtract(.5rem, 1px) !default;
 $linked-chevron-icon-height:  $spacer * .5 !default;
@@ -779,7 +779,8 @@ $table-border-color:          $gray-500 !default;
 
 $table-group-separator-color: currentColor !default;
 
-$table-caption-color:         $black !default;
+$table-caption-color:         var(--#{$boosted-variable-prefix}caption-color, $black) !default; // Boosted mod
+$table-caption-color-dark:    $white !default; // Boosted mod
 $table-caption-padding-y:     .75rem !default; // Boosted mod
 // scss-docs-end table-variables
 
@@ -1794,18 +1795,23 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 // scss-docs-end offcanvas-variables
 
 // Code
-
+// Boosted mod
 $code-font-size:                    .875em !default;
-$code-color:                        $gray-700 !default;
+$code-color:                        var(--#{$boosted-variable-prefix}code-color, $gray-700) !default;
+$code-color-dark:                   $gray-600 !default;
 
 $kbd-padding-y:                     $spacer * .05 !default;
 $kbd-padding-x:                     $spacer * .05 !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $black !default;
-$kbd-bg:                            $gray-300 !default;
-
-$pre-color:                         $gray-900 !default;
-$pre-line-height:                   1.25 !default; // Boosted mod
+$kbd-color:                         var(--#{$boosted-variable-prefix}kbd-color, $black) !default;
+$kbd-color-dark:                    $white !default;
+$kbd-bg:                            var(--#{$boosted-variable-prefix}kbd-bg, $gray-300) !default;
+$kbd-bg-dark:                       $gray-900 !default;
+
+$pre-color:                         var(--#{$boosted-variable-prefix}pre-color, $gray-900) !default;
+$pre-color-dark:                    $gray-300 !default;
+$pre-line-height:                   1.25 !default;
+// End mod
 
 //
 // Boosted mod

scss/mixins/_utilities.scss

@@ -114,7 +114,7 @@
                   }
                 }
               }
-              @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value {
+              @if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value {
                 background-color: color-contrast($value);
               }
             }

site/content/docs/5.1/examples/checkout-rtl/index.html

@@ -9,7 +9,8 @@
 body_class: "bg-light"
 ---
 
-<div class="container">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<div class="container exclude-from-pa11y-analysis">
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="" width="50" height="50">

site/content/docs/5.1/examples/checkout/index.html

@@ -8,7 +8,8 @@
 body_class: "bg-light"
 ---
 
-<div class="container">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<div class="container exclude-from-pa11y-analysis">
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="" width="50" height="50">

site/content/docs/5.1/examples/dashboard-rtl/index.html

@@ -25,7 +25,8 @@
   </div>
 </header>
 
-<div class="container-fluid">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<div class="container-fluid exclude-from-pa11y-analysis">
   <div class="row">
     <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
       <div class="position-sticky pt-3">

site/content/docs/5.1/examples/dashboard/index.html

@@ -24,7 +24,8 @@
   </div>
 </header>
 
-<div class="container-fluid">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<div class="container-fluid exclude-from-pa11y-analysis">
   <div class="row">
     <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
       <div class="position-sticky pt-3">

site/content/docs/5.1/examples/headers/index.html

@@ -31,7 +31,8 @@
   </symbol>
 </svg>
 
-<main>
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<main class="exclude-from-pa11y-analysis">
   <h1 class="visually-hidden">Headers examples</h1>
 
   <div class="container">

site/content/docs/5.1/examples/heroes/index.html

@@ -6,7 +6,8 @@
 body_class: ""
 ---
 
-<main>
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<main class="exclude-from-pa11y-analysis">
   <h1 class="visually-hidden">Heroes examples</h1>
 
   <div class="px-4 py-5 my-5 text-center">

site/content/docs/5.1/examples/sidebars/index.html

@@ -68,7 +68,8 @@
   </symbol>
 </svg>
 
-<main>
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<main class="exclude-from-pa11y-analysis">
   <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">

site/content/docs/5.1/examples/sticky-footer-navbar/index.html

@@ -45,7 +45,8 @@ <h1 class="mt-5">Sticky footer with fixed navbar</h1>
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<footer class="footer mt-auto py-3 bg-light exclude-from-pa11y-analysis">
   <div class="container">
     <span class="text-muted">Place sticky footer content here.</span>
   </div>

site/content/docs/5.1/examples/sticky-footer/index.html

@@ -17,7 +17,8 @@ <h1 class="mt-5">Sticky footer</h1>
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
+<footer class="footer mt-auto py-3 bg-light exclude-from-pa11y-analysis">
   <div class="container">
     <span class="text-muted">Place sticky footer content here.</span>
   </div>