summaryrefslogtreecommitdiffstats
path: root/src/functions/colors
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-24 17:07:19 +0200
committerVolpeon <git@volpeon.ink>2024-06-24 17:07:19 +0200
commitf1c517da618ba92e537e8e4856203fe988df8636 (patch)
treeafb774c56d7b6340c902dd02e886075bd5a749e3 /src/functions/colors
parentUpdate (diff)
downloadiro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.gz
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.bz2
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.zip
Update
Diffstat (limited to 'src/functions/colors')
-rw-r--r--src/functions/colors/_apca.scss127
-rw-r--r--src/functions/colors/_index.scss2
-rw-r--r--src/functions/colors/_oklch.scss88
3 files changed, 217 insertions, 0 deletions
diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss
new file mode 100644
index 0000000..d9236b2
--- /dev/null
+++ b/src/functions/colors/_apca.scss
@@ -0,0 +1,127 @@
1/* stylelint-disable scss/dollar-variable-pattern */
2/* stylelint-disable scss/at-function-pattern */
3
4@use 'sass:color';
5@use 'sass:list';
6@use 'sass:map';
7@use 'sass:math';
8
9$SA98G: (
10 mainTRC: 2.4,
11
12 sRco: 0.2126729,
13 sGco: 0.7151522,
14 sBco: 0.0721750,
15
16 normBG: 0.56,
17 normTXT: 0.57,
18 revTXT: 0.62,
19 revBG: 0.65,
20
21 blkThrs: 0.022,
22 blkClmp: 1.414,
23 scaleBoW: 1.14,
24 scaleWoB: 1.14,
25 loBoWoffset: 0.027,
26 loWoBoffset: 0.027,
27 deltaYmin: 0.0005,
28 loClip: 0.0001,
29
30 mFactor: 1.94685544331710,
31 mOffsetIn: 0.03873938165714010,
32 mExpAdj: 0.2833433964208690,
33 mOffsetOut: 0.3128657958707580,
34);
35
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)) +
38 map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) +
39 map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC));
40}
41
42@function apca_Y_to_sRGB($y) {
43 $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
44 @return rgb($c, $c, $c);
45}
46
47@function apcaContrast($txtY, $bgY) {
48 $icp: 0.0 1.1;
49
50 @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
51 @return 0;
52 }
53
54 @if $txtY <= map.get($SA98G, blkThrs) {
55 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
56 }
57 @if $bgY <= map.get($SA98G, blkThrs) {
58 $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
59 }
60
61 @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
62 @return 0;
63 }
64
65 $outputContrast: 0;
66
67 @if $bgY > $txtY {
68 $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
69
70 @if $SAPC >= map.get($SA98G, loClip) {
71 $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
72 }
73 } @else {
74 $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
75
76 @if $SAPC <= -1 * map.get($SA98G, loClip) {
77 $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
78 }
79 }
80
81 @return $outputContrast * 100.0;
82}
83
84@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
85 $unknownY: $knownY;
86
87 $knownExp: 0;
88 $unknownExp: 0;
89
90 $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
91 $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
92
93 $contrast: math.div($contrast * 0.01 + $offset, $scale);
94
95 @if $knownY <= map.get($SA98G, blkThrs) {
96 $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
97 }
98
99 @if $knownType == 'bg' {
100 $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
101 $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
102 $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
103 } @else {
104 $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
105 $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
106 $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
107 }
108
109 @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
110 @return false;
111 }
112
113 @if $unknownY > 1.06 or $unknownY < 0 {
114 @return false;
115 }
116
117 @if $unknownY <= map.get($SA98G, blkThrs) {
118 $unknownY: math.pow(
119 ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor),
120 math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))
121 ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
122 }
123
124 $unknownY: math.max(math.min($unknownY, 1), 0);
125
126 @return $unknownY;
127}
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss
new file mode 100644
index 0000000..26c3027
--- /dev/null
+++ b/src/functions/colors/_index.scss
@@ -0,0 +1,2 @@
1@forward 'apca';
2@forward 'oklch';
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss
new file mode 100644
index 0000000..e3df041
--- /dev/null
+++ b/src/functions/colors/_oklch.scss
@@ -0,0 +1,88 @@
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}