Avoid using generic css variable names that conflict with popular framework

[IvanoAlvino]

Describe the bug 📝

I can see that in this commit some css variables have been introduced.

The issue with the chosen name is that it conflicts with popular frameworks, like angular material: in fact when updating to openbim-components 1.5.0 we noticed changes in our colors, coming from the following definitions:

:root {
  --primary-color: #BCF124;
  --secondary-color: #6528D7;
  /* TODO: Probably this needs to be called background-color */
  --secondary-color-100: #000000bb;
  --secondary-color-120: #1a2128;
}

This definitions end up in the head section of the html page and as a result start affecting the entire page.

I would suggest to find more specific, unique names, especially when creating variables in such a broad scope as :root

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 66.70 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 124.0.6367.201
    Safari: 17.1

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• [X] Check that this is a concrete bug. For Q&A join our Community.
• [X] The provided reproduction is a minimal reproducible example of the bug.