New feature: allow using CSS variables for scale values

[jmjuanes]

Feature type

Other...

Is your feature request related to a problem?

No, this feature is needed for implementing color modes in siimple.

Describe the solution you'd like

Allow using CSS variables to store scale values defined in the configuration of siimple. We will use the :root selector to store the default scale values as a CSS variable:

:root {
    --siimple-color-primary: #1c76fd;
    --siimple-color-secondary: #3542d4;
    /* ... */
    --siimple-font-size-0: 0.875rem;
    --siimple-font-size-1: 16px;
    --siimple-font-size-2: 1.25rem;
    /* ... */
}

Then, in each style we will use the CSS variable instead of using the scale value directly:

.alert {
    color: var(--siimple-color-primary);
    /* ... */
}

This feature will be enabled by default in siimple 4.3.0, but it can be disabled by the user providing a falsy value to the useCssVariables flag in the configuration:

export default {
    useCssVariables: false,
    // ...other configuration
};

Describe alternatives you've considered

No response

Additional context

This issue is related to discussion #176.