color-library.scss

:root {
    //Current Theme Values
    --color-theme: hsl(105, 16%, 58%);
    --color-dark: hsl(from var(--color-theme) h s calc(l - 40));
    --color-light: hsl(from var(--color-theme) h s calc(l + 40));
    --color-site-background: hsl(from var(--color-theme) h calc(s - 10) calc(l + 50));
    --desaturated-hue: 50;
    --desaturated-sat: 7%;
    --color-lightness-shift-basis: 1;
    //Derivative values

    --color-fill-inverse: var(--color-light);
    --color-fill-neutral: var(--color-dark);
    --color-fill-theme: var(--color-theme);
    --color-fill-theme-highlight: hsl(from var(--color-fill-theme) h s calc(l + 15));

    --color-fill-positive: hsl(130, 69%, 45%);
    --color-fill-negative: hsl(2, 100%, 50%);
    --color-fill-alert: hsl(25, 100%, 50%);

    --color-text-inverse: var(--color-fill-neutral);

    --color-text-neutral: var(--color-fill-inverse);

    --color-text-theme: hsl(from var(--color-fill-theme) h s calc(l - 30));

    --color-text-negative: hsl(from var(--color-fill-negative) h s calc(l - 30));

    // Mana Colors
    --color-white-mana: hsl(56, 69%, 91%);
    --color-blue-mana: hsl(215, 49%, 68%);
    --color-black-mana: hsl(275, 21%, 63%);
    --color-red-mana: hsl(19, 66%, 68%);
    --color-green-mana: hsl(100, 55%, 43%);
    --color-colorless-mana: hsl(30, 8%, 77%);
    //Safari Specific Values
    @supports (font: -apple-system-body) and (-webkit-appearance: none) {
        --color-dark: hsl(from var(--color-theme) h s calc(l - 40%));
        --color-light: hsl(from var(--color-theme) h s calc(l + 40%));
        --color-site-background: hsl(from var(--color-theme) h calc(s - 10%) calc(l + 50%));
        --color-lightness-shift-basis: 1%;
        --color-text-theme: hsl(from var(--color-fill-theme) h s calc(l - 30%));
        --color-text-negative: hsl(from var(--color-fill-negative) h s calc(l - 30%));
        --color-fill-theme-highlight: hsl(from var(--color-fill-theme) h s calc(l + 15%));
    }
}