[Tidy] Remove all CSS variables and tokens

[huong-li-nguyen]

Description

• Deletes variables.css and tokens.css from the static CSS directory.
• Replaces the removed variables and tokens with their Bootstrap counterparts.

For Developers:

For any upcoming CSS modifications, please use the CSS variables from vizro-bootstrap.min.css. Your code editor should offer autocompletion so you can see the available options. Avoid using any outdated variables/tokens.

Impact on Demos:

Be aware that all demos using custom CSS and previously relying on our static folder's CSS variables/tokens will be affected. This primarily impacts our internal demos, though there is a slight possibility it could affect a user demo (e.g. if we provided them with custom CSS snippets that used our variables/tokens).

To update our demos, we need to merge this PR first and then release vizro. Following this, we can merge this upcoming PR and update the vizro version accordingly.

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 / or (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.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2024-11-26 12:38:28 UTC
Commit: 2786afe

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[antonymilne]

Love love love this 😀 I know it's been an epic task, thank you seeing it through!

I didn't actually try anything out but I trust our screenshot tests to catch if anything is wrong.

[huong-li-nguyen]

I didn't actually try anything out but I trust our screenshot tests to catch if anything is wrong.

I had to update some of them as well 😄 But don't worry, I went through min. 10-15 rounds of screenshot comparisons to check where the difference lies. Some of our token values have changed in the QB design library, but that change didn't go through to Vizro because our tokens don't automatically update 👍

[stichbury]

LGTM from a docs perspective

[maxschulz-COL]

Well done! Looks very sensible and useful. Not being a CSS expert I feel like after re-reading the docs I know what to do. I understood:

1. Start with playing with properties, changing them in the elements panel etc
2. Move to bootstrap variables, or define your own variables for a more comprehensive, stable solution where you have things react to theme switches

If that understanding is correct, then I think we are good!

[stichbury]

LGTM 🏆 ⭐ 🏅