feat(pie): use @nivo/colors for inherited colors

packages/pie/src/Pie.js

@@ -15,12 +15,12 @@ import setDisplayName from 'recompose/setDisplayName'
 import {
     withTheme,
     withDimensions,
-    getInheritedColorGenerator,
     getLabelGenerator,
     Container,
     SvgWrapper,
     bindDefs,
 } from '@nivo/core'
+import { getInheritedColorGenerator } from '@nivo/colors'
 import { PieDefaultProps } from './props'
 import PieSlice from './PieSlice'
 import PieRadialLabels from './PieRadialLabels'
@@ -92,7 +92,7 @@ class Pie extends Component {
             legends,
         } = this.props
 
-        const borderColor = getInheritedColorGenerator(_borderColor)
+        const borderColor = getInheritedColorGenerator(_borderColor, theme)
 
         return (
             <PieLayout
@@ -159,11 +159,11 @@ class Pie extends Component {
                                                 textXOffset={radialLabelsTextXOffset}
                                                 textColor={getInheritedColorGenerator(
                                                     radialLabelsTextColor,
-                                                    'labels.text.fill'
+                                                    theme
                                                 )}
                                                 linkColor={getInheritedColorGenerator(
                                                     radialLabelsLinkColor,
-                                                    'axis.ticks.line.stroke'
+                                                    theme
                                                 )}
                                                 theme={theme}
                                             />
@@ -178,7 +178,7 @@ class Pie extends Component {
                                                 skipAngle={slicesLabelsSkipAngle}
                                                 textColor={getInheritedColorGenerator(
                                                     slicesLabelsTextColor,
-                                                    'labels.text.fill'
+                                                    theme
                                                 )}
                                             />
                                         )}

packages/pie/src/PieCanvasRenderer.js

@@ -8,13 +8,8 @@
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import {
-    getHoveredArc,
-    getRelativeCursor,
-    getLabelGenerator,
-    getInheritedColorGenerator,
-    Container,
-} from '@nivo/core'
+import { getHoveredArc, getRelativeCursor, getLabelGenerator, Container } from '@nivo/core'
+import { getInheritedColorGenerator } from '@nivo/colors'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { arcPropType } from './props'
 import { drawSliceLabels, drawRadialLabels } from './canvas'
@@ -152,7 +147,7 @@ class PieCanvasRenderer extends Component {
         this.ctx.save()
         this.ctx.translate(centerX, centerY)
 
-        const getBorderColor = getInheritedColorGenerator(borderColor)
+        const getBorderColor = getInheritedColorGenerator(borderColor, theme)
 
         arcs.forEach(arc => {
             this.ctx.beginPath()
@@ -171,7 +166,7 @@ class PieCanvasRenderer extends Component {
                 arcGenerator,
                 skipAngle: slicesLabelsSkipAngle,
                 getLabel: getLabelGenerator(sliceLabel),
-                getTextColor: getInheritedColorGenerator(slicesLabelsTextColor, 'labels.text.fill'),
+                getTextColor: getInheritedColorGenerator(slicesLabelsTextColor, theme),
                 theme,
             })
         }
@@ -198,11 +193,8 @@ class PieCanvasRenderer extends Component {
                 linkHorizontalLength: radialLabelsLinkHorizontalLength,
                 linkStrokeWidth: radialLabelsLinkStrokeWidth,
                 textXOffset: radialLabelsTextXOffset,
-                getTextColor: getInheritedColorGenerator(radialLabelsTextColor, 'labels.text.fill'),
-                getLinkColor: getInheritedColorGenerator(
-                    radialLabelsLinkColor,
-                    'axis.ticks.line.stroke'
-                ),
+                getTextColor: getInheritedColorGenerator(radialLabelsTextColor, theme),
+                getLinkColor: getInheritedColorGenerator(radialLabelsLinkColor, theme),
                 theme,
             })
         }

packages/pie/src/props.js

