wagtail/client/scss/tools/_various.colors.scss

// $color is either a color or an hsl tuple
@mixin define-color($name, $color) {
    $h: null;
    $s: null;
    $l: null;

    @if type-of($color) == color {
        $h: hue($color) / 1deg; // Cast to unitless
        $s: saturation($color);
        $l: lightness($color);
    } @else {
        $h: nth($color, 1);
        $s: nth($color, 2);
        $l: nth($color, 3);
    }

    --#{$name}-hue: #{$h};
    --#{$name}-saturation: #{$s};
    --#{$name}-lightness: #{$l};
    --#{$name}: hsl(#{ var(--#{$name}-hue), var(--#{$name}-saturation), var(--#{$name}-lightness) });
}

@function get-color($name) {
    @return (var(--#{$name}-hue), var(--#{$name}-saturation), var(--#{$name}-lightness));
}

@function css-darken($hsl-tuple, $darken-by) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return ($h, $s, calc(#{$l} - #{$darken-by + 0%}));
}
@function css-lighten($hsl-tuple, $lighten-by) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return ($h, $s, calc(#{$l} + #{$lighten-by + 0%}));
}
@function css-saturate($hsl-tuple, $saturate-by) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return ($h, calc(#{$s} + #{$saturate-by + 0%}), $l);
}
@function css-desaturate($hsl-tuple, $desaturate-by) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return ($h, calc(#{$s} - #{$desaturate-by + 0%}), $l);
}
@function css-adjust-hue($hsl-tuple, $adjust-by) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return (calc(#{$h} + #{$adjust-by}), $s, $l);
}
@function css-transparentize($hsl-tuple, $alpha) {
    $h: nth($hsl-tuple, 1);
    $s: nth($hsl-tuple, 2);
    $l: nth($hsl-tuple, 3);
    @return ($h, $s, $l, $alpha);
}