Dark mode: colored buttons, outline, and change of rendering

[julien-deramond]

Description

Warning button

• .btn-warning rendering has changed from being forced from orange to yellow (functional color).
• This variant is not to be used by folks.
• In our own documentation and code, it was only used in Button group > Mixed Styles and can stay as is since it is the same code as Bootstrap and is already covered by the Design Calout message.
• Task to add in the Dark Mode PR description:
  • Mention in the migration guide the change of rendering since folks could have used it without paying attention (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-ff554e03e75f214021058bea325f4efdbe435154b706ecf220c9b29653a4ba8b)

Info Button

• .btn-info rendering has changed from being forced from black to blue (functional color).
• This variant is not to be used by folks.
• In our documentation, it was used in:
  • Cookie management panel for the "Personalize" button which now uses .btn-secondary and the "alert big panel" has been forced to use data-bs-theme="dark".
  • Button group > Button toolbar last button which can use .btn-secondary too. The other previously .btn-secondary buttons in the middle (and in this page) will rather use .btn-outline-secondary anyway (which is closer to what Bootstrap does with outline primary buttons).
• Task to add in the Dark Mode PR description:
  • Mention in the migration guide the change of rendering since folks could have used it without paying attention (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-ff554e03e75f214021058bea325f4efdbe435154b706ecf220c9b29653a4ba8b)

Light Button

• .btn-light rendering has changed from being a black outlined button to a light gray button (using $light color).
• This variant is not to be used by folks.
• Task to add in the Dark Mode PR description:
  • Mention in the migration guide the change of rendering since folks could have used it without paying attention (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-ff554e03e75f214021058bea325f4efdbe435154b706ecf220c9b29653a4ba8b)

Dark Button

• .btn-dark rendering has changed only on dark bg (using $dark color).
• This variant is not to be used by folks.
• Task to add in the Dark Mode PR description:
  • Mention in the migration guide the change of rendering since folks could have used it without paying attention (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-ff554e03e75f214021058bea325f4efdbe435154b706ecf220c9b29653a4ba8b)

Secondary Button

