From 0adc2b7014d9909869bc9888ac90a3ec142d9488 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Oct 2024 12:36:57 +0200 Subject: Replace Oddbird with native SASS color functions --- src/_functions.scss | 45 ++++++++++----------------------------------- 1 file changed, 10 insertions(+), 35 deletions(-) (limited to 'src/_functions.scss') diff --git a/src/_functions.scss b/src/_functions.scss index d615614..cbdb951 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -4,9 +4,6 @@ @use 'sass:list'; @use 'sass:meta'; -@use '@oddbird/blend'; -@use '@oddbird/blend/sass/convert' as blend-convert; - @use 'iro-sass/src/index' as iro; @use 'iro-sass/src/easing' as easing; @use 'functions/colors' as iro-colors; @@ -67,11 +64,12 @@ @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; } -@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { - $base-lch: iro-colors.parse-oklch($base-color); - $ref-lch: iro-colors.parse-oklch($reference-color); - $ref-l: list.nth($ref-lch, 1); - $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); +@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { + $base-lch: color.to-space($base-color, oklch); + $ref-lch: color.to-space($ref-color, oklch); + + $ref-l: color.channel($ref-lch, 'lightness'); + $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); $cmax: math.max(map.values($contrasts)...); $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); @@ -84,52 +82,29 @@ $palette: (); @each $key, $contrast in $contrasts { - //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); $y: iro-colors.apcaReverse($contrast, $ref-y); - $l: list.nth($base-lch, 1); + $l: color.channel($base-lch, 'lightness'); $c: 1; @if $y != false { - $y-lch: blend-convert.Lab_to_LCH( - iro-colors.lin_sRGB_to_Oklab( - blend-convert.lin_sRGB( - blend-convert.sassToRgb( - iro-colors.apca_Y_to_sRGB($y) - ) - ) - ) - ); - $l: list.nth($y-lch, 1); + $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); } @else { $y: $ref-y; } @if $chroma-range != 1 { - $c: if( - $ref-l > .5, - math.clamp(0, math.div($contrast, $cmax), 1), - -1 * math.clamp(-1, math.div($contrast, $cmax), 0) - ); + $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); $c: meta.call($chroma-easing, $c); $c: $chroma-range + (1 - $chroma-range) * $c; } - $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3)); - //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3); - //$color: blend-convert.rgbToSass( - // blend-convert.gam_sRGB( - // iro-colors.Oklab_to_lin_sRGB( - // blend-convert.LCH_to_Lab($color) - // ) - // ) - //); + $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); $contrast-black: iro-colors.apcaContrast($black-y, $y); $contrast-white: iro-colors.apcaContrast($white-y, $y); $palette: map.set($palette, $key, $color); $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); - //$palette: map.set($palette, #{$key}-text, blend.contrast($color)); } @return $palette; -- cgit v1.3.1