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; |