diff options
Diffstat (limited to 'src/_functions.scss')
| -rw-r--r-- | src/_functions.scss | 45 |
1 files changed, 10 insertions, 35 deletions
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; |
