UNPKG

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