[BUG] Can't recolor level bars

[EndBug]

Describe the bug

As of now, the --primary-color variable is transformed into rgb when creating the level bars for skills, languages, etc, so you can't edit their color in the custom CSS tab using --primary-color.

As a workaround, you can use a selector to match each color chip like this:

.mr-1.h-3.w-4.rounded.border-2 {
    border-color: var(--primary-color) !important;
}

The problem is that if you do the same with the background-color property then there will be no empty chips, since there's no way to distinguish full and empty chips.

Product Flavor

• [x] Managed (https://rxresu.me)
• [ ] Self Hosted

To Reproduce

1. Open a resume in the resume editor
2. Add a section with a level number (like a language)
3. Go to the Custom CSS Editor and try to change the color of the skill bar associated to that level number.

Expected behavior

I'd suggest assigning a class to full, half-full, and empty chips, plus using --primary-color without converting it to rgb.

Screenshots

Without any custom CSS:

Using the following custom CSS:

* {
    --primary-color: #2a5162
}

.mr-1.h-3.w-4.rounded.border-2 {
    border-color: var(--primary-color) !important;
}

Using the following custom CSS:

* {
    --primary-color: #2a5162
}

.mr-1.h-3.w-4.rounded.border-2 {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;;
}

Desktop (please complete the following information):

• OS: Windows 11
• Browser Brave
• Version: 1.46.144 Chromium: 108.0.5359.128 (Official Build) (64-bit)

[coolswood]

I think it's a good idea to add classes to each stylized element. This would allow users to style them themselves and would solve a lot of issues. What do you think? @AmruthPillai