diff options
Diffstat (limited to 'src/functions/colors')
| -rw-r--r-- | src/functions/colors/_apca.scss | 52 | ||||
| -rw-r--r-- | src/functions/colors/_index.scss | 1 | ||||
| -rw-r--r-- | src/functions/colors/_oklch.scss | 88 |
3 files changed, 26 insertions, 115 deletions
diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss index d9236b2..c848db7 100644 --- a/src/functions/colors/_apca.scss +++ b/src/functions/colors/_apca.scss | |||
| @@ -9,34 +9,36 @@ | |||
| 9 | $SA98G: ( | 9 | $SA98G: ( |
| 10 | mainTRC: 2.4, | 10 | mainTRC: 2.4, |
| 11 | 11 | ||
| 12 | sRco: 0.2126729, | 12 | sRco: .2126729, |
| 13 | sGco: 0.7151522, | 13 | sGco: .7151522, |
| 14 | sBco: 0.0721750, | 14 | sBco: .072175, |
| 15 | 15 | ||
| 16 | normBG: 0.56, | 16 | normBG: .56, |
| 17 | normTXT: 0.57, | 17 | normTXT: .57, |
| 18 | revTXT: 0.62, | 18 | revTXT: .62, |
| 19 | revBG: 0.65, | 19 | revBG: .65, |
| 20 | 20 | ||
| 21 | blkThrs: 0.022, | 21 | blkThrs: .022, |
| 22 | blkClmp: 1.414, | 22 | blkClmp: 1.414, |
| 23 | scaleBoW: 1.14, | 23 | scaleBoW: 1.14, |
| 24 | scaleWoB: 1.14, | 24 | scaleWoB: 1.14, |
| 25 | loBoWoffset: 0.027, | 25 | loBoWoffset: .027, |
| 26 | loWoBoffset: 0.027, | 26 | loWoBoffset: .027, |
| 27 | deltaYmin: 0.0005, | 27 | deltaYmin: .0005, |
| 28 | loClip: 0.0001, | 28 | loClip: .0001, |
| 29 | 29 | ||
| 30 | mFactor: 1.94685544331710, | 30 | mFactor: 1.9468554433171, |
| 31 | mOffsetIn: 0.03873938165714010, | 31 | mOffsetIn: .0387393816571401, |
| 32 | mExpAdj: 0.2833433964208690, | 32 | mExpAdj: .283343396420869, |
| 33 | mOffsetOut: 0.3128657958707580, | 33 | mOffsetOut: .312865795870758, |
| 34 | ); | 34 | ); |
| 35 | 35 | ||
| 36 | @function apca_sRGB_to_Y($color) { | 36 | @function apca_sRGB_to_Y($color) { |
| 37 | @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + | 37 | $rgb: color.to-space($color, rgb); |
| 38 | map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + | 38 | |
| 39 | map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC)); | 39 | @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + |
| 40 | map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + | ||
| 41 | map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); | ||
| 40 | } | 42 | } |
| 41 | 43 | ||
| 42 | @function apca_Y_to_sRGB($y) { | 44 | @function apca_Y_to_sRGB($y) { |
| @@ -45,7 +47,7 @@ $SA98G: ( | |||
| 45 | } | 47 | } |
| 46 | 48 | ||
| 47 | @function apcaContrast($txtY, $bgY) { | 49 | @function apcaContrast($txtY, $bgY) { |
| 48 | $icp: 0.0 1.1; | 50 | $icp: 1.1; |
| 49 | 51 | ||
| 50 | @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { | 52 | @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { |
| 51 | @return 0; | 53 | @return 0; |
| @@ -78,7 +80,7 @@ $SA98G: ( | |||
| 78 | } | 80 | } |
| 79 | } | 81 | } |
| 80 | 82 | ||
| 81 | @return $outputContrast * 100.0; | 83 | @return $outputContrast * 100; |
| 82 | } | 84 | } |
| 83 | 85 | ||
| 84 | @function apcaReverse($contrast, $knownY, $knownType: 'bg') { | 86 | @function apcaReverse($contrast, $knownY, $knownType: 'bg') { |
| @@ -90,7 +92,7 @@ $SA98G: ( | |||
| 90 | $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); | 92 | $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); |
| 91 | $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); | 93 | $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); |
| 92 | 94 | ||
| 93 | $contrast: math.div($contrast * 0.01 + $offset, $scale); | 95 | $contrast: math.div($contrast * .01 + $offset, $scale); |
| 94 | 96 | ||
| 95 | @if $knownY <= map.get($SA98G, blkThrs) { | 97 | @if $knownY <= map.get($SA98G, blkThrs) { |
| 96 | $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); | 98 | $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); |
| @@ -115,10 +117,8 @@ $SA98G: ( | |||
| 115 | } | 117 | } |
| 116 | 118 | ||
| 117 | @if $unknownY <= map.get($SA98G, blkThrs) { | 119 | @if $unknownY <= map.get($SA98G, blkThrs) { |
| 118 | $unknownY: math.pow( | 120 | $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), |
| 119 | ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), | 121 | math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); |
| 120 | math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp)) | ||
| 121 | ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); | ||
| 122 | } | 122 | } |
| 123 | 123 | ||
| 124 | $unknownY: math.max(math.min($unknownY, 1), 0); | 124 | $unknownY: math.max(math.min($unknownY, 1), 0); |
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss index 26c3027..9dad0f9 100644 --- a/src/functions/colors/_index.scss +++ b/src/functions/colors/_index.scss | |||
| @@ -1,2 +1 @@ | |||
| 1 | @forward 'apca'; | @forward 'apca'; | |
| 2 | @forward 'oklch'; | ||
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss deleted file mode 100644 index e3df041..0000000 --- a/src/functions/colors/_oklch.scss +++ /dev/null | |||
| @@ -1,88 +0,0 @@ | |||
| 1 | /* stylelint-disable scss/dollar-variable-pattern */ | ||
| 2 | /* stylelint-disable scss/at-function-pattern */ | ||
| 3 | |||
| 4 | @use 'sass:list'; | ||
| 5 | @use 'sass:math'; | ||
| 6 | @use 'sass:meta'; | ||
| 7 | @use 'sass:string'; | ||
| 8 | @use '@oddbird/blend/sass/convert' as blend-convert; | ||
| 9 | @use '@oddbird/blend/sass/utils/pow'; | ||
| 10 | @use 'iro-sass/src/index' as iro; | ||
| 11 | |||
| 12 | @function lin_sRGB_to_Oklab($color) { | ||
| 13 | $r_: list.nth($color, 1); | ||
| 14 | $g_: list.nth($color, 2); | ||
| 15 | $b_: list.nth($color, 3); | ||
| 16 | |||
| 17 | $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); | ||
| 18 | $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); | ||
| 19 | $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); | ||
| 20 | |||
| 21 | @return ( | ||
| 22 | 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, | ||
| 23 | 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, | ||
| 24 | 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, | ||
| 25 | ); | ||
| 26 | } | ||
| 27 | |||
| 28 | @function Oklab_to_lin_sRGB($color) { | ||
| 29 | $l_: list.nth($color, 1); | ||
| 30 | $a_: list.nth($color, 2); | ||
| 31 | $b_: list.nth($color, 3); | ||
| 32 | |||
| 33 | $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_; | ||
| 34 | $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_; | ||
| 35 | $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_; | ||
| 36 | |||
| 37 | $l: $l * $l * $l; | ||
| 38 | $m: $m * $m * $m; | ||
| 39 | $s: $s * $s * $s; | ||
| 40 | |||
| 41 | @return ( | ||
| 42 | 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s, | ||
| 43 | -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s, | ||
| 44 | -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s, | ||
| 45 | ); | ||
| 46 | } | ||
| 47 | |||
| 48 | @function oklch($arg) { | ||
| 49 | $l: math.div(list.nth($arg, 1), 100%); | ||
| 50 | $c: list.nth($arg, 2); | ||
| 51 | $h: list.nth($arg, 3); | ||
| 52 | |||
| 53 | @return blend-convert.rgbToSass( | ||
| 54 | blend-convert.gam_sRGB( | ||
| 55 | Oklab_to_lin_sRGB( | ||
| 56 | blend-convert.LCH_to_Lab($l $c $h) | ||
| 57 | ) | ||
| 58 | ) | ||
| 59 | ); | ||
| 60 | } | ||
| 61 | |||
| 62 | @function parse-oklch($color) { | ||
| 63 | @if meta.type-of($color) == 'color' { | ||
| 64 | @return blend-convert.Lab_to_LCH( | ||
| 65 | lin_sRGB_to_Oklab( | ||
| 66 | blend-convert.lin_sRGB( | ||
| 67 | blend-convert.sassToRgb($color) | ||
| 68 | ) | ||
| 69 | ) | ||
| 70 | ); | ||
| 71 | } | ||
| 72 | |||
| 73 | @if meta.type-of($color) != 'string' { | ||
| 74 | @return null; | ||
| 75 | } | ||
| 76 | |||
| 77 | @if string.slice($color, 1, 6) == 'oklch(' { | ||
| 78 | $args: string.split(string.slice($color, 7, -2), ' '); | ||
| 79 | |||
| 80 | $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%); | ||
| 81 | $c: iro.fn-to-number(list.nth($args, 2)); | ||
| 82 | $h: iro.fn-to-number(list.nth($args, 3)); | ||
| 83 | |||
| 84 | @return $l $c $h; | ||
| 85 | } | ||
| 86 | |||
| 87 | @return null; | ||
| 88 | } | ||
