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; |
| 119 | 125 | ||
| 120 | @while $i <= 100% { | 126 | @while $i <= 1 { |
| 121 | $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%); | 127 | $l: $i * 200% - 100%; |
| 122 | $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c)); | 128 | $c: 0%; |
| 123 | $i: $i + config.$palette-precision; | 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)); | ||
| 141 | |||
| 142 | $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 | } |
