diff options
author | Volpeon <git@volpeon.ink> | 2024-06-24 17:07:19 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-24 17:07:19 +0200 |
commit | f1c517da618ba92e537e8e4856203fe988df8636 (patch) | |
tree | afb774c56d7b6340c902dd02e886075bd5a749e3 /src/functions | |
parent | Update (diff) | |
download | iro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.gz iro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.bz2 iro-design-f1c517da618ba92e537e8e4856203fe988df8636.zip |
Update
Diffstat (limited to 'src/functions')
-rw-r--r-- | src/functions/colors/_apca.scss (renamed from src/functions/_colors.scss) | 53 | ||||
-rw-r--r-- | src/functions/colors/_index.scss | 2 | ||||
-rw-r--r-- | src/functions/colors/_oklch.scss | 88 |
3 files changed, 90 insertions, 53 deletions
diff --git a/src/functions/_colors.scss b/src/functions/colors/_apca.scss index d3c0035..d9236b2 100644 --- a/src/functions/_colors.scss +++ b/src/functions/colors/_apca.scss | |||
@@ -5,9 +5,6 @@ | |||
5 | @use 'sass:list'; | 5 | @use 'sass:list'; |
6 | @use 'sass:map'; | 6 | @use 'sass:map'; |
7 | @use 'sass:math'; | 7 | @use 'sass:math'; |
8 | @use 'sass:meta'; | ||
9 | @use '@oddbird/blend/sass/convert' as blend-convert; | ||
10 | @use '@oddbird/blend/sass/utils/pow'; | ||
11 | 8 | ||
12 | $SA98G: ( | 9 | $SA98G: ( |
13 | mainTRC: 2.4, | 10 | mainTRC: 2.4, |
@@ -36,56 +33,6 @@ $SA98G: ( | |||
36 | mOffsetOut: 0.3128657958707580, | 33 | mOffsetOut: 0.3128657958707580, |
37 | ); | 34 | ); |
38 | 35 | ||
39 | @function lin_sRGB_to_Oklab($color) { | ||
40 | $r_: list.nth($color, 1); | ||
41 | $g_: list.nth($color, 2); | ||
42 | $b_: list.nth($color, 3); | ||
43 | |||
44 | $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); | ||
45 | $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); | ||
46 | $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); | ||
47 | |||
48 | @return ( | ||
49 | 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, | ||
50 | 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, | ||
51 | 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, | ||
52 | ); | ||
53 | } | ||
54 | |||
55 | @function Oklab_to_lin_sRGB($color) { | ||
56 | $l_: list.nth($color, 1); | ||
57 | $a_: list.nth($color, 2); | ||
58 | $b_: list.nth($color, 3); | ||
59 | |||
60 | $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_; | ||
61 | $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_; | ||
62 | $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_; | ||
63 | |||
64 | $l: $l * $l * $l; | ||
65 | $m: $m * $m * $m; | ||
66 | $s: $s * $s * $s; | ||
67 | |||
68 | @return ( | ||
69 | 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s, | ||
70 | -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s, | ||
71 | -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s, | ||
72 | ); | ||
73 | } | ||
74 | |||
75 | @function oklch($arg) { | ||
76 | $l: math.div(list.nth($arg, 1), 100%); | ||
77 | $c: list.nth($arg, 2); | ||
78 | $h: list.nth($arg, 3); | ||
79 | |||
80 | @return blend-convert.rgbToSass( | ||
81 | blend-convert.gam_sRGB( | ||
82 | Oklab_to_lin_sRGB( | ||
83 | blend-convert.LCH_to_Lab($l $c $h) | ||
84 | ) | ||
85 | ) | ||
86 | ); | ||
87 | } | ||
88 | |||
89 | @function apca_sRGB_to_Y($color) { | 36 | @function apca_sRGB_to_Y($color) { |
90 | @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + | 37 | @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + |
91 | map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + | 38 | map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + |
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 | } | ||