feat(colors): use @nivo/colors for inherited colors for all packages

packages/bar/index.d.ts

@@ -5,11 +5,10 @@ import {
     Theme,
     MotionProps,
     ColorProps,
-    GetColor,
     SvgDefsAndFill,
     CartesianMarkerProps,
 } from '@nivo/core'
-import { OrdinalColorsInstruction } from '@nivo/colors'
+import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
 declare module '@nivo/bar' {
@@ -102,10 +101,10 @@ declare module '@nivo/bar' {
             enableLabel: boolean
             label: string | AccessorFunc
             labelFormat: string | LabelFormatter
-            labelLinkColor: string | GetColor<BarDatumWithColor>
+            labelLinkColor: InheritedColorProp<BarDatumWithColor>
             labelSkipWidth: number
             labelSkipHeight: number
-            labelTextColor: string | GetColor<BarDatumWithColor>
+            labelTextColor: InheritedColorProp<BarDatumWithColor>
 
             colors: OrdinalColorsInstruction
             borderRadius: number

packages/bar/tests/__snapshots__/Bar.test.js.snap

@@ -4354,7 +4354,7 @@ exports[`should render a basic bar chart 1`] = `
             alignmentBaseline="central"
             style={
               Object {
-                "fill": "#333333",
+                "fill": "theme",
                 "fontFamily": "sans-serif",
                 "fontSize": 11,
                 "pointerEvents": "none",
@@ -4387,7 +4387,7 @@ exports[`should render a basic bar chart 1`] = `
             alignmentBaseline="central"
             style={
               Object {
-                "fill": "#333333",
+                "fill": "theme",
                 "fontFamily": "sans-serif",
                 "fontSize": 11,
                 "pointerEvents": "none",
@@ -4420,7 +4420,7 @@ exports[`should render a basic bar chart 1`] = `
             alignmentBaseline="central"
             style={
               Object {
-                "fill": "#333333",
+                "fill": "theme",
                 "fontFamily": "sans-serif",
                 "fontSize": 11,
                 "pointerEvents": "none",

packages/bullet/src/props.js

@@ -82,10 +82,10 @@ const commonDefaultProps = {
     titleOffsetY: BulletItem.defaultProps.titleOffsetY,
     titleRotation: BulletItem.defaultProps.titleRotation,
     rangeBorderWidth: 0,
-    rangeBorderColor: 'inherit',
+    rangeBorderColor: { from: 'color' },
     measureSize: 0.4,
     measureBorderWidth: 0,
-    measureBorderColor: 'inherit',
+    measureBorderColor: { from: 'color' },
     markerSize: 0.6,
     markerColors: BulletItem.defaultProps.markerColors,
     axisPosition: BulletItem.defaultProps.axisPosition,

packages/colors/index.d.ts

@@ -83,4 +83,13 @@ declare module '@nivo/colors' {
         instruction: OrdinalColorsInstruction,
         identity: string | ColorIdentityFunction<D>
     ): OrdinalColorScale<D>
+
+    export type ColorModifierType = 'brighter' | 'darker' | 'opacity'
+    export type ColorModifier = [ColorModifierType, number]
+    export type InheritedColorFunction<D = any> = (datum: D) => string
+    export type InheritedColorProp<D = any> =
+        | string
+        | { theme: string }
+        | { from: string; modifiers?: ColorModifier[] }
+        | InheritedColorFunction<D>
 }

packages/core/src/lib/colors/index.js

@@ -302,5 +302,4 @@ export const getColorScale = (colors, dataScale) => {
     return () => colors
 }
 
-export * from './inherit'
 export * from './quantize'

packages/geo/package.json

@@ -24,6 +24,7 @@
     "index.d.ts"
   ],
   "dependencies": {
+    "@nivo/colors": "0.55.0",
     "@nivo/core": "0.55.0",
     "@nivo/legends": "0.55.0",
     "d3-format": "^1.3.2",

packages/geo/src/hooks.js

@@ -23,7 +23,8 @@ import {
     geoNaturalEarth1,
     geoGraticule,
 } from 'd3-geo'
-import { guessQuantizeColorScale } from '@nivo/core'
+import { guessQuantizeColorScale, useTheme } from '@nivo/core'
+import { useInheritedColor } from '@nivo/colors'
 import { useQuantizeColorScaleLegendData } from '@nivo/legends'
 
 export const projectionById = {
@@ -69,14 +70,12 @@ export const useGeoMap = ({
     const path = useMemo(() => geoPath(projection), [projection])
     const graticule = useMemo(() => geoGraticule())
 
+    const theme = useTheme()
     const getBorderWidth = useMemo(
         () => (typeof borderWidth === 'function' ? borderWidth : () => borderWidth),
         [borderWidth]
     )
-    const getBorderColor = useMemo(
-        () => (typeof borderColor === 'function' ? borderColor : () => borderColor),
-        [borderColor]
-    )
+    const getBorderColor = useInheritedColor(borderColor, theme)
     const getFillColor = useMemo(
         () => (typeof fillColor === 'function' ? fillColor : () => fillColor),
         [fillColor]

packages/geo/src/props.js

@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { quantizeColorScalePropType } from '@nivo/core'
+import { inheritedColorPropType } from '@nivo/colors'
 import { projectionById } from './hooks'
 import ChoroplethTooltip from './ChoroplethTooltip'
 
@@ -28,7 +29,7 @@ const commonPropTypes = {
 
     fillColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-    borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    borderColor: inheritedColorPropType.isRequired,
 
     enableGraticule: PropTypes.bool.isRequired,
     graticuleLineWidth: PropTypes.number.isRequired,

packages/heatmap/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { Dimensions, Box, MotionProps, ColorProps, GetColor, Theme } from '@nivo/core'
+import { Dimensions, Box, MotionProps, ColorProps, Theme } from '@nivo/core'
 import { Axis } from '@nivo/axes'
+import { InheritedColorProp } from '@nivo/colors'
 
 declare module '@nivo/heatmap' {
     export interface HeatMapDatum {
@@ -33,7 +34,7 @@ declare module '@nivo/heatmap' {
             cellShape: 'rect' | 'circle' | React.StatelessComponent<any>
             cellOpacity: number
             cellBorderWidth: number
-            cellBorderColor: string | GetColor<HeatMapDatumWithColor>
+            cellBorderColor: InheritedColorProp<HeatMapDatumWithColor>
 
             axisTop: Axis
             axisRight: Axis
@@ -44,7 +45,7 @@ declare module '@nivo/heatmap' {
             enableGridY: boolean
 
             enableLabels: boolean
-            labelTextColor: string | GetColor<HeatMapDatumWithColor>
+            labelTextColor: InheritedColorProp<HeatMapDatumWithColor>
 
             isInteractive: boolean
             hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'

packages/heatmap/src/enhance.js

@@ -15,9 +15,14 @@ import withPropsOnChange from 'recompose/withPropsOnChange'
 import withState from 'recompose/withState'
 import pure from 'recompose/pure'
 import { scaleOrdinal, scaleLinear } from 'd3-scale'
-import { withTheme, withDimensions, withMotion } from '@nivo/core'
-import { getInheritedColorGenerator, guessQuantizeColorScale } from '@nivo/core'
-import { getAccessorFor } from '@nivo/core'
+import {
+    withTheme,
+    withDimensions,
+    withMotion,
+    guessQuantizeColorScale,
+    getAccessorFor,
+} from '@nivo/core'
+import { getInheritedColorGenerator } from '@nivo/colors'
 import { HeatMapDefaultProps } from './props'
 
 const computeX = (column, cellWidth, padding) => {
@@ -127,11 +132,11 @@ export default Component =>
                 return { sizeScale }
             }
         ),
-        withPropsOnChange(['cellBorderColor'], ({ cellBorderColor }) => ({
-            getCellBorderColor: getInheritedColorGenerator(cellBorderColor),
+        withPropsOnChange(['cellBorderColor', 'theme'], ({ cellBorderColor, theme }) => ({
+            getCellBorderColor: getInheritedColorGenerator(cellBorderColor, theme),
         })),
-        withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
-            getLabelTextColor: getInheritedColorGenerator(labelTextColor),
+        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
+            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
         })),
         pure
     )(Component)

packages/heatmap/src/props.js

@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { quantizeColorScalePropType, noop } from '@nivo/core'
+import { inheritedColorPropType } from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 
 export const HeatMapPropTypes = {
@@ -27,7 +28,7 @@ export const HeatMapPropTypes = {
         .isRequired,
     cellOpacity: PropTypes.number.isRequired,
     cellBorderWidth: PropTypes.number.isRequired,
-    cellBorderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    cellBorderColor: inheritedColorPropType.isRequired,
     getCellBorderColor: PropTypes.func.isRequired, // computed
 
     axisTop: axisPropType,
@@ -39,7 +40,7 @@ export const HeatMapPropTypes = {
     enableGridY: PropTypes.bool.isRequired,
 
     enableLabels: PropTypes.bool.isRequired,
-    labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelTextColor: inheritedColorPropType.isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
 
     colors: quantizeColorScalePropType.isRequired,
@@ -71,7 +72,7 @@ export const HeatMapDefaultProps = {
     cellShape: 'rect',
     cellOpacity: 0.85,
     cellBorderWidth: 0,
-    cellBorderColor: 'inherit',
+    cellBorderColor: { from: 'color' },
 
     // axes & grid
     axisTop: {},
@@ -81,7 +82,7 @@ export const HeatMapDefaultProps = {
 
     // labels
     enableLabels: true,
-    labelTextColor: 'inherit:darker(1.4)',
+    labelTextColor: { from: 'color', modifiers: [['darker', 1.4]] },
 
     // theming
     colors: 'nivo',