From 7a799ec8f99a6a0d93863937322fa5344b179b35 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Thu, 21 Sep 2023 16:23:55 +0800 Subject: [PATCH] refactor(theme): add some tokens for the light theme (#5580) --- src/theme/classic.ts | 449 +----------------------------------- src/theme/create.ts | 439 ++++++++++++++++++++++++++++++++++++ src/theme/light.ts | 526 +++++-------------------------------------- 3 files changed, 503 insertions(+), 911 deletions(-) create mode 100644 src/theme/create.ts diff --git a/src/theme/classic.ts b/src/theme/classic.ts index 0324418356..cefb99a70b 100644 --- a/src/theme/classic.ts +++ b/src/theme/classic.ts @@ -1,449 +1,22 @@ +import { deepMix } from '@antv/util'; import { ThemeComponent as TC, Theme } from '../runtime'; +import { Light } from './light'; export type ClassicOptions = Theme; -const COLORS = { - BLACK: '#1D2129', - WHITE: '#fff', - STROKE: '#416180', - DEFAULT: '#5B8FF9', - BACKGROUND: 'transparent', -}; - -const PADDING = { - 1: 8, - 2: 12, - 3: 20, -}; - -const ALPHA = { - 90: 0.9, - 65: 0.65, - 45: 0.45, - 25: 0.25, - 10: 0.1, -}; - /** * Default theme. */ export const Classic: TC = (options) => { - const defaultOptions: Theme = { - padding: 'auto', - margin: 16, - color: COLORS.DEFAULT, - size: 1, - category10: 'category10', - category20: 'category20', - enter: { - duration: 300, - fill: 'both', - delay: 0, - }, - update: { - duration: 300, - fill: 'both', - delay: 0, - }, - exit: { - duration: 300, - fill: 'both', - delay: 0, - }, - view: { - viewFill: COLORS.BACKGROUND, - plotFill: 'transparent', - mainFill: 'transparent', - contentFill: 'transparent', - }, - line: { - line: { - fill: '', - strokeOpacity: 1, - lineWidth: 1, - }, - }, - point: { - point: { - r: 3, - fillOpacity: 0.95, - lineWidth: 0, - }, - hollow: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 1, - }, - plus: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 3, - }, - diamond: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 1, - }, - }, - interval: { - rect: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - area: { - area: { - fillOpacity: 0.85, - lineWidth: 0, - }, - }, - polygon: { - polygon: { - fillOpacity: 0.95, - }, - }, - cell: { - cell: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - rect: { - rect: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - link: { - link: { - fill: '', - strokeOpacity: 1, - }, - }, - vector: { - vector: { - fillOpacity: 1, - }, - }, - box: { - box: { - fillOpacity: 0.95, - stroke: COLORS.BLACK, - lineWidth: 1, - }, - }, - text: { - text: { - fill: '#1D2129', - fontSize: 12, - strokeWidth: 0, - connectorStroke: COLORS.STROKE, - connectorStrokeOpacity: 0.45, - connectorLineWidth: 1, - backgroundFill: COLORS.STROKE, - backgroundFillOpacity: 0.15, - backgroundPadding: [2, 4], - startMarkerSymbol: 'circle', - startMarkerSize: 4, - endMarkerSymbol: 'circle', - endMarkerSize: 4, - }, - badge: { - fill: '#1D2129', - fillOpacity: 0.65, - strokeWidth: 0, - fontSize: 10, - textAlign: 'center', - textBaseline: 'middle', - markerFill: COLORS.STROKE, - markerFillOpacity: 0.25, - markerStrokeOpacity: 0, - }, - }, - lineX: { - line: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - }, - }, - lineY: { - line: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - }, - }, - rangeX: { - range: { - fill: COLORS.STROKE, - fillOpacity: 0.15, - lineWidth: 0, - }, - }, - rangeY: { - range: { - fill: COLORS.STROKE, - fillOpacity: 0.15, - lineWidth: 0, - }, - }, - connector: { - connector: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - connectLength1: 12, - endMarker: true, - endMarkerSize: 6, - endMarkerFill: COLORS.STROKE, - endMarkerFillOpacity: 0.95, - }, - }, - axis: { - arrow: false, - gridLineDash: [3, 4], - gridLineWidth: 0.5, - gridStroke: COLORS.BLACK, - gridStrokeOpacity: ALPHA[10], - labelAlign: 'horizontal', - labelFill: COLORS.BLACK, - labelOpacity: ALPHA[45], - labelFontSize: 12, - labelFontWeight: 'normal', - labelSpacing: PADDING[1], // spacing between label and it's tick - line: false, - lineLineWidth: 0.5, - lineStroke: COLORS.BLACK, - lineStrokeOpacity: ALPHA[45], - tickLength: 4, - tickLineWidth: 1, - tickStroke: COLORS.BLACK, - tickOpacity: ALPHA[45], - titleFill: COLORS.BLACK, - titleOpacity: ALPHA[90], - titleFontSize: 12, - titleFontWeight: 'normal', - titleSpacing: 12, - titleTransformOrigin: 'center', - lineArrowOffset: 6, - lineArrowSize: 6, - }, - axisTop: { - gridDirection: 'positive', - labelDirection: 'negative', - tickDirection: 'negative', - titlePosition: 'top', - titleSpacing: 12, - titleTextBaseline: 'middle', - }, - axisBottom: { - gridDirection: 'negative', - labelDirection: 'positive', - labelAutoRotate: true, - tickDirection: 'positive', - titlePosition: 'bottom', - titleSpacing: 12, - titleTextBaseline: 'bottom', - }, - axisLeft: { - gridDirection: 'positive', - labelAutoRotate: false, - labelDirection: 'negative', - labelSpacing: 4, - tickDirection: 'negative', - titlePosition: 'left', - titleSpacing: 12, - titleTextBaseline: 'middle', - titleDirection: 'vertical', - titleTransformOrigin: 'center', - }, - axisRight: { - gridDirection: 'negative', - labelDirection: 'positive', - labelSpacing: 4, - tickDirection: 'positive', - titlePosition: 'right', - labelAutoRotate: false, - titleSpacing: 12, - titleTextBaseline: 'top', - titleDirection: 'vertical', - titleTransformOrigin: 'center', - }, - axisLinear: { - girdClosed: true, - gridConnect: 'arc', - gridDirection: 'negative', - gridType: 'surround', - titlePosition: 'top', - titleSpacing: 0, - }, - axisArc: { - title: false, - titlePosition: 'inner', - line: false, - tick: true, - labelSpacing: 4, - }, - axisRadar: { - girdClosed: true, - gridStrokeOpacity: 0.3, - gridType: 'surround', - label: false, - tick: false, - titlePosition: 'start', - }, - legendCategory: { - backgroundFill: 'transparent', - itemBackgroundFill: 'transparent', - itemLabelFill: COLORS.BLACK, - itemLabelFillOpacity: ALPHA[90], - itemLabelFontSize: 12, - itemLabelFontWeight: 'normal', - itemMarkerFillOpacity: 1, - itemMarkerSize: 8, - itemSpacing: [PADDING[1], PADDING[1]], - itemValueFill: COLORS.BLACK, - itemValueFillOpacity: 0.65, - itemValueFontSize: 12, - itemValueFontWeight: 'normal', - navButtonFill: COLORS.BLACK, - navButtonFillOpacity: 0.65, - navPageNumFill: COLORS.BLACK, - navPageNumFillOpacity: 0.45, - navPageNumFontSize: 12, - padding: 8, - title: false, - titleFill: COLORS.BLACK, - titleFillOpacity: 0.65, - titleFontSize: 12, - titleFontWeight: 'normal', - titleSpacing: 4, - tickStroke: COLORS.BLACK, - tickStrokeOpacity: 0.25, - rowPadding: PADDING[1], - colPadding: PADDING[2], - maxRows: 3, - maxCols: 3, - }, - legendContinuous: { - handleHeight: 12, - handleLabelFill: COLORS.BLACK, - handleLabelFillOpacity: ALPHA[45], - handleLabelFontSize: 12, - handleLabelFontWeight: 'normal', - handleMarkerFill: COLORS.BLACK, - handleMarkerFillOpacity: 0.6, - handleMarkerLineWidth: 1, - handleMarkerStroke: COLORS.BLACK, - handleMarkerStrokeOpacity: 0.25, - handleWidth: 10, - labelFill: COLORS.BLACK, - labelFillOpacity: ALPHA[45], - labelFontSize: 12, - labelFontWeight: 'normal', - labelSpacing: 3, - tick: true, - tickLength: 12, - ribbonSize: 12, - ribbonFill: '#aaa', - handle: true, - handleLabel: false, - handleShape: 'slider', - handleIconSize: 12 / 1.8, - indicator: false, - titleFontSize: 12, - titleSpacing: 4, - titleFontWeight: 'normal', - titleFillOpacity: ALPHA[90], - tickStroke: COLORS.BLACK, - tickStrokeOpacity: ALPHA[45], - }, - label: { - fill: COLORS.BLACK, - fillOpacity: 0.65, - fontSize: 12, - fontWeight: 'normal', - stroke: undefined, - offset: 12, - connectorStroke: COLORS.BLACK, - connectorStrokeOpacity: 0.45, - connectorLineWidth: 1, - connectorLength: 12, - connectorLength2: 8, - connectorDistance: 4, - }, - innerLabel: { - fill: COLORS.WHITE, - fontSize: 12, - fillOpacity: 0.85, - fontWeight: 'normal', - stroke: undefined, - offset: 0, - }, - htmlLabel: { - fontSize: 12, - opacity: 0.65, - color: COLORS.BLACK, - fontWeight: 'normal', - }, - slider: { - trackSize: 16, - trackFill: COLORS.STROKE, - trackFillOpacity: 1, - selectionFill: COLORS.DEFAULT, - selectionFillOpacity: 0.15, - handleIconSize: 10, - handleIconFill: '#f7f7f7', - handleIconFillOpacity: 1, - handleIconStroke: COLORS.BLACK, - handleIconStrokeOpacity: 0.25, - handleIconLineWidth: 1, - handleIconRadius: 2, - handleLabelFill: COLORS.BLACK, - handleLabelFillOpacity: 0.45, - handleLabelFontSize: 12, - handleLabelFontWeight: 'normal', - }, - scrollbar: { - padding: [0, 0, 0, 0], - trackSize: 6, - isRound: true, - slidable: true, - scrollable: true, - trackFill: '#e5e5e5', - trackFillOpacity: 0, - thumbFill: '#000', - thumbFillOpacity: 0.15, - thumbHighlightedFillOpacity: 0.2, - }, - title: { - spacing: 8, - titleFill: COLORS.BLACK, - titleFillOpacity: ALPHA[90], - titleFontSize: 16, - titleFontWeight: 'bold', - titleTextBaseline: 'top', - subtitleFill: COLORS.BLACK, - subtitleFillOpacity: ALPHA[65], - subtitleFontSize: 12, - subtitleFontWeight: 'normal', - subtitleTextBaseline: 'top', - }, - }; - return Object.assign({}, defaultOptions, options); + return deepMix( + {}, + Light(), + { + category10: 'category10', + category20: 'category20', + }, + options, + ); }; Classic.props = {}; diff --git a/src/theme/create.ts b/src/theme/create.ts new file mode 100644 index 0000000000..8f73e8808c --- /dev/null +++ b/src/theme/create.ts @@ -0,0 +1,439 @@ +export function create({ + colorDefault, + colorBlack, + colorWhite, + colorStroke, + colorBackground, + padding1, + padding2, + padding3, + alpha90, + alpha65, + alpha45, + alpha25, + alpha10, + category10, + category20, + sizeDefault = 1, + padding = 'auto', + margin = 16, +}) { + return { + padding, + margin, + size: sizeDefault, + color: colorDefault, + category10, + category20, + enter: { + duration: 300, + fill: 'both', + delay: 0, + }, + update: { + duration: 300, + fill: 'both', + delay: 0, + }, + exit: { + duration: 300, + fill: 'both', + delay: 0, + }, + view: { + viewFill: colorBackground, + plotFill: 'transparent', + mainFill: 'transparent', + contentFill: 'transparent', + }, + line: { + line: { + fill: '', + strokeOpacity: 1, + lineWidth: 1, + }, + }, + point: { + point: { + r: 3, + fillOpacity: 0.95, + lineWidth: 0, + }, + hollow: { + r: 3, + strokeOpacity: 0.95, + lineWidth: 1, + }, + plus: { + r: 3, + strokeOpacity: 0.95, + lineWidth: 3, + }, + diamond: { + r: 3, + strokeOpacity: 0.95, + lineWidth: 1, + }, + }, + interval: { + rect: { + fillOpacity: 0.95, + }, + hollow: { + fill: '', + strokeOpacity: 1, + lineWidth: 2, + }, + }, + area: { + area: { + fillOpacity: 0.85, + lineWidth: 0, + }, + }, + polygon: { + polygon: { + fillOpacity: 0.95, + }, + }, + cell: { + cell: { + fillOpacity: 0.95, + }, + hollow: { + fill: '', + strokeOpacity: 1, + lineWidth: 2, + }, + }, + rect: { + rect: { + fillOpacity: 0.95, + }, + hollow: { + fill: '', + strokeOpacity: 1, + lineWidth: 2, + }, + }, + link: { + link: { + fill: '', + strokeOpacity: 1, + }, + }, + vector: { + vector: { + fillOpacity: 1, + }, + }, + box: { + box: { + fillOpacity: 0.95, + stroke: colorBlack, + lineWidth: 1, + }, + }, + text: { + text: { + fill: '#1D2129', + fontSize: 12, + strokeWidth: 0, + connectorStroke: colorStroke, + connectorStrokeOpacity: 0.45, + connectorLineWidth: 1, + backgroundFill: colorStroke, + backgroundFillOpacity: 0.15, + backgroundPadding: [2, 4], + startMarkerSymbol: 'circle', + startMarkerSize: 4, + endMarkerSymbol: 'circle', + endMarkerSize: 4, + }, + badge: { + fill: '#1D2129', + fillOpacity: 0.65, + strokeWidth: 0, + fontSize: 10, + textAlign: 'center', + textBaseline: 'middle', + markerFill: colorStroke, + markerFillOpacity: 0.25, + markerStrokeOpacity: 0, + }, + }, + lineX: { + line: { + stroke: colorStroke, + strokeOpacity: 0.45, + lineWidth: 1, + }, + }, + lineY: { + line: { + stroke: colorStroke, + strokeOpacity: 0.45, + lineWidth: 1, + }, + }, + rangeX: { + range: { + fill: colorStroke, + fillOpacity: 0.15, + lineWidth: 0, + }, + }, + rangeY: { + range: { + fill: colorStroke, + fillOpacity: 0.15, + lineWidth: 0, + }, + }, + connector: { + connector: { + stroke: colorStroke, + strokeOpacity: 0.45, + lineWidth: 1, + connectLength1: 12, + endMarker: true, + endMarkerSize: 6, + endMarkerFill: colorStroke, + endMarkerFillOpacity: 0.95, + }, + }, + axis: { + arrow: false, + gridLineDash: [3, 4], + gridLineWidth: 0.5, + gridStroke: colorBlack, + gridStrokeOpacity: alpha10, + labelAlign: 'horizontal', + labelFill: colorBlack, + labelOpacity: alpha45, + labelFontSize: 12, + labelFontWeight: 'normal', + labelSpacing: padding1, // spacing between label and it's tick + line: false, + lineLineWidth: 0.5, + lineStroke: colorBlack, + lineStrokeOpacity: alpha45, + tickLength: 4, + tickLineWidth: 1, + tickStroke: colorBlack, + tickOpacity: alpha45, + titleFill: colorBlack, + titleOpacity: alpha90, + titleFontSize: 12, + titleFontWeight: 'normal', + titleSpacing: 12, + titleTransformOrigin: 'center', + lineArrowOffset: 6, + lineArrowSize: 6, + }, + axisTop: { + gridDirection: 'positive', + labelDirection: 'negative', + tickDirection: 'negative', + titlePosition: 'top', + labelAutoRotate: false, + titleSpacing: 12, + labelSpacing: 4, + titleTextBaseline: 'middle', + }, + axisBottom: { + gridDirection: 'negative', + labelDirection: 'positive', + labelAutoRotate: false, + tickDirection: 'positive', + titlePosition: 'bottom', + titleSpacing: 12, + labelSpacing: 4, + titleTextBaseline: 'bottom', + }, + axisLeft: { + gridDirection: 'positive', + labelAutoRotate: false, + labelDirection: 'negative', + labelSpacing: 4, + tickDirection: 'negative', + titlePosition: 'left', + titleSpacing: 12, + titleTextBaseline: 'middle', + titleDirection: 'vertical', + titleTransformOrigin: 'center', + }, + axisRight: { + gridDirection: 'negative', + labelDirection: 'positive', + labelSpacing: 4, + tickDirection: 'positive', + titlePosition: 'right', + labelAutoRotate: false, + titleSpacing: 12, + titleTextBaseline: 'top', + titleDirection: 'vertical', + titleTransformOrigin: 'center', + }, + axisLinear: { + girdClosed: true, + gridConnect: 'arc', + gridDirection: 'negative', + gridType: 'surround', + titlePosition: 'top', + titleSpacing: 0, + }, + axisArc: { + title: false, + titlePosition: 'inner', + line: false, + tick: true, + labelSpacing: 4, + }, + axisRadar: { + girdClosed: true, + gridStrokeOpacity: 0.3, + gridType: 'surround', + label: false, + tick: false, + titlePosition: 'start', + }, + legendCategory: { + backgroundFill: 'transparent', + itemBackgroundFill: 'transparent', + itemLabelFill: colorBlack, + itemLabelFillOpacity: alpha90, + itemLabelFontSize: 12, + itemLabelFontWeight: 'normal', + itemMarkerFillOpacity: 1, + itemMarkerSize: 8, + itemSpacing: [padding1, padding1], + itemValueFill: colorBlack, + itemValueFillOpacity: 0.65, + itemValueFontSize: 12, + itemValueFontWeight: 'normal', + navButtonFill: colorBlack, + navButtonFillOpacity: 0.65, + navPageNumFill: colorBlack, + navPageNumFillOpacity: 0.45, + navPageNumFontSize: 12, + padding: 8, + title: false, + titleFill: colorBlack, + titleFillOpacity: 0.65, + titleFontSize: 12, + titleFontWeight: 'normal', + titleSpacing: 4, + tickStroke: colorBlack, + tickStrokeOpacity: 0.25, + rowPadding: padding1, + colPadding: padding2, + maxRows: 3, + maxCols: 3, + }, + legendContinuous: { + handleHeight: 12, + handleLabelFill: colorBlack, + handleLabelFillOpacity: alpha45, + handleLabelFontSize: 12, + handleLabelFontWeight: 'normal', + handleMarkerFill: colorBlack, + handleMarkerFillOpacity: 0.6, + handleMarkerLineWidth: 1, + handleMarkerStroke: colorBlack, + handleMarkerStrokeOpacity: 0.25, + handleWidth: 10, + labelFill: colorBlack, + labelFillOpacity: alpha45, + labelFontSize: 12, + labelFontWeight: 'normal', + labelSpacing: 3, + tick: true, + tickLength: 12, + ribbonSize: 12, + ribbonFill: '#aaa', + handle: true, + handleLabel: false, + handleShape: 'slider', + handleIconSize: 12 / 1.8, + indicator: false, + titleFontSize: 12, + titleSpacing: 4, + titleFontWeight: 'normal', + titleFillOpacity: alpha90, + tickStroke: colorBlack, + tickStrokeOpacity: alpha45, + }, + label: { + fill: colorBlack, + fillOpacity: 0.65, + fontSize: 12, + fontWeight: 'normal', + stroke: undefined, + offset: 12, + connectorStroke: colorBlack, + connectorStrokeOpacity: 0.45, + connectorLineWidth: 1, + connectorLength: 12, + connectorLength2: 8, + connectorDistance: 4, + }, + innerLabel: { + fill: colorWhite, + fontSize: 12, + fillOpacity: 0.85, + fontWeight: 'normal', + stroke: undefined, + offset: 0, + }, + htmlLabel: { + fontSize: 12, + opacity: 0.65, + color: colorBlack, + fontWeight: 'normal', + }, + slider: { + trackSize: 16, + trackFill: colorStroke, + trackFillOpacity: 1, + selectionFill: colorDefault, + selectionFillOpacity: 0.15, + handleIconSize: 10, + handleIconFill: '#f7f7f7', + handleIconFillOpacity: 1, + handleIconStroke: colorBlack, + handleIconStrokeOpacity: 0.25, + handleIconLineWidth: 1, + handleIconRadius: 2, + handleLabelFill: colorBlack, + handleLabelFillOpacity: 0.45, + handleLabelFontSize: 12, + handleLabelFontWeight: 'normal', + }, + scrollbar: { + padding: [0, 0, 0, 0], + trackSize: 6, + isRound: true, + slidable: true, + scrollable: true, + trackFill: '#e5e5e5', + trackFillOpacity: 0, + thumbFill: '#000', + thumbFillOpacity: 0.15, + thumbHighlightedFillOpacity: 0.2, + }, + title: { + spacing: 8, + titleFill: colorBlack, + titleFillOpacity: alpha90, + titleFontSize: 16, + titleFontWeight: 'bold', + titleTextBaseline: 'top', + subtitleFill: colorBlack, + subtitleFillOpacity: alpha65, + subtitleFontSize: 12, + subtitleFontWeight: 'normal', + subtitleTextBaseline: 'top', + }, + }; +} diff --git a/src/theme/light.ts b/src/theme/light.ts index 1962eb5b8b..dc577dbd34 100644 --- a/src/theme/light.ts +++ b/src/theme/light.ts @@ -1,484 +1,64 @@ +import { deepMix } from '@antv/util'; import { ThemeComponent as TC, Theme } from '../runtime'; +import { create } from './create'; -export type LightOptions = Theme; - -const COLORS = { - BLACK: '#1D2129', - WHITE: '#fff', - STROKE: '#416180', - DEFAULT: '#1783FF', - BACKGROUND: 'transparent', -}; +const defaults = create({ + colorBlack: '#1D2129', + colorWhite: '#fff', + colorStroke: '#416180', + colorDefault: '#1783FF', + colorBackground: 'transparent', + category10: [ + '#1783FF', + '#00C9C9', + '#F0884D', + '#D580FF', + '#7863FF', + '#60C42D', + '#BD8F24', + '#FF80CA', + '#2491B3', + '#17C76F', + ], + category20: [ + '#1783FF', + '#00C9C9', + '#F0884D', + '#D580FF', + '#7863FF', + '#60C42D', + '#BD8F24', + '#FF80CA', + '#2491B3', + '#17C76F', + '#AABA01', + '#BC7CFC', + '#237CBC', + '#2DE379', + '#CE8032', + '#FF7AF4', + '#545FD3', + '#AFE410', + '#D8C608', + '#FFA1E0', + ], + padding1: 8, + padding2: 12, + padding3: 20, + alpha90: 0.9, + alpha65: 0.65, + alpha45: 0.45, + alpha25: 0.25, + alpha10: 0.1, +}); -const PADDING = { - 1: 8, - 2: 12, - 3: 20, -}; - -const ALPHA = { - 90: 0.9, - 65: 0.65, - 45: 0.45, - 25: 0.25, - 10: 0.1, -}; +export type LightOptions = Theme; /** * Default theme. */ export const Light: TC = (options) => { - const defaultOptions: Theme = { - padding: 'auto', - margin: 16, - color: COLORS.DEFAULT, - size: 1, - category10: [ - '#1783FF', - '#00C9C9', - '#F0884D', - '#D580FF', - '#7863FF', - '#60C42D', - '#BD8F24', - '#FF80CA', - '#2491B3', - '#17C76F', - ], - category20: [ - '#1783FF', - '#00C9C9', - '#F0884D', - '#D580FF', - '#7863FF', - '#60C42D', - '#BD8F24', - '#FF80CA', - '#2491B3', - '#17C76F', - '#AABA01', - '#BC7CFC', - '#237CBC', - '#2DE379', - '#CE8032', - '#FF7AF4', - '#545FD3', - '#AFE410', - '#D8C608', - '#FFA1E0', - ], - enter: { - duration: 300, - fill: 'both', - delay: 0, - }, - update: { - duration: 300, - fill: 'both', - delay: 0, - }, - exit: { - duration: 300, - fill: 'both', - delay: 0, - }, - view: { - viewFill: COLORS.BACKGROUND, - plotFill: 'transparent', - mainFill: 'transparent', - contentFill: 'transparent', - }, - line: { - line: { - fill: '', - strokeOpacity: 1, - lineWidth: 1, - }, - }, - point: { - point: { - r: 3, - fillOpacity: 0.95, - lineWidth: 0, - }, - hollow: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 1, - }, - plus: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 3, - }, - diamond: { - r: 3, - strokeOpacity: 0.95, - lineWidth: 1, - }, - }, - interval: { - rect: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - area: { - area: { - fillOpacity: 0.85, - lineWidth: 0, - }, - }, - polygon: { - polygon: { - fillOpacity: 0.95, - }, - }, - cell: { - cell: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - rect: { - rect: { - fillOpacity: 0.95, - }, - hollow: { - fill: '', - strokeOpacity: 1, - lineWidth: 2, - }, - }, - link: { - link: { - fill: '', - strokeOpacity: 1, - }, - }, - vector: { - vector: { - fillOpacity: 1, - }, - }, - box: { - box: { - fillOpacity: 0.95, - stroke: COLORS.BLACK, - lineWidth: 1, - }, - }, - text: { - text: { - fill: '#1D2129', - fontSize: 12, - strokeWidth: 0, - connectorStroke: COLORS.STROKE, - connectorStrokeOpacity: 0.45, - connectorLineWidth: 1, - backgroundFill: COLORS.STROKE, - backgroundFillOpacity: 0.15, - backgroundPadding: [2, 4], - startMarkerSymbol: 'circle', - startMarkerSize: 4, - endMarkerSymbol: 'circle', - endMarkerSize: 4, - }, - badge: { - fill: '#1D2129', - fillOpacity: 0.65, - strokeWidth: 0, - fontSize: 10, - textAlign: 'center', - textBaseline: 'middle', - markerFill: COLORS.STROKE, - markerFillOpacity: 0.25, - markerStrokeOpacity: 0, - }, - }, - lineX: { - line: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - }, - }, - lineY: { - line: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - }, - }, - rangeX: { - range: { - fill: COLORS.STROKE, - fillOpacity: 0.15, - lineWidth: 0, - }, - }, - rangeY: { - range: { - fill: COLORS.STROKE, - fillOpacity: 0.15, - lineWidth: 0, - }, - }, - connector: { - connector: { - stroke: COLORS.STROKE, - strokeOpacity: 0.45, - lineWidth: 1, - connectLength1: 12, - endMarker: true, - endMarkerSize: 6, - endMarkerFill: COLORS.STROKE, - endMarkerFillOpacity: 0.95, - }, - }, - axis: { - arrow: false, - gridLineDash: [3, 4], - gridLineWidth: 0.5, - gridStroke: COLORS.BLACK, - gridStrokeOpacity: ALPHA[10], - labelAlign: 'horizontal', - labelFill: COLORS.BLACK, - labelOpacity: ALPHA[45], - labelFontSize: 12, - labelFontWeight: 'normal', - labelSpacing: PADDING[1], // spacing between label and it's tick - line: false, - lineLineWidth: 0.5, - lineStroke: COLORS.BLACK, - lineStrokeOpacity: ALPHA[45], - tickLength: 4, - tickLineWidth: 1, - tickStroke: COLORS.BLACK, - tickOpacity: ALPHA[45], - titleFill: COLORS.BLACK, - titleOpacity: ALPHA[90], - titleFontSize: 12, - titleFontWeight: 'normal', - titleSpacing: 12, - titleTransformOrigin: 'center', - lineArrowOffset: 6, - lineArrowSize: 6, - }, - axisTop: { - gridDirection: 'positive', - labelDirection: 'negative', - tickDirection: 'negative', - titlePosition: 'top', - labelAutoRotate: false, - titleSpacing: 12, - labelSpacing: 4, - titleTextBaseline: 'middle', - }, - axisBottom: { - gridDirection: 'negative', - labelDirection: 'positive', - labelAutoRotate: false, - tickDirection: 'positive', - titlePosition: 'bottom', - titleSpacing: 12, - labelSpacing: 4, - titleTextBaseline: 'bottom', - }, - axisLeft: { - gridDirection: 'positive', - labelAutoRotate: false, - labelDirection: 'negative', - labelSpacing: 4, - tickDirection: 'negative', - titlePosition: 'left', - titleSpacing: 12, - titleTextBaseline: 'middle', - titleDirection: 'vertical', - titleTransformOrigin: 'center', - }, - axisRight: { - gridDirection: 'negative', - labelDirection: 'positive', - labelSpacing: 4, - tickDirection: 'positive', - titlePosition: 'right', - labelAutoRotate: false, - titleSpacing: 12, - titleTextBaseline: 'top', - titleDirection: 'vertical', - titleTransformOrigin: 'center', - }, - axisLinear: { - girdClosed: true, - gridConnect: 'arc', - gridDirection: 'negative', - gridType: 'surround', - titlePosition: 'top', - titleSpacing: 0, - }, - axisArc: { - title: false, - titlePosition: 'inner', - line: false, - tick: true, - labelSpacing: 4, - }, - axisRadar: { - girdClosed: true, - gridStrokeOpacity: 0.3, - gridType: 'surround', - label: false, - tick: false, - titlePosition: 'start', - }, - legendCategory: { - backgroundFill: 'transparent', - itemBackgroundFill: 'transparent', - itemLabelFill: COLORS.BLACK, - itemLabelFillOpacity: ALPHA[90], - itemLabelFontSize: 12, - itemLabelFontWeight: 'normal', - itemMarkerFillOpacity: 1, - itemMarkerSize: 8, - itemSpacing: [PADDING[1], PADDING[1]], - itemValueFill: COLORS.BLACK, - itemValueFillOpacity: 0.65, - itemValueFontSize: 12, - itemValueFontWeight: 'normal', - navButtonFill: COLORS.BLACK, - navButtonFillOpacity: 0.65, - navPageNumFill: COLORS.BLACK, - navPageNumFillOpacity: 0.45, - navPageNumFontSize: 12, - padding: 8, - title: false, - titleFill: COLORS.BLACK, - titleFillOpacity: 0.65, - titleFontSize: 12, - titleFontWeight: 'normal', - titleSpacing: 4, - tickStroke: COLORS.BLACK, - tickStrokeOpacity: 0.25, - rowPadding: PADDING[1], - colPadding: PADDING[2], - maxRows: 3, - maxCols: 3, - }, - legendContinuous: { - handleHeight: 12, - handleLabelFill: COLORS.BLACK, - handleLabelFillOpacity: ALPHA[45], - handleLabelFontSize: 12, - handleLabelFontWeight: 'normal', - handleMarkerFill: COLORS.BLACK, - handleMarkerFillOpacity: 0.6, - handleMarkerLineWidth: 1, - handleMarkerStroke: COLORS.BLACK, - handleMarkerStrokeOpacity: 0.25, - handleWidth: 10, - labelFill: COLORS.BLACK, - labelFillOpacity: ALPHA[45], - labelFontSize: 12, - labelFontWeight: 'normal', - labelSpacing: 3, - tick: true, - tickLength: 12, - ribbonSize: 12, - ribbonFill: '#aaa', - handle: true, - handleLabel: false, - handleShape: 'slider', - handleIconSize: 12 / 1.8, - indicator: false, - titleFontSize: 12, - titleSpacing: 4, - titleFontWeight: 'normal', - titleFillOpacity: ALPHA[90], - tickStroke: COLORS.BLACK, - tickStrokeOpacity: ALPHA[45], - }, - label: { - fill: COLORS.BLACK, - fillOpacity: 0.65, - fontSize: 12, - fontWeight: 'normal', - stroke: undefined, - offset: 12, - connectorStroke: COLORS.BLACK, - connectorStrokeOpacity: 0.45, - connectorLineWidth: 1, - connectorLength: 12, - connectorLength2: 8, - connectorDistance: 4, - }, - innerLabel: { - fill: COLORS.WHITE, - fontSize: 12, - fillOpacity: 0.85, - fontWeight: 'normal', - stroke: undefined, - offset: 0, - }, - htmlLabel: { - fontSize: 12, - opacity: 0.65, - color: COLORS.BLACK, - fontWeight: 'normal', - }, - slider: { - trackSize: 16, - trackFill: COLORS.STROKE, - trackFillOpacity: 1, - selectionFill: COLORS.DEFAULT, - selectionFillOpacity: 0.15, - handleIconSize: 10, - handleIconFill: '#f7f7f7', - handleIconFillOpacity: 1, - handleIconStroke: COLORS.BLACK, - handleIconStrokeOpacity: 0.25, - handleIconLineWidth: 1, - handleIconRadius: 2, - handleLabelFill: COLORS.BLACK, - handleLabelFillOpacity: 0.45, - handleLabelFontSize: 12, - handleLabelFontWeight: 'normal', - }, - scrollbar: { - padding: [0, 0, 0, 0], - trackSize: 6, - isRound: true, - slidable: true, - scrollable: true, - trackFill: '#e5e5e5', - trackFillOpacity: 0, - thumbFill: '#000', - thumbFillOpacity: 0.15, - thumbHighlightedFillOpacity: 0.2, - }, - title: { - spacing: 8, - titleFill: COLORS.BLACK, - titleFillOpacity: ALPHA[90], - titleFontSize: 16, - titleFontWeight: 'bold', - titleTextBaseline: 'top', - subtitleFill: COLORS.BLACK, - subtitleFillOpacity: ALPHA[65], - subtitleFontSize: 12, - subtitleFontWeight: 'normal', - subtitleTextBaseline: 'top', - }, - }; - return Object.assign({}, defaultOptions, options); + return deepMix({}, defaults, options); }; Light.props = {};