feat: dark mode

Orange-OpenSource · Nov 30, 2023 · a97704a · a97704a
1 parent f562bab
commit a97704a
Show file tree

Hide file tree

Showing 89 changed files with 3,237 additions and 1,248 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -18,15 +18,15 @@
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "12.5 kB"
+      "maxSize": "13.0 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.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

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/dropdown.html b/js/tests/visual/dropdown.html
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary">Dropup split</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-outline-secondary">Dropup split</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-secondary">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-secondary">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-secondary">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">

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
@@ -10,7 +10,7 @@
     </style>
   </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">
+    <nav class="navbar navbar-expand-md bg-dark fixed-top">
       <a class="navbar-brand" 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>

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.1",
     "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-themes": "^7.6.1",
     "@storybook/html": "^7.6.1",
     "@storybook/html-webpack5": "^7.6.1",
     "@storybook/preset-scss": "^1.0.3",