Color as list

[lucasvallenet]

What

Replace $color-* vars with a palette list that is specific to the project. Keep the use of vars for colors that are not in the palette or for specifics (selection, socials, ...)

Definition: /styles/settings/_config.colors.scss

$colors: (
    primary:        #3297FD,
    lightest:       #FFFFFF,
    darkest:        #000000,
    // ...
);

Usage:

.c-box {
    color: color(primary);
}

Why

Throws custom error message if color is undefined : Unkown 'secondary' in $colors Ables us to loop through the colors to generate CSS vars if necessary (see /styles/settings/_config.variables.scss)

[lucasvallenet]

If approved, we may extend this usage to other vars ? Such as eases, breakpoints, ...

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	dca6c5d
Status:	⚡️  Build in progress...

View logs