@evilcss/std/theme-light/color-bg.vars.css

Awesome CSS design system and UI widgets

.std-root, .std-define-color-bg {
    --std-light-color-bg-l: 100%; /* Can be used with clamp() to obtain the desired lightness. */
    --std-light-color-bg-ll: -1; /* Can be used with calc() to obtain the desired lightness. */

    --std-light-color-bg-l-base: 100%;
    --std-light-color-bg-l-factor: 2%;
    --std-light-color-bg-z-factor: 1%;

    --std-light-color-bg1-h: var(--std-light-color-bg-h, 0deg);
    --std-light-color-bg1-s: var(--std-light-color-bg-s, 0%);
    --std-light-color-bg1-l: calc(var(--std-light-color-bg-l-base) - var(--std-color-bg-z, 0) * var(--std-light-color-bg-z-factor));
    --std-light-color-bg1: hsl(var(--std-light-color-bg1-h) var(--std-light-color-bg1-s) var(--std-light-color-bg1-l) / var(--std-light-color-bg1-opacity, 1));

    --std-light-color-bg2-h: var(--std-light-color-bg-h, 0deg);
    --std-light-color-bg2-s: var(--std-light-color-bg-s, 0%);
    --std-light-color-bg2-l: calc(var(--std-light-color-bg1-l) - var(--std-light-color-bg-l-factor));
    --std-light-color-bg2: hsl(var(--std-light-color-bg2-h) var(--std-light-color-bg2-s) var(--std-light-color-bg2-l) / var(--std-light-color-bg2-opacity, 1));

    --std-light-color-bg3-h: var(--std-light-color-bg-h, 0deg);
    --std-light-color-bg3-s: var(--std-light-color-bg-s, 0%);
    --std-light-color-bg3-l: calc(var(--std-light-color-bg2-l) - var(--std-light-color-bg-l-factor));
    --std-light-color-bg3: hsl(var(--std-light-color-bg3-h) var(--std-light-color-bg3-s) var(--std-light-color-bg3-l) / var(--std-light-color-bg3-opacity, 1));

    --std-light-color-bg4-h: var(--std-light-color-bg-h, 0deg);
    --std-light-color-bg4-s: var(--std-light-color-bg-s, 0%);
    --std-light-color-bg4-l: calc(var(--std-light-color-bg3-l) - var(--std-light-color-bg-l-factor));
    --std-light-color-bg4: hsl(var(--std-light-color-bg4-h) var(--std-light-color-bg4-s) var(--std-light-color-bg4-l) / var(--std-light-color-bg4-opacity, 1));
}
.std-theme-light {
    --std-bg-l: var(--std-light-color-bg-l);
    --std-bg-ll: var(--std-light-color-bg-ll);

    --std-color-bg1-h: var(--std-light-color-bg1-h);
    --std-color-bg1-s: var(--std-light-color-bg1-s);
    --std-color-bg1-l: var(--std-light-color-bg1-l);
    --std-color-bg1: var(--std-light-color-bg1);

    --std-color-bg2-h: var(--std-light-color-bg2-h);
    --std-color-bg2-s: var(--std-light-color-bg2-s);
    --std-color-bg2-l: var(--std-light-color-bg2-l);
    --std-color-bg2: var(--std-light-color-bg2);

    --std-color-bg3-h: var(--std-light-color-bg3-h);
    --std-color-bg3-s: var(--std-light-color-bg3-s);
    --std-color-bg3-l: var(--std-light-color-bg3-l);
    --std-color-bg3: var(--std-light-color-bg3);

    --std-color-bg4-h: var(--std-light-color-bg4-h);
    --std-color-bg4-s: var(--std-light-color-bg4-s);
    --std-color-bg4-l: var(--std-light-color-bg4-l);
    --std-color-bg4: var(--std-light-color-bg4);
}