From 64a841c69ead262666dd0754218585d0f05cf735 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 23 Jun 2024 19:05:33 +0200 Subject: WIP: New color calculations --- src/_functions.scss | 82 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 74 insertions(+), 8 deletions(-) (limited to 'src/_functions.scss') diff --git a/src/_functions.scss b/src/_functions.scss index 8553833..2d4aeef 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -2,11 +2,15 @@ @use 'sass:math'; @use 'sass:map'; @use 'sass:list'; -@use 'iro-sass/src/index' as iro; -@use 'config'; +@use 'sass:meta'; + @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 'config'; + @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); } @@ -107,7 +111,9 @@ @return $result; } -@function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) { +@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { + $chroma-range: 1 - $chroma-range; + $palette: (); @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { @@ -115,12 +121,25 @@ } $reference-lightness: blend.lightness($reference-color); - $i: -100%; + $i: 0; + + @while $i <= 1 { + $l: $i * 200% - 100%; + $c: 0%; + + @if $chroma-range != 0 { + $c: $i * 2 - 1; + $c: if( + $reference-lightness >= 50%, + math.clamp(0, $c, 1), + math.clamp(0, -1 * $c, 1) + ); + $c: $chroma-range * $c * -100%; + } + + $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c)); - @while $i <= 100% { - $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%); - $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c)); - $i: $i + config.$palette-precision; + $i: $i + config.$palette-precision; } $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); @@ -132,6 +151,53 @@ @return $palette; } +@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { + $base-lch: blend-convert.Lab_to_LCH( + iro-colors.lin_sRGB_to_Oklab( + blend-convert.lin_sRGB( + blend-convert.sassToRgb($base-color) + ) + ) + ); + $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); + + $palette: (); + + @each $key, $contrast in $contrasts { + $y: iro-colors.apcaReverse($contrast, $ref-y); + $l: list.nth($base-lch, 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( + blend-convert.sassToRgb( + iro-colors.apca_Y_to_sRGB($y) + ) + ) + ) + ); + $l: list.nth($y-lch, 1); + } @else { + @debug $contrast, $ref-y, $y; + } + + $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(); + + $palette: map.set($palette, $key, $color); + $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff)); + } + + @debug '-------------------------------------------'; + + @return $palette; +} + @function px-to-em($size, $base: iro.$vars-root-size) { @return math.div($size, $base) * 1em; } -- cgit v1.2.3-54-g00ecf