Universal variable use

Current problem

Theming everything is almost impossible. A large amount of elements still have hardcoded colour values, and not variables. E.g.:

.MentionBadge\.module__badge___TUtkQm {
    background-color: var(--status-danger);
    text-align: center;
    color: #fff;
    pointer-events: none;
    border-radius: .375rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    display: flex;
    box-shadow: 0 .25rem .375rem -.0625rem rgba(0, 0, 0, .1), 0 .125rem .25rem -.125rem rgba(0, 0, 0, .1);
}

If I want to theme the text, I have to use a specific selector for that element, but the background is a variable?

Proposed change

Create new variables if necessary, but just replace all hardcoded colours with variables.

Current problem

Proposed change

Comments