Skip to content

Commit

Permalink
feat: dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
julien-deramond committed Oct 25, 2023
1 parent 4d39d3c commit 670f453
Show file tree
Hide file tree
Showing 89 changed files with 3,263 additions and 1,232 deletions.
8 changes: 4 additions & 4 deletions .bundlewatch.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,19 @@
},
{
"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": "43.75 kB"
"maxSize": "44.25 kB"
},
{
"path": "./dist/css/boosted.min.css",
"maxSize": "40.75 kB"
"maxSize": "41.0 kB"
},
{
"path": "./dist/js/boosted.bundle.js",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 13 additions & 2 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
36 changes: 18 additions & 18 deletions js/tests/unit/quantity-selector.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -104,10 +104,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -125,10 +125,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -152,10 +152,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -179,10 +179,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -202,10 +202,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -227,10 +227,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -252,10 +252,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand All @@ -280,10 +280,10 @@ describe('QuantitySelector', () => {
fixtureEl.innerHTML = [
'<div class="input-group 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>'
Expand Down
20 changes: 10 additions & 10 deletions js/tests/visual/dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions js/tests/visual/modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/scrollspy.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 670f453

Please sign in to comment.