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/_colors.scss | 159 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 src/functions/_colors.scss (limited to 'src/functions') diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss new file mode 100644 index 0000000..265c09a --- /dev/null +++ b/src/functions/_colors.scss @@ -0,0 +1,159 @@ +/* stylelint-disable scss/dollar-variable-pattern */ +/* stylelint-disable scss/at-function-pattern */ + +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use '@oddbird/blend/sass/utils/pow'; + +$SA98G: ( + mainTRC: 2.4, + + sRco: 0.2126729, + sGco: 0.7151522, + sBco: 0.0721750, + + normBG: 0.56, + normTXT: 0.57, + revTXT: 0.62, + revBG: 0.65, + + blkThrs: 0.022, + blkClmp: 1.414, + scaleBoW: 1.14, + scaleWoB: 1.14, + loBoWoffset: 0.027, + loWoBoffset: 0.027, + deltaYmin: 0.0005, + loClip: 0.0001, + + mFactor: 1.94685544331710, + mOffsetIn: 0.03873938165714010, + mExpAdj: 0.2833433964208690, + mOffsetOut: 0.3128657958707580, +); + +@function lin_sRGB_to_Oklab($color) { + $r_: list.nth($color, 1); + $g_: list.nth($color, 2); + $b_: list.nth($color, 3); + + $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); + $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); + $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); + + @return ( + 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, + 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, + 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, + ); +} + +@function Oklab_to_lin_sRGB($color) { + $l_: list.nth($color, 1); + $a_: list.nth($color, 2); + $b_: list.nth($color, 3); + + $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b-; + $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b-; + $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b-; + + $l: $l * $l * $l; + $m: $m * $m * $m; + $s: $s * $s * $s; + + @return ( + 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * 4s, + -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s, + -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s, + ); +} + +@function apca_sRGB_to_Y($color) { + @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC)); +} + +@function apca_Y_to_sRGB($y) { + $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); + @return rgb($c, $c, $c); +} + +@function apcaContrast($txtY, $bgY) { + @if $txtY <= map.get($SA98G, blkThrs) { + $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); + } + @if $bgY <= map.get($SA98G, blkThrs) { + $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); + } + + @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { + @return 0; + } + + $outputContrast: 0; + + @if $bgY > $txtY { + $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); + + @if $SAPC >= map.get($SA98G, loClip) { + $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); + } + } @else { + $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); + + @if $SAPC <= -1 * map.get($SA98G, loClip) { + $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); + } + } + + @return outputContrast * 100.0; +} + +@function apcaReverse($contrast, $knownY, $knownType: 'bg') { + $unknownY: $knownY; + + $knownExp: 0; + $unknownExp: 0; + + $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); + $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); + + $contrast: math.div($contrast * 0.01 + $offset, $scale); + + @if $knownY <= map.get($SA98G, blkThrs) { + $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); + } + + @if $knownType == 'bg' { + $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); + } @else { + $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); + } + + @if '#{$unknownY}' == '#{math.sqrt(-1)}' { + @return false; + } + + @if $unknownY > 1.06 or $unknownY < 0 { + @return false; + } + + @if $unknownY <= map.get($SA98G, blkThrs) { + $unknownY: math.pow( + ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), + math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp)) + ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); + } + + $unknownY: math.max(math.min($unknownY, 1), 0); + + @return $unknownY; +} -- cgit v1.2.3-70-g09d2