@jaredpdesigns/pasta/src/colors.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer props {
        :root {
                color-scheme: light dark;
                /*   Color definitions */
                --color__set--base: hsl(218deg 24% 24%);
                --color__set--highlight: var(--color__define--basil);
                --color__set--contrast: white;
                --color__define--base: var(--color__set--base);
                --color__define--basil: hsl(158deg 32% 38%);
                --color__define--tomato: hsl(0deg 56% 56%);
                --color__define--eggplant: hsl(260deg 38% 60%);
                --color__define--cobalt: hsl(196deg 64% 50%);
                --color__define--saffron: hsl(48deg 90% 38%);
                --color__define--valencia: hsl(22deg 64% 50%);
                --color__define--rose: hsl(320deg 64% 50%);
                --color__define--contrast: var(--color__set--contrast);
                --color__define--contrast-mix: black 64%;
                --color__define--contrast--extra: color-mix(in oklab,
                                var(--color__define--base),
                                var(--color__define--contrast-mix));
                --color__define--highlight: var(--color__set--highlight);

                /*   Color builds */
                --color__base: var(--color__define--base);
                --color__base--ish: color-mix(in oklab,
                                var(--color__define--base) 75%,
                                var(--color__contrast));
                --color__base--mid: color-mix(in oklab,
                                var(--color__define--base) 62.5%,
                                var(--color__contrast));
                --color__base--semi: color-mix(in oklab,
                                var(--color__define--base) 25%,
                                var(--color__contrast));
                --color__base--light: color-mix(in oklab,
                                var(--color__define--base) 12.5%,
                                var(--color__contrast));
                --color__base--ghost: color-mix(in oklab,
                                var(--color__define--base) 4%,
                                var(--color__contrast));
                --color__contrast: var(--color__define--contrast);
                --color__contrast--adaptive: var(--color__define--contrast);
                --color__contrast--fixed: var(--color__set--contrast);
                --color__contrast--extra: var(--color__define--contrast--extra);

                @each $colorKey in (highlight, basil, tomato, eggplant, cobalt, saffron, valencia, rose) {
                        --color__$(colorKey): var(--color__define--$(
                                        colorKey)
                        );
                --color__$(colorKey)--ish: color-mix(in oklab,
                                var(--color__define--$(
                                        colorKey)) 75%,
                        var(--color__contrast)
                );
        --color__$(colorKey)--mid: color-mix(in oklab,
                        var(--color__define--$(
                                colorKey)) 62.5%,
                var(--color__contrast)
        );
--color__$(colorKey)--semi: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 25%,
        var(--color__contrast)
);
--color__$(colorKey)--light: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 12.5%,
        var(--color__contrast)
);
--color__$(colorKey)--ghost: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 4%,
        var(--color__contrast)
);
--color__$(colorKey)--contrast: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)),
        var(--color__define--contrast-mix)
);
}

&[data-theme="light"],
[data-theme="light"] {
        color-scheme: light;
        --color__define--base: var(--color__set--base);
        --color__define--contrast: white;
        --color__define--contrast-mix: black 64%;
        --color__define--contrast--extra: color-mix(in oklab,
                        var(--color__define--base),
                        var(--color__define--contrast-mix));
        --color__base: var(--color__define--base);
        --color__base--ish: color-mix(in oklab,
                        var(--color__define--base) 75%,
                        var(--color__contrast));
        --color__base--mid: color-mix(in oklab,
                        var(--color__define--base) 62.5%,
                        var(--color__contrast));
        --color__base--semi: color-mix(in oklab,
                        var(--color__define--base) 25%,
                        var(--color__contrast));
        --color__base--light: color-mix(in oklab,
                        var(--color__define--base) 12.5%,
                        var(--color__contrast));
        --color__base--ghost: color-mix(in oklab,
                        var(--color__define--base) 4%,
                        var(--color__contrast));
        --color__contrast: var(--color__define--contrast);
        --color__contrast--adaptive: var(--color__define--contrast);
        --color__contrast--extra: var(--color__define--contrast--extra);

        @each $colorKey in (highlight, basil, tomato, eggplant, cobalt, saffron, valencia, rose) {
                --color__$(colorKey): var(--color__define--$(
                                colorKey)
                );
        --color__$(colorKey)--ish: color-mix(in oklab,
                        var(--color__define--$(
                                colorKey)) 75%,
                var(--color__contrast)
        );
--color__$(colorKey)--mid: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 62.5%,
        var(--color__contrast)
);
--color__$(colorKey)--semi: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 25%,
        var(--color__contrast)
);
--color__$(colorKey)--light: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 12.5%,
        var(--color__contrast)
);
--color__$(colorKey)--ghost: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 4%,
        var(--color__contrast)
);
--color__$(colorKey)--contrast: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)),
        var(--color__define--contrast-mix)
);
}
}

