UNPKG

20.7 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.antvLight = exports.createLightStyleSheet = void 0;
4var BLACK_COLORS = {
5 100: '#000',
6 95: '#0D0D0D',
7 85: '#262626',
8 65: '#595959',
9 45: '#8C8C8C',
10 25: '#BFBFBF',
11 15: '#D9D9D9',
12 6: '#F0F0F0',
13};
14var WHITE_COLORS = {
15 100: '#FFFFFF',
16 95: '#F2F2F2',
17 85: '#D9D9D9',
18 65: '#A6A6A6',
19 45: '#737373',
20 25: '#404040',
21 15: '#262626',
22 6: '#0F0F0F',
23};
24var QUALITATIVE_10 = [
25 '#5B8FF9',
26 '#5AD8A6',
27 '#5D7092',
28 '#F6BD16',
29 '#6F5EF9',
30 '#6DC8EC',
31 '#945FB9',
32 '#FF9845',
33 '#1E9493',
34 '#FF99C3',
35];
36var QUALITATIVE_20 = [
37 '#5B8FF9',
38 '#CDDDFD',
39 '#5AD8A6',
40 '#CDF3E4',
41 '#5D7092',
42 '#CED4DE',
43 '#F6BD16',
44 '#FCEBB9',
45 '#6F5EF9',
46 '#D3CEFD',
47 '#6DC8EC',
48 '#D3EEF9',
49 '#945FB9',
50 '#DECFEA',
51 '#FF9845',
52 '#FFE0C7',
53 '#1E9493',
54 '#BBDEDE',
55 '#FF99C3',
56 '#FFE0ED',
57];
58/** 单色顺序色板 */
59var SINGLE_SEQUENCE = [
60 '#B8E1FF',
61 '#9AC5FF',
62 '#7DAAFF',
63 '#5B8FF9',
64 '#3D76DD',
65 '#085EC0',
66 '#0047A5',
67 '#00318A',
68 '#001D70',
69];
70var createLightStyleSheet = function (cfg) {
71 if (cfg === void 0) { cfg = {}; }
72 var _a = cfg.backgroundColor, backgroundColor = _a === void 0 ? 'transparent' : _a, _b = cfg.subColor, subColor = _b === void 0 ? 'rgba(0,0,0,0.05)' : _b, _c = cfg.paletteQualitative10, paletteQualitative10 = _c === void 0 ? QUALITATIVE_10 : _c, _d = cfg.paletteQualitative20, paletteQualitative20 = _d === void 0 ? QUALITATIVE_20 : _d, _e = cfg.paletteSemanticRed, paletteSemanticRed = _e === void 0 ? '#F4664A' : _e, _f = cfg.paletteSemanticGreen, paletteSemanticGreen = _f === void 0 ? '#30BF78' : _f, _g = cfg.paletteSemanticYellow, paletteSemanticYellow = _g === void 0 ? '#FAAD14' : _g, _h = cfg.paletteSequence, paletteSequence = _h === void 0 ? SINGLE_SEQUENCE : _h, _j = cfg.fontFamily, fontFamily = _j === void 0 ? "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\"" : _j;
73 var _k = cfg.brandColor, brandColor = _k === void 0 ? paletteQualitative10[0] : _k;
74 return {
75 /** 图表背景色 */
76 backgroundColor: backgroundColor,
77 /** 主题色 */
78 brandColor: brandColor,
79 /** 图表辅助色 */
80 subColor: subColor,
81 /** 分类色板 1,在数据量小于等于 10 时使用 */
82 paletteQualitative10: paletteQualitative10,
83 /** 分类色板 2,在数据量大于 10 时使用 */
84 paletteQualitative20: paletteQualitative20,
85 /** 语义色 */
86 paletteSemanticRed: paletteSemanticRed,
87 /** 语义色 */
88 paletteSemanticGreen: paletteSemanticGreen,
89 /** 语义色 */
90 paletteSemanticYellow: paletteSemanticYellow,
91 /** (单色)顺序色板 */
92 paletteSequence: paletteSequence,
93 /** 字体 */
94 fontFamily: fontFamily,
95 // -------------------- 坐标轴 --------------------
96 /** 坐标轴线颜色 */
97 axisLineBorderColor: BLACK_COLORS[25],
98 /** 坐标轴线粗细 */
99 axisLineBorder: 1,
100 /** 坐标轴线 lineDash 设置 */
101 axisLineDash: null,
102 /** 坐标轴标题颜色 */
103 axisTitleTextFillColor: BLACK_COLORS[65],
104 /** 坐标轴标题文本字体大小 */
105 axisTitleTextFontSize: 12,
106 /** 坐标轴标题文本行高 */
107 axisTitleTextLineHeight: 12,
108 /** 坐标轴标题文本字体粗细 */
109 axisTitleTextFontWeight: 'normal',
110 /** 坐标轴标题距离坐标轴文本的间距 */
111 axisTitleSpacing: 12,
112 /** 坐标轴刻度线颜色 */
113 axisTickLineBorderColor: BLACK_COLORS[25],
114 /** 坐标轴刻度线长度 */
115 axisTickLineLength: 4,
116 /** 坐标轴刻度线粗细 */
117 axisTickLineBorder: 1,
118 /** 坐标轴次刻度线颜色 */
119 axisSubTickLineBorderColor: BLACK_COLORS[15],
120 /** 坐标轴次刻度线长度 */
121 axisSubTickLineLength: 2,
122 /** 坐标轴次刻度线粗细 */
123 axisSubTickLineBorder: 1,
124 /** 坐标轴刻度文本颜色 */
125 axisLabelFillColor: BLACK_COLORS[45],
126 /** 坐标轴刻度文本字体大小 */
127 axisLabelFontSize: 12,
128 /** 坐标轴刻度文本行高 */
129 axisLabelLineHeight: 12,
130 /** 坐标轴刻度文本字体粗细 */
131 axisLabelFontWeight: 'normal',
132 /** 坐标轴刻度文本距离坐标轴线的间距 */
133 axisLabelOffset: 8,
134 /** 坐标轴网格线颜色 */
135 axisGridBorderColor: BLACK_COLORS[15],
136 /** 坐标轴网格线粗细 */
137 axisGridBorder: 1,
138 /** 坐标轴网格线虚线设置 */
139 axisGridLineDash: null,
140 // -------------------- 图例 --------------------
141 /** 图例标题颜色 */
142 legendTitleTextFillColor: BLACK_COLORS[45],
143 /** 图例标题文本字体大小 */
144 legendTitleTextFontSize: 12,
145 /** 图例标题文本行高 */
146 legendTitleTextLineHeight: 21,
147 /** 图例标题文本字体粗细 */
148 legendTitleTextFontWeight: 'normal',
149 /** 图例 marker 颜色 */
150 legendMarkerColor: brandColor,
151 /** 图例 marker 距离图例文本的间距 */
152 legendMarkerSpacing: 8,
153 /** 图例 marker 默认半径大小 */
154 legendMarkerSize: 4,
155 /** 图例 'circle' marker 半径 */
156 legendCircleMarkerSize: 4,
157 /** 图例 'square' marker 半径 */
158 legendSquareMarkerSize: 4,
159 /** 图例 'line' marker 半径 */
160 legendLineMarkerSize: 5,
161 /** 图例项文本颜色 */
162 legendItemNameFillColor: BLACK_COLORS[65],
163 /** 图例项文本字体大小 */
164 legendItemNameFontSize: 12,
165 /** 图例项文本行高 */
166 legendItemNameLineHeight: 12,
167 /** 图例项粗细 */
168 legendItemNameFontWeight: 'normal',
169 /** 图例项之间的水平间距 */
170 legendItemSpacing: 24,
171 /** 图例项垂直方向的间隔 */
172 legendItemMarginBottom: 12,
173 /** 图例与图表绘图区域的偏移距离 */
174 legendPadding: [8, 8, 8, 8],
175 /** 水平布局的图例与绘图区域偏移距离 */
176 legendHorizontalPadding: [8, 0, 8, 0],
177 /** 垂直布局的图例与绘图区域偏移距离 */
178 legendVerticalPadding: [0, 8, 0, 8],
179 // 图例分页器
180 /** 图例分页器 marker 大小 */
181 legendPageNavigatorMarkerSize: 12,
182 /** 图例分页器 marker 非激活状态填充色 */
183 legendPageNavigatorMarkerInactiveFillColor: BLACK_COLORS[100],
184 /** 图例分页器 marker 非激活状态填充色透明度 */
185 legendPageNavigatorMarkerInactiveFillOpacity: 0.45,
186 /** 图例分页器 marker 填充色 */
187 legendPageNavigatorMarkerFillColor: BLACK_COLORS[100],
188 /** 图例分页器 marker 填充色透明度 */
189 legendPageNavigatorMarkerFillOpacity: 1,
190 /** 图例分页器文本颜色 */
191 legendPageNavigatorTextFillColor: BLACK_COLORS[45],
192 /** 图例分页器文本字体大小 */
193 legendPageNavigatorTextFontSize: 12,
194 /** 连续图例滑块填充色 */
195 sliderRailFillColor: BLACK_COLORS[15],
196 /** 连续图例滑块边框粗细 */
197 sliderRailBorder: 0,
198 /** 连续图例滑块边框颜色 */
199 sliderRailBorderColor: null,
200 /** 连续图例滑块宽度 */
201 sliderRailWidth: 100,
202 /** 连续图例滑块高度 */
203 sliderRailHeight: 12,
204 /** 连续图例文本颜色 */
205 sliderLabelTextFillColor: BLACK_COLORS[45],
206 /** 连续图例文本字体大小 */
207 sliderLabelTextFontSize: 12,
208 /** 连续图例文本行高 */
209 sliderLabelTextLineHeight: 12,
210 /** 连续图例文本字体粗细 */
211 sliderLabelTextFontWeight: 'normal',
212 /** 连续图例滑块颜色 */
213 sliderHandlerFillColor: BLACK_COLORS[6],
214 /** 连续图例滑块宽度 */
215 sliderHandlerWidth: 10,
216 /** 连续图例滑块高度 */
217 sliderHandlerHeight: 14,
218 /** 连续图例滑块边框粗细 */
219 sliderHandlerBorder: 1,
220 /** 连续图例滑块边框颜色 */
221 sliderHandlerBorderColor: BLACK_COLORS[25],
222 // -------------------- Annotation,图形标注 --------------------
223 /** arc 图形标注描边颜色 */
224 annotationArcBorderColor: BLACK_COLORS[15],
225 /** arc 图形标注粗细 */
226 annotationArcBorder: 1,
227 /** line 图形标注颜色 */
228 annotationLineBorderColor: BLACK_COLORS[25],
229 /** line 图形标注粗细 */
230 annotationLineBorder: 1,
231 /** lube 图形标注的虚线间隔 */
232 annotationLineDash: null,
233 /** text 图形标注文本颜色 */
234 annotationTextFillColor: BLACK_COLORS[65],
235 /** text 图形标注文本字体大小 */
236 annotationTextFontSize: 12,
237 /** text 图形标注文本行高 */
238 annotationTextLineHeight: 12,
239 /** text 图形标注文本字体粗细 */
240 annotationTextFontWeight: 'normal',
241 /** text 图形标注文本边框颜色 */
242 annotationTextBorderColor: null,
243 /** text 图形标注文本边框粗细 */
244 annotationTextBorder: 0,
245 /** region 图形标注填充颜色 */
246 annotationRegionFillColor: BLACK_COLORS[100],
247 /** region 图形标注填充颜色透明色 */
248 annotationRegionFillOpacity: 0.06,
249 /** region 图形标注描边粗细 */
250 annotationRegionBorder: 0,
251 /** region 图形标注描边颜色 */
252 annotationRegionBorderColor: null,
253 /** dataMarker 图形标注线的长度 */
254 annotationDataMarkerLineLength: 16,
255 // -------------------- Tooltip --------------------
256 /** tooltip crosshairs 辅助线颜色 */
257 tooltipCrosshairsBorderColor: BLACK_COLORS[25],
258 /** tooltip crosshairs 辅助线粗细 */
259 tooltipCrosshairsBorder: 1,
260 /** tooltip crosshairs 辅助线虚线间隔 */
261 tooltipCrosshairsLineDash: null,
262 /** tooltip 内容框背景色 */
263 tooltipContainerFillColor: 'rgb(255, 255, 255)',
264 tooltipContainerFillOpacity: 0.95,
265 /** tooltip 内容框阴影 */
266 tooltipContainerShadow: '0px 0px 10px #aeaeae',
267 /** tooltip 内容框圆角 */
268 tooltipContainerBorderRadius: 3,
269 /** tooltip 文本颜色 */
270 tooltipTextFillColor: BLACK_COLORS[65],
271 /** tooltip 文本字体大小 */
272 tooltipTextFontSize: 12,
273 /** tooltip 文本行高 */
274 tooltipTextLineHeight: 12,
275 /** tooltip 文本字体粗细 */
276 tooltipTextFontWeight: 'bold',
277 // -------------------- Geometry labels --------------------
278 /** Geometry label 文本颜色 */
279 labelFillColor: BLACK_COLORS[65],
280 labelFillColorDark: '#2c3542',
281 labelFillColorLight: '#ffffff',
282 /** Geometry label 文本字体大小 */
283 labelFontSize: 12,
284 /** Geometry label 文本行高 */
285 labelLineHeight: 12,
286 /** Geometry label 文本字体粗细 */
287 labelFontWeight: 'normal',
288 /** Geometry label 文本描边颜色 */
289 labelBorderColor: null,
290 /** Geometry label 文本描边粗细 */
291 labelBorder: 0,
292 /** Geometry innerLabel 文本颜色 */
293 innerLabelFillColor: WHITE_COLORS[100],
294 /** Geometry innerLabel 文本字体大小 */
295 innerLabelFontSize: 12,
296 /** Geometry innerLabel 文本行高 */
297 innerLabelLineHeight: 12,
298 /** Geometry innerLabel 文本字体粗细 */
299 innerLabelFontWeight: 'normal',
300 /** Geometry innerLabel 文本描边颜色 */
301 innerLabelBorderColor: null,
302 /** Geometry innerLabel 文本描边粗细 */
303 innerLabelBorder: 0,
304 /** Geometry overflowLabel 文本颜色 */
305 overflowLabelFillColor: BLACK_COLORS[65],
306 /** Geometry overflowLabel 文本字体大小 */
307 overflowLabelFontSize: 12,
308 /** Geometry overflowLabel 文本行高 */
309 overflowLabelLineHeight: 12,
310 /** Geometry overflowLabel 文本字体粗细 */
311 overflowLabelFontWeight: 'normal',
312 /** Geometry overflowLabel 文本描边颜色 */
313 overflowLabelBorderColor: WHITE_COLORS[100],
314 /** Geometry overflowLabel 文本描边粗细 */
315 overflowLabelBorder: 1,
316 /** Geometry label 文本连接线粗细 */
317 labelLineBorder: 1,
318 /** Geometry label 文本连接线颜色 */
319 labelLineBorderColor: BLACK_COLORS[25],
320 // -------------------- Slider 组件样式--------------------
321 /** slider 滑道高度 */
322 cSliderRailHieght: 16,
323 /** slider 滑道背景色 */
324 cSliderBackgroundFillColor: '#416180',
325 /** slider 滑道背景色透明度 */
326 cSliderBackgroundFillOpacity: 0.05,
327 /** slider 滑道前景色 */
328 cSliderForegroundFillColor: '#5B8FF9',
329 /** slider 滑道前景色透明度 */
330 cSliderForegroundFillOpacity: 0.15,
331 // slider handlerStyle 手柄样式
332 /** slider 手柄高度 */
333 cSliderHandlerHeight: 24,
334 /** Slider 手柄宽度 */
335 cSliderHandlerWidth: 10,
336 /** Slider 手柄背景色 */
337 cSliderHandlerFillColor: '#F7F7F7',
338 /** Slider 手柄背景色透明度 */
339 cSliderHandlerFillOpacity: 1,
340 /** Slider 手柄高亮背景色 */
341 cSliderHandlerHighlightFillColor: '#FFF',
342 /** Slider 手柄边框色 */
343 cSliderHandlerBorderColor: '#BFBFBF',
344 /** Slider 手柄边框粗细 */
345 cSliderHandlerBorder: 1,
346 /** Slider 手柄边框圆角 */
347 cSliderHandlerBorderRadius: 2,
348 // slider textStyle 字体标签样式
349 /** Slider 字体标签颜色 */
350 cSliderTextFillColor: '#000',
351 /** Slider 字体标签透明度 */
352 cSliderTextFillOpacity: 0.45,
353 /** Slider 字体标签大小 */
354 cSliderTextFontSize: 12,
355 /** Slider 字体标签行高 */
356 cSliderTextLineHeight: 12,
357 /** Slider 字体标签字重 */
358 cSliderTextFontWeight: 'normal',
359 /** Slider 字体标签描边色 */
360 cSliderTextBorderColor: null,
361 /** Slider 字体标签描边粗细 */
362 cSliderTextBorder: 0,
363 // -------------------- Scrollbar 组件样式--------------------
364 /** 滚动条 滚道填充色 */
365 scrollbarTrackFillColor: 'rgba(0,0,0,0)',
366 /** 滚动条 滑块填充色 */
367 scrollbarThumbFillColor: 'rgba(0,0,0,0.15)',
368 /** 滚动条 滑块高亮填充色 */
369 scrollbarThumbHighlightFillColor: 'rgba(0,0,0,0.2)',
370 // -------------------- Geometry 图形样式--------------------
371 /** 点图填充颜色 */
372 pointFillColor: brandColor,
373 /** 点图填充颜色透明度 */
374 pointFillOpacity: 0.95,
375 /** 点图大小 */
376 pointSize: 4,
377 /** 点图描边粗细 */
378 pointBorder: 1,
379 /** 点图描边颜色 */
380 pointBorderColor: WHITE_COLORS[100],
381 /** 点图描边透明度 */
382 pointBorderOpacity: 1,
383 /** 点图 active 状态下描边颜色 */
384 pointActiveBorderColor: BLACK_COLORS[100],
385 /** 点图 selected 状态下描边粗细 */
386 pointSelectedBorder: 2,
387 /** 点图 selected 状态下描边颜色 */
388 pointSelectedBorderColor: BLACK_COLORS[100],
389 /** 点图 inactive 状态下填充颜色透明度 */
390 pointInactiveFillOpacity: 0.3,
391 /** 点图 inactive 状态下描边透明度 */
392 pointInactiveBorderOpacity: 0.3,
393 /** 空心点图大小 */
394 hollowPointSize: 4,
395 /** 空心点图描边粗细 */
396 hollowPointBorder: 1,
397 /** 空心点图描边颜色 */
398 hollowPointBorderColor: brandColor,
399 /** 空心点图描边透明度 */
400 hollowPointBorderOpacity: 0.95,
401 hollowPointFillColor: WHITE_COLORS[100],
402 /** 空心点图 active 状态下描边粗细 */
403 hollowPointActiveBorder: 1,
404 /** 空心点图 active 状态下描边颜色 */
405 hollowPointActiveBorderColor: BLACK_COLORS[100],
406 /** 空心点图 active 状态下描边透明度 */
407 hollowPointActiveBorderOpacity: 1,
408 /** 空心点图 selected 状态下描边粗细 */
409 hollowPointSelectedBorder: 2,
410 /** 空心点图 selected 状态下描边颜色 */
411 hollowPointSelectedBorderColor: BLACK_COLORS[100],
412 /** 空心点图 selected 状态下描边透明度 */
413 hollowPointSelectedBorderOpacity: 1,
414 /** 空心点图 inactive 状态下描边透明度 */
415 hollowPointInactiveBorderOpacity: 0.3,
416 /** 线图粗细 */
417 lineBorder: 2,
418 /** 线图颜色 */
419 lineBorderColor: brandColor,
420 /** 线图透明度 */
421 lineBorderOpacity: 1,
422 /** 线图 Active 状态下粗细 */
423 lineActiveBorder: 3,
424 /** 线图 selected 状态下粗细 */
425 lineSelectedBorder: 3,
426 /** 线图 inactive 状态下透明度 */
427 lineInactiveBorderOpacity: 0.3,
428 /** area 填充颜色 */
429 areaFillColor: brandColor,
430 /** area 填充透明度 */
431 areaFillOpacity: 0.25,
432 /** area 在 active 状态下的填充透明度 */
433 areaActiveFillColor: brandColor,
434 areaActiveFillOpacity: 0.5,
435 /** area 在 selected 状态下的填充透明度 */
436 areaSelectedFillColor: brandColor,
437 areaSelectedFillOpacity: 0.5,
438 /** area inactive 状态下填充透明度 */
439 areaInactiveFillOpacity: 0.3,
440 /** hollowArea 颜色 */
441 hollowAreaBorderColor: brandColor,
442 /** hollowArea 边框粗细 */
443 hollowAreaBorder: 2,
444 /** hollowArea 边框透明度 */
445 hollowAreaBorderOpacity: 1,
446 /** hollowArea active 状态下的边框粗细 */
447 hollowAreaActiveBorder: 3,
448 hollowAreaActiveBorderColor: BLACK_COLORS[100],
449 /** hollowArea selected 状态下的边框粗细 */
450 hollowAreaSelectedBorder: 3,
451 hollowAreaSelectedBorderColor: BLACK_COLORS[100],
452 /** hollowArea inactive 状态下的边框透明度 */
453 hollowAreaInactiveBorderOpacity: 0.3,
454 /** interval 填充颜色 */
455 intervalFillColor: brandColor,
456 /** interval 填充透明度 */
457 intervalFillOpacity: 0.95,
458 /** interval active 状态下边框粗细 */
459 intervalActiveBorder: 1,
460 /** interval active 状态下边框颜色 */
461 intervalActiveBorderColor: BLACK_COLORS[100],
462 intervalActiveBorderOpacity: 1,
463 /** interval selected 状态下边框粗细 */
464 intervalSelectedBorder: 2,
465 /** interval selected 状态下边框颜色 */
466 intervalSelectedBorderColor: BLACK_COLORS[100],
467 /** interval selected 状态下边框透明度 */
468 intervalSelectedBorderOpacity: 1,
469 /** interval inactive 状态下边框透明度 */
470 intervalInactiveBorderOpacity: 0.3,
471 /** interval inactive 状态下填充透明度 */
472 intervalInactiveFillOpacity: 0.3,
473 /** interval 边框粗细 */
474 hollowIntervalBorder: 2,
475 /** hollowInterval 边框颜色 */
476 hollowIntervalBorderColor: brandColor,
477 /** hollowInterval 边框透明度 */
478 hollowIntervalBorderOpacity: 1,
479 hollowIntervalFillColor: WHITE_COLORS[100],
480 /** hollowInterval active 状态下边框粗细 */
481 hollowIntervalActiveBorder: 2,
482 /** hollowInterval active 状态下边框颜色 */
483 hollowIntervalActiveBorderColor: BLACK_COLORS[100],
484 /** hollowInterval selected 状态下边框粗细 */
485 hollowIntervalSelectedBorder: 3,
486 /** hollowInterval selected 状态下边框颜色 */
487 hollowIntervalSelectedBorderColor: BLACK_COLORS[100],
488 /** hollowInterval selected 状态下边框透明度 */
489 hollowIntervalSelectedBorderOpacity: 1,
490 /** hollowInterval inactive 状态下边框透明度 */
491 hollowIntervalInactiveBorderOpacity: 0.3,
492 };
493};
494exports.createLightStyleSheet = createLightStyleSheet;
495exports.antvLight = (0, exports.createLightStyleSheet)();
496//# sourceMappingURL=light.js.map
\No newline at end of file