style: make css variables unique

[IvanoAlvino]

Description

This PR aims at naming the css variables used in :root scope in a unique way, to avoid unforeseen interactions with other popular UI frameworks, such as angular material.

fixes #383

Additional context

I would ensure the colors are still applied correctly and that I did not miss any variable rename.

What is the purpose of this pull request?

• [ ] Bug fix
• [ ] New Feature
• [ ] Documentation update
• [X] Other

Before submitting the PR, please make sure you do the following:

• [X] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [X] Follow the Conventional Commits v1.0.0 standard for PR naming (e.g. feat(examples): add hello-world example).
• [X] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• [ ] Ideally, include relevant tests that fail without this PR but pass with it.