summaryrefslogtreecommitdiffstats
path: root/src/_functions.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_functions.scss')
-rw-r--r--src/_functions.scss45
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;