1 |
|
2 | @import "bezierEasing";
|
3 | @import "tinyColor";
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | .colorPaletteMixin() {
|
10 | @functions: ~`(function() {
|
11 | var hueStep = 2;
|
12 | var saturationStep = 0.16;
|
13 | var saturationStep2 = 0.05;
|
14 | var brightnessStep1 = 0.05;
|
15 | var brightnessStep2 = 0.15;
|
16 | var lightColorCount = 5;
|
17 | var darkColorCount = 4;
|
18 |
|
19 | var getHue = function(hsv, i, isLight) {
|
20 | var hue;
|
21 | if (hsv.h >= 60 && hsv.h <= 240) {
|
22 | hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
|
23 | } else {
|
24 | hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
|
25 | }
|
26 | if (hue < 0) {
|
27 | hue += 360;
|
28 | } else if (hue >= 360) {
|
29 | hue -= 360;
|
30 | }
|
31 | return Math.round(hue);
|
32 | };
|
33 | var getSaturation = function(hsv, i, isLight) {
|
34 | var saturation;
|
35 | if (isLight) {
|
36 | saturation = hsv.s - saturationStep * i;
|
37 | } else if (i === darkColorCount) {
|
38 | saturation = hsv.s + saturationStep;
|
39 | } else {
|
40 | saturation = hsv.s + saturationStep2 * i;
|
41 | }
|
42 | if (saturation > 1) {
|
43 | saturation = 1;
|
44 | }
|
45 | if (isLight && i === lightColorCount && saturation > 0.1) {
|
46 | saturation = 0.1;
|
47 | }
|
48 | if (saturation < 0.06) {
|
49 | saturation = 0.06;
|
50 | }
|
51 | return Number(saturation.toFixed(2));
|
52 | };
|
53 | var getValue = function(hsv, i, isLight) {
|
54 | var value;
|
55 | if (isLight) {
|
56 | value = hsv.v + brightnessStep1 * i;
|
57 | }else{
|
58 | value = hsv.v - brightnessStep2 * i
|
59 | }
|
60 | if (value > 1) {
|
61 | value = 1;
|
62 | }
|
63 | return Number(value.toFixed(2))
|
64 | };
|
65 |
|
66 | this.colorPalette = function(color, index) {
|
67 | var isLight = index <= 6;
|
68 | var hsv = tinycolor(color).toHsv();
|
69 | var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
|
70 | return tinycolor({
|
71 | h: getHue(hsv, i, isLight),
|
72 | s: getSaturation(hsv, i, isLight),
|
73 | v: getValue(hsv, i, isLight),
|
74 | }).toHexString();
|
75 | };
|
76 | })()`;
|
77 | }
|
78 |
|
79 |
|
80 |
|
81 | .colorPaletteMixin();
|