summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--.stylelintrc.json3
-rw-r--r--package.json1
-rw-r--r--src/_config.scss97
-rw-r--r--src/_declare-vars.scss1
-rw-r--r--src/_functions.scss45
-rw-r--r--src/functions/colors/_apca.scss54
-rw-r--r--src/functions/colors/_index.scss1
-rw-r--r--src/functions/colors/_oklch.scss88
8 files changed, 88 insertions, 202 deletions
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 622a3c3..09d474e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,6 +4,9 @@
4 "stylelint-order" 4 "stylelint-order"
5 ], 5 ],
6 "rules": { 6 "rules": {
7 "@stylistic/indentation": 4,
8 "@stylistic/number-leading-zero": "never",
9 "@stylistic/declaration-colon-space-after": null,
7 "max-nesting-depth": 7, 10 "max-nesting-depth": 7,
8 "selector-class-pattern": [ 11 "selector-class-pattern": [
9 "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", 12 "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
diff --git a/package.json b/package.json
index 38acdf7..7462243 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
18 "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" 18 "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001"
19 }, 19 },
20 "dependencies": { 20 "dependencies": {
21 "@oddbird/blend": "^0.2.4",
22 "include-media": "^2.0.0", 21 "include-media": "^2.0.0",
23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#c82ae7f3c766ff9d36c82183abf0f734e72a00a8" 22 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#c82ae7f3c766ff9d36c82183abf0f734e72a00a8"
24 }, 23 },
diff --git a/src/_config.scss b/src/_config.scss
index 5449a04..3ec6607 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -5,7 +5,6 @@
5@use 'iro-sass/src/responsive' as res; 5@use 'iro-sass/src/responsive' as res;
6@use 'iro-sass/src/easing' as easing; 6@use 'iro-sass/src/easing' as easing;
7@use 'include-media/dist/include-media' as media; 7@use 'include-media/dist/include-media' as media;
8@use '@oddbird/blend';
9 8
10iro.$vars-root-size: 16px; 9iro.$vars-root-size: 16px;
11 10
@@ -25,7 +24,7 @@ media.$unit-intervals: (
25 24
26res.$named-viewports: media.$breakpoints; 25res.$named-viewports: media.$breakpoints;
27 26
28$palette-precision: 0.01 !default; 27$palette-precision: .01 !default;
29 28
30$palette-chroma-easing: 'ease' !default; 29$palette-chroma-easing: 'ease' !default;
31 30
@@ -33,27 +32,27 @@ $static-colors: (
33 --base: hsl(0, 0%, 98%), 32 --base: hsl(0, 0%, 98%),
34 33
35 --contrasts: ( 34 --contrasts: (
36 --100: math.div( 0, 12) * 110 - 10, 35 --100: math.div(0, 12) * 110 - 10,
37 --200: math.div( 1, 12) * 110 - 10, 36 --200: math.div(1, 12) * 110 - 10,
38 --300: math.div( 2, 12) * 110 - 10, 37 --300: math.div(2, 12) * 110 - 10,
39 --400: math.div( 3, 12) * 110 - 10, 38 --400: math.div(3, 12) * 110 - 10,
40 --500: math.div( 4, 12) * 110 - 10, 39 --500: math.div(4, 12) * 110 - 10,
41 --600: math.div( 5, 12) * 110 - 10, 40 --600: math.div(5, 12) * 110 - 10,
42 --700: math.div( 6, 12) * 110 - 10, 41 --700: math.div(6, 12) * 110 - 10,
43 --800: math.div( 7, 12) * 110 - 10, 42 --800: math.div(7, 12) * 110 - 10,
44 --900: math.div( 8, 12) * 110 - 10, 43 --900: math.div(8, 12) * 110 - 10,
45 --1000: math.div( 9, 12) * 110 - 10, 44 --1000: math.div(9, 12) * 110 - 10,
46 --1100: math.div(10, 12) * 110 - 10, 45 --1100: math.div(10, 12) * 110 - 10,
47 --1200: math.div(11, 12) * 110 - 10, 46 --1200: math.div(11, 12) * 110 - 10,
48 --1300: math.div(12, 12) * 110 - 10, 47 --1300: math.div(12, 12) * 110 - 10,
49 ), 48 ),
50 49
51 --palettes: ( 50 --palettes: (
52 --blue: oklch(56% 0.14 265.25), 51 --blue: oklch(56% .14 265.25),
53 --purple: oklch(56% 0.14 305.58), 52 --purple: oklch(56% .14 305.58),
54 --red: oklch(56% 0.14 18.69), 53 --red: oklch(56% .14 18.69),
55 --green: oklch(56% 0.14 150.48), 54 --green: oklch(56% .14 150.48),
56 --yellow: oklch(56% 0.14 84.08), 55 --yellow: oklch(56% .14 84.08),
57 ), 56 ),
58 57
59 --transparents: ( 58 --transparents: (
@@ -121,16 +120,16 @@ $theme-light: (
121 ), 120 ),
122 121
123 --colors: ( 122 --colors: (
124 --100: math.div( 0, 12) * 96 + 5, 123 --100: math.div(0, 12) * 96 + 5,
125 --200: math.div( 1, 12) * 96 + 5, 124 --200: math.div(1, 12) * 96 + 5,
126 --300: math.div( 2, 12) * 96 + 5, 125 --300: math.div(2, 12) * 96 + 5,
127 --400: math.div( 3, 12) * 96 + 5, 126 --400: math.div(3, 12) * 96 + 5,
128 --500: math.div( 4, 12) * 96 + 5, 127 --500: math.div(4, 12) * 96 + 5,
129 --600: math.div( 5, 12) * 96 + 5, 128 --600: math.div(5, 12) * 96 + 5,
130 --700: math.div( 6, 12) * 96 + 5, 129 --700: math.div(6, 12) * 96 + 5,
131 --800: math.div( 7, 12) * 96 + 5, 130 --800: math.div(7, 12) * 96 + 5,
132 --900: math.div( 8, 12) * 96 + 5, 131 --900: math.div(8, 12) * 96 + 5,
133 --1000: math.div( 9, 12) * 96 + 5, 132 --1000: math.div(9, 12) * 96 + 5,
134 --1100: math.div(10, 12) * 96 + 5, 133 --1100: math.div(10, 12) * 96 + 5,
135 --1200: math.div(11, 12) * 96 + 5, 134 --1200: math.div(11, 12) * 96 + 5,
136 --1300: math.div(12, 12) * 96 + 5, 135 --1300: math.div(12, 12) * 96 + 5,
@@ -144,11 +143,11 @@ $theme-light: (
144 143
145 --palettes: ( 144 --palettes: (
146 --base: hsl(0, 0%, 98%) --grays --full, 145 --base: hsl(0, 0%, 98%) --grays --full,
147 --blue: oklch(56% 0.16 265.25) --colors --muted, 146 --blue: oklch(56% .16 265.25) --colors --muted,
148 --purple: oklch(56% 0.16 305.58) --colors --muted, 147 --purple: oklch(56% .16 305.58) --colors --muted,
149 --red: oklch(56% 0.16 18.69) --colors --muted, 148 --red: oklch(56% .16 18.69) --colors --muted,
150 --green: oklch(56% 0.16 150.48) --colors --muted, 149 --green: oklch(56% .16 150.48) --colors --muted,
151 --yellow: oklch(56% 0.16 84.08) --colors --muted, 150 --yellow: oklch(56% .16 84.08) --colors --muted,
152 ), 151 ),
153 152
154 --semantic: map.merge($semantic-colors-common, ( 153 --semantic: map.merge($semantic-colors-common, (
@@ -158,7 +157,7 @@ $theme-light: (
158 )), 157 )),
159 158
160 --constants: ( 159 --constants: (
161 --shadow: rgba(#000, 0.15), 160 --shadow: rgba(#000, .15),
162 ), 161 ),
163) !default; 162) !default;
164 163
@@ -181,16 +180,16 @@ $theme-dark: (
181 ), 180 ),
182 181
183 --colors: ( 182 --colors: (
184 --100: math.div( 0, 12) * -100 - 5, 183 --100: math.div(0, 12) * -100 - 5,
185 --200: math.div( 1, 12) * -100 - 5, 184 --200: math.div(1, 12) * -100 - 5,
186 --300: math.div( 2, 12) * -100 - 5, 185 --300: math.div(2, 12) * -100 - 5,
187 --400: math.div( 3, 12) * -100 - 5, 186 --400: math.div(3, 12) * -100 - 5,
188 --500: math.div( 4, 12) * -100 - 5, 187 --500: math.div(4, 12) * -100 - 5,
189 --600: math.div( 5, 12) * -100 - 5, 188 --600: math.div(5, 12) * -100 - 5,
190 --700: math.div( 6, 12) * -100 - 5, 189 --700: math.div(6, 12) * -100 - 5,
191 --800: math.div( 7, 12) * -100 - 5, 190 --800: math.div(7, 12) * -100 - 5,
192 --900: math.div( 8, 12) * -100 - 5, 191 --900: math.div(8, 12) * -100 - 5,
193 --1000: math.div( 9, 12) * -100 - 5, 192 --1000: math.div(9, 12) * -100 - 5,
194 --1100: math.div(10, 12) * -100 - 5, 193 --1100: math.div(10, 12) * -100 - 5,
195 --1200: math.div(11, 12) * -100 - 5, 194 --1200: math.div(11, 12) * -100 - 5,
196 --1300: math.div(12, 12) * -100 - 5, 195 --1300: math.div(12, 12) * -100 - 5,
@@ -204,11 +203,11 @@ $theme-dark: (
204 203
205 --palettes: ( 204 --palettes: (
206 --base: hsl(0, 0%, 20%) --grays --full, 205 --base: hsl(0, 0%, 20%) --grays --full,
207 --blue: oklch(56% 0.16 265.25) --colors --muted, 206 --blue: oklch(56% .16 265.25) --colors --muted,
208 --purple: oklch(56% 0.16 305.58) --colors --muted, 207 --purple: oklch(56% .16 305.58) --colors --muted,
209 --red: oklch(56% 0.16 18.69) --colors --muted, 208 --red: oklch(56% .16 18.69) --colors --muted,
210 --green: oklch(56% 0.16 150.48) --colors --muted, 209 --green: oklch(56% .16 150.48) --colors --muted,
211 --yellow: oklch(56% 0.16 84.08) --colors --muted, 210 --yellow: oklch(56% .16 84.08) --colors --muted,
212 ), 211 ),
213 212
214 --semantic: map.merge($semantic-colors-common, ( 213 --semantic: map.merge($semantic-colors-common, (
@@ -218,7 +217,7 @@ $theme-dark: (
218 )), 217 )),
219 218
220 --constants: ( 219 --constants: (
221 --shadow: rgba(#000, 0.5), 220 --shadow: rgba(#000, .5),
222 ), 221 ),
223) !default; 222) !default;
224 223
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index e205354..0aa1cca 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -3,7 +3,6 @@
3@use 'sass:list'; 3@use 'sass:list';
4@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
5@use 'include-media/dist/include-media' as media; 5@use 'include-media/dist/include-media' as media;
6@use '@oddbird/blend';
7@use 'functions' as fn; 6@use 'functions' as fn;
8@use 'config'; 7@use 'config';
9 8
diff --git a/src/_functions.scss b/src/_functions.scss
index d615614..cbdb951 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,9 +4,6 @@
4@use 'sass:list'; 4@use 'sass:list';
5@use 'sass:meta'; 5@use 'sass:meta';
6 6
7@use '@oddbird/blend';
8@use '@oddbird/blend/sass/convert' as blend-convert;
9
10@use 'iro-sass/src/index' as iro; 7@use 'iro-sass/src/index' as iro;
11@use 'iro-sass/src/easing' as easing; 8@use 'iro-sass/src/easing' as easing;
12@use 'functions/colors' as iro-colors; 9@use 'functions/colors' as iro-colors;
@@ -67,11 +64,12 @@
67 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; 64 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
68} 65}
69 66
70@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { 67@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
71 $base-lch: iro-colors.parse-oklch($base-color); 68 $base-lch: color.to-space($base-color, oklch);
72 $ref-lch: iro-colors.parse-oklch($reference-color); 69 $ref-lch: color.to-space($ref-color, oklch);
73 $ref-l: list.nth($ref-lch, 1); 70
74 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); 71 $ref-l: color.channel($ref-lch, 'lightness');
72 $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch);
75 73
76 $cmax: math.max(map.values($contrasts)...); 74 $cmax: math.max(map.values($contrasts)...);
77 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); 75 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
@@ -84,52 +82,29 @@
84 $palette: (); 82 $palette: ();
85 83
86 @each $key, $contrast in $contrasts { 84 @each $key, $contrast in $contrasts {
87 //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
88 $y: iro-colors.apcaReverse($contrast, $ref-y); 85 $y: iro-colors.apcaReverse($contrast, $ref-y);
89 $l: list.nth($base-lch, 1); 86 $l: color.channel($base-lch, 'lightness');
90 $c: 1; 87 $c: 1;
91 88
92 @if $y != false { 89 @if $y != false {
93 $y-lch: blend-convert.Lab_to_LCH( 90 $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch);
94 iro-colors.lin_sRGB_to_Oklab(
95 blend-convert.lin_sRGB(
96 blend-convert.sassToRgb(
97 iro-colors.apca_Y_to_sRGB($y)
98 )
99 )
100 )
101 );
102 $l: list.nth($y-lch, 1);
103 } @else { 91 } @else {
104 $y: $ref-y; 92 $y: $ref-y;
105 } 93 }
106 94
107 @if $chroma-range != 1 { 95 @if $chroma-range != 1 {
108 $c: if( 96 $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
109 $ref-l > .5,
110 math.clamp(0, math.div($contrast, $cmax), 1),
111 -1 * math.clamp(-1, math.div($contrast, $cmax), 0)
112 );
113 $c: meta.call($chroma-easing, $c); 97 $c: meta.call($chroma-easing, $c);
114 $c: $chroma-range + (1 - $chroma-range) * $c; 98 $c: $chroma-range + (1 - $chroma-range) * $c;
115 } 99 }
116 100
117 $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3)); 101 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
118 //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
119 //$color: blend-convert.rgbToSass(
120 // blend-convert.gam_sRGB(
121 // iro-colors.Oklab_to_lin_sRGB(
122 // blend-convert.LCH_to_Lab($color)
123 // )
124 // )
125 //);
126 102
127 $contrast-black: iro-colors.apcaContrast($black-y, $y); 103 $contrast-black: iro-colors.apcaContrast($black-y, $y);
128 $contrast-white: iro-colors.apcaContrast($white-y, $y); 104 $contrast-white: iro-colors.apcaContrast($white-y, $y);
129 105
130 $palette: map.set($palette, $key, $color); 106 $palette: map.set($palette, $key, $color);
131 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); 107 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
132 //$palette: map.set($palette, #{$key}-text, blend.contrast($color));
133 } 108 }
134 109
135 @return $palette; 110 @return $palette;
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}