refactor: cleanup colors (#1397)

Cleaning up the used color strings

BREAKING CHANGE: `DEFAULT_CHART_MARGINS`, `DEFAULT_GEOMETRY_STYLES`, `DEFAULT_CHART_PADDING` and `DEFAULT_MISSING_COLOR` are no longer exposed as part of the API

packages/charts/api/charts.api.md

@@ -445,7 +445,7 @@ export const CHILDREN_KEY = "children";
 // @public (undocumented)
 export function childrenAccessor(n: ArrayEntry): HierarchyOfArrays;
 
-// @public (undocumented)
+// @public
 export type Color = string;
 
 // @alpha (undocumented)
@@ -613,23 +613,9 @@ export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle;
 // @public (undocumented)
 export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle;
 
-// Warning: (ae-forgotten-export) The symbol "Margins" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const DEFAULT_CHART_MARGINS: Margins;
-
-// @public (undocumented)
-export const DEFAULT_CHART_PADDING: Margins;
-
-// @public (undocumented)
-export const DEFAULT_GEOMETRY_STYLES: SharedGeometryStateStyle;
-
 // @public
 export const DEFAULT_GLOBAL_ID = "__global__";
 
-// @public (undocumented)
-export const DEFAULT_MISSING_COLOR = "red";
-
 // @public (undocumented)
 export const DEFAULT_SETTINGS_SPEC: SettingsSpec;
 
@@ -1358,6 +1344,9 @@ export interface LogScaleOptions {
     logMinLimit?: number;
 }
 
+// @public
+export type Margins = PerSideDistance;
+
 // @public
 export type MarkBuffer = number | ((radius: number) => number);
 
@@ -1422,8 +1411,6 @@ export type OrdinalDomain = (number | string)[];
 // @public (undocumented)
 export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;
 
-// Warning: (ae-forgotten-export) The symbol "PerSideDistance" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export type Padding = PerSideDistance;
 
@@ -1503,6 +1490,18 @@ export const PATH_KEY = "path";
 // @public (undocumented)
 export function pathAccessor(n: ArrayEntry): LegendPath;
 
+// @public
+export interface PerSideDistance {
+    // (undocumented)
+    bottom: number;
+    // (undocumented)
+    left: number;
+    // (undocumented)
+    right: number;
+    // (undocumented)
+    top: number;
+}
+
 // @public (undocumented)
 export type Pixels = number;
 
@@ -2427,8 +2426,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // src/chart_types/heatmap/layout/types/config_types.ts:19:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:47:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
 // src/chart_types/heatmap/layout/types/config_types.ts:48:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:136:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
+// src/chart_types/partition_chart/layout/types/config_types.ts:138:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/colors';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { FontFamily } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 
 // todo switch to `io-ts` style, generic way of combining static and runtime type info
 /** @public */

packages/charts/src/chart_types/goal_chart/renderer/canvas/canvas_renderers.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/colors';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
-import { Color } from '../../../../utils/common';
 import { Mark } from '../../layout/viewmodel/geoms';
 
 /** @internal */

packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx

@@ -10,6 +10,7 @@ import React, { MouseEvent, RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { Color, Colors } from '../../../../common/colors';
 import { Rectangle } from '../../../../common/geometry';
 import { GoalSemanticDescription, ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
@@ -21,7 +22,6 @@ import {
 } from '../../../../state/selectors/get_accessibility_config';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
-import { Color } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { BandViewModel, nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { initialBoundingBox, Mark } from '../../layout/viewmodel/geoms';
@@ -178,7 +178,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
   bandLabels: [],
   firstValue: 0,
   captureBoundingBox: initialBoundingBox(),
-  background: 'transparent',
+  background: Colors.Transparent.keyword,
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {

packages/charts/src/chart_types/goal_chart/specs/index.ts

@@ -9,10 +9,11 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { Color, LabelAccessor, RecursivePartial } from '../../../utils/common';
+import { LabelAccessor, RecursivePartial } from '../../../utils/common';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';

packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/colors';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BandViewModel } from '../../layout/types/viewmodel_types';
@@ -20,7 +21,7 @@ const EMPTY_TOOLTIP = Object.freeze({
 const getBandColor = (value: number, bands: BandViewModel[]) =>
   bands.find(({ value: v }) => {
     return v >= value;
-  })?.fillColor ?? 'white';
+  })?.fillColor ?? Colors.White.keyword;
 
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(

packages/charts/src/chart_types/heatmap/layout/config/config.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../../common/colors';
 import { Config } from '../types/config_types';
 
 /** @internal */
@@ -19,7 +20,7 @@ export const config: Config = {
 
   brushArea: {
     visible: true,
-    fill: 'black', // black === transparent
+    fill: Colors.Black.keyword, // black === transparent
     stroke: '#69707D', // euiColorDarkShade,
     strokeWidth: 2,
   },
@@ -41,7 +42,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: Colors.Black.keyword,
     fontVariant: 'normal',
     fontWeight: 'normal',
     align: 'center' as CanvasTextAlign,
@@ -56,7 +57,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: Colors.Black.keyword,
     fontVariant: 'normal',
     fontWeight: 'normal',
     baseline: 'verticalAlign' as CanvasTextBaseline,
@@ -88,7 +89,7 @@ export const config: Config = {
       maxFontSize: 12,
       fontFamily: 'Sans-Serif',
       fontStyle: 'normal',
-      textColor: 'black',
+      textColor: Colors.Black.keyword,
       fontVariant: 'normal',
       fontWeight: 'normal',
       useGlobalMinFontSize: true,

packages/charts/src/chart_types/heatmap/layout/types/config_types.ts

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/colors';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 
 /**
  * @public

packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts

@@ -7,11 +7,11 @@
  */
 
 import { ChartType } from '../../..';
+import { Color, Colors } from '../../../../common/colors';
 import { Pixels } from '../../../../common/geometry';
 import { Box } from '../../../../common/text_utils';
 import { Fill, Line, Rect, Stroke } from '../../../../geoms/types';
 import { HeatmapBrushEvent } from '../../../../specs/settings';
-import { Color } from '../../../../utils/common';
 import { Point } from '../../../../utils/point';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { config } from '../config/config';
@@ -115,7 +115,7 @@ export const nullHeatmapViewModel: HeatmapViewModel = {
   gridLines: {
     x: [],
     y: [],
-    stroke: { width: 0, color: [0, 0, 0, 0] },
+    stroke: { width: 0, color: Colors.Transparent.rgba },
   },
   cells: [],
   xValues: [],

packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color, Colors } from '../../../../common/colors';
 import { Font } from '../../../../common/text_utils';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
-import { Color } from '../../../../utils/common';
 import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line';
 import { renderRect } from '../../../xy_chart/renderer/canvas/primitives/rect';
 import { renderText, wrapLines } from '../../../xy_chart/renderer/canvas/primitives/text';
@@ -95,7 +95,7 @@ export function renderCanvas2d(
               fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal',
               fontVariant: 'normal',
               fontWeight: 'normal',
-              textColor: 'black',
+              textColor: Colors.Black.keyword,
             };
             const { padding } = config.yAxisLabel;
             const horizontalPadding =

packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx

@@ -10,6 +10,7 @@ import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { Color, Colors } from '../../../../common/colors';
 import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
@@ -20,7 +21,6 @@ import {
 } from '../../../../state/selectors/get_accessibility_config';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
-import { Color } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { geometries } from '../../state/selectors/geometries';
@@ -151,7 +151,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     top: 0,
   },
   a11ySettings: DEFAULT_A11Y_SETTINGS,
-  background: 'transparent',
+  background: Colors.Transparent.keyword,
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {

packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts

@@ -6,13 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../common/colors';
 import { getPredicateFn } from '../../../common/predicate';
-import { Color, safeFormat, ValueFormatter } from '../../../utils/common';
+import { safeFormat, ValueFormatter } from '../../../utils/common';
 import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap';
 import { ColorScale } from '../state/selectors/get_color_scale';
 
-const TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)';
-
 function defaultColorBandFormatter(valueFormatter?: ValueFormatter) {
   return (startValue: number, endValue: number) => {
     const finiteStart = Number.isFinite(startValue);
@@ -50,6 +49,6 @@ function getBandScale(bands: ColorBand[]): ColorScale {
         return color;
       }
     }
-    return TRANSPARENT_COLOR;
+    return Colors.Transparent.keyword;
   };
 }

packages/charts/src/chart_types/heatmap/specs/heatmap.ts

@@ -9,13 +9,14 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/colors';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
 import { SeriesScales, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
-import { Color, Datum, RecursivePartial } from '../../../utils/common';
+import { Datum, RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';

packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/colors';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { Color } from '../../../../utils/common';
 import { getBandsColorScale } from '../../scales/band_color_scale';
 import { ColorBand } from '../../specs/heatmap';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';

packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

@@ -7,6 +7,7 @@
  */
 
 import { RGBATupleToString } from '../../../../common/color_library_wrappers';
+import { Colors } from '../../../../common/colors';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getHeatmapConfigSelector } from './get_heatmap_config';
@@ -38,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // X-axis value
           tooltipInfo.values.push({
             label: config.xAxisLabel.name,
-            color: 'transparent',
+            color: Colors.Transparent.keyword,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -53,7 +54,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // Y-axis value
           tooltipInfo.values.push({
             label: config.yAxisLabel.name,
-            color: 'transparent',
+            color: Colors.Transparent.keyword,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -82,8 +83,8 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
         });
     } else {
       tooltipInfo.values.push({
-        label: ``,
-        color: 'transparent',
+        label: '',
+        color: Colors.Transparent.keyword,
         isHighlighted: false,
         isVisible: true,
         seriesIdentifier: {

packages/charts/src/chart_types/partition_chart/layout/config.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Colors } from '../../../common/colors';
 import { ConfigItem, configMap, Numeric } from '../../../common/config_objects';
 import { GOLDEN_RATIO, TAU } from '../../../common/constants';
 import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils';
@@ -302,9 +303,9 @@ export const configMetadata: Record<string, ConfigItem> = {
   },
 
   // other
-  backgroundColor: { dflt: '#ffffff', type: 'color' },
+  backgroundColor: { dflt: Colors.White.keyword, type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
-  sectorLineStroke: { dflt: 'white', type: 'string' },
+  sectorLineStroke: { dflt: Colors.White.keyword, type: 'string' },
   animation: { type: 'group', values: { duration: { dflt: 0, min: 0, max: 3000, type: 'number' } } },
 };
 

packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts

@@ -8,9 +8,10 @@
 
 import { $Values as Values } from 'utility-types';
 
+import { Color } from '../../../../common/colors';
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry';
 import { Font, FontFamily, PartialFont } from '../../../../common/text_utils';
-import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter } from '../../../../utils/common';
 import { PerSideDistance } from '../../../../utils/dimensions';
 
 /** @public */