summaryrefslogtreecommitdiffstats
path: root/src/_functions.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-24 09:14:43 +0200
committerVolpeon <git@volpeon.ink>2024-06-24 09:14:43 +0200
commit029fb64837173b70b31ac579cb005c2995806c49 (patch)
treef6244dea821118a39c8e81dc80acc6343ef39971 /src/_functions.scss
parentWIP: New color calculations (diff)
downloadiro-design-029fb64837173b70b31ac579cb005c2995806c49.tar.gz
iro-design-029fb64837173b70b31ac579cb005c2995806c49.tar.bz2
iro-design-029fb64837173b70b31ac579cb005c2995806c49.zip
Update
Diffstat (limited to 'src/_functions.scss')
-rw-r--r--src/_functions.scss101
1 files changed, 45 insertions, 56 deletions
diff --git a/src/_functions.scss b/src/_functions.scss
index 2d4aeef..9c29285 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,8 +7,9 @@
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; 10@use 'iro-sass/src/index' as iro;
11@use 'iro-sass/src/easing' as easing;
12@use 'functions/colors' as iro-colors;
12@use 'config'; 13@use 'config';
13 14
14@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { 15@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
@@ -66,51 +67,6 @@
66 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; 67 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
67} 68}
68 69
69@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) {
70 $ref-lum: lum($reference-color);
71
72 $result: ();
73 $colors-len: list.length($colors);
74 $colors-idx: 1;
75 $wanted-len: list.length($wanted-contrasts);
76 $wanted-idx: 1;
77
78 @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
79 $color: list.nth($colors, $colors-idx);
80 $lum: lum($color);
81 $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum));
82
83 @if $contrast != 1 {
84 @if $lum <= $ref-lum {
85 $contrast: -1 * $contrast;
86 }
87 }
88
89 $wanted: list.nth($wanted-contrasts, $wanted-idx);
90 $wanted-key: list.nth($wanted, 1);
91 $wanted-contrast: list.nth($wanted, 2);
92
93 @if $contrast >= $wanted-contrast {
94 $result: map.set($result, $wanted-key, $color);
95 $wanted-idx: $wanted-idx + 1;
96 } @else {
97 $colors-idx: $colors-idx + 1;
98 }
99 }
100
101 $last-color: list.nth($colors, $colors-len);
102
103 @if $wanted-idx <= $wanted-len {
104 @for $i from $wanted-idx through $wanted-len {
105 $wanted: list.nth($wanted-contrasts, $i);
106 $wanted-key: list.nth($wanted, 1);
107 $result: map.set($result, $wanted-key, $last-color);
108 }
109 }
110
111 @return $result;
112}
113
114@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { 70@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
115 $chroma-range: 1 - $chroma-range; 71 $chroma-range: 1 - $chroma-range;
116 72
@@ -159,17 +115,33 @@
159 ) 115 )
160 ) 116 )
161 ); 117 );
118 $ref-lch: blend-convert.Lab_to_LCH(
119 iro-colors.lin_sRGB_to_Oklab(
120 blend-convert.lin_sRGB(
121 blend-convert.sassToRgb($reference-color)
122 )
123 )
124 );
125 $ref-l: list.nth($ref-lch, 1);
162 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); 126 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
163 127
128 $cmax: math.max(map.values($contrasts)...);
129 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
130
131 $black-y: iro-colors.apca_sRGB_to_Y(#000);
132 $white-y: iro-colors.apca_sRGB_to_Y(#fff);
133
164 $palette: (); 134 $palette: ();
165 135
136 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
137
166 @each $key, $contrast in $contrasts { 138 @each $key, $contrast in $contrasts {
139 //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
167 $y: iro-colors.apcaReverse($contrast, $ref-y); 140 $y: iro-colors.apcaReverse($contrast, $ref-y);
168 $l: list.nth($base-lch, 1); 141 $l: list.nth($base-lch, 1);
142 $c: 1;
169 143
170 @if $y != false { 144 @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( 145 $y-lch: blend-convert.Lab_to_LCH(
174 iro-colors.lin_sRGB_to_Oklab( 146 iro-colors.lin_sRGB_to_Oklab(
175 blend-convert.lin_sRGB( 147 blend-convert.lin_sRGB(
@@ -181,20 +153,37 @@
181 ); 153 );
182 $l: list.nth($y-lch, 1); 154 $l: list.nth($y-lch, 1);
183 } @else { 155 } @else {
184 @debug $contrast, $ref-y, $y; 156 $y: $ref-y;
157 }
158
159 @if $chroma-range != 1 {
160 $c: if(
161 $ref-l > .5,
162 math.clamp(0, math.div($contrast, $cmax), 1),
163 -1 * math.clamp(-1, math.div($contrast, $cmax), 0)
164 );
165 $c: meta.call($chroma-easing, $c);
166 $c: $chroma-range + (1 - $chroma-range) * $c;
185 } 167 }
186 168
187 $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); 169 $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3));
188 //$color: blend-convert.LCH_to_Lab($color); 170 //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
189 //$color: iro-colors.Oklab_to_lin_sRGB($color); 171 //$color: blend-convert.rgbToSass(
190 //$color: blend-convert(); 172 // blend-convert.gam_sRGB(
173 // iro-colors.Oklab_to_lin_sRGB(
174 // blend-convert.LCH_to_Lab($color)
175 // )
176 // )
177 //);
178
179 $contrast-black: iro-colors.apcaContrast($black-y, $y);
180 $contrast-white: iro-colors.apcaContrast($white-y, $y);
191 181
192 $palette: map.set($palette, $key, $color); 182 $palette: map.set($palette, $key, $color);
193 $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff)); 183 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
184 //$palette: map.set($palette, #{$key}-text, blend.contrast($color));
194 } 185 }
195 186
196 @debug '-------------------------------------------';
197
198 @return $palette; 187 @return $palette;
199} 188}
200 189