UNPKG

4.36 kBJavaScriptView Raw
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.default = generate;
7
8var _tinycolor = require("@ctrl/tinycolor");
9
10var hueStep = 2; // 色相阶梯
11
12var saturationStep = 0.16; // 饱和度阶梯,浅色部分
13
14var saturationStep2 = 0.05; // 饱和度阶梯,深色部分
15
16var brightnessStep1 = 0.05; // 亮度阶梯,浅色部分
17
18var brightnessStep2 = 0.15; // 亮度阶梯,深色部分
19
20var lightColorCount = 5; // 浅色数量,主色上
21
22var darkColorCount = 4; // 深色数量,主色下
23// 暗色主题颜色映射关系表
24
25var darkColorMap = [{
26 index: 7,
27 opacity: 0.15
28}, {
29 index: 6,
30 opacity: 0.25
31}, {
32 index: 5,
33 opacity: 0.3
34}, {
35 index: 5,
36 opacity: 0.45
37}, {
38 index: 5,
39 opacity: 0.65
40}, {
41 index: 5,
42 opacity: 0.85
43}, {
44 index: 4,
45 opacity: 0.9
46}, {
47 index: 3,
48 opacity: 0.95
49}, {
50 index: 2,
51 opacity: 0.97
52}, {
53 index: 1,
54 opacity: 0.98
55}];
56
57// Wrapper function ported from TinyColor.prototype.toHsv
58// Keep it here because of `hsv.h * 360`
59function toHsv(_ref) {
60 var r = _ref.r,
61 g = _ref.g,
62 b = _ref.b;
63 var hsv = (0, _tinycolor.rgbToHsv)(r, g, b);
64 return {
65 h: hsv.h * 360,
66 s: hsv.s,
67 v: hsv.v
68 };
69} // Wrapper function ported from TinyColor.prototype.toHexString
70// Keep it here because of the prefix `#`
71
72
73function toHex(_ref2) {
74 var r = _ref2.r,
75 g = _ref2.g,
76 b = _ref2.b;
77 return "#".concat((0, _tinycolor.rgbToHex)(r, g, b, false));
78} // Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
79// Amount in range [0, 1]
80// Assume color1 & color2 has no alpha, since the following src code did so.
81
82
83function mix(rgb1, rgb2, amount) {
84 var p = amount / 100;
85 var rgb = {
86 r: (rgb2.r - rgb1.r) * p + rgb1.r,
87 g: (rgb2.g - rgb1.g) * p + rgb1.g,
88 b: (rgb2.b - rgb1.b) * p + rgb1.b
89 };
90 return rgb;
91}
92
93function getHue(hsv, i, light) {
94 var hue; // 根据色相不同,色相转向不同
95
96 if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
97 hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
98 } else {
99 hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
100 }
101
102 if (hue < 0) {
103 hue += 360;
104 } else if (hue >= 360) {
105 hue -= 360;
106 }
107
108 return hue;
109}
110
111function getSaturation(hsv, i, light) {
112 // grey color don't change saturation
113 if (hsv.h === 0 && hsv.s === 0) {
114 return hsv.s;
115 }
116
117 var saturation;
118
119 if (light) {
120 saturation = hsv.s - saturationStep * i;
121 } else if (i === darkColorCount) {
122 saturation = hsv.s + saturationStep;
123 } else {
124 saturation = hsv.s + saturationStep2 * i;
125 } // 边界值修正
126
127
128 if (saturation > 1) {
129 saturation = 1;
130 } // 第一格的 s 限制在 0.06-0.1 之间
131
132
133 if (light && i === lightColorCount && saturation > 0.1) {
134 saturation = 0.1;
135 }
136
137 if (saturation < 0.06) {
138 saturation = 0.06;
139 }
140
141 return Number(saturation.toFixed(2));
142}
143
144function getValue(hsv, i, light) {
145 var value;
146
147 if (light) {
148 value = hsv.v + brightnessStep1 * i;
149 } else {
150 value = hsv.v - brightnessStep2 * i;
151 }
152
153 if (value > 1) {
154 value = 1;
155 }
156
157 return Number(value.toFixed(2));
158}
159
160function generate(color) {
161 var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
162 var patterns = [];
163 var pColor = (0, _tinycolor.inputToRGB)(color);
164
165 for (var i = lightColorCount; i > 0; i -= 1) {
166 var hsv = toHsv(pColor);
167 var colorString = toHex((0, _tinycolor.inputToRGB)({
168 h: getHue(hsv, i, true),
169 s: getSaturation(hsv, i, true),
170 v: getValue(hsv, i, true)
171 }));
172 patterns.push(colorString);
173 }
174
175 patterns.push(toHex(pColor));
176
177 for (var _i = 1; _i <= darkColorCount; _i += 1) {
178 var _hsv = toHsv(pColor);
179
180 var _colorString = toHex((0, _tinycolor.inputToRGB)({
181 h: getHue(_hsv, _i),
182 s: getSaturation(_hsv, _i),
183 v: getValue(_hsv, _i)
184 }));
185
186 patterns.push(_colorString);
187 } // dark theme patterns
188
189
190 if (opts.theme === 'dark') {
191 return darkColorMap.map(function (_ref3) {
192 var index = _ref3.index,
193 opacity = _ref3.opacity;
194 var darkColorString = toHex(mix((0, _tinycolor.inputToRGB)(opts.backgroundColor || '#141414'), (0, _tinycolor.inputToRGB)(patterns[index]), opacity * 100));
195 return darkColorString;
196 });
197 }
198
199 return patterns;
200}
\No newline at end of file