Improve Color Palettes by using color variables instead of SCSS compilation during runtime

[jamesros161]

Is your feature request related to a problem? Please describe.
The current method of generating the css for the color palettes requires SCSS compilation to be done every time the color palette is changed. This causes very slow publishing of customizer changes, as well as a very long delay when previewing color changes.

Describe the solution you'd like
By using css variable interpolation, the various color combinations created by the palette choices can be turned into css variables, and defined as inline css ( i.e. --color-1-bg-color-neutral: rgba(249, 91, 38,1) ). The custom-colors.css that would usually have to be compiled every time that the color-1 value is changed, would instead use the variable in a static CSS file. This would allow caching of that CSS file as well, since it won't ever have to change, except on theme updates ( i.e. .btn-color-1.button-primary, .palette-primary .btn-color-1.button-secondary, .btn-color-1-flat { background-color: var(--color-1); border-color: var(--color-1); color: var(--color-1-text-contrast); } ).