1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
@use 'sass:color';
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';
@use 'iro-sass/src/easing';
@use 'apca';
@function palette($base-color, $levels, $ref-color: $base-color) {
$base-lch: color.to-space($base-color, oklch);
$ref-lch: color.to-space($ref-color, oklch);
$ref-l: color.channel($ref-lch, 'lightness');
$ref-y: apca.sRGB_to_Y($ref-lch);
$black-y: apca.sRGB_to_Y(#000);
$white-y: apca.sRGB_to_Y(#fff);
$palette: ();
@each $key, $level in $levels {
$color: list.nth($level, 1);
$y: 0;
$c: 1;
@if list.length($level) > 1 {
$c: list.nth($level, 2);
}
@if meta.type-of($color) != 'color' {
$y: apca.reverse($color, $ref-y);
$l: color.channel($base-lch, 'lightness');
@if $y != false {
$l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
} @else {
$y: $ref-y;
}
$color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
} @else {
$y: apca.sRGB_to_Y($color);
}
$contrast-black: apca.contrast($black-y, $y);
$contrast-white: apca.contrast($white-y, $y);
$palette: map.set($palette, $key, $color);
$palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
}
@return $palette;
}
@function transparent-palette($color, $text, $alphas) {
$palette: (
--text: $text,
);
@each $key, $alpha in $alphas {
$palette: map.set($palette, $key, rgba($color, $alpha));
}
@return $palette;
}
|
