diff options
-rw-r--r-- | .stylelintrc.json | 3 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/_config.scss | 97 | ||||
-rw-r--r-- | src/_declare-vars.scss | 1 | ||||
-rw-r--r-- | src/_functions.scss | 45 | ||||
-rw-r--r-- | src/functions/colors/_apca.scss | 54 | ||||
-rw-r--r-- | src/functions/colors/_index.scss | 1 | ||||
-rw-r--r-- | src/functions/colors/_oklch.scss | 88 |
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 | ||
10 | iro.$vars-root-size: 16px; | 9 | iro.$vars-root-size: 16px; |
11 | 10 | ||
@@ -25,7 +24,7 @@ media.$unit-intervals: ( | |||
25 | 24 | ||
26 | res.$named-viewports: media.$breakpoints; | 25 | res.$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 | } | ||