UNPKG

20.9 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.antvDark = exports.createDarkStyleSheet = void 0;
4var WHITE_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 BLACK_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 '#E86452',
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 '#E86452',
46 '#F8D0CB',
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 createDarkStyleSheet = function (cfg) {
71 if (cfg === void 0) { cfg = {}; }
72 var _a = cfg.backgroundColor, backgroundColor = _a === void 0 ? '#141414' : _a, _b = cfg.subColor, subColor = _b === void 0 ? 'rgba(255,255,255,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: QUALITATIVE_10[0],
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 legendSpacing: 16,
175 /** 图例与图表绘图区域的偏移距离 */
176 legendPadding: [8, 8, 8, 8],
177 /** 水平布局的图例与绘图区域偏移距离 */
178 legendHorizontalPadding: [8, 0, 8, 0],
179 /** 垂直布局的图例与绘图区域偏移距离 */
180 legendVerticalPadding: [0, 8, 0, 8],
181 // 图例分页器
182 /** 图例分页器 marker 大小 */
183 legendPageNavigatorMarkerSize: 12,
184 /** 图例分页器 marker 填充色 */
185 legendPageNavigatorMarkerInactiveFillColor: BLACK_COLORS[45],
186 /** 图例分页器 marker 填充色透明度 */
187 legendPageNavigatorMarkerInactiveFillOpacity: 0.45,
188 /** 图例分页器 marker 激活状态填充色 */
189 legendPageNavigatorMarkerFillColor: BLACK_COLORS[45],
190 /** 图例分页器 marker 激活状态填充色透明度 */
191 legendPageNavigatorMarkerFillOpacity: 1,
192 /** 图例分页器文本颜色 */
193 legendPageNavigatorTextFillColor: BLACK_COLORS[65],
194 /** 图例分页器文本字体大小 */
195 legendPageNavigatorTextFontSize: 12,
196 /** 连续图例滑块填充色 */
197 sliderRailFillColor: BLACK_COLORS[15],
198 /** 连续图例滑块边框粗细 */
199 sliderRailBorder: 0,
200 /** 连续图例滑块边框颜色 */
201 sliderRailBorderColor: null,
202 /** 连续图例滑块宽度 */
203 sliderRailWidth: 100,
204 /** 连续图例滑块高度 */
205 sliderRailHeight: 12,
206 /** 连续图例文本颜色 */
207 sliderLabelTextFillColor: BLACK_COLORS[45],
208 /** 连续图例文本字体大小 */
209 sliderLabelTextFontSize: 12,
210 /** 连续图例文本行高 */
211 sliderLabelTextLineHeight: 12,
212 /** 连续图例文本字体粗细 */
213 sliderLabelTextFontWeight: 'normal',
214 /** 连续图例滑块颜色 */
215 sliderHandlerFillColor: WHITE_COLORS[6],
216 /** 连续图例滑块宽度 */
217 sliderHandlerWidth: 10,
218 /** 连续图例滑块高度 */
219 sliderHandlerHeight: 14,
220 /** 连续图例滑块边框粗细 */
221 sliderHandlerBorder: 1,
222 /** 连续图例滑块边框颜色 */
223 sliderHandlerBorderColor: WHITE_COLORS[25],
224 // -------------------- Annotation,图形标注 --------------------
225 /** arc 图形标注描边颜色 */
226 annotationArcBorderColor: BLACK_COLORS[15],
227 /** arc 图形标注粗细 */
228 annotationArcBorder: 1,
229 /** line 图形标注颜色 */
230 annotationLineBorderColor: BLACK_COLORS[25],
231 /** line 图形标注粗细 */
232 annotationLineBorder: 1,
233 /** lube 图形标注的虚线间隔 */
234 annotationLineDash: null,
235 /** text 图形标注文本颜色 */
236 annotationTextFillColor: BLACK_COLORS[65],
237 /** text 图形标注文本字体大小 */
238 annotationTextFontSize: 12,
239 /** text 图形标注文本行高 */
240 annotationTextLineHeight: 12,
241 /** text 图形标注文本字体粗细 */
242 annotationTextFontWeight: 'normal',
243 /** text 图形标注文本边框颜色 */
244 annotationTextBorderColor: null,
245 /** text 图形标注文本边框粗细 */
246 annotationTextBorder: 0,
247 /** region 图形标注填充颜色 */
248 annotationRegionFillColor: BLACK_COLORS[100],
249 /** region 图形标注填充颜色透明色 */
250 annotationRegionFillOpacity: 0.06,
251 /** region 图形标注描边粗细 */
252 annotationRegionBorder: 0,
253 /** region 图形标注描边颜色 */
254 annotationRegionBorderColor: null,
255 /** dataMarker 图形标注线的长度 */
256 annotationDataMarkerLineLength: 16,
257 // -------------------- Tooltip --------------------
258 /** tooltip crosshairs 辅助线颜色 */
259 tooltipCrosshairsBorderColor: BLACK_COLORS[25],
260 /** tooltip crosshairs 辅助线粗细 */
261 tooltipCrosshairsBorder: 1,
262 /** tooltip crosshairs 辅助线虚线间隔 */
263 tooltipCrosshairsLineDash: null,
264 /** tooltip 内容框背景色 */
265 tooltipContainerFillColor: '#1f1f1f',
266 tooltipContainerFillOpacity: 0.95,
267 /** tooltip 内容框阴影 */
268 tooltipContainerShadow: '0px 2px 4px rgba(0,0,0,.5)',
269 /** tooltip 内容框圆角 */
270 tooltipContainerBorderRadius: 3,
271 /** tooltip 文本颜色 */
272 tooltipTextFillColor: BLACK_COLORS[65],
273 /** tooltip 文本字体大小 */
274 tooltipTextFontSize: 12,
275 /** tooltip 文本行高 */
276 tooltipTextLineHeight: 12,
277 /** tooltip 文本字体粗细 */
278 tooltipTextFontWeight: 'bold',
279 // -------------------- Geometry labels --------------------
280 /** Geometry label 文本颜色 */
281 labelFillColor: BLACK_COLORS[65],
282 labelFillColorDark: '#2c3542',
283 labelFillColorLight: '#ffffff',
284 /** Geometry label 文本字体大小 */
285 labelFontSize: 12,
286 /** Geometry label 文本行高 */
287 labelLineHeight: 12,
288 /** Geometry label 文本字体粗细 */
289 labelFontWeight: 'normal',
290 /** Geometry label 文本描边颜色 */
291 labelBorderColor: null,
292 /** Geometry label 文本描边粗细 */
293 labelBorder: 0,
294 /** Geometry innerLabel 文本颜色 */
295 innerLabelFillColor: WHITE_COLORS[100],
296 /** Geometry innerLabel 文本字体大小 */
297 innerLabelFontSize: 12,
298 /** Geometry innerLabel 文本行高 */
299 innerLabelLineHeight: 12,
300 /** Geometry innerLabel 文本字体粗细 */
301 innerLabelFontWeight: 'normal',
302 /** Geometry innerLabel 文本描边颜色 */
303 innerLabelBorderColor: null,
304 /** Geometry innerLabel 文本描边粗细 */
305 innerLabelBorder: 0,
306 /** Geometry label 文本颜色 */
307 overflowLabelFillColor: BLACK_COLORS[65],
308 overflowLabelFillColorDark: '#2c3542',
309 overflowLabelFillColorLight: '#ffffff',
310 /** Geometry label 文本字体大小 */
311 overflowLabelFontSize: 12,
312 /** Geometry label 文本行高 */
313 overflowLabelLineHeight: 12,
314 /** Geometry label 文本字体粗细 */
315 overflowLabelFontWeight: 'normal',
316 /** Geometry label 文本描边颜色 */
317 overflowLabelBorderColor: WHITE_COLORS[100],
318 /** Geometry label 文本描边粗细 */
319 overflowLabelBorder: 1,
320 /** Geometry label 文本连接线粗细 */
321 labelLineBorder: 1,
322 /** Geometry label 文本连接线颜色 */
323 labelLineBorderColor: BLACK_COLORS[25],
324 // -------------------- Slider 组件样式--------------------
325 /** slider 滑道高度 */
326 cSliderRailHieght: 16,
327 /** slider 滑道背景色 */
328 cSliderBackgroundFillColor: '#416180',
329 /** slider 滑道背景色透明度 */
330 cSliderBackgroundFillOpacity: 0.05,
331 /** slider 滑道前景色 */
332 cSliderForegroundFillColor: '#5B8FF9',
333 /** slider 滑道前景色透明度 */
334 cSliderForegroundFillOpacity: 0.15,
335 // slider handlerStyle 手柄样式
336 /** slider 手柄高度 */
337 cSliderHandlerHeight: 24,
338 /** Slider 手柄宽度 */
339 cSliderHandlerWidth: 10,
340 /** Slider 手柄背景色 */
341 cSliderHandlerFillColor: '#F7F7F7',
342 /** Slider 手柄背景色透明度 */
343 cSliderHandlerFillOpacity: 1,
344 /** Slider 手柄高亮背景色 */
345 cSliderHandlerHighlightFillColor: '#FFF',
346 /** Slider 手柄边框色 */
347 cSliderHandlerBorderColor: '#BFBFBF',
348 /** Slider 手柄边框粗细 */
349 cSliderHandlerBorder: 1,
350 /** Slider 手柄边框圆角 */
351 cSliderHandlerBorderRadius: 2,
352 // slider textStyle 字体标签样式
353 /** Slider 字体标签颜色 */
354 cSliderTextFillColor: '#fff',
355 /** Slider 字体标签透明度 */
356 cSliderTextFillOpacity: 0.45,
357 /** Slider 字体标签大小 */
358 cSliderTextFontSize: 12,
359 /** Slider 字体标签行高 */
360 cSliderTextLineHeight: 12,
361 /** Slider 字体标签字重 */
362 cSliderTextFontWeight: 'normal',
363 /** Slider 字体标签描边色 */
364 cSliderTextBorderColor: null,
365 /** Slider 字体标签描边粗细 */
366 cSliderTextBorder: 0,
367 // -------------------- Scrollbar 组件样式--------------------
368 /** 滚动条 滚道填充色 */
369 scrollbarTrackFillColor: 'rgba(255,255,255,0.65)',
370 /** 滚动条 滑块填充色 */
371 scrollbarThumbFillColor: 'rgba(0,0,0,0.35)',
372 /** 滚动条 滑块高亮填充色 */
373 scrollbarThumbHighlightFillColor: 'rgba(0,0,0,0.45)',
374 // -------------------- Geometry 图形样式--------------------
375 /** 点图填充颜色 */
376 pointFillColor: QUALITATIVE_10[0],
377 /** 点图填充颜色透明度 */
378 pointFillOpacity: 0.95,
379 /** 点图大小 */
380 pointSize: 4,
381 /** 点图描边粗细 */
382 pointBorder: 1,
383 /** 点图描边颜色 */
384 pointBorderColor: WHITE_COLORS[100],
385 /** 点图描边透明度 */
386 pointBorderOpacity: 1,
387 /** 点图 active 状态下描边颜色 */
388 pointActiveBorderColor: BLACK_COLORS[100],
389 /** 点图 selected 状态下描边粗细 */
390 pointSelectedBorder: 2,
391 /** 点图 selected 状态下描边颜色 */
392 pointSelectedBorderColor: BLACK_COLORS[100],
393 /** 点图 inactive 状态下填充颜色透明度 */
394 pointInactiveFillOpacity: 0.3,
395 /** 点图 inactive 状态下描边透明度 */
396 pointInactiveBorderOpacity: 0.3,
397 /** 空心点图大小 */
398 hollowPointSize: 4,
399 /** 空心点图描边粗细 */
400 hollowPointBorder: 1,
401 /** 空心点图描边颜色 */
402 hollowPointBorderColor: QUALITATIVE_10[0],
403 /** 空心点图描边透明度 */
404 hollowPointBorderOpacity: 0.95,
405 hollowPointFillColor: WHITE_COLORS[100],
406 /** 空心点图 active 状态下描边粗细 */
407 hollowPointActiveBorder: 1,
408 /** 空心点图 active 状态下描边颜色 */
409 hollowPointActiveBorderColor: BLACK_COLORS[100],
410 /** 空心点图 active 状态下描边透明度 */
411 hollowPointActiveBorderOpacity: 1,
412 /** 空心点图 selected 状态下描边粗细 */
413 hollowPointSelectedBorder: 2,
414 /** 空心点图 selected 状态下描边颜色 */
415 hollowPointSelectedBorderColor: BLACK_COLORS[100],
416 /** 空心点图 selected 状态下描边透明度 */
417 hollowPointSelectedBorderOpacity: 1,
418 /** 空心点图 inactive 状态下描边透明度 */
419 hollowPointInactiveBorderOpacity: 0.3,
420 /** 线图粗细 */
421 lineBorder: 2,
422 /** 线图颜色 */
423 lineBorderColor: QUALITATIVE_10[0],
424 /** 线图透明度 */
425 lineBorderOpacity: 1,
426 /** 线图 Active 状态下粗细 */
427 lineActiveBorder: 3,
428 /** 线图 selected 状态下粗细 */
429 lineSelectedBorder: 3,
430 /** 线图 inactive 状态下透明度 */
431 lineInactiveBorderOpacity: 0.3,
432 /** area 填充颜色 */
433 areaFillColor: QUALITATIVE_10[0],
434 /** area 填充透明度 */
435 areaFillOpacity: 0.25,
436 /** area 在 active 状态下的填充透明度 */
437 areaActiveFillColor: QUALITATIVE_10[0],
438 areaActiveFillOpacity: 0.5,
439 /** area 在 selected 状态下的填充透明度 */
440 areaSelectedFillColor: QUALITATIVE_10[0],
441 areaSelectedFillOpacity: 0.5,
442 /** area inactive 状态下填充透明度 */
443 areaInactiveFillOpacity: 0.3,
444 /** hollowArea 颜色 */
445 hollowAreaBorderColor: QUALITATIVE_10[0],
446 /** hollowArea 边框粗细 */
447 hollowAreaBorder: 2,
448 /** hollowArea 边框透明度 */
449 hollowAreaBorderOpacity: 1,
450 /** hollowArea active 状态下的边框粗细 */
451 hollowAreaActiveBorder: 3,
452 hollowAreaActiveBorderColor: BLACK_COLORS[100],
453 /** hollowArea selected 状态下的边框粗细 */
454 hollowAreaSelectedBorder: 3,
455 hollowAreaSelectedBorderColor: BLACK_COLORS[100],
456 /** hollowArea inactive 状态下的边框透明度 */
457 hollowAreaInactiveBorderOpacity: 0.3,
458 /** interval 填充颜色 */
459 intervalFillColor: QUALITATIVE_10[0],
460 /** interval 填充透明度 */
461 intervalFillOpacity: 0.95,
462 /** interval active 状态下边框粗细 */
463 intervalActiveBorder: 1,
464 /** interval active 状态下边框颜色 */
465 intervalActiveBorderColor: BLACK_COLORS[100],
466 intervalActiveBorderOpacity: 1,
467 /** interval selected 状态下边框粗细 */
468 intervalSelectedBorder: 2,
469 /** interval selected 状态下边框颜色 */
470 intervalSelectedBorderColor: BLACK_COLORS[100],
471 /** interval selected 状态下边框透明度 */
472 intervalSelectedBorderOpacity: 1,
473 /** interval inactive 状态下边框透明度 */
474 intervalInactiveBorderOpacity: 0.3,
475 /** interval inactive 状态下填充透明度 */
476 intervalInactiveFillOpacity: 0.3,
477 /** interval 边框粗细 */
478 hollowIntervalBorder: 2,
479 /** hollowInterval 边框颜色 */
480 hollowIntervalBorderColor: QUALITATIVE_10[0],
481 /** hollowInterval 边框透明度 */
482 hollowIntervalBorderOpacity: 1,
483 hollowIntervalFillColor: WHITE_COLORS[100],
484 /** hollowInterval active 状态下边框粗细 */
485 hollowIntervalActiveBorder: 2,
486 /** hollowInterval active 状态下边框颜色 */
487 hollowIntervalActiveBorderColor: BLACK_COLORS[100],
488 /** hollowInterval selected 状态下边框粗细 */
489 hollowIntervalSelectedBorder: 3,
490 /** hollowInterval selected 状态下边框颜色 */
491 hollowIntervalSelectedBorderColor: BLACK_COLORS[100],
492 /** hollowInterval selected 状态下边框透明度 */
493 hollowIntervalSelectedBorderOpacity: 1,
494 /** hollowInterval inactive 状态下边框透明度 */
495 hollowIntervalInactiveBorderOpacity: 0.3,
496 };
497};
498exports.createDarkStyleSheet = createDarkStyleSheet;
499exports.antvDark = (0, exports.createDarkStyleSheet)();
500//# sourceMappingURL=dark.js.map
\No newline at end of file