feat: dark mode (#2223)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Orange-OpenSource · Jan 2, 2024 · 00d701b · 00d701b
1 parent 6a72388
commit 00d701b
Show file tree

Hide file tree

Showing 168 changed files with 13,698 additions and 3,240 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -14,23 +14,23 @@
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
-      "maxSize": "4.25 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "12.5 kB"
+      "maxSize": "12.75 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "11.75 kB"
+      "maxSize": "12.0 kB"
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "44.0 kB"
+      "maxSize": "44.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "41.0 kB"
+      "maxSize": "41.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
@@ -42,11 +42,11 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33.25 kB"
+      "maxSize": "33.0 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",
-      "maxSize": "20.5 kB"
+      "maxSize": "20.25 kB"
     },
     {
       "path": "./dist/js/boosted.js",

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -6,7 +6,7 @@ const config = {
     options: {
       measure: false
     }
-  }, "@storybook/preset-scss"],
+  }, "@storybook/addon-themes", "@storybook/preset-scss"],
   "framework": "@storybook/html-webpack5",
   docs: {
     autodocs: true

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,5 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import './storybook.scss';
 import prettier from 'prettier/esm/standalone';
 import htmlParser from 'prettier/esm/parser-html';
@@ -21,7 +22,17 @@ export const preview = {
         // Pretty print the Docs code source
         return match ? prettier.format(match[1].trim(), {printWidth: 120, parser: "html", plugins: [htmlParser]}) : src;
       }
-    }
-  }
+    },
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-bs-theme',
+    }),
+  ]
 }
 export default preview;
diff --git a/js/tests/unit/quantity-selector.spec.js b/js/tests/unit/quantity-selector.spec.js
@@ -83,10 +83,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -104,10 +104,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -125,10 +125,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -152,10 +152,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -179,10 +179,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -202,10 +202,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -227,10 +227,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -252,10 +252,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -280,10 +280,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -116,7 +116,7 @@ <h4>Overflowing text to show scroll behavior</h4>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -140,7 +140,7 @@ <h1 class="modal-title h4" id="firefoxModalLabel">Firefox Bug Test</h1>
               <p>Test result: <strong id="ff-bug-test-result"></strong></p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -158,7 +158,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -11,7 +11,7 @@
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
     <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-      <a class="navbar-brand" href="#">Scrollspy test</a>
+      <a class="navbar-brand text-white" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,6 +115,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-themes": "^7.6.7",
     "@storybook/html": "^7.6.7",
     "@storybook/html-webpack5": "^7.6.7",
     "@storybook/preset-scss": "^1.0.3",

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -34,6 +34,8 @@
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
   // scss-docs-end accordion-css-vars
+
+  background-color: transparent; // Boosted mod
 }
 
 .accordion-button {
@@ -132,12 +134,11 @@
 
 // Boosted mod: no Flush accordion items
 
-// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+// Boosted mod: no `@if enable-dark-mode`
 
 //
 // Boosted mod:
 // - Sizes
-// - Dark variant
 //
 
 .accordion-sm {
@@ -155,16 +156,3 @@
   --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing-lg};
   // scss-docs-end accordion-lg-css-vars
 }
-
-.accordion-dark {
-  // scss-docs-start accordion-dark-css-vars
-  --#{$prefix}accordion-btn-color: #{$accordion-dark-button-color};
-  --#{$prefix}accordion-btn-bg: #{$accordion-dark-button-bg};
-  --#{$prefix}accordion-btn-hover-bg: #{$accordion-dark-button-hover-bg};
-  --#{$prefix}accordion-active-color: #{$accordion-dark-button-active-color};
-  --#{$prefix}accordion-border-color: #{$accordion-dark-border-color};
-  --#{$prefix}accordion-color: #{$accordion-dark-color};
-  --#{$prefix}accordion-bg: #{$accordion-dark-bg};
-  // scss-docs-end accordion-dark-css-vars
-}
-// End mod
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -78,7 +78,7 @@
 
 @each $state, $value in $alert-colors {
   .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}body-color); // Boosted mod: instead of `var(--#{$prefix}#{$state}-text-emphasis)`
+    // Boosted mod: no --#{$prefix}alert-color
     --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
     // Boosted mod: no `--#{$prefix}alert-link-color`
     // Boosted mod

diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
@@ -16,9 +16,10 @@
   --#{$prefix}back-to-top-link-icon: #{$back-to-top-icon};
   --#{$prefix}back-to-top-link-width: #{$back-to-top-icon-width};
   --#{$prefix}back-to-top-link-height: #{$back-to-top-icon-height};
+  --#{$prefix}back-to-top-link-bg: #{$back-to-top-bg};
   --#{$prefix}back-to-top-title-offset-right: #{$back-to-top-title-offset-right};
   --#{$prefix}back-to-top-title-padding: #{$back-to-top-title-padding};
-  --#{$prefix}back-to-top-title-color: #{color-contrast($back-to-top-title-bg-color)};
+  --#{$prefix}back-to-top-title-color: #{$back-to-top-title-color};
   --#{$prefix}back-to-top-title-bg-color: #{$back-to-top-title-bg-color};
   --#{$prefix}back-to-top-title-active-decoration: #{$link-decoration};
   // scss-docs-end back-to-top-css-vars
@@ -37,12 +38,14 @@
   bottom: var(--#{$prefix}back-to-top-bottom);
   z-index: var(--#{$prefix}back-to-top-zindex);
   pointer-events: none;
+  background-color: transparent;
 }
 
 .back-to-top-link {
   position: sticky;
   top: var(--#{$prefix}back-to-top-link-offset-top);
   pointer-events: all;
+  background-color: var(--#{$prefix}back-to-top-link-bg);
   @include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px));
 
   &::after {

diff --git a/scss/_badge.scss b/scss/_badge.scss
@@ -40,11 +40,3 @@
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); // Boosted mod
   margin-left: map-get($spacers, 1); // Boosted mod
 }
-
-// Boosted mod: inconsistent background color & naming
-@each $color, $value in $theme-colors {
-  .badge.bg-#{$color} {
-    color: color-contrast($value);
-    background-color: $value !important; // stylelint-disable-line declaration-no-important
-  }
-}