@media screen and (prefers-color-scheme: dark) {
        --color__define--base: hsl(from var(--color__set--base) h s calc(l * 3.75));
        --color__define--contrast-mix: white 64%;
        --color__define--contrast: color-mix(in oklab,
                hsl(from var(--color__set--base) h calc(s * 0.64) l),
                black 42%);
        --color__define--contrast--extra: color-mix(in oklab,
                hsl(from var(--color__set--base) h calc(s * 0.64) l),
                black 56%);
        --color__contrast--adaptive: var(--color__define--contrast--extra);
}

&[data-theme="dark"],
[data-theme="dark"] {
        color-scheme: dark;
        --color__define--base: hsl(from var(--color__set--base) h s calc(l * 3.75));
        --color__define--contrast-mix: white 64%;
        --color__define--contrast: color-mix(in oklab,
                        hsl(from var(--color__set--base) h calc(s * 0.64) l),
                        black 42%);
        --color__define--contrast--extra: color-mix(in oklab,
                        hsl(from var(--color__set--base) h calc(s * 0.64) l),
                        black 56%);
        --color__base: var(--color__define--base);
        --color__base--ish: color-mix(in oklab,
                        var(--color__define--base) 75%,
                        var(--color__contrast));
        --color__base--mid: color-mix(in oklab,
                        var(--color__define--base) 62.5%,
                        var(--color__contrast));
        --color__base--semi: color-mix(in oklab,
                        var(--color__define--base) 25%,
                        var(--color__contrast));
        --color__base--light: color-mix(in oklab,
                        var(--color__define--base) 12.5%,
                        var(--color__contrast));
        --color__base--ghost: color-mix(in oklab,
                        var(--color__define--base) 4%,
                        var(--color__contrast));
        --color__contrast--adaptive: var(--color__define--contrast--extra);
        --color__contrast: var(--color__define--contrast);
        --color__contrast--extra: var(--color__define--contrast--extra);

        @each $colorKey in (highlight, basil, tomato, eggplant, cobalt, saffron, valencia, rose) {
                --color__$(colorKey): var(--color__define--$(
                                colorKey)
                );
        --color__$(colorKey)--ish: color-mix(in oklab,
                        var(--color__define--$(
                                colorKey)) 75%,
                var(--color__contrast)
        );
--color__$(colorKey)--mid: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 62.5%,
        var(--color__contrast)
);
--color__$(colorKey)--semi: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 25%,
        var(--color__contrast)
);
--color__$(colorKey)--light: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 12.5%,
        var(--color__contrast)
);
--color__$(colorKey)--ghost: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)) 4%,
        var(--color__contrast)
);
--color__$(colorKey)--contrast: color-mix(in oklab,
                var(--color__define--$(
                        colorKey)),
        var(--color__define--contrast-mix)
);
}
}
}
}

