[Managing CSS color variables] A method for writing, organizing and scaling CSS color variables #CSS

buttons.css

.button {
    --button-bg: var(--button-bg-base);
 
    background-color: var(--button-bg);
    color: var(--button-c-base);
    // other button default styling stuff...

    &:hover {
        --button-bg: var(--button-bg-base-hover);
    }
}

.button--secondary {
    --button-bg: var(--button-bg-secondary);

    &:hover {
        --button-bg: var(--button-bg-secondary-hover);
    }  
}

.button--tertiary {
    --button-bg: var(--button-bg-tertiary);

    &:hover {
        --button-bg: var(--button-bg-tertiary-hover);
    } 
}

.button--quaternary {
    --button-bg: var(--button-bg-quaternary);

    &:hover {
        --button-bg: var(--button-bg-quaternary-hover);
    } 
}

variables.css

:root {
    /* Set initial saturation and lightness values */
    --sat: 50%;
    --light: 50%;

    /* Set amount of light & saturation to change for darker & lighter color variants */
    --shader: 15%;

    /* Calculate saturation values for lighter & darker color variations */
    --satDarker: calc(var(--sat) + var(--shader));
    --satLighter: calc(var(--sat) - var(--shader));

    /* Calculate light values for lighter & darker color variations */
    --lightDarker: calc(var(--light) - var(--shader));
    --lightLighter: calc(var(--light) + var(--shader));

    /* Grayscale */ 
    --c-white: #FFF;
    --c-black: #000;
    --c-mineshaft: #333;
    --c-dove-gray: #666;
    --c-dusty-gray: #999;

    /* Primary branding palette (unique) */
    /* Name that color: http://chir.ag/projects/name-that-color/ */
    --c-punch: #DB4726;
    --c-breaker-bay: #5B9B98;
    --c-cornflower-blue: #727FE7;
    --c-sandy-brown: #F1A84A;

    /* Primary branding palette (semantic value) */
    --c-primary-hex: var(--c-punch);
    --c-primary-hsl: 11;
    --c-secondary-hex: var(--c-breaker-bay);
    --c-secondary-hsl: 177;
    --c-tertiary-hex: var(--c-cornflower-blue);
    --c-tertiary-hsl: 114;
    --c-quaternary-hex: var(--c-sandy-brown);
    --c-quaternary-hsl: 34;

    /* Primary branding palette - Darken shades */
    --c-primary-darker: hsl(var(--c-primary-hue), var(--satDarker), var(--lightDarker));
    --c-secondary-darker: hsl(var(--c-secondary-hue), var(--satDarker), var(--lightDarker));
    --c-tertiary-darker: hsl(var(--c-tertiary-hue), var(--satDarker), var(--lightDarker));
    --c-quaternary-darker: hsl(var(--c-quaternary-hue), var(--satDarker), var(--lightDarker));

    /* Primary branding palette - Lighten shades */
    --c-primary-lighter: hsl(var(--c-primary-hue), var(--satLighter), var(--lightLighter));
    --c-secondary-lighter: hsl(var(--c-secondary-hue), var(--satLighter), var(--lightLighter));
    --c-tertiary-lighter: hsl(var(--c-tertiary-hue), var(--satLighter), var(--lightLighter));
    --c-quaternary-lighter: hsl(var(--c-quaternary-hue), var(--satLighter), var(--lightLighter));

    /* Other supporting colors */
    --c-seance: #8A1FA1;

    /* Element colors */
    --h1-c: var(--c-primary-hsl);
    --h2-c: var(--c-secondary-hsl);
    // etc.

    /* Forms, inputs, etc. */
    --button-bg-base: var(--c-primary-hsl);
    --button-bg-secondary: var(--c-secondary-hsl);
    --button-bg-tertiary: var(--c-tertiary-hsl);

    --button-c-base: var(--c-white);

    /* Interactive states... */
    --button-bg-base-hover: var(--c-primary-darker);
    --button-bg-secondary-hover: var(--c-secondary-darker);

    /* etc. */
}