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

packages/chord/src/enhance.js

@@ -13,14 +13,8 @@ import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { arc as d3Arc } from 'd3-shape'
 import { chord as d3Chord, ribbon as d3Ribbon } from 'd3-chord'
-import {
-    getInheritedColorGenerator,
-    getLabelGenerator,
-    withMotion,
-    withTheme,
-    withDimensions,
-} from '@nivo/core'
-import { getOrdinalColorScale } from '@nivo/colors'
+import { getLabelGenerator, withMotion, withTheme, withDimensions } from '@nivo/core'
+import { getOrdinalColorScale, getInheritedColorGenerator } from '@nivo/colors'
 import { ChordDefaultProps } from './props'
 
 export default Component =>
@@ -37,8 +31,8 @@ export default Component =>
         withPropsOnChange(['padAngle'], ({ padAngle }) => ({
             chord: d3Chord().padAngle(padAngle),
         })),
-        withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
-            getLabelTextColor: getInheritedColorGenerator(labelTextColor, 'labels.textColor'),
+        withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
+            getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
         })),
         withPropsOnChange(['colors', 'keys'], ({ colors, keys }) => {
             const getColor = getOrdinalColorScale(colors, 'key')
@@ -152,11 +146,11 @@ export default Component =>
                 return { ribbons, arcs }
             }
         ),