• .btn-secondary rendering has changed from being a black outline button to a black button
• This variant can be used by folks, so this change of rendering can be breaking! ⚠️
• In our documentation and code, it was used in:
  • /js/tests/integration/index.html: nothing to do
  • /js/tests/unit/carousel.spec.js: nothing to do (handled directly in main via fix(unit tests): drop .btn-secondary from carousel play/pause buttons #2306)
  • /js/tests/unit/quantity-selector.js: .btn-secondarys have been changed to .btn-outline-secondary to follow QS modifications
  • /js/tests/visual/alert.html: nothing to do
  • /js/tests/visual/dropdown.html: .btn-secondarys have been changed to .btn-outline-secondary only for split buttons
    • ⚠️ By doing that they become transparent!
  • /js/tests/visual/modal.html: .btn-secondarys have been changed to .btn-outline-secondary for close buttons
  • /js/tests/visual/popover.html: nothing to do
  • /js/tests/visual/tooltip.html: nothing to do
  • tac.js: comes from .btn-info -> .btn-secondary
  • site/content/docs/5.3/dark-mode.md: changed .btn-secondary to .btn-outline-secondary for split buttons
  • site/content/docs/5.3/components/back-to-top.md: changed .btn-secondary to .btn-outline-secondary
    • ⚠️ By doing that they become transparent!
    • Migration guide
  • site/content/docs/5.3/components/button-group.md: changed .btn-secondary to .btn-outline-secondary to keep the same rendering as before
    • Mention in the migration guide?
  • site/content/docs/5.3/components/buttons.md
    • Icon only now uses .btn-outline-secondary but comes transparent! ⚠️
    • Added btn outline secondary as a disabled example like in Bootstrap
  • site/content/docs/5.3/components/close-button.md: changed .btn-secondary to .btn-outline-secondary
    • No need to mention this modification in the migration guide since it relies on the regular button modification
  • site/content/docs/5.3/components/dropdown.md: changed .btn-secondary to .btn-outline-secondary only for split dropdowns
    • Mention in the migration guide
  • site/content/docs/5.3/components/modal.md: changed .btn-secondary to .btn-outline-secondary
    • Mention in the migration guide
  • site/content/docs/5.3/components/popover.md: nothing to change
  • site/content/docs/5.3/components/toast.md: nothing to change cause we don't have any design for that
  • site/content/docs/5.3/components/tooltips.md: nothing to change
  • site/content/docs/5.3/examples/download-app: changed .btn-secondary to .btn-outline-secondary
  • site/content/docs/5.3/forms/input-group.md: go back to .btn-outline-secondary like Bootstrap
  • site/content/docs/5.3/forms/quantity-selector.md: changed .btn-secondary to .btn-outline-secondary
    • Migration guide
  • site/content/docs/5.3/forms/validation.md: changed .btn-secondary to .btn-outline-secondary for the QS
  • site/content/docs/5.3/helpers/clearfix.md: nothing to change
  • site/content/docs/5.3/helpers/stacks.md: changed .btn-secondary to .btn-outline-secondary like Bootstrap
  • site/content/docs/5.3/utilities/position.md: nothing to change
  • site/layouts/_default/docs.html: changed .btn-secondary to .btn-outline-secondary to keep the same design
  • site/layouts/_default/single.html: nothing to change
  • site/layouts/partials/docs-subnav.html: changed .btn-secondary to .btn-outline-secondary to keep the same design
  • site/layouts/partials/footer.html: changed .btn-secondary to .btn-outline-secondary for the back to top
    • ⚠️ It becomes transparent!
  • site/layouts/shortcodes/card.html: changed .btn-secondary to .btn-outline-secondary to keep the same design
    • Migration guide
  • site/layouts/shortcodes/orange-footer.html: changed .btn-secondary to .btn-outline-secondary to keep the same design
    • Migration guide
• Task to add in the Dark Mode PR description:
  • Mention in the migration guide the change of rendering that can be breaking (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-ff554e03e75f214021058bea325f4efdbe435154b706ecf220c9b29653a4ba8b). Sometimes they'll have to use .btn-outline-secondary instead, sometimes they can keep .btn-secondary.
• TODO: double-check with the designers the use cases like some dropdowns, back-to-top, etc. which are like .btn-outline-secondary but with a solid background; it would mean that maybe a variant is missing in their regular buttons?

---

This is the description of the previous PR

This PR reintroduces the colored versions of buttons and outlined buttons coming from Bootstrap instead of hiding them or overwriting their value.

First of all, it adds a little bit of extra CSS in the bundle due to the new outline classes. However, it's necessary for compatibility with Bootstrap when folks use external plugins, libraries, etc. based on Bootstrap with Boosted style.

For regular buttons, the changes are minimal since we modify only the rendering of .btn-warning and .btn-info so that they use ODS functional colors. They are not compatible with ODS design guidelines rules so a design callout has been added to mention that to the users.
The migration guide includes something about it since the rendering of these buttons will change whenever folks have wrongly used the concepts with .btn-warning and .btn-info; this can happen if they have used them only based on the rendering and not the meaning.

Please note that I tried to get back to the code from Bootstrap to create the "regular" buttons, but the rules are too precise and not generic enough to be able to do that (event if some success, danger, info, warning buttons rely on the same parameters).

For the outlined buttons, we already had only the secondary one.
Technically, I've used the same technique as Bootstrap by looping over the $theme-colors and calling the newly created button-outline-variant mixin (with extra parameters to differentiate the active from the hover state).
A special rendering has been introduced for outline secondary and dark buttons when rendered as dark variants.
The new variants and the new mixin are documented in the migration guide, and a design callout has been added to mention that only the secondary variant can be used on their website.

Sub-tasks

• Gather a part of the description of feat(buttons): reintroduce colored versions from Bootstrap of buttons and outline buttons #2300
• Outline in dark mode
• Hovered bg should be solid for .btn-dark and .btn-secondary
• Check that not states are transparent for regular buttons (no outlined) like .btn-primary active state
• Note the impacts in the description
• Disabled state should be handled for outlined buttons
• https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-6eee6d9a95b1201130fa5a27290b5b144d8e556185f20a2e1fe5f314daabbb4e
• https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2300/files#diff-f38b06dd4a7a067fbdddd0e3a4fecc00e7b72a7ce83e2f8e85d1d7b360e8ca64
• Secondary should change color for outline
• $dark stays black? or #141414
• Define if we keep the <details><summary> approach
• Double-check in the doc all usages of btn-warning
• Double-check in the doc all usages of btn-info
• Double-check in the doc all usages of btn-light
• Double-check in the doc all usages of btn-dark
• Double-check in the doc all usages of btn-secondary (use .btn-outline-secondary only when the rendering is imposed by ODS)
• Determine if .dropdown and .btn-check need Boosted specific classes to keep their specific rendering.

Live previews

• https://deploy-preview-2301--boosted.netlify.app/docs/5.3/dark-mode/#buttons
• https://deploy-preview-2301--boosted.netlify.app/docs/5.3/components/buttons/#variants
• https://deploy-preview-2301--boosted.netlify.app/docs/5.3/components/buttons/#outline-buttons

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	ff805de
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65266c4caf99d7000813c69d
😎 Deploy Preview	https://deploy-preview-2301--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	31fb973
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/652f9b29d3ed1c0008cc09c0
😎 Deploy Preview	https://deploy-preview-2301--boosted.netlify.app/docs/5.3/components/buttons
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

Suggested change

	In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
	In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background colors and colors on any button.

[hannahiss]

Sorry but I think the language level is a little too high to express something simple... I would prefer to have the mention of transparent background in these sentences.
LM what do you mean "all background colors and colors"?

[julien-deramond]

Things to try in Bootstrap:

• Change "hefty" wording
• "to remove all background images and colors on any button." > "to remove all background colors on any button."
  @louismaximepiton or @hannahiss I let you propose something