Migrate entirely to CSS Variables

[zuramai]

Since Bootstrap 5.2, it already using CSS variables that are created from the SCSS variables. By using CSS variables, we can easily customize the theme on-the-fly without any further compilation.

What we need to do:

• Extract Mazer's SCSS variables to CSS variables
• Use the CSS variables instead of CSS variables (for colors, sizing, etc)

[github-actions]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

[vanshajkataria]

Hey,
I would like to contribute to this issue.
I would love to have a chat with you and start working on it.
Please assign the issue to me.

Thank You

[a6ar55]

working on it!

[Camus10]

something is weird for icon in input group (form-element-input-group.html)

<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #526e8a;
    text-align: center;
    white-space: nowrap;
    background-color: #e6eef5;
    border: 1px solid #dce7f1;
    border-radius: .25rem;
}

icon doesn't placed at the middle inside the box unless i remove "align-items: center;" at app.css, app-dark.css, and app-dark.rtl.css