-        withPropsOnChange(['arcBorderColor'], ({ arcBorderColor }) => ({
-            getArcBorderColor: getInheritedColorGenerator(arcBorderColor),
+        withPropsOnChange(['arcBorderColor', 'theme'], ({ arcBorderColor, theme }) => ({
+            getArcBorderColor: getInheritedColorGenerator(arcBorderColor, theme),
         })),
-        withPropsOnChange(['ribbonBorderColor'], ({ ribbonBorderColor }) => ({
-            getRibbonBorderColor: getInheritedColorGenerator(ribbonBorderColor),
+        withPropsOnChange(['ribbonBorderColor', 'theme'], ({ ribbonBorderColor, theme }) => ({
+            getRibbonBorderColor: getInheritedColorGenerator(ribbonBorderColor, theme),
         })),
         pure
     )(Component)

packages/chord/src/props.js

@@ -8,7 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { blendModePropType } from '@nivo/core'
-import { ordinalColorsPropType } from '@nivo/colors'
+import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
 import { LegendPropShape } from '@nivo/legends'
 
 export const ChordPropTypes = {
@@ -21,12 +21,12 @@ export const ChordPropTypes = {
 
     arcOpacity: PropTypes.number.isRequired,
     arcBorderWidth: PropTypes.number.isRequired,
-    arcBorderColor: PropTypes.any.isRequired,
+    arcBorderColor: inheritedColorPropType.isRequired,
     getArcBorderColor: PropTypes.func.isRequired,
 
     ribbonOpacity: PropTypes.number.isRequired,
     ribbonBorderWidth: PropTypes.number.isRequired,
-    ribbonBorderColor: PropTypes.any.isRequired,
+    ribbonBorderColor: inheritedColorPropType.isRequired,
     ribbonBlendMode: blendModePropType.isRequired,
     getRibbonBorderColor: PropTypes.func.isRequired,
 
@@ -35,7 +35,7 @@ export const ChordPropTypes = {
     getLabel: PropTypes.func.isRequired, // computed
     labelOffset: PropTypes.number.isRequired,
     labelRotation: PropTypes.number.isRequired,
-    labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelTextColor: inheritedColorPropType.isRequired,
     getLabelTextColor: PropTypes.func.isRequired, // computed
 
     colors: ordinalColorsPropType.isRequired,
@@ -59,18 +59,27 @@ export const ChordDefaultProps = {
 
     arcOpacity: 1,
     arcBorderWidth: 1,
-    arcBorderColor: 'inherit:darker(0.4)',
+    arcBorderColor: {
+        from: 'color',
+        modifiers: [['darker', 0.4]],
+    },
 
     ribbonOpacity: 0.5,
     ribbonBorderWidth: 1,
-    ribbonBorderColor: 'inherit:darker(0.4)',
+    ribbonBorderColor: {
+        from: 'color',
+        modifiers: [['darker', 0.4]],
+    },
     ribbonBlendMode: 'normal',
 
     enableLabel: true,
     label: 'id',
     labelOffset: 12,
     labelRotation: 0,
-    labelTextColor: 'inherit:darker(1)',
+    labelTextColor: {
+        from: 'color',
+        modifiers: [['darker', 1]],
+    },
 
     colors: { scheme: 'nivo' },
 

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

@@ -6,14 +6,11 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { settingsMapper, mapInheritedColor } from '../../../lib/settings'
+import { settingsMapper } from '../../../lib/settings'
 
 export default settingsMapper({
     label: value => {
         if (value === `d => \`\${d.id} [\${d.value}]\``) return d => `${d.id} [${d.value}]`
         return value
     },
-    labelTextColor: mapInheritedColor,
-    arcBorderColor: mapInheritedColor,
-    ribbonBorderColor: mapInheritedColor,
 })

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

@@ -199,12 +199,9 @@ const props = [
         help: 'Arcs border color.',
         required: false,
         defaultValue: defaults.arcBorderColor,
-        type: 'string | Function',
-        controlType: 'color',
+        type: 'string | object | Function',
+        controlType: 'inheritedColor',
         group: 'Style',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'ribbonOpacity',
@@ -232,12 +229,9 @@ const props = [
         help: 'Ribbons border color.',
         required: false,
         defaultValue: defaults.ribbonBorderColor,
-        type: 'string | Function',
-        controlType: 'color',
+        type: 'string | object | Function',
+        controlType: 'inheritedColor',
         group: 'Style',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'enableLabel',
@@ -304,14 +298,11 @@ const props = [
             [see dedicated documentation](self:/guides/colors).
         `,
         help: 'Method to compute label text color.',
-        type: 'string | Function',
+        type: 'string | object | Function',
         required: false,
         defaultValue: defaults.labelTextColor,
-        controlType: 'color',
+        controlType: 'inheritedColor',
         group: 'Labels',
-        controlOptions: {
-            withCustomColor: true,
-        },
     },
     {
         key: 'isInteractive',

website/src/pages/chord/canvas.js

@@ -34,24 +34,24 @@ const initialProperties = {
     arcOpacity: 1,
     arcBorderWidth: 1,
     arcBorderColor: {
-        type: 'inherit:darker',
-        gamma: 0.4,
+        from: 'color',
+        modifiers: [['darker', 0.4]],
     },
 
     ribbonOpacity: 0.5,
     ribbonBorderWidth: 1,
     ribbonBorderColor: {
-        type: 'inherit:darker',
-        gamma: 0.4,
+        from: 'color',
+        modifiers: [['darker', 0.4]],
     },
 
     enableLabel: true,
     label: 'id',
     labelOffset: 9,
     labelRotation: -90,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 1,
+        from: 'color',
+        modifiers: [['darker', 1]],
     },
 
     colors: { scheme: 'paired' },

website/src/pages/chord/index.js

@@ -31,24 +31,24 @@ const initialProperties = {
     arcOpacity: 1,
     arcBorderWidth: 1,
     arcBorderColor: {
-        type: 'inherit:darker',
-        gamma: 0.4,
+        from: 'color',
+        modifiers: [['darker', 0.4]],
     },
 
     ribbonOpacity: 0.5,
     ribbonBorderWidth: 1,
     ribbonBorderColor: {
-        type: 'inherit:darker',
-        gamma: 0.4,
+        from: 'color',
+        modifiers: [['darker', 0.4]],
     },
 
     enableLabel: true,
     label: 'id',
     labelOffset: 12,
     labelRotation: -90,
     labelTextColor: {
-        type: 'inherit:darker',
-        gamma: 1,
+        from: 'color',
+        modifiers: [['darker', 1]],
     },
 
     colors: { scheme: 'nivo' },