From 00d701bf47764b15a2e105bbcd3b073e48177d22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 2 Jan 2024 15:21:33 +0100 Subject: [PATCH] feat: dark mode (#2223) Co-authored-by: Louis-Maxime Piton --- .bundlewatch.config.json | 14 +- .storybook/main.js | 2 +- .storybook/preview.js | 15 +- js/tests/unit/quantity-selector.spec.js | 36 +- js/tests/visual/modal.html | 6 +- js/tests/visual/scrollspy.html | 2 +- package-lock.json | 23 + package.json | 1 + scss/_accordion.scss | 18 +- scss/_alert.scss | 2 +- scss/_back-to-top.scss | 5 +- scss/_badge.scss | 8 - scss/_breadcrumb.scss | 16 +- scss/_button-group.scss | 42 +- scss/_buttons.scss | 160 +- scss/_card.scss | 2 +- scss/_carousel.scss | 6 +- scss/_close.scss | 7 +- scss/_color-palette.scss | 79 + scss/_dropdown.scss | 19 +- scss/_footer.scss | 46 +- scss/_list-group.scss | 19 +- scss/_local-navigation.scss | 30 +- scss/_maps.scss | 8 +- scss/_modal.scss | 1 + scss/_nav.scss | 11 +- scss/_navbar.scss | 61 +- scss/_offcanvas.scss | 4 +- scss/_pagination.scss | 39 +- scss/_reboot.scss | 14 +- scss/_root.scss | 116 +- scss/_spinners.scss | 2 + scss/_stepped-process.scss | 13 +- scss/_sticker.scss | 6 +- scss/_tables.scss | 9 - scss/_tags.scss | 25 +- scss/_title-bars.scss | 9 +- scss/_utilities.scss | 4 +- scss/_variables-dark.scss | 153 +- scss/_variables.scss | 665 +- scss/forms/_form-check.scss | 175 +- scss/forms/_form-control.scss | 6 +- scss/forms/_form-select.scss | 6 +- scss/forms/_input-group.scss | 1 + scss/forms/_labels.scss | 29 +- scss/forms/_quantity-selector.scss | 11 +- scss/forms/_star-rating.scss | 12 +- scss/helpers/_chevron-link.scss | 9 +- scss/helpers/_color-bg.scss | 10 +- scss/helpers/_colored-links.scss | 20 +- scss/mixins/_buttons.scss | 51 +- scss/mixins/_forms.scss | 2 + scss/mixins/_table-variants.scss | 3 - scss/tests/mixins/_color-modes.test.scss | 4 +- site/assets/js/color.js | 28 + site/assets/js/tac.js | 8 +- site/assets/scss/_boosted.scss | 2 +- site/assets/scss/_callouts.scss | 2 +- site/assets/scss/_colors.scss | 6 +- site/assets/scss/_component-examples.scss | 46 +- site/assets/scss/_content.scss | 40 +- site/assets/scss/_masthead.scss | 2 +- site/assets/scss/_navbar.scss | 33 +- site/assets/scss/_search.scss | 71 +- site/assets/scss/_subnav.scss | 4 +- site/assets/scss/_syntax.scss | 39 +- site/assets/scss/_tarteaucitron.scss | 12 +- site/assets/scss/_toc.scss | 2 +- site/assets/scss/_variables.scss | 12 +- site/content/docs/5.3/about/brand.md | 12 +- site/content/docs/5.3/components/accordion.md | 55 +- site/content/docs/5.3/components/alerts.md | 25 +- .../docs/5.3/components/back-to-top.md | 12 +- site/content/docs/5.3/components/badge.md | 4 +- .../content/docs/5.3/components/breadcrumb.md | 28 +- .../docs/5.3/components/button-group.md | 113 +- site/content/docs/5.3/components/buttons.md | 103 +- site/content/docs/5.3/components/card.md | 4 +- .../docs/5.3/components/close-button.md | 43 +- site/content/docs/5.3/components/dropdowns.md | 382 +- site/content/docs/5.3/components/footer.md | 6 +- .../content/docs/5.3/components/list-group.md | 70 +- .../docs/5.3/components/local-navigation.md | 46 +- site/content/docs/5.3/components/modal.md | 42 +- site/content/docs/5.3/components/navbar.md | 225 +- site/content/docs/5.3/components/offcanvas.md | 18 +- .../docs/5.3/components/orange-navbar.md | 149 +- .../content/docs/5.3/components/pagination.md | 32 +- site/content/docs/5.3/components/progress.md | 6 +- site/content/docs/5.3/components/spinners.md | 16 +- .../docs/5.3/components/stepped-process.md | 37 +- site/content/docs/5.3/components/tags.md | 27 +- .../content/docs/5.3/components/title-bars.md | 25 +- site/content/docs/5.3/components/toasts.md | 15 +- site/content/docs/5.3/content/figures.md | 4 +- site/content/docs/5.3/content/images.md | 12 +- site/content/docs/5.3/content/tables.md | 78 +- .../content/docs/5.3/customize/color-modes.md | 67 +- .../docs/5.3/customize/color-palette.md | 212 + .../content/docs/5.3/customize/color-theme.md | 653 ++ site/content/docs/5.3/customize/color.md | 660 -- .../docs/5.3/customize/css-variables.md | 8 - site/content/docs/5.3/customize/overview.md | 4 +- site/content/docs/5.3/customize/sass.md | 14 +- site/content/docs/5.3/dark-mode.md | 9476 +++++++++++++++++ .../docs/5.3/examples/cards-rtl/index.html | 154 +- .../docs/5.3/examples/cards/index.html | 154 +- .../examples/download-app/download-app.css | 7 +- .../docs/5.3/examples/download-app/index.html | 65 +- .../content/docs/5.3/examples/form/index.html | 48 +- site/content/docs/5.3/examples/grid/grid.css | 11 +- .../content/docs/5.3/examples/grid/index.html | 7 +- .../docs/5.3/examples/masonry/index.html | 10 +- .../examples/navbar-mode-selector/index.html | 24 + .../5.3/examples/navbar-sticky/index.html | 2 +- .../docs/5.3/examples/navbars/index.html | 24 +- .../docs/5.3/examples/title-bars/index.html | 6 +- site/content/docs/5.3/forms/checks-radios.md | 45 +- site/content/docs/5.3/forms/input-group.md | 40 +- .../docs/5.3/forms/quantity-selector.md | 12 +- site/content/docs/5.3/forms/validation.md | 4 +- .../docs/5.3/getting-started/accessibility.md | 2 +- site/content/docs/5.3/guidelines/_index.md | 2 +- site/content/docs/5.3/helpers/focus-ring.md | 2 +- site/content/docs/5.3/helpers/stacks.md | 8 +- site/content/docs/5.3/layout/columns.md | 2 +- site/content/docs/5.3/migration.md | 478 +- site/content/docs/5.3/utilities/background.md | 79 +- site/content/docs/5.3/utilities/borders.md | 40 +- site/content/docs/5.3/utilities/colors.md | 69 +- site/content/docs/5.3/utilities/object-fit.md | 20 +- site/content/docs/5.3/utilities/spacing.md | 2 +- site/data/colors.yml | 6 +- site/data/examples.yml | 2 + site/data/grays.yml | 2 + site/data/palette.yml | 290 +- site/data/sidebar.yml | 23 +- site/data/theme-colors.yml | 30 +- site/layouts/_default/docs.html | 4 +- site/layouts/_default/examples.html | 46 +- site/layouts/_default/single.html | 2 +- site/layouts/partials/docs-navbar.html | 18 +- site/layouts/partials/docs-subnav.html | 2 +- site/layouts/partials/docs-versions.html | 2 +- site/layouts/partials/footer.html | 6 +- site/layouts/partials/home/get-started.html | 2 +- site/layouts/partials/home/masthead.html | 2 +- site/layouts/partials/icons.html | 23 +- site/layouts/partials/skippy.html | 4 +- .../callout-deprecated-dark-variants.html | 9 + site/layouts/shortcodes/card.html | 14 +- site/layouts/shortcodes/example.html | 2 +- site/layouts/shortcodes/js-docs.html | 4 +- site/layouts/shortcodes/orange-footer.html | 28 +- .../shortcodes/orange-global-headers.html | 40 +- site/layouts/shortcodes/orange-supra.html | 11 +- site/layouts/shortcodes/placeholder.html | 18 +- site/layouts/shortcodes/scss-docs.html | 4 +- .../5.3/assets/img/examples/cards-rtl.png | Bin 23703 -> 3762 bytes .../5.3/assets/img/examples/cards-rtl@2x.png | Bin 55107 -> 9315 bytes .../docs/5.3/assets/img/examples/cards.png | Bin 4335 -> 6928 bytes .../docs/5.3/assets/img/examples/cards@2x.png | Bin 12286 -> 9731 bytes .../5.3/assets/img/examples/download-app.png | Bin 25652 -> 24572 bytes .../assets/img/examples/download-app@2x.png | Bin 83649 -> 78010 bytes .../docs/5.3/assets/img/examples/form.png | Bin 3908 -> 5913 bytes .../docs/5.3/assets/img/examples/form@2x.png | Bin 10653 -> 15165 bytes .../img/examples/navbar-mode-selector.png | Bin 0 -> 3002 bytes .../img/examples/navbar-mode-selector@2x.png | Bin 0 -> 8250 bytes 168 files changed, 13698 insertions(+), 3240 deletions(-) create mode 100644 scss/_color-palette.scss create mode 100644 site/assets/js/color.js create mode 100644 site/content/docs/5.3/customize/color-palette.md create mode 100644 site/content/docs/5.3/customize/color-theme.md delete mode 100644 site/content/docs/5.3/customize/color.md create mode 100644 site/content/docs/5.3/dark-mode.md create mode 100644 site/content/docs/5.3/examples/navbar-mode-selector/index.html create mode 100644 site/layouts/shortcodes/callout-deprecated-dark-variants.html create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-mode-selector.png create mode 100644 site/static/docs/5.3/assets/img/examples/navbar-mode-selector@2x.png diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index b464012415..089067fdad 100644 --- 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 index d996b9814a..705989b1f2 100644 --- 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 index 747ba2873d..0a9d9d670c 100644 --- 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 index a1b5c1ae65..5403426e22 100644 --- a/js/tests/unit/quantity-selector.spec.js +++ b/js/tests/unit/quantity-selector.spec.js @@ -83,10 +83,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -104,10 +104,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -125,10 +125,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -152,10 +152,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -179,10 +179,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -202,10 +202,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -227,10 +227,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -252,10 +252,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' @@ -280,10 +280,10 @@ describe('QuantitySelector', () => { fixtureEl.innerHTML = [ '
', ' ', - ' ', - ' ', '
' diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 8fb28e99fb..5473a8c6ce 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -116,7 +116,7 @@

Overflowing text to show scroll behavior

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.

@@ -140,7 +140,7 @@

Firefox Bug Test

Test result:

@@ -158,7 +158,7 @@

Lorem slowly

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.

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index f0d3ae59e9..5562aa0d6d 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -11,7 +11,7 @@ {{< /example >}} ## Dark variant -Add `.local-nav-dark` to the `.local-nav` for a dark variant. Don't forget to add `.navbar-dark` to the navbar. +{{< deprecated-in "5.3.3" >}} -{{< example class="bg-dark" >}} - -{{< /example >}} +{{< callout-deprecated-dark-variants "local-nav" >}} ## CSS @@ -65,16 +49,6 @@ Values for the CSS variables are set via Sass, so Sass customization is still su {{< scss-docs name="local-nav-css-vars" file="scss/_local-navigation.scss" >}} -Customization through CSS variables can be seen on the `.local-nav-dark` class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="local-nav-dark-css-vars" file="scss/_local-navigation.scss" >}} - ### Sass variables -Variables for all local navigations: - {{< scss-docs name="local-nav-variables" file="scss/_variables.scss" >}} - -Variables for the [dark local navigation](#dark-variant): - -{{< scss-docs name="local-nav-dark-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 23bbb43cb4..46620d1a78 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -52,7 +52,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee

Modal body text goes here.

@@ -72,7 +72,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee

Modal body text goes here.

@@ -98,7 +98,7 @@ Modals may start with a picture. Add `.modal-img` to your `` or `` tag

Modal body text goes here.

@@ -119,7 +119,7 @@ Modals may start with a picture. Add `.modal-img` to your `` or `` tag

Modal body text goes here.

@@ -147,7 +147,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and

Woo-hoo, you're reading this text in a modal!

@@ -178,7 +178,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and ... @@ -201,7 +201,7 @@ When backdrop is set to static, the modal will not close when clicking outside o

I will not close if you click outside of me. Don't even try to press escape key.

@@ -232,7 +232,7 @@ When backdrop is set to static, the modal will not close when clicking outside o ... @@ -255,7 +255,7 @@ When modals become too long for the user's viewport or device, they scroll indep

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

@@ -283,7 +283,7 @@ You can also create a scrollable modal that allows scrolling the modal body by a

This content should appear at the bottom after you scroll.

@@ -318,7 +318,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

This is a vertically centered modal.

@@ -338,7 +338,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

Just like that.

@@ -385,7 +385,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

This link and that link have tooltips on hover.

@@ -448,7 +448,7 @@ Utilize the Boosted grid system within a modal by nesting `.container-fluid` wit @@ -523,7 +523,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati @@ -725,7 +725,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... @@ -742,7 +742,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... @@ -759,7 +759,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... @@ -776,7 +776,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... @@ -793,7 +793,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... @@ -810,7 +810,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 ... diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index 70638127f5..337afbeee6 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -9,7 +9,7 @@ toc: true --- {{< design-callout-alert >}} -This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure. +This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure. Moreover, Orange navbars have the same rendering in light and dark mode. In order to build an Orange navbar please refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}). {{< /design-callout-alert >}} @@ -45,7 +45,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive dark-themed navbar that automatically collapses at the `lg` (large) breakpoint. {{< example >}} -