@@ -8,7 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { noop, radiansToDegrees } from '@nivo/core'
-import { ordinalColorsPropType } from '@nivo/colors'
+import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
 import { LegendPropShape } from '@nivo/legends'
 
 export const arcPropType = PropTypes.shape({
@@ -42,25 +42,25 @@ export const PiePropTypes = {
 
     // border
     borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    borderColor: inheritedColorPropType.isRequired,
 
     // radial labels
     enableRadialLabels: PropTypes.bool.isRequired,
     radialLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     radialLabelsSkipAngle: PropTypes.number,
     radialLabelsTextXOffset: PropTypes.number,
-    radialLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    radialLabelsTextColor: inheritedColorPropType.isRequired,
     radialLabelsLinkOffset: PropTypes.number,
     radialLabelsLinkDiagonalLength: PropTypes.number,
     radialLabelsLinkHorizontalLength: PropTypes.number,
     radialLabelsLinkStrokeWidth: PropTypes.number,
-    radialLabelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    radialLabelsLinkColor: inheritedColorPropType.isRequired,
 
     // slices labels
     enableSlicesLabels: PropTypes.bool.isRequired,
     sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     slicesLabelsSkipAngle: PropTypes.number,
-    slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    slicesLabelsTextColor: inheritedColorPropType.isRequired,
 
     // styling
     colors: ordinalColorsPropType.isRequired,
@@ -114,18 +114,21 @@ export const PieDefaultProps = {
 
     // border
     borderWidth: 0,
-    borderColor: 'inherit:darker(1)',
+    borderColor: {
+        from: 'color',
+        modifiers: [['darker', 1]],
+    },
 
     // radial labels
     enableRadialLabels: true,
     radialLabel: 'id',
-    radialLabelsTextColor: 'theme',
-    radialLabelsLinkColor: 'theme',
+    radialLabelsTextColor: { theme: 'labels.text.fill' },
+    radialLabelsLinkColor: { theme: 'axis.ticks.line.stroke' },
 
     // slices labels
     enableSlicesLabels: true,
     sliceLabel: 'value',
-    slicesLabelsTextColor: 'theme',
+    slicesLabelsTextColor: { theme: 'labels.text.fill' },
 
     // styling
     colors: { scheme: 'nivo' },

website/src/components/controls/InheritedColorControl.js

@@ -12,13 +12,12 @@ import isPlainObject from 'lodash/isPlainObject'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { inheritedColorPropType } from '@nivo/colors'
-import { mapInheritedColor } from '../../lib/settings'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import { Help } from './styled'
 import Select from './Select'
 
-const themeProperties = ['background', 'grid.line.stroke'].map(prop => ({
+const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].map(prop => ({
     label: prop,
     value: prop,
 }))

website/src/data/components/pie/mapper.js

@@ -9,7 +9,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { patternDotsDef, patternLinesDef } from '@nivo/core'
-import { settingsMapper, mapInheritedColor } from '../../../lib/settings'
+import { settingsMapper } from '../../../lib/settings'
 
 const TooltipWrapper = styled.div`
     display: grid;
@@ -48,10 +48,6 @@ export default settingsMapper(
             if (value === `d => \`\${d.id} (\${d.value})\``) return d => `${d.id} (${d.value})`
             return value
         },
-        borderColor: mapInheritedColor,
-        radialLabelsTextColor: mapInheritedColor,
-        radialLabelsLinkColor: mapInheritedColor,
-        slicesLabelsTextColor: mapInheritedColor,
         tooltip: (value, values) => {
             if (!values['custom tooltip example']) return undefined
 

website/src/data/components/pie/props.js

@@ -224,14 +224,11 @@ const props = [
     {
         key: 'borderColor',
         help: 'Method to compute border color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.borderColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Style',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'enableRadialLabels',
@@ -344,26 +341,20 @@ const props = [
     {
         key: 'radialLabelsTextColor',
         help: 'Defines how to compute radial label text color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.radialLabelsTextColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Radial labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'radialLabelsLinkColor',
         help: 'Defines how to compute radial label link color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.radialLabelsLinkColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Radial labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'enableSlicesLabels',
@@ -408,14 +399,11 @@ const props = [
     {
         key: 'slicesLabelsTextColor',
         help: 'Defines how to compute slice label text color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
-        defaultValue: 'theme',
-        controlType: 'color',
+        defaultValue: defaults.slicesLabelsTextColor,
+        controlType: 'inheritedColor',
         group: 'Slices labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'isInteractive',

website/src/pages/pie/api.js

@@ -51,23 +51,23 @@ const PieApi = () => {
                     cornerRadius: 3,
 
                     borderWidth: 0,
-                    borderColor: { type: 'inherit:darker', gamma: 0.6 },
+                    borderColor: { from: 'color', modifiers: [['darker', 0.6]] },
 
                     enableRadialLabels: true,
                     radialLabel: 'id',
                     radialLabelsSkipAngle: 10,
                     radialLabelsTextXOffset: 6,
-                    radialLabelsTextColor: { type: 'custom', color: '#333333' },
+                    radialLabelsTextColor: '#333333',
                     radialLabelsLinkOffset: 0,
                     radialLabelsLinkDiagonalLength: 16,
                     radialLabelsLinkHorizontalLength: 24,
                     radialLabelsLinkStrokeWidth: 1,
-                    radialLabelsLinkColor: { type: 'inherit' },
+                    radialLabelsLinkColor: { from: 'color' },
 
                     enableSlicesLabels: true,
                     sliceLabel: 'value',
                     slicesLabelsSkipAngle: 10,
-                    slicesLabelsTextColor: { type: 'custom', color: '#333333' },
+                    slicesLabelsTextColor: '#333333',
 
                     data: JSON.stringify(data, null, '  '),
                 }}

website/src/pages/pie/canvas.js

@@ -43,23 +43,26 @@ const initialProperties = {
     colors: { scheme: 'paired' },
 
     borderWidth: 0,
-    borderColor: { type: 'inherit:darker', gamma: 0.6 },
+    borderColor: {
+        from: 'color',
+        modifiers: [['darker', 0.6]],
+    },
 
     enableRadialLabels: true,
     radialLabel: 'id',
     radialLabelsSkipAngle: 10,
     radialLabelsTextXOffset: 6,
-    radialLabelsTextColor: { type: 'custom', color: '#333333' },
+    radialLabelsTextColor: '#333333',
     radialLabelsLinkOffset: 0,
     radialLabelsLinkDiagonalLength: 16,
     radialLabelsLinkHorizontalLength: 24,
     radialLabelsLinkStrokeWidth: 1,
-    radialLabelsLinkColor: { type: 'inherit' },
+    radialLabelsLinkColor: { from: 'color' },
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
     slicesLabelsSkipAngle: 10,
-    slicesLabelsTextColor: { type: 'custom', color: '#333333' },
+    slicesLabelsTextColor: '#333333',
 
     animate: true,
     motionStiffness: 90,

website/src/pages/pie/index.js

@@ -40,23 +40,26 @@ const initialProperties = {
     colors: { scheme: 'nivo' },
 
     borderWidth: 1,
-    borderColor: { type: 'inherit:darker', gamma: 0.2 },
+    borderColor: {
+        from: 'color',
+        modifiers: [['darker', 0.2]],
+    },
 
     enableRadialLabels: true,
     radialLabel: 'id',
     radialLabelsSkipAngle: 10,
     radialLabelsTextXOffset: 6,
-    radialLabelsTextColor: { type: 'custom', color: '#333333' },
+    radialLabelsTextColor: '#333333',
     radialLabelsLinkOffset: 0,
     radialLabelsLinkDiagonalLength: 16,
     radialLabelsLinkHorizontalLength: 24,
     radialLabelsLinkStrokeWidth: 1,
-    radialLabelsLinkColor: { type: 'inherit' },
+    radialLabelsLinkColor: { from: 'color' },
 
     enableSlicesLabels: true,
     sliceLabel: 'value',
     slicesLabelsSkipAngle: 10,
-    slicesLabelsTextColor: { type: 'custom', color: '#333333' },
+    slicesLabelsTextColor: '#333333',
 
     animate: true,
     motionStiffness: 90,