@layer helpers {

        @each $colorKey in (base,
                base--ish,
                base--mid,
                base--semi,
                base--light,
                base--ghost,
                highlight,
                highlight--ish,
                highlight--mid,
                highlight--semi,
                highlight--light,
                highlight--ghost,
                highlight--contrast,
                contrast,
                contrast--adaptive,
                contrast--extra,
                contrast--fixed,
                basil,
                basil--ish,
                basil--mid,
                basil--semi,
                basil--light,
                basil--ghost,
                basil--contrast,
                tomato,
                tomato--ish,
                tomato--mid,
                tomato--semi,
                tomato--light,
                tomato--ghost,
                tomato--contrast,
                eggplant,
                eggplant--ish,
                eggplant--mid,
                eggplant--semi,
                eggplant--light,
                eggplant--ghost,
                eggplant--contrast,
                cobalt,
                cobalt--ish,
                cobalt--mid,
                cobalt--semi,
                cobalt--light,
                cobalt--ghost,
                cobalt--contrast,
                saffron,
                saffron--ish,
                saffron--mid,
                saffron--semi,
                saffron--light,
                saffron--ghost,
                saffron--contrast,
                valencia,
                valencia--ish,
                valencia--mid,
                valencia--semi,
                valencia--light,
                valencia--ghost,
                valencia--contrast,
                rose,
                rose--ish,
                rose--mid,
                rose--semi,
                rose--light,
                rose--ghost,
                rose--contrast) {
                .color__bg--$(colorKey) {
                        background-color: var(--color__$(
                                        colorKey)
                        );
        }
}

@each $colorKey in (base,
        base--ish,
        base--mid,
        base--semi,
        base--light,
        base--ghost,
        highlight,
        highlight--ish,
        highlight--mid,
        highlight--semi,
        highlight--light,
        highlight--ghost,
        highlight--contrast,
        contrast,
        contrast--adaptive,
        contrast--extra,
        contrast--fixed,
        basil,
        basil--ish,
        basil--mid,
        basil--semi,
        basil--light,
        basil--ghost,
        basil--contrast,
        tomato,
        tomato--ish,
        tomato--mid,
        tomato--semi,
        tomato--light,
        tomato--ghost,
        tomato--contrast,
        eggplant,
        eggplant--ish,
        eggplant--mid,
        eggplant--semi,
        eggplant--light,
        eggplant--ghost,
        eggplant--contrast,
        cobalt,
        cobalt--ish,
        cobalt--mid,
        cobalt--semi,
        cobalt--light,
        cobalt--ghost,
        cobalt--contrast,
        saffron,
        saffron--ish,
        saffron--mid,
        saffron--semi,
        saffron--light,
        saffron--ghost,
        saffron--contrast,
        valencia,
        valencia--ish,
        valencia--mid,
        valencia--semi,
        valencia--light,
        valencia--ghost,
        valencia--contrast,
        rose,
        rose--ish,
        rose--mid,
        rose--semi,
        rose--light,
        rose--ghost,
        rose--contrast) {
        .color__border--$(colorKey) {
                border-color: var(--color__$(
                                colorKey)
                );
}
}

@each $colorKey in (base,
        base--ish,
        base--mid,
        base--semi,
        base--light,
        base--ghost,
        highlight,
        highlight--ish,
        highlight--mid,
        highlight--semi,
        highlight--light,
        highlight--ghost,
        highlight--contrast,
        contrast,
        contrast--adaptive,
        contrast--extra,
        contrast--fixed,
        basil,
        basil--ish,
        basil--mid,
        basil--semi,
        basil--light,
        basil--ghost,
        basil--contrast,
        tomato,
        tomato--ish,
        tomato--mid,
        tomato--semi,
        tomato--light,
        tomato--ghost,
        tomato--contrast,
        eggplant,
        eggplant--ish,
        eggplant--mid,
        eggplant--semi,
        eggplant--light,
        eggplant--ghost,
        eggplant--contrast,
        cobalt,
        cobalt--ish,
        cobalt--mid,
        cobalt--semi,
        cobalt--light,
        cobalt--ghost,
        cobalt--contrast,
        saffron,
        saffron--ish,
        saffron--mid,
        saffron--semi,
        saffron--light,
        saffron--ghost,
        saffron--contrast,
        valencia,
        valencia--ish,
        valencia--mid,
        valencia--semi,
        valencia--light,
        valencia--ghost,
        valencia--contrast,
        rose,
        rose--ish,
        rose--mid,
        rose--semi,
        rose--light,
        rose--ghost,
        rose--contrast) {
        .color__type--$(colorKey) {
                color: var(--color__$(
                                colorKey)
                );
}
}
}