[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

• [x] 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[bot]]

View the example dashboards of the current commit live on PyCafe :coffee: :rocket:

Updated on: 2024-11-25 17:16:23 UTC Commit: 7b3e2e352c849cb1adb6be01c94ddb7bda6585a0

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

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

Link: vizro-ai/examples/dashboard_ui/

[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 👍