[Tidy] Add vizro-bootstrap stylesheet and remove custom CSS

[huong-li-nguyen]

Description

• Add WIP version of static vizro-bootstrap CSS file (it's not complete yet, but only contains selected components)
• Remove custom CSS for Accordion, Button, Card, Typography, NavBar
• Refactor code for Button, Card, NavBar, NavLink,

---

For Users

This change should only affect your app if you have been using custom CSS. If you've been using custom CSS and referenced any CSS classNames that have now been removed from our stylesheet, your components might look off. In this case, you need to target the correct Bootstrap CSS classNames instead.

---

For Reviewers

Don't be scared of the big number of added code lines. This is mainly due to adding the vizro-bootstrap.min.css as a physical file into our repository, which you don't have to review. In the long term, this file might be hosted elsewhere, and then we need to link the URL to our external stylesheets (1 line).

Context
The vizro-bootstrap.min.css is the output of the following private repository: https://github.com/McK-Private/vizro-bootstrap. It's currently private, but we might also open-source it (not in any near PR). Currently, it's a WIP version where the CSS is created using SASS (for context: https://blog.hubspot.com/website/how-to-override-bootstrap-css#how-to-customize-bootstrap-sass). The vizro-bootstrap CSS file does not contain the correct design for all components. Instead, we will gradually extend it.

What does it mean for our future development?
1) Preferred choice of components: Always prefer the dbc component if the functionality is the same. In some cases, it makes sense to deviate from that choice, e.g., if the component is not available in dbc or functionality is significantly better in the other library. In this case, custom CSS needs to be added (short-term), but even better, a translation layer for CSS needs to be created to map bootstrap properties to CSS classNames of another component library.

2) Adding custom CSS: No custom CSS should be added anymore when adding new components. Everything should go via the bootstrap theme, so we have one single source of truth. In some cases, it might require custom CSS, but this needs to be decided on a case-by-case basis. The general guideline is that all CSS needs to be created via the Bootstrap theme.

@antonymilne - I think we have two options in terms of the current deployment

1. Put vizro-bootstrap.min.css inside the static folder of vizro-core and load the static file into the external stylesheets (as currently in this PR)
2. Put vizro-bootstrap.min.css outside of vizro-core, so it's not part of the package, e.g., inside a folder called dist. The advantage of this approach is that it doesn't increase the size of our package, and we can still reference the CSS file via a CDN link: https://medium.com/javarevisited/how-to-host-your-repository-js-css-on-open-source-cdn-jsdelivr-4de252d6fbad

I have a slight preference for 1) Now after reading through the arguments on why Dash decided to server their assets locally as a default: plotly/dash#469

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products, or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[antonymilne]

This is AMAZING work, thank you @huong-li-nguyen and @pruthvip15 also who I know has been very instrumental behind the scenes here 🚀 This is a big step forward I think and I know it's been a lot of work.

For now I'm happy to stick with option 1 like you have here where we just serve the stylesheet locally because that's easy and always works. Then we can figure out later how to handle CDN, serve_locally option, whether to provide a vizro.themes.stylesheet shortcut like bootstrap does, whether to try and put it in bootswatch/dbc, etc. etc.

I guess there might be a few follow on PRs like this while I'm on holiday - feel free to merge them all if they're just doing similar work like you're doing here, no need to wait for my review 🚀

[nadijagraca]

This looks really good. Awesome job! 🚀 🙌

[petar-qb]

Looks really good!! 🚀
I like the way it's ensured that vizro-bootstrap.min.css is loaded first to allow overwrites 😄.