diff options
author | Volpeon <git@volpeon.ink> | 2024-10-25 19:04:07 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-25 19:04:07 +0200 |
commit | 4c88538c4d267de7cd21cc29c07e7c8360145441 (patch) | |
tree | d2443b1bf715634511e7dc69a79d99da6734601e /src/_functions.scss | |
parent | Add gapless modifier to split view (diff) | |
download | iro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.tar.gz iro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.tar.bz2 iro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.zip |
New palette generation
Diffstat (limited to 'src/_functions.scss')
-rw-r--r-- | src/_functions.scss | 44 |
1 files changed, 18 insertions, 26 deletions
diff --git a/src/_functions.scss b/src/_functions.scss index 27b850c..62caf8c 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -7,49 +7,41 @@ | |||
7 | @use 'iro-sass/src/easing'; | 7 | @use 'iro-sass/src/easing'; |
8 | @use 'apca'; | 8 | @use 'apca'; |
9 | 9 | ||
10 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color, $chroma-easing: 'ease') { | 10 | @function palette($base-color, $levels, $ref-color: $base-color) { |
11 | $base-lch: color.to-space($base-color, oklch); | 11 | $base-lch: color.to-space($base-color, oklch); |
12 | $ref-lch: color.to-space($ref-color, oklch); | 12 | $ref-lch: color.to-space($ref-color, oklch); |
13 | 13 | ||
14 | $ref-l: color.channel($ref-lch, 'lightness'); | 14 | $ref-l: color.channel($ref-lch, 'lightness'); |
15 | $ref-y: apca.sRGB_to_Y($ref-lch); | 15 | $ref-y: apca.sRGB_to_Y($ref-lch); |
16 | 16 | ||
17 | $cmax: math.max(map.values($contrasts)...); | ||
18 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); | ||
19 | |||
20 | $black-y: apca.sRGB_to_Y(#000); | 17 | $black-y: apca.sRGB_to_Y(#000); |
21 | $white-y: apca.sRGB_to_Y(#fff); | 18 | $white-y: apca.sRGB_to_Y(#fff); |
22 | 19 | ||
23 | $chroma-inv: false; | ||
24 | @if $chroma-range < 0 { | ||
25 | $chroma-inv: true; | ||
26 | $chroma-range: -1 * $chroma-range; | ||
27 | } | ||
28 | $chroma-easing: meta.get-function($chroma-easing, $module: easing); | ||
29 | |||
30 | $palette: (); | 20 | $palette: (); |
31 | 21 | ||
32 | @each $key, $contrast in $contrasts { | 22 | @each $key, $level in $levels { |
33 | $y: apca.reverse($contrast, $ref-y); | 23 | $color: list.nth($level, 1); |
34 | $l: color.channel($base-lch, 'lightness'); | 24 | $y: 0; |
35 | $c: 1; | 25 | $c: 1; |
36 | 26 | ||
37 | @if $y != false { | 27 | @if list.length($level) > 1 { |
38 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); | 28 | $c: list.nth($level, 2); |
39 | } @else { | ||
40 | $y: $ref-y; | ||
41 | } | 29 | } |
42 | 30 | ||
43 | @if $chroma-range != 1 { | 31 | @if meta.type-of($color) != 'color' { |
44 | $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); | 32 | $y: apca.reverse($color, $ref-y); |
45 | @if $chroma-inv { | 33 | $l: color.channel($base-lch, 'lightness'); |
46 | $c: 1 - $c; | 34 | |
35 | @if $y != false { | ||
36 | $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); | ||
37 | } @else { | ||
38 | $y: $ref-y; | ||
47 | } | 39 | } |
48 | $c: meta.call($chroma-easing, $c); | ||
49 | $c: $chroma-range + (1 - $chroma-range) * $c; | ||
50 | } | ||
51 | 40 | ||
52 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); | 41 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); |
42 | } @else { | ||
43 | $y: apca.sRGB_to_Y($color); | ||
44 | } | ||
53 | 45 | ||
54 | $contrast-black: apca.contrast($black-y, $y); | 46 | $contrast-black: apca.contrast($black-y, $y); |
55 | $contrast-white: apca.contrast($white-y, $y); | 47 | $contrast-white: apca.contrast($white-y, $y); |