From 029fb64837173b70b31ac579cb005c2995806c49 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 24 Jun 2024 09:14:43 +0200 Subject: Update --- src/_functions.scss | 101 +++++++++++++++++++++++----------------------------- 1 file changed, 45 insertions(+), 56 deletions(-) (limited to 'src/_functions.scss') diff --git a/src/_functions.scss b/src/_functions.scss index 2d4aeef..9c29285 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -7,8 +7,9 @@ @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; -@use 'functions/colors' as iro-colors; @use 'iro-sass/src/index' as iro; +@use 'iro-sass/src/easing' as easing; +@use 'functions/colors' as iro-colors; @use 'config'; @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { @@ -66,51 +67,6 @@ @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; } -@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) { - $ref-lum: lum($reference-color); - - $result: (); - $colors-len: list.length($colors); - $colors-idx: 1; - $wanted-len: list.length($wanted-contrasts); - $wanted-idx: 1; - - @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len { - $color: list.nth($colors, $colors-idx); - $lum: lum($color); - $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum)); - - @if $contrast != 1 { - @if $lum <= $ref-lum { - $contrast: -1 * $contrast; - } - } - - $wanted: list.nth($wanted-contrasts, $wanted-idx); - $wanted-key: list.nth($wanted, 1); - $wanted-contrast: list.nth($wanted, 2); - - @if $contrast >= $wanted-contrast { - $result: map.set($result, $wanted-key, $color); - $wanted-idx: $wanted-idx + 1; - } @else { - $colors-idx: $colors-idx + 1; - } - } - - $last-color: list.nth($colors, $colors-len); - - @if $wanted-idx <= $wanted-len { - @for $i from $wanted-idx through $wanted-len { - $wanted: list.nth($wanted-contrasts, $i); - $wanted-key: list.nth($wanted, 1); - $result: map.set($result, $wanted-key, $last-color); - } - } - - @return $result; -} - @function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { $chroma-range: 1 - $chroma-range; @@ -159,17 +115,33 @@ ) ) ); + $ref-lch: blend-convert.Lab_to_LCH( + iro-colors.lin_sRGB_to_Oklab( + blend-convert.lin_sRGB( + blend-convert.sassToRgb($reference-color) + ) + ) + ); + $ref-l: list.nth($ref-lch, 1); $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); + $cmax: math.max(map.values($contrasts)...); + $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); + + $black-y: iro-colors.apca_sRGB_to_Y(#000); + $white-y: iro-colors.apca_sRGB_to_Y(#fff); + $palette: (); + $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); + @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); + $c: 1; @if $y != false { - @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y); - $y-lch: blend-convert.Lab_to_LCH( iro-colors.lin_sRGB_to_Oklab( blend-convert.lin_sRGB( @@ -181,20 +153,37 @@ ); $l: list.nth($y-lch, 1); } @else { - @debug $contrast, $ref-y, $y; + $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: meta.call($chroma-easing, $c); + $c: $chroma-range + (1 - $chroma-range) * $c; } - $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); - //$color: blend-convert.LCH_to_Lab($color); - //$color: iro-colors.Oklab_to_lin_sRGB($color); - //$color: blend-convert(); + $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) + // ) + // ) + //); + + $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($l > 50%, #000, #fff)); + $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)); } - @debug '-------------------------------------------'; - @return $palette; } -- cgit v1.2.3-70-g09d2