diff options
Diffstat (limited to 'src/_functions.scss')
-rw-r--r-- | src/_functions.scss | 82 |
1 files changed, 74 insertions, 8 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 8553833..2d4aeef 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -2,11 +2,15 @@ | |||
2 | @use 'sass:math'; | 2 | @use 'sass:math'; |
3 | @use 'sass:map'; | 3 | @use 'sass:map'; |
4 | @use 'sass:list'; | 4 | @use 'sass:list'; |
5 | @use 'iro-sass/src/index' as iro; | 5 | @use 'sass:meta'; |
6 | @use 'config'; | 6 | |
7 | @use '@oddbird/blend'; | 7 | @use '@oddbird/blend'; |
8 | @use '@oddbird/blend/sass/convert' as blend-convert; | 8 | @use '@oddbird/blend/sass/convert' as blend-convert; |
9 | 9 | ||
10 | @use 'functions/colors' as iro-colors; | ||
11 | @use 'iro-sass/src/index' as iro; | ||
12 | @use 'config'; | ||
13 | |||
10 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | 14 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { |
11 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); | 15 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); |
12 | } | 16 | } |
@@ -107,7 +111,9 @@ | |||
107 | @return $result; | 111 | @return $result; |
108 | } | 112 | } |
109 | 113 | ||
110 | @function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) { | 114 | @function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { |
115 | $chroma-range: 1 - $chroma-range; | ||
116 | |||
111 | $palette: (); | 117 | $palette: (); |
112 | 118 | ||
113 | @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { | 119 | @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { |
@@ -115,12 +121,25 @@ | |||
115 | } | 121 | } |
116 | 122 | ||
117 | $reference-lightness: blend.lightness($reference-color); | 123 | $reference-lightness: blend.lightness($reference-color); |
118 | $i: -100%; | 124 | $i: 0; |
125 | |||
126 | @while $i <= 1 { | ||
127 | $l: $i * 200% - 100%; | ||
128 | $c: 0%; | ||
129 | |||
130 | @if $chroma-range != 0 { | ||
131 | $c: $i * 2 - 1; | ||
132 | $c: if( | ||
133 | $reference-lightness >= 50%, | ||
134 | math.clamp(0, $c, 1), | ||
135 | math.clamp(0, -1 * $c, 1) | ||
136 | ); | ||
137 | $c: $chroma-range * $c * -100%; | ||
138 | } | ||
139 | |||
140 | $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c)); | ||
119 | 141 | ||
120 | @while $i <= 100% { | 142 | $i: $i + config.$palette-precision; |
121 | $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%); | ||
122 | $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c)); | ||
123 | $i: $i + config.$palette-precision; | ||
124 | } | 143 | } |
125 | 144 | ||
126 | $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); | 145 | $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); |
@@ -132,6 +151,53 @@ | |||
132 | @return $palette; | 151 | @return $palette; |
133 | } | 152 | } |
134 | 153 | ||
154 | @function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { | ||
155 | $base-lch: blend-convert.Lab_to_LCH( | ||
156 | iro-colors.lin_sRGB_to_Oklab( | ||
157 | blend-convert.lin_sRGB( | ||
158 | blend-convert.sassToRgb($base-color) | ||
159 | ) | ||
160 | ) | ||
161 | ); | ||
162 | $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); | ||
163 | |||
164 | $palette: (); | ||
165 | |||
166 | @each $key, $contrast in $contrasts { | ||
167 | $y: iro-colors.apcaReverse($contrast, $ref-y); | ||
168 | $l: list.nth($base-lch, 1); | ||
169 | |||
170 | @if $y != false { | ||
171 | @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y); | ||
172 | |||
173 | $y-lch: blend-convert.Lab_to_LCH( | ||
174 | iro-colors.lin_sRGB_to_Oklab( | ||
175 | blend-convert.lin_sRGB( | ||
176 | blend-convert.sassToRgb( | ||
177 | iro-colors.apca_Y_to_sRGB($y) | ||
178 | ) | ||
179 | ) | ||
180 | ) | ||
181 | ); | ||
182 | $l: list.nth($y-lch, 1); | ||
183 | } @else { | ||
184 | @debug $contrast, $ref-y, $y; | ||
185 | } | ||
186 | |||
187 | $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); | ||
188 | //$color: blend-convert.LCH_to_Lab($color); | ||
189 | //$color: iro-colors.Oklab_to_lin_sRGB($color); | ||
190 | //$color: blend-convert(); | ||
191 | |||
192 | $palette: map.set($palette, $key, $color); | ||
193 | $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff)); | ||
194 | } | ||
195 | |||
196 | @debug '-------------------------------------------'; | ||
197 | |||
198 | @return $palette; | ||
199 | } | ||
200 | |||
135 | @function px-to-em($size, $base: iro.$vars-root-size) { | 201 | @function px-to-em($size, $base: iro.$vars-root-size) { |
136 | @return math.div($size, $base) * 1em; | 202 | @return math.div($size, $base) * 1em; |
137 | } | 203 | } |