diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap index c8d642b9b28..e1253fbc552 100644 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -49,7 +49,7 @@ exports[`Chart 1`] = ` @@ -80,7 +80,7 @@ exports[`Chart 1`] = ` @@ -111,7 +111,7 @@ exports[`Chart 1`] = ` @@ -142,7 +142,7 @@ exports[`Chart 1`] = ` @@ -173,7 +173,7 @@ exports[`Chart 1`] = ` @@ -218,7 +218,7 @@ exports[`Chart 1`] = ` @@ -249,7 +249,7 @@ exports[`Chart 1`] = ` @@ -280,7 +280,7 @@ exports[`Chart 1`] = ` @@ -311,7 +311,7 @@ exports[`Chart 1`] = ` @@ -342,7 +342,7 @@ exports[`Chart 1`] = ` @@ -415,7 +415,7 @@ exports[`Chart 2`] = ` @@ -446,7 +446,7 @@ exports[`Chart 2`] = ` @@ -477,7 +477,7 @@ exports[`Chart 2`] = ` @@ -508,7 +508,7 @@ exports[`Chart 2`] = ` @@ -539,7 +539,7 @@ exports[`Chart 2`] = ` @@ -584,7 +584,7 @@ exports[`Chart 2`] = ` @@ -615,7 +615,7 @@ exports[`Chart 2`] = ` @@ -646,7 +646,7 @@ exports[`Chart 2`] = ` @@ -677,7 +677,7 @@ exports[`Chart 2`] = ` @@ -708,7 +708,7 @@ exports[`Chart 2`] = ` @@ -767,7 +767,7 @@ exports[`renders axis and component children 1`] = ` d="M50,138.88888888888886L83.33333333333334,127.77777777777779L116.66666666666667,94.44444444444443L150,116.66666666666669" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-color-blue-300, #06c); width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 3px; opacity: 1; stroke-width: 2;" /> @@ -879,7 +879,7 @@ exports[`renders axis and component children 1`] = ` @@ -910,7 +910,7 @@ exports[`renders axis and component children 1`] = ` @@ -941,7 +941,7 @@ exports[`renders axis and component children 1`] = ` @@ -972,7 +972,7 @@ exports[`renders axis and component children 1`] = ` @@ -1003,7 +1003,7 @@ exports[`renders axis and component children 1`] = ` @@ -1034,7 +1034,7 @@ exports[`renders axis and component children 1`] = ` @@ -1065,7 +1065,7 @@ exports[`renders axis and component children 1`] = ` @@ -1110,7 +1110,7 @@ exports[`renders axis and component children 1`] = ` @@ -1141,7 +1141,7 @@ exports[`renders axis and component children 1`] = ` @@ -1172,7 +1172,7 @@ exports[`renders axis and component children 1`] = ` @@ -1203,7 +1203,7 @@ exports[`renders axis and component children 1`] = ` diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap index 64bbe8c8046..99bfc6ba5a7 100644 --- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap +++ b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap @@ -34,7 +34,7 @@ exports[`ChartArea 1`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50L400,250L393.0000000000002,250L386.0000000000002,250L379.0000000000002,250L372.00000000000017,250L365.00000000000017,250L358.00000000000017,250L351.00000000000017,250L344.00000000000017,250L337.00000000000017,250L330.00000000000017,250L323.00000000000017,250L316.0000000000001,250L309.0000000000001,250L302.0000000000001,250L295.0000000000001,250L288.0000000000001,250L281.0000000000001,250L274.0000000000001,250L267.00000000000006,250L260.00000000000006,250L253.00000000000009,250L246.00000000000006,250L239.00000000000006,250L232.00000000000006,250L225.00000000000006,250L218.00000000000006,250L211.00000000000006,250L204.00000000000006,250L197.00000000000003,250L190.00000000000003,250L183.00000000000003,250L176.00000000000003,250L169,250L162,250L155,250L148,250L141,250L134,250L126.99999999999999,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -86,7 +86,7 @@ exports[`ChartArea 2`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50L400,250L393.0000000000002,250L386.0000000000002,250L379.0000000000002,250L372.00000000000017,250L365.00000000000017,250L358.00000000000017,250L351.00000000000017,250L344.00000000000017,250L337.00000000000017,250L330.00000000000017,250L323.00000000000017,250L316.0000000000001,250L309.0000000000001,250L302.0000000000001,250L295.0000000000001,250L288.0000000000001,250L281.0000000000001,250L274.0000000000001,250L267.00000000000006,250L260.00000000000006,250L253.00000000000009,250L246.00000000000006,250L239.00000000000006,250L232.00000000000006,250L225.00000000000006,250L218.00000000000006,250L211.00000000000006,250L204.00000000000006,250L197.00000000000003,250L190.00000000000003,250L183.00000000000003,250L176.00000000000003,250L169,250L162,250L155,250L148,250L141,250L134,250L126.99999999999999,250L120,250L113,250L106,250L99,250L92,250L85,250L78,250L71,250L64,250L57,250L50,250Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -138,7 +138,7 @@ exports[`renders component data 1`] = ` d="M50,192.85714285714286L166.66666666666666,135.71428571428572L283.3333333333333,67.14285714285712L400,50L400,250L283.3333333333333,250L166.66666666666666,250L50,250Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 5fb254faf9c..47d6877fa70 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -13,7 +13,6 @@ hideDarkMode: true --- import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap index a9fdfd55aec..a33372b03a8 100644 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -46,7 +46,7 @@ exports[`ChartAxis 1`] = ` @@ -77,7 +77,7 @@ exports[`ChartAxis 1`] = ` @@ -108,7 +108,7 @@ exports[`ChartAxis 1`] = ` @@ -139,7 +139,7 @@ exports[`ChartAxis 1`] = ` @@ -170,7 +170,7 @@ exports[`ChartAxis 1`] = ` @@ -201,7 +201,7 @@ exports[`ChartAxis 1`] = ` @@ -270,7 +270,7 @@ exports[`ChartAxis 2`] = ` @@ -301,7 +301,7 @@ exports[`ChartAxis 2`] = ` @@ -332,7 +332,7 @@ exports[`ChartAxis 2`] = ` @@ -363,7 +363,7 @@ exports[`ChartAxis 2`] = ` @@ -394,7 +394,7 @@ exports[`ChartAxis 2`] = ` @@ -425,7 +425,7 @@ exports[`ChartAxis 2`] = ` @@ -483,7 +483,7 @@ exports[`renders component data 1`] = ` d="M80,150L128.33333333333331,137.5L176.66666666666666,100L224.99999999999997,125" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-color-blue-300, #06c); width: 6px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; opacity: 1; stroke-width: 2;" /> @@ -595,7 +595,7 @@ exports[`renders component data 1`] = ` @@ -626,7 +626,7 @@ exports[`renders component data 1`] = ` @@ -657,7 +657,7 @@ exports[`renders component data 1`] = ` @@ -702,7 +702,7 @@ exports[`renders component data 1`] = ` @@ -733,7 +733,7 @@ exports[`renders component data 1`] = ` @@ -764,7 +764,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap index 794b86f673e..31a308f1c17 100644 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -29,7 +29,7 @@ A 0 0 0 0 1, 55, 250 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> @@ -121,7 +121,7 @@ A 0 0 0 0 1, 55, 250 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> @@ -214,7 +214,7 @@ A 0 0 0 0 1, 68.5, 150 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); stroke: var(--pf-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" /> @@ -491,7 +491,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -522,7 +522,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -553,7 +553,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -584,7 +584,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -629,7 +629,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -660,7 +660,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -691,7 +691,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -722,7 +722,7 @@ A 0 0 0 0 1, 246.5, 150 diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap index d7080c82766..1f1ad58850a 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -49,7 +49,7 @@ exports[`ChartBulletQualitativeRange 1`] = ` @@ -134,7 +134,7 @@ exports[`ChartBulletQualitativeRange 2`] = ` @@ -231,7 +231,7 @@ exports[`renders component data 1`] = ` @@ -262,7 +262,7 @@ exports[`renders component data 1`] = ` @@ -293,7 +293,7 @@ exports[`renders component data 1`] = ` @@ -324,7 +324,7 @@ exports[`renders component data 1`] = ` @@ -355,7 +355,7 @@ exports[`renders component data 1`] = ` @@ -380,7 +380,7 @@ A 0 0 0 0 1, 312.5, 85 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-black-200, #d2d2d2); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-bullet--qualitative-range--ColorScale--200, #d2d2d2); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> @@ -85,7 +85,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap index a7c27d9179d..b9938b3a710 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap @@ -75,7 +75,7 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -97,7 +97,7 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap index ac9a172a659..2ba34bac80c 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap @@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 94.3 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-500, #002f5d); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-theme--blue--ColorScale--300, #002f5d); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap index 1c773aa35cc..a1f4fa655a5 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap @@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-black-300, #b8bbbe); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-chart-bullet--qualitative-range--ColorScale--300, #b8bbbe); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap index 49fe4a8e374..0a99064e313 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -76,7 +76,7 @@ exports[`renders component data 1`] = ` @@ -85,7 +85,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap index e33d3ccd7c2..98db2459358 100644 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap @@ -76,7 +76,7 @@ exports[`renders container via ChartLegend 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -115,7 +115,7 @@ exports[`renders container via ChartLegend 1`] = ` @@ -132,7 +132,7 @@ exports[`renders container via ChartLegend 1`] = ` diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx index 16e78ea6a16..595eddd8aa2 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -223,7 +223,7 @@ export const ChartCursorContainer: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap index 9e850589878..3b466cb949b 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -38,7 +38,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); width: 6px; fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap index 377370174fe..3e87833a1d0 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -38,7 +38,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); width: 6px; fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap index 6b3da926b9b..503b036d1aa 100644 --- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap @@ -18,35 +18,35 @@ exports[`ChartDonut 1`] = ` d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -83,35 +83,35 @@ exports[`ChartDonut 2`] = ` d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -148,21 +148,21 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap index 6777a9e2546..f9b11bc2546 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap @@ -113,7 +113,7 @@ exports[`renders component data 1`] = ` d="M-25.607405310550824,75.7909017841929A80,80,0,0,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,0,0,-22.826039034851792,67.23073658661953Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-200, #519de9); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--400, #519de9); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index bb08838a62f..2c33fb6b6d4 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -18,14 +18,14 @@ exports[`ChartDonutUtilization 1`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -62,14 +62,14 @@ exports[`ChartDonutUtilization 2`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -106,14 +106,14 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap index 1d030ed5d4c..d3e0f4c236a 100644 --- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap +++ b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap @@ -88,7 +88,7 @@ exports[`renders container children 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); width: 6px; fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx index ff8a1dee38c..4bbc962b85f 100644 --- a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx +++ b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx @@ -224,6 +224,7 @@ export const ChartLabel: React.FunctionComponent = ({ textAnchor // textAnchor prop must override given theme styles }, { + fill: ChartCommonStyles.label.fill, fontFamily: ChartCommonStyles.label.fontFamily, fontSize: ChartCommonStyles.label.fontSize, letterSpacing: ChartCommonStyles.label.letterSpacing diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index 4a87a014240..2a430f56241 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -15,7 +15,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index a5054bf7cd2..90c84939eeb 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -31,7 +31,7 @@ exports[`ChartLegend 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -70,7 +70,7 @@ exports[`ChartLegend 1`] = ` @@ -123,7 +123,7 @@ exports[`ChartLegend 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -162,7 +162,7 @@ exports[`ChartLegend 2`] = ` @@ -215,7 +215,7 @@ exports[`renders component data 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -254,7 +254,7 @@ exports[`renders component data 1`] = ` @@ -271,7 +271,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap index 8f771e01589..e8d7ee0a3be 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -59,7 +59,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -90,7 +90,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -121,7 +121,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -152,7 +152,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -207,7 +207,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -248,7 +248,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -289,7 +289,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -320,7 +320,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,185L166.66666666666666,170L283.3333333333333,125L400,155" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-color-green-300, #4cb140); width: 11px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-chart-theme--green--ColorScale--100, #4cb140); width: 11px; opacity: 1; stroke-width: 2;" /> @@ -415,7 +415,7 @@ exports[`allows tooltip via container component 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-green-300, #4cb140);" + style="fill: var(--pf-chart-theme--green--ColorScale--100, #4cb140);" /> @@ -484,7 +484,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -501,7 +501,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -518,7 +518,7 @@ exports[`allows tooltip via container component 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap index 2b7ba1f9fc9..302ed5a7b22 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -15,7 +15,7 @@ exports[`renders component text 1`] = ` @@ -31,7 +31,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index c2251254862..ed65423f940 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -34,7 +34,7 @@ exports[`ChartLine 1`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke-width: 2;" + style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke-width: 2;" /> @@ -86,7 +86,7 @@ exports[`ChartLine 2`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke-width: 2;" + style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke-width: 2;" /> @@ -139,7 +139,7 @@ exports[`renders component data 1`] = ` d="M50,138.88888888888886L83.33333333333334,127.77777777777779L116.66666666666667,94.44444444444443L150,116.66666666666669" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-color-blue-300, #06c); width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 3px; opacity: 1; stroke-width: 2;" /> @@ -251,7 +251,7 @@ exports[`renders component data 1`] = ` @@ -282,7 +282,7 @@ exports[`renders component data 1`] = ` @@ -313,7 +313,7 @@ exports[`renders component data 1`] = ` @@ -344,7 +344,7 @@ exports[`renders component data 1`] = ` @@ -375,7 +375,7 @@ exports[`renders component data 1`] = ` @@ -406,7 +406,7 @@ exports[`renders component data 1`] = ` @@ -437,7 +437,7 @@ exports[`renders component data 1`] = ` @@ -482,7 +482,7 @@ exports[`renders component data 1`] = ` @@ -513,7 +513,7 @@ exports[`renders component data 1`] = ` @@ -544,7 +544,7 @@ exports[`renders component data 1`] = ` @@ -575,7 +575,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap index ff4b8aeda1a..5cd8292b363 100644 --- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap @@ -18,35 +18,35 @@ exports[`ChartPie 1`] = ` d="M5.8170722959499274e-15,-95A95,95,0,0,1,61.06482292022124,-72.7742220963029L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -83,35 +83,35 @@ exports[`ChartPie 2`] = ` d="M5.8170722959499274e-15,-95A95,95,0,0,1,61.06482292022124,-72.7742220963029L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" /> @@ -148,21 +148,21 @@ exports[`renders component data 1`] = ` d="M4.898587196589413e-15,-80A80,80,0,0,1,64.7213595499958,47.022820183397855L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" /> diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index 5a997ac4bc0..00bf7ccc584 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -31,7 +31,7 @@ exports[`ChartPoint 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -70,7 +70,7 @@ exports[`ChartPoint 1`] = ` @@ -123,7 +123,7 @@ exports[`ChartPoint 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -162,7 +162,7 @@ exports[`ChartPoint 2`] = ` @@ -215,7 +215,7 @@ exports[`renders component data 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> @@ -264,7 +264,7 @@ exports[`renders component data 1`] = ` @@ -281,7 +281,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap index 0ed88985700..bf7ca6517a7 100644 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -1000,7 +1000,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-color-blue-300, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1038,7 +1038,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-color-blue-100, #8bc1f7); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--200, #8bc1f7); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1076,7 +1076,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-color-blue-500, #002f5d); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--300, #002f5d); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1114,7 +1114,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-color-blue-200, #519de9); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--400, #519de9); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1181,7 +1181,7 @@ exports[`renders component data 1`] = ` @@ -1212,7 +1212,7 @@ exports[`renders component data 1`] = ` @@ -1243,7 +1243,7 @@ exports[`renders component data 1`] = ` @@ -1274,7 +1274,7 @@ exports[`renders component data 1`] = ` @@ -1305,7 +1305,7 @@ exports[`renders component data 1`] = ` @@ -1336,7 +1336,7 @@ exports[`renders component data 1`] = ` @@ -1367,7 +1367,7 @@ exports[`renders component data 1`] = ` @@ -1412,7 +1412,7 @@ exports[`renders component data 1`] = ` @@ -1443,7 +1443,7 @@ exports[`renders component data 1`] = ` @@ -1474,7 +1474,7 @@ exports[`renders component data 1`] = ` @@ -1505,7 +1505,7 @@ exports[`renders component data 1`] = ` @@ -1536,7 +1536,7 @@ exports[`renders component data 1`] = ` @@ -1567,7 +1567,7 @@ exports[`renders component data 1`] = ` @@ -1598,7 +1598,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap index f5d1253a575..465b7b2178e 100644 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap @@ -84,7 +84,7 @@ A 0 0 0 0 1, 85, 125.86206896551724 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-200, #519de9); stroke: var(--pf-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" + style="fill: var(--pf-chart-theme--blue--ColorScale--400, #519de9); stroke: var(--pf-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" /> @@ -361,7 +361,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -392,7 +392,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -423,7 +423,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -454,7 +454,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -499,7 +499,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -530,7 +530,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -561,7 +561,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -592,7 +592,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -623,7 +623,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index efe57b9de15..40c6184c4db 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -221,21 +221,21 @@ import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_colo legendComponent={ @@ -245,7 +245,7 @@ import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_colo padding={{ bottom: 75, // Adjusted to accommodate legend left: 50, - right: 50, + right: 50, top: 50 }} themeColor={ChartThemeColor.multiOrdered} @@ -253,47 +253,47 @@ import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_colo > - - } /> - } /> - } /> - } @@ -321,7 +321,7 @@ import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_ { name: 'Cats' }, { name: 'Birds' }, { name: 'Mice' }, - { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.value, type: 'threshold' }} + { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.var, type: 'threshold' }} ]} legendPosition="bottom" height={275} @@ -373,7 +373,7 @@ import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_ ]} style={{ data: { - stroke: chart_color_blue_300.value, + stroke: chart_color_blue_300.var, } }} /> @@ -400,10 +400,10 @@ class MultiColorChart extends React.Component { // Colors this.colorScale = [ - chart_color_blue_300.value, - chart_color_green_300.value, - chart_color_cyan_300.value, - chart_color_gold_300.value + chart_color_blue_300.var, + chart_color_green_300.var, + chart_color_cyan_300.var, + chart_color_gold_300.var ]; // Layout @@ -481,7 +481,6 @@ class MultiColorChart extends React.Component { - Use `ChartGroup` to apply theme color scales and other properties to multiple components ### Note -Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the -components used in the examples above, Victory pass-thru props are also documented here: +Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here: - - For theme props, see [VictoryTheme](https://formidable.com/open-source/victory/docs/victory-theme) +- For theme props, see [VictoryTheme](https://formidable.com/open-source/victory/docs/victory-theme) diff --git a/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts index a8ef9efb97e..5f91e30e92c 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts @@ -3,7 +3,9 @@ import chart_bullet_axis_tick_count from '@patternfly/react-tokens/dist/esm/char import chart_bullet_comparative_measure_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_Width'; import chart_bullet_comparative_measure_error_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_Width'; import chart_bullet_comparative_measure_warning_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_Width'; +import chart_bullet_label_grouptitle_Fill from '@patternfly/react-tokens/dist/esm/chart_bullet_label_grouptitle_Fill'; import chart_bullet_label_subtitle_Fill from '@patternfly/react-tokens/dist/esm/chart_bullet_label_subtitle_Fill'; +import chart_bullet_label_title_Fill from '@patternfly/react-tokens/dist/esm/chart_bullet_label_title_Fill'; import chart_bullet_primary_measure_dot_size from '@patternfly/react-tokens/dist/esm/chart_bullet_primary_measure_dot_size'; import chart_bullet_primary_measure_segmented_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_primary_measure_segmented_Width'; import chart_bullet_qualitative_range_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_Width'; @@ -20,15 +22,17 @@ export const BulletStyles = { label: { groupTitle: { // Victory props only + fill: chart_bullet_label_grouptitle_Fill.var, fontSize: chart_global_FontSize_2xl.value }, subTitle: { // Victory props only - fill: chart_bullet_label_subtitle_Fill.value, + fill: chart_bullet_label_subtitle_Fill.var, fontSize: chart_global_FontSize_sm.value }, title: { // Victory props only + fill: chart_bullet_label_title_Fill.var, fontSize: chart_global_FontSize_lg.value } }, diff --git a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts index b483a6fb624..f5096ad4c58 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts @@ -2,6 +2,7 @@ import chart_global_FontFamily from '@patternfly/react-tokens/dist/esm/chart_global_FontFamily'; import chart_global_FontSize_sm from '@patternfly/react-tokens/dist/esm/chart_global_FontSize_sm'; import chart_global_label_Margin from '@patternfly/react-tokens/dist/esm/chart_global_label_Margin'; +import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; import chart_global_letter_spacing from '@patternfly/react-tokens/dist/esm/chart_global_letter_spacing'; import chart_legend_Margin from '@patternfly/react-tokens/dist/esm/chart_legend_Margin'; import chart_legend_position from '@patternfly/react-tokens/dist/esm/chart_legend_position'; @@ -16,7 +17,8 @@ export const CommonStyles = { fontFamily: TYPOGRAPHY_FONT_FAMILY, fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, - margin: chart_global_label_Margin.value + margin: chart_global_label_Margin.value, + fill: chart_global_label_Fill.var }, legend: { margin: chart_legend_Margin.value, diff --git a/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts index bb6bfa8fa8a..4dec2d82c06 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts @@ -2,6 +2,7 @@ import chart_global_FontSize_sm from '@patternfly/react-tokens/dist/esm/chart_global_FontSize_sm'; import chart_global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/chart_global_FontSize_2xl'; import chart_donut_label_subtitle_Fill from '@patternfly/react-tokens/dist/esm/chart_donut_label_subtitle_Fill'; +import chart_donut_label_title_Fill from '@patternfly/react-tokens/dist/esm/chart_donut_label_title_Fill'; import chart_donut_label_subtitle_position from '@patternfly/react-tokens/dist/esm/chart_donut_label_subtitle_position'; // Donut styles @@ -9,12 +10,13 @@ export const DonutStyles = { label: { subTitle: { // Victory props only - fill: chart_donut_label_subtitle_Fill.value, + fill: chart_donut_label_subtitle_Fill.var, fontSize: chart_global_FontSize_sm.value }, subTitlePosition: chart_donut_label_subtitle_position.value, title: { // Victory props only + fill: chart_donut_label_title_Fill.var, fontSize: chart_global_FontSize_2xl.value } } diff --git a/packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts index 0654ac6eda9..200562c4e4b 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts @@ -5,6 +5,6 @@ import chart_donut_threshold_danger_Color from '@patternfly/react-tokens/dist/es // Donut utilization styles export const DonutUtilizationStyles = { thresholds: { - colorScale: [chart_donut_threshold_warning_Color.value, chart_donut_threshold_danger_Color.value] + colorScale: [chart_donut_threshold_warning_Color.var, chart_donut_threshold_danger_Color.var] } }; diff --git a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts index 8064b246fc5..7ac822586dc 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts @@ -8,7 +8,7 @@ export const LegendTooltipStyles = { padding: 40 }, label: { - fill: chart_voronoi_labels_Fill.value, + fill: chart_voronoi_labels_Fill.var, fontWeight: global_FontWeight_bold.value } as any }; diff --git a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts index 9482ddfaab6..a40ec3d1fb0 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts @@ -5,6 +5,7 @@ import chart_global_FontSize_sm from '@patternfly/react-tokens/dist/esm/chart_gl import chart_global_label_Padding from '@patternfly/react-tokens/dist/esm/chart_global_label_Padding'; import chart_global_label_stroke from '@patternfly/react-tokens/dist/esm/chart_global_label_stroke'; import chart_global_label_text_anchor from '@patternfly/react-tokens/dist/esm/chart_global_label_text_anchor'; +import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart_global_layout_Padding'; import chart_global_layout_Height from '@patternfly/react-tokens/dist/esm/chart_global_layout_Height'; import chart_global_layout_Width from '@patternfly/react-tokens/dist/esm/chart_global_layout_Width'; @@ -112,7 +113,8 @@ const LABEL_PROPS = { fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, padding: chart_global_label_Padding.value, - stroke: chart_global_label_stroke.value + stroke: chart_global_label_stroke.var, + fill: chart_global_label_Fill.var }; const LABEL_CENTERED_PROPS = { ...LABEL_PROPS, @@ -137,7 +139,7 @@ export const BaseTheme = { style: { data: { fill: chart_area_data_Fill.var, - fillOpacity: chart_area_Opacity.var, + fillOpacity: chart_area_Opacity.value, // Omit stroke to add a line border from color scale // stroke: chart_global_label_stroke.value, strokeWidth: chart_area_stroke_Width.value @@ -231,8 +233,8 @@ export const BaseTheme = { candlestick: { ...LAYOUT_PROPS, candleColors: { - positive: chart_candelstick_candle_positive_Color.value, - negative: chart_candelstick_candle_negative_Color.value + positive: chart_candelstick_candle_positive_Color.var, + negative: chart_candelstick_candle_negative_Color.var }, style: { data: { @@ -331,7 +333,7 @@ export const BaseTheme = { flyoutStyle: { cornerRadius: chart_tooltip_flyoutStyle_corner_radius.value, fill: chart_tooltip_flyoutStyle_Fill.var, // background - pointerEvents: chart_tooltip_flyoutStyle_PointerEvents.value, + pointerEvents: chart_tooltip_flyoutStyle_PointerEvents.var, stroke: chart_tooltip_flyoutStyle_stroke_Color.var, // border strokeWidth: chart_tooltip_flyoutStyle_stroke_Width.value }, @@ -339,7 +341,7 @@ export const BaseTheme = { pointerWidth: chart_tooltip_pointer_Width.value, style: { fill: chart_tooltip_Fill.var, // text - pointerEvents: chart_tooltip_PointerEvents.value + pointerEvents: chart_tooltip_PointerEvents.var } }, voronoi: { @@ -359,7 +361,7 @@ export const BaseTheme = { // Note: These properties override tooltip flyout: { fill: chart_voronoi_flyout_stroke_Fill.var, // background - pointerEvents: chart_voronoi_flyout_PointerEvents.value, + pointerEvents: chart_voronoi_flyout_PointerEvents.var, stroke: chart_voronoi_flyout_stroke_Color.var, // border strokeWidth: chart_voronoi_flyout_stroke_Width.value } diff --git a/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts index e90fce61935..baa2f64b2b6 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts @@ -12,16 +12,16 @@ import chart_bullet_comparative_measure_warning_stroke_Width from '@patternfly/r import chart_bullet_group_title_divider_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_Fill_Color'; import chart_bullet_group_title_divider_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Color'; import chart_bullet_group_title_divider_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Width'; -import chart_color_black_100 from '@patternfly/react-tokens/dist/esm/chart_color_black_100'; -import chart_color_black_200 from '@patternfly/react-tokens/dist/esm/chart_color_black_200'; -import chart_color_black_300 from '@patternfly/react-tokens/dist/esm/chart_color_black_300'; -import chart_color_black_400 from '@patternfly/react-tokens/dist/esm/chart_color_black_400'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; -import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100'; -import chart_color_red_200 from '@patternfly/react-tokens/dist/esm/chart_color_red_200'; -import chart_color_red_300 from '@patternfly/react-tokens/dist/esm/chart_color_red_300'; -import chart_color_red_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_400'; -import chart_color_red_500 from '@patternfly/react-tokens/dist/esm/chart_color_red_500'; +import chart_bullet_qualitative_range_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_100'; +import chart_bullet_qualitative_range_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_200'; +import chart_bullet_qualitative_range_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_300'; +import chart_bullet_qualitative_range_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_400'; +import chart_bullet_qualitative_range_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_500'; +import chart_bullet_negative_measure_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_100'; +import chart_bullet_negative_measure_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_200'; +import chart_bullet_negative_measure_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_300'; +import chart_bullet_negative_measure_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_400'; +import chart_bullet_negative_measure_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_500'; import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart_global_layout_Padding'; // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit# @@ -108,11 +108,11 @@ export const BulletPrimaryDotMeasureTheme = { export const BulletPrimaryNegativeMeasureTheme = { group: { colorScale: [ - chart_color_red_100.var, - chart_color_red_200.var, - chart_color_red_300.var, - chart_color_red_400.var, - chart_color_red_500.var + chart_bullet_negative_measure_ColorScale_100.var, + chart_bullet_negative_measure_ColorScale_200.var, + chart_bullet_negative_measure_ColorScale_300.var, + chart_bullet_negative_measure_ColorScale_400.var, + chart_bullet_negative_measure_ColorScale_500.var ], height: chart_bullet_Height.value } @@ -129,11 +129,11 @@ export const BulletPrimarySegmentedMeasureTheme = { export const BulletQualitativeRangeTheme = { group: { colorScale: [ - chart_color_black_100.var, - chart_color_black_200.var, - chart_color_black_300.var, - chart_color_black_400.var, - chart_color_black_500.var + chart_bullet_qualitative_range_ColorScale_100.var, + chart_bullet_qualitative_range_ColorScale_200.var, + chart_bullet_qualitative_range_ColorScale_300.var, + chart_bullet_qualitative_range_ColorScale_400.var, + chart_bullet_qualitative_range_ColorScale_500.var ], height: chart_bullet_Height.value } diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts index a363e11fbb5..996a5e04b05 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_200'; +import chart_theme_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_300'; +import chart_theme_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_400'; +import chart_theme_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_blue_300.value, - chart_color_blue_100.value, - chart_color_blue_500.value, - chart_color_blue_200.value, - chart_color_blue_400.value + chart_theme_blue_ColorScale_100.var, + chart_theme_blue_ColorScale_200.var, + chart_theme_blue_ColorScale_300.var, + chart_theme_blue_ColorScale_400.var, + chart_theme_blue_ColorScale_500.var ]; export const DarkBlueColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts index 1a227ef3138..b8899684d26 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; +import chart_theme_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_100'; +import chart_theme_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_200'; +import chart_theme_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_300'; +import chart_theme_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_400'; +import chart_theme_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_cyan_300.value, - chart_color_cyan_100.value, - chart_color_cyan_500.value, - chart_color_cyan_200.value, - chart_color_cyan_400.value + chart_theme_cyan_ColorScale_100.var, + chart_theme_cyan_ColorScale_200.var, + chart_theme_cyan_ColorScale_300.var, + chart_theme_cyan_ColorScale_400.var, + chart_theme_cyan_ColorScale_500.var ]; export const DarkCyanColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts index 82edb12f22b..a3f1e56bf48 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; +import chart_theme_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_100'; +import chart_theme_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_200'; +import chart_theme_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_300'; +import chart_theme_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_400'; +import chart_theme_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_gold_300.value, - chart_color_gold_100.value, - chart_color_gold_500.value, - chart_color_gold_200.value, - chart_color_gold_400.value + chart_theme_gold_ColorScale_100.var, + chart_theme_gold_ColorScale_200.var, + chart_theme_gold_ColorScale_300.var, + chart_theme_gold_ColorScale_400.var, + chart_theme_gold_ColorScale_500.var ]; export const DarkGoldColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts index c2ae0954c05..dc9affa9f82 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_black_100 from '@patternfly/react-tokens/dist/esm/chart_color_black_100'; -import chart_color_black_200 from '@patternfly/react-tokens/dist/esm/chart_color_black_200'; -import chart_color_black_300 from '@patternfly/react-tokens/dist/esm/chart_color_black_300'; -import chart_color_black_400 from '@patternfly/react-tokens/dist/esm/chart_color_black_400'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_theme_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_100'; +import chart_theme_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_200'; +import chart_theme_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_300'; +import chart_theme_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_400'; +import chart_theme_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_black_300.value, - chart_color_black_100.value, - chart_color_black_500.value, - chart_color_black_200.value, - chart_color_black_400.value + chart_theme_gray_ColorScale_100.var, + chart_theme_gray_ColorScale_200.var, + chart_theme_gray_ColorScale_300.var, + chart_theme_gray_ColorScale_400.var, + chart_theme_gray_ColorScale_500.var ]; export const DarkGrayColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts index 5d5f44ac5e4..88a441d396f 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; +import chart_theme_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_100'; +import chart_theme_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_200'; +import chart_theme_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_300'; +import chart_theme_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_400'; +import chart_theme_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_green_300.value, - chart_color_green_100.value, - chart_color_green_500.value, - chart_color_green_200.value, - chart_color_green_400.value + chart_theme_green_ColorScale_100.var, + chart_theme_green_ColorScale_200.var, + chart_theme_green_ColorScale_300.var, + chart_theme_green_ColorScale_400.var, + chart_theme_green_ColorScale_500.var ]; export const DarkGreenColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts index 4aa36b76bfd..6e59b55f754 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-ordered-theme.ts @@ -1,59 +1,59 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; +import chart_theme_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_100'; +import chart_theme_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_200'; +import chart_theme_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_300'; +import chart_theme_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_400'; +import chart_theme_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_500'; +import chart_theme_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_600'; +import chart_theme_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_700'; +import chart_theme_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_800'; +import chart_theme_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_900'; +import chart_theme_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1000'; +import chart_theme_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1100'; +import chart_theme_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1200'; +import chart_theme_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1300'; +import chart_theme_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1400'; +import chart_theme_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1500'; +import chart_theme_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1600'; +import chart_theme_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1700'; +import chart_theme_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1800'; +import chart_theme_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1900'; +import chart_theme_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2000'; +import chart_theme_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2100'; +import chart_theme_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2200'; +import chart_theme_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2300'; +import chart_theme_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2400'; +import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2500'; import { ColorTheme } from '../color-theme'; // The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_blue_300.value, - chart_color_green_300.value, - chart_color_cyan_300.value, - chart_color_gold_300.value, - chart_color_orange_300.value, - chart_color_blue_100.value, - chart_color_green_500.value, - chart_color_cyan_100.value, - chart_color_gold_100.value, - chart_color_orange_500.value, - chart_color_blue_500.value, - chart_color_green_100.value, - chart_color_cyan_500.value, - chart_color_gold_500.value, - chart_color_orange_100.value, - chart_color_blue_200.value, - chart_color_green_400.value, - chart_color_cyan_200.value, - chart_color_gold_200.value, - chart_color_orange_400.value, - chart_color_blue_400.value, - chart_color_green_200.value, - chart_color_cyan_400.value, - chart_color_gold_400.value, - chart_color_orange_200.value + chart_theme_multi_color_ordered_ColorScale_100.var, + chart_theme_multi_color_ordered_ColorScale_200.var, + chart_theme_multi_color_ordered_ColorScale_300.var, + chart_theme_multi_color_ordered_ColorScale_400.var, + chart_theme_multi_color_ordered_ColorScale_500.var, + chart_theme_multi_color_ordered_ColorScale_600.var, + chart_theme_multi_color_ordered_ColorScale_700.var, + chart_theme_multi_color_ordered_ColorScale_800.var, + chart_theme_multi_color_ordered_ColorScale_900.var, + chart_theme_multi_color_ordered_ColorScale_1000.var, + chart_theme_multi_color_ordered_ColorScale_1100.var, + chart_theme_multi_color_ordered_ColorScale_1200.var, + chart_theme_multi_color_ordered_ColorScale_1300.var, + chart_theme_multi_color_ordered_ColorScale_1400.var, + chart_theme_multi_color_ordered_ColorScale_1500.var, + chart_theme_multi_color_ordered_ColorScale_1600.var, + chart_theme_multi_color_ordered_ColorScale_1700.var, + chart_theme_multi_color_ordered_ColorScale_1800.var, + chart_theme_multi_color_ordered_ColorScale_1900.var, + chart_theme_multi_color_ordered_ColorScale_2000.var, + chart_theme_multi_color_ordered_ColorScale_2100.var, + chart_theme_multi_color_ordered_ColorScale_2200.var, + chart_theme_multi_color_ordered_ColorScale_2300.var, + chart_theme_multi_color_ordered_ColorScale_2400.var, + chart_theme_multi_color_ordered_ColorScale_2500.var ]; export const DarkMultiColorOrderedTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-unordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-unordered-theme.ts index 49b8c193cc1..ad9945b1e01 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-unordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/multi-color-unordered-theme.ts @@ -1,79 +1,79 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; -import chart_color_purple_100 from '@patternfly/react-tokens/dist/esm/chart_color_purple_100'; -import chart_color_purple_200 from '@patternfly/react-tokens/dist/esm/chart_color_purple_200'; -import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; -import chart_color_purple_400 from '@patternfly/react-tokens/dist/esm/chart_color_purple_400'; -import chart_color_purple_500 from '@patternfly/react-tokens/dist/esm/chart_color_purple_500'; -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; -import chart_color_black_100 from '@patternfly/react-tokens/dist/esm/chart_color_black_100'; -import chart_color_black_200 from '@patternfly/react-tokens/dist/esm/chart_color_black_200'; -import chart_color_black_300 from '@patternfly/react-tokens/dist/esm/chart_color_black_300'; -import chart_color_black_400 from '@patternfly/react-tokens/dist/esm/chart_color_black_400'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_theme_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_100'; +import chart_theme_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_200'; +import chart_theme_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_300'; +import chart_theme_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_400'; +import chart_theme_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_500'; +import chart_theme_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_600'; +import chart_theme_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_700'; +import chart_theme_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_800'; +import chart_theme_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_900'; +import chart_theme_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1000'; +import chart_theme_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1100'; +import chart_theme_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1200'; +import chart_theme_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1300'; +import chart_theme_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1400'; +import chart_theme_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1500'; +import chart_theme_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1600'; +import chart_theme_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1700'; +import chart_theme_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1800'; +import chart_theme_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1900'; +import chart_theme_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2000'; +import chart_theme_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2100'; +import chart_theme_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2200'; +import chart_theme_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2300'; +import chart_theme_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2400'; +import chart_theme_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2500'; +import chart_theme_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2600'; +import chart_theme_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2700'; +import chart_theme_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2800'; +import chart_theme_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2900'; +import chart_theme_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3000'; +import chart_theme_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3100'; +import chart_theme_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3200'; +import chart_theme_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3300'; +import chart_theme_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3400'; +import chart_theme_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3500'; import { ColorTheme } from '../color-theme'; // The color order below improves the color contrast in unordered charts; area & line // See https://github.com/patternfly/patternfly-next/issues/1551 const COLOR_SCALE = [ - chart_color_blue_300.value, - chart_color_gold_300.value, - chart_color_green_300.value, - chart_color_purple_300.value, - chart_color_orange_300.value, - chart_color_cyan_300.value, - chart_color_black_300.value, - chart_color_blue_100.value, - chart_color_gold_500.value, - chart_color_green_100.value, - chart_color_purple_500.value, - chart_color_orange_100.value, - chart_color_cyan_500.value, - chart_color_black_100.value, - chart_color_blue_500.value, - chart_color_gold_100.value, - chart_color_green_500.value, - chart_color_purple_100.value, - chart_color_orange_500.value, - chart_color_cyan_100.value, - chart_color_black_500.value, - chart_color_blue_200.value, - chart_color_gold_400.value, - chart_color_green_200.value, - chart_color_purple_400.value, - chart_color_orange_200.value, - chart_color_cyan_400.value, - chart_color_black_200.value, - chart_color_blue_400.value, - chart_color_gold_200.value, - chart_color_green_400.value, - chart_color_purple_200.value, - chart_color_orange_400.value, - chart_color_cyan_200.value, - chart_color_black_400.value + chart_theme_multi_color_unordered_ColorScale_100.var, + chart_theme_multi_color_unordered_ColorScale_200.var, + chart_theme_multi_color_unordered_ColorScale_300.var, + chart_theme_multi_color_unordered_ColorScale_400.var, + chart_theme_multi_color_unordered_ColorScale_500.var, + chart_theme_multi_color_unordered_ColorScale_600.var, + chart_theme_multi_color_unordered_ColorScale_700.var, + chart_theme_multi_color_unordered_ColorScale_800.var, + chart_theme_multi_color_unordered_ColorScale_900.var, + chart_theme_multi_color_unordered_ColorScale_1000.var, + chart_theme_multi_color_unordered_ColorScale_1100.var, + chart_theme_multi_color_unordered_ColorScale_1200.var, + chart_theme_multi_color_unordered_ColorScale_1300.var, + chart_theme_multi_color_unordered_ColorScale_1400.var, + chart_theme_multi_color_unordered_ColorScale_1500.var, + chart_theme_multi_color_unordered_ColorScale_1600.var, + chart_theme_multi_color_unordered_ColorScale_1700.var, + chart_theme_multi_color_unordered_ColorScale_1800.var, + chart_theme_multi_color_unordered_ColorScale_1900.var, + chart_theme_multi_color_unordered_ColorScale_2000.var, + chart_theme_multi_color_unordered_ColorScale_2100.var, + chart_theme_multi_color_unordered_ColorScale_2200.var, + chart_theme_multi_color_unordered_ColorScale_2300.var, + chart_theme_multi_color_unordered_ColorScale_2400.var, + chart_theme_multi_color_unordered_ColorScale_2500.var, + chart_theme_multi_color_unordered_ColorScale_2600.var, + chart_theme_multi_color_unordered_ColorScale_2700.var, + chart_theme_multi_color_unordered_ColorScale_2800.var, + chart_theme_multi_color_unordered_ColorScale_2900.var, + chart_theme_multi_color_unordered_ColorScale_3000.var, + chart_theme_multi_color_unordered_ColorScale_3100.var, + chart_theme_multi_color_unordered_ColorScale_3200.var, + chart_theme_multi_color_unordered_ColorScale_3300.var, + chart_theme_multi_color_unordered_ColorScale_3400.var, + chart_theme_multi_color_unordered_ColorScale_3500.var ]; export const DarkMultiColorUnorderedTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts index c06f3936555..4dc7cb3155c 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; +import chart_theme_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_100'; +import chart_theme_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_200'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; +import chart_theme_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_400'; +import chart_theme_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_orange_300.value, - chart_color_orange_100.value, - chart_color_orange_500.value, - chart_color_orange_200.value, - chart_color_orange_400.value + chart_theme_orange_ColorScale_100.var, + chart_theme_orange_ColorScale_200.var, + chart_theme_orange_ColorScale_300.var, + chart_theme_orange_ColorScale_400.var, + chart_theme_orange_ColorScale_500.var ]; export const DarkOrangeColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts index f2cc421607b..6a2ee2dcffc 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_purple_100 from '@patternfly/react-tokens/dist/esm/chart_color_purple_100'; -import chart_color_purple_200 from '@patternfly/react-tokens/dist/esm/chart_color_purple_200'; -import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; -import chart_color_purple_400 from '@patternfly/react-tokens/dist/esm/chart_color_purple_400'; -import chart_color_purple_500 from '@patternfly/react-tokens/dist/esm/chart_color_purple_500'; +import chart_theme_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_100'; +import chart_theme_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_200'; +import chart_theme_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_300'; +import chart_theme_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_400'; +import chart_theme_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_purple_300.value, - chart_color_purple_100.value, - chart_color_purple_500.value, - chart_color_purple_200.value, - chart_color_purple_400.value + chart_theme_purple_ColorScale_100.var, + chart_theme_purple_ColorScale_200.var, + chart_theme_purple_ColorScale_300.var, + chart_theme_purple_ColorScale_400.var, + chart_theme_purple_ColorScale_500.var ]; export const DarkPurpleColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts index ca2a787d5f7..b6ab86f3fc0 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts @@ -28,7 +28,7 @@ export const DonutUtilizationStaticTheme = { ] }, pie: { - colorScale: [chart_donut_threshold_first_Color.value], + colorScale: [chart_donut_threshold_first_Color.var], padding: chart_donut_utilization_static_pie_Padding.value } }; diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts index 5f7709bee50..52f071c7316 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_200'; +import chart_theme_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_300'; +import chart_theme_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_400'; +import chart_theme_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_blue_300.var, - chart_color_blue_100.var, - chart_color_blue_500.var, - chart_color_blue_200.var, - chart_color_blue_400.var + chart_theme_blue_ColorScale_100.var, + chart_theme_blue_ColorScale_200.var, + chart_theme_blue_ColorScale_300.var, + chart_theme_blue_ColorScale_400.var, + chart_theme_blue_ColorScale_500.var ]; export const LightBlueColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts index 039a3596218..6e2073d4086 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; +import chart_theme_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_100'; +import chart_theme_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_200'; +import chart_theme_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_300'; +import chart_theme_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_400'; +import chart_theme_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_cyan_300.var, - chart_color_cyan_100.var, - chart_color_cyan_500.var, - chart_color_cyan_200.var, - chart_color_cyan_400.var + chart_theme_cyan_ColorScale_100.var, + chart_theme_cyan_ColorScale_200.var, + chart_theme_cyan_ColorScale_300.var, + chart_theme_cyan_ColorScale_400.var, + chart_theme_cyan_ColorScale_500.var ]; export const LightCyanColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts index 5c81b39dc62..f770ee46e92 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; +import chart_theme_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_100'; +import chart_theme_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_200'; +import chart_theme_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_300'; +import chart_theme_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_400'; +import chart_theme_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_gold_300.var, - chart_color_gold_100.var, - chart_color_gold_500.var, - chart_color_gold_200.var, - chart_color_gold_400.var + chart_theme_gold_ColorScale_100.var, + chart_theme_gold_ColorScale_200.var, + chart_theme_gold_ColorScale_300.var, + chart_theme_gold_ColorScale_400.var, + chart_theme_gold_ColorScale_500.var ]; export const LightGoldColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts index 17d1bf29a84..d3836d92b9b 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_black_100 from '@patternfly/react-tokens/dist/esm/chart_color_black_100'; -import chart_color_black_200 from '@patternfly/react-tokens/dist/esm/chart_color_black_200'; -import chart_color_black_300 from '@patternfly/react-tokens/dist/esm/chart_color_black_300'; -import chart_color_black_400 from '@patternfly/react-tokens/dist/esm/chart_color_black_400'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_theme_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_100'; +import chart_theme_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_200'; +import chart_theme_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_300'; +import chart_theme_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_400'; +import chart_theme_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_black_300.var, - chart_color_black_100.var, - chart_color_black_500.var, - chart_color_black_200.var, - chart_color_black_400.var + chart_theme_gray_ColorScale_100.var, + chart_theme_gray_ColorScale_200.var, + chart_theme_gray_ColorScale_300.var, + chart_theme_gray_ColorScale_400.var, + chart_theme_gray_ColorScale_500.var ]; export const LightGrayColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts index 69caa51f8db..2a27a4546d8 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; +import chart_theme_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_100'; +import chart_theme_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_200'; +import chart_theme_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_300'; +import chart_theme_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_400'; +import chart_theme_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_green_300.var, - chart_color_green_100.var, - chart_color_green_500.var, - chart_color_green_200.var, - chart_color_green_400.var + chart_theme_green_ColorScale_100.var, + chart_theme_green_ColorScale_200.var, + chart_theme_green_ColorScale_300.var, + chart_theme_green_ColorScale_400.var, + chart_theme_green_ColorScale_500.var ]; export const LightGreenColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts index 53ee8789c21..a1bf997dc4c 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-ordered-theme.ts @@ -1,61 +1,60 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; +import chart_theme_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_100'; +import chart_theme_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_200'; +import chart_theme_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_300'; +import chart_theme_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_400'; +import chart_theme_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_500'; +import chart_theme_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_600'; +import chart_theme_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_700'; +import chart_theme_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_800'; +import chart_theme_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_900'; +import chart_theme_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1000'; +import chart_theme_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1100'; +import chart_theme_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1200'; +import chart_theme_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1300'; +import chart_theme_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1400'; +import chart_theme_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1500'; +import chart_theme_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1600'; +import chart_theme_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1700'; +import chart_theme_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1800'; +import chart_theme_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_1900'; +import chart_theme_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2000'; +import chart_theme_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2100'; +import chart_theme_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2200'; +import chart_theme_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2300'; +import chart_theme_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2400'; +import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2500'; import { ColorTheme } from '../color-theme'; // The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_blue_300.var, - chart_color_green_300.var, - chart_color_cyan_300.var, - chart_color_gold_300.var, - chart_color_orange_300.var, - chart_color_blue_100.var, - chart_color_green_500.var, - chart_color_cyan_100.var, - chart_color_gold_100.var, - chart_color_orange_500.var, - chart_color_blue_500.var, - chart_color_green_100.var, - chart_color_cyan_500.var, - chart_color_gold_500.var, - chart_color_orange_100.var, - chart_color_blue_200.var, - chart_color_green_400.var, - chart_color_cyan_200.var, - chart_color_gold_200.var, - chart_color_orange_400.var, - chart_color_blue_400.var, - chart_color_green_200.var, - chart_color_cyan_400.var, - chart_color_gold_400.var, - chart_color_orange_200.var + chart_theme_multi_color_ordered_ColorScale_100.var, + chart_theme_multi_color_ordered_ColorScale_200.var, + chart_theme_multi_color_ordered_ColorScale_300.var, + chart_theme_multi_color_ordered_ColorScale_400.var, + chart_theme_multi_color_ordered_ColorScale_500.var, + chart_theme_multi_color_ordered_ColorScale_600.var, + chart_theme_multi_color_ordered_ColorScale_700.var, + chart_theme_multi_color_ordered_ColorScale_800.var, + chart_theme_multi_color_ordered_ColorScale_900.var, + chart_theme_multi_color_ordered_ColorScale_1000.var, + chart_theme_multi_color_ordered_ColorScale_1100.var, + chart_theme_multi_color_ordered_ColorScale_1200.var, + chart_theme_multi_color_ordered_ColorScale_1300.var, + chart_theme_multi_color_ordered_ColorScale_1400.var, + chart_theme_multi_color_ordered_ColorScale_1500.var, + chart_theme_multi_color_ordered_ColorScale_1600.var, + chart_theme_multi_color_ordered_ColorScale_1700.var, + chart_theme_multi_color_ordered_ColorScale_1800.var, + chart_theme_multi_color_ordered_ColorScale_1900.var, + chart_theme_multi_color_ordered_ColorScale_2000.var, + chart_theme_multi_color_ordered_ColorScale_2100.var, + chart_theme_multi_color_ordered_ColorScale_2200.var, + chart_theme_multi_color_ordered_ColorScale_2300.var, + chart_theme_multi_color_ordered_ColorScale_2400.var, + chart_theme_multi_color_ordered_ColorScale_2500.var ]; - export const LightMultiColorOrderedTheme = ColorTheme({ COLOR_SCALE }); diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-unordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-unordered-theme.ts index 8c17d699a5d..09c21cb4912 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-unordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/multi-color-unordered-theme.ts @@ -1,79 +1,79 @@ /* eslint-disable camelcase */ -import chart_color_blue_100 from '@patternfly/react-tokens/dist/esm/chart_color_blue_100'; -import chart_color_blue_200 from '@patternfly/react-tokens/dist/esm/chart_color_blue_200'; -import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; -import chart_color_blue_400 from '@patternfly/react-tokens/dist/esm/chart_color_blue_400'; -import chart_color_blue_500 from '@patternfly/react-tokens/dist/esm/chart_color_blue_500'; -import chart_color_green_100 from '@patternfly/react-tokens/dist/esm/chart_color_green_100'; -import chart_color_green_200 from '@patternfly/react-tokens/dist/esm/chart_color_green_200'; -import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_green_400 from '@patternfly/react-tokens/dist/esm/chart_color_green_400'; -import chart_color_green_500 from '@patternfly/react-tokens/dist/esm/chart_color_green_500'; -import chart_color_cyan_100 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_100'; -import chart_color_cyan_200 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_200'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_cyan_400 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_400'; -import chart_color_cyan_500 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_500'; -import chart_color_purple_100 from '@patternfly/react-tokens/dist/esm/chart_color_purple_100'; -import chart_color_purple_200 from '@patternfly/react-tokens/dist/esm/chart_color_purple_200'; -import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; -import chart_color_purple_400 from '@patternfly/react-tokens/dist/esm/chart_color_purple_400'; -import chart_color_purple_500 from '@patternfly/react-tokens/dist/esm/chart_color_purple_500'; -import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100'; -import chart_color_gold_200 from '@patternfly/react-tokens/dist/esm/chart_color_gold_200'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; -import chart_color_gold_400 from '@patternfly/react-tokens/dist/esm/chart_color_gold_400'; -import chart_color_gold_500 from '@patternfly/react-tokens/dist/esm/chart_color_gold_500'; -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; -import chart_color_black_100 from '@patternfly/react-tokens/dist/esm/chart_color_black_100'; -import chart_color_black_200 from '@patternfly/react-tokens/dist/esm/chart_color_black_200'; -import chart_color_black_300 from '@patternfly/react-tokens/dist/esm/chart_color_black_300'; -import chart_color_black_400 from '@patternfly/react-tokens/dist/esm/chart_color_black_400'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_theme_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_100'; +import chart_theme_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_200'; +import chart_theme_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_300'; +import chart_theme_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_400'; +import chart_theme_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_500'; +import chart_theme_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_600'; +import chart_theme_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_700'; +import chart_theme_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_800'; +import chart_theme_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_900'; +import chart_theme_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1000'; +import chart_theme_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1100'; +import chart_theme_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1200'; +import chart_theme_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1300'; +import chart_theme_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1400'; +import chart_theme_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1500'; +import chart_theme_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1600'; +import chart_theme_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1700'; +import chart_theme_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1800'; +import chart_theme_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_1900'; +import chart_theme_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2000'; +import chart_theme_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2100'; +import chart_theme_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2200'; +import chart_theme_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2300'; +import chart_theme_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2400'; +import chart_theme_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2500'; +import chart_theme_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2600'; +import chart_theme_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2700'; +import chart_theme_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2800'; +import chart_theme_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_2900'; +import chart_theme_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3000'; +import chart_theme_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3100'; +import chart_theme_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3200'; +import chart_theme_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3300'; +import chart_theme_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3400'; +import chart_theme_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3500'; import { ColorTheme } from '../color-theme'; // The color order below improves the color contrast in unordered charts; area & line // See https://github.com/patternfly/patternfly-next/issues/1551 const COLOR_SCALE = [ - chart_color_blue_300.var, - chart_color_gold_300.var, - chart_color_green_300.var, - chart_color_purple_300.var, - chart_color_orange_300.var, - chart_color_cyan_300.var, - chart_color_black_300.var, - chart_color_blue_100.var, - chart_color_gold_500.var, - chart_color_green_100.var, - chart_color_purple_500.var, - chart_color_orange_100.var, - chart_color_cyan_500.var, - chart_color_black_100.var, - chart_color_blue_500.var, - chart_color_gold_100.var, - chart_color_green_500.var, - chart_color_purple_100.var, - chart_color_orange_500.var, - chart_color_cyan_100.var, - chart_color_black_500.var, - chart_color_blue_200.var, - chart_color_gold_400.var, - chart_color_green_200.var, - chart_color_purple_400.var, - chart_color_orange_200.var, - chart_color_cyan_400.var, - chart_color_black_200.var, - chart_color_blue_400.var, - chart_color_gold_200.var, - chart_color_green_400.var, - chart_color_purple_200.var, - chart_color_orange_400.var, - chart_color_cyan_200.var, - chart_color_black_400.var + chart_theme_multi_color_unordered_ColorScale_100.var, + chart_theme_multi_color_unordered_ColorScale_200.var, + chart_theme_multi_color_unordered_ColorScale_300.var, + chart_theme_multi_color_unordered_ColorScale_400.var, + chart_theme_multi_color_unordered_ColorScale_500.var, + chart_theme_multi_color_unordered_ColorScale_600.var, + chart_theme_multi_color_unordered_ColorScale_700.var, + chart_theme_multi_color_unordered_ColorScale_800.var, + chart_theme_multi_color_unordered_ColorScale_900.var, + chart_theme_multi_color_unordered_ColorScale_1000.var, + chart_theme_multi_color_unordered_ColorScale_1100.var, + chart_theme_multi_color_unordered_ColorScale_1200.var, + chart_theme_multi_color_unordered_ColorScale_1300.var, + chart_theme_multi_color_unordered_ColorScale_1400.var, + chart_theme_multi_color_unordered_ColorScale_1500.var, + chart_theme_multi_color_unordered_ColorScale_1600.var, + chart_theme_multi_color_unordered_ColorScale_1700.var, + chart_theme_multi_color_unordered_ColorScale_1800.var, + chart_theme_multi_color_unordered_ColorScale_1900.var, + chart_theme_multi_color_unordered_ColorScale_2000.var, + chart_theme_multi_color_unordered_ColorScale_2100.var, + chart_theme_multi_color_unordered_ColorScale_2200.var, + chart_theme_multi_color_unordered_ColorScale_2300.var, + chart_theme_multi_color_unordered_ColorScale_2400.var, + chart_theme_multi_color_unordered_ColorScale_2500.var, + chart_theme_multi_color_unordered_ColorScale_2600.var, + chart_theme_multi_color_unordered_ColorScale_2700.var, + chart_theme_multi_color_unordered_ColorScale_2800.var, + chart_theme_multi_color_unordered_ColorScale_2900.var, + chart_theme_multi_color_unordered_ColorScale_3000.var, + chart_theme_multi_color_unordered_ColorScale_3100.var, + chart_theme_multi_color_unordered_ColorScale_3200.var, + chart_theme_multi_color_unordered_ColorScale_3300.var, + chart_theme_multi_color_unordered_ColorScale_3400.var, + chart_theme_multi_color_unordered_ColorScale_3500.var ]; export const LightMultiColorUnorderedTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts index 2fd774b8e4f..0f4f9d25297 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_orange_100 from '@patternfly/react-tokens/dist/esm/chart_color_orange_100'; -import chart_color_orange_200 from '@patternfly/react-tokens/dist/esm/chart_color_orange_200'; -import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; -import chart_color_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_orange_400'; -import chart_color_orange_500 from '@patternfly/react-tokens/dist/esm/chart_color_orange_500'; +import chart_theme_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_100'; +import chart_theme_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_200'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; +import chart_theme_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_400'; +import chart_theme_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_orange_300.var, - chart_color_orange_100.var, - chart_color_orange_500.var, - chart_color_orange_200.var, - chart_color_orange_400.var + chart_theme_orange_ColorScale_100.var, + chart_theme_orange_ColorScale_200.var, + chart_theme_orange_ColorScale_300.var, + chart_theme_orange_ColorScale_400.var, + chart_theme_orange_ColorScale_500.var ]; export const LightOrangeColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts index ad728a66afe..b1dc10b23d1 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts @@ -1,19 +1,19 @@ /* eslint-disable camelcase */ -import chart_color_purple_100 from '@patternfly/react-tokens/dist/esm/chart_color_purple_100'; -import chart_color_purple_200 from '@patternfly/react-tokens/dist/esm/chart_color_purple_200'; -import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300'; -import chart_color_purple_400 from '@patternfly/react-tokens/dist/esm/chart_color_purple_400'; -import chart_color_purple_500 from '@patternfly/react-tokens/dist/esm/chart_color_purple_500'; +import chart_theme_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_100'; +import chart_theme_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_200'; +import chart_theme_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_300'; +import chart_theme_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_400'; +import chart_theme_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_500'; import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_color_purple_300.var, - chart_color_purple_100.var, - chart_color_purple_500.var, - chart_color_purple_200.var, - chart_color_purple_400.var + chart_theme_purple_ColorScale_100.var, + chart_theme_purple_ColorScale_200.var, + chart_theme_purple_ColorScale_300.var, + chart_theme_purple_ColorScale_400.var, + chart_theme_purple_ColorScale_500.var ]; export const LightPurpleColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap index 8c0e31e3794..430fb122746 100644 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -34,7 +34,7 @@ exports[`ChartThreshold 1`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-color-blue-300, #06c); stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" + style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" /> @@ -86,7 +86,7 @@ exports[`ChartThreshold 2`] = ` d="M50,250L57,246L64,242L71,238L78,234L85,230L92,226L99,222L106,218L113,214.00000000000003L120,210L126.99999999999999,206L134,202L141,198L148,194L155,190L162,185.99999999999997L169,181.99999999999997L176.00000000000003,177.99999999999997L183.00000000000003,173.99999999999997L190.00000000000003,169.99999999999997L197.00000000000003,165.99999999999997L204.00000000000006,161.99999999999997L211.00000000000006,157.99999999999994L218.00000000000006,153.99999999999994L225.00000000000006,149.99999999999997L232.00000000000006,145.99999999999997L239.00000000000006,141.99999999999997L246.00000000000006,137.99999999999997L253.00000000000009,133.99999999999997L260.00000000000006,129.99999999999994L267.00000000000006,125.99999999999996L274.0000000000001,121.99999999999996L281.0000000000001,117.99999999999996L288.0000000000001,113.99999999999994L295.0000000000001,109.99999999999994L302.0000000000001,105.99999999999994L309.0000000000001,101.99999999999993L316.0000000000001,97.99999999999993L323.00000000000017,93.99999999999993L330.00000000000017,89.99999999999993L337.00000000000017,85.99999999999991L344.00000000000017,81.99999999999991L351.00000000000017,77.99999999999991L358.00000000000017,73.99999999999991L365.00000000000017,69.9999999999999L372.00000000000017,65.9999999999999L379.0000000000002,61.9999999999999L386.0000000000002,57.9999999999999L393.0000000000002,53.99999999999989L400,50" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-color-blue-300, #06c); stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" + style="fill: var(--pf-chart-line--data--Fill, transparent); stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" /> @@ -139,7 +139,7 @@ exports[`renders component data 1`] = ` d="M50,83.33333333333334L90,83.33333333333334L90,50L150,50" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-color-blue-300, #06c); width: 13px; stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" + style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 13px; stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" /> @@ -179,7 +179,7 @@ exports[`renders component data 1`] = ` @@ -210,7 +210,7 @@ exports[`renders component data 1`] = ` @@ -241,7 +241,7 @@ exports[`renders component data 1`] = ` @@ -272,7 +272,7 @@ exports[`renders component data 1`] = ` @@ -303,7 +303,7 @@ exports[`renders component data 1`] = ` @@ -348,7 +348,7 @@ exports[`renders component data 1`] = ` @@ -379,7 +379,7 @@ exports[`renders component data 1`] = ` @@ -410,7 +410,7 @@ exports[`renders component data 1`] = ` @@ -441,7 +441,7 @@ exports[`renders component data 1`] = ` @@ -472,7 +472,7 @@ exports[`renders component data 1`] = ` @@ -503,7 +503,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index bc1802be9c6..987a43e3a88 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -22,7 +22,6 @@ import { ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts.css'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; @@ -99,11 +98,11 @@ class MultiColorChart extends React.Component { { name: 'Birds' }, { name: 'Cats Threshold', - symbol: { fill: chart_color_blue_300.value, type: 'threshold' } + symbol: { fill: chart_color_blue_300.var, type: 'threshold' } }, { name: 'Birds Threshold', - symbol: { fill: chart_color_orange_300.value, type: 'threshold' } + symbol: { fill: chart_color_orange_300.var, type: 'threshold' } } ]} itemsPerRow={itemsPerRow} @@ -152,8 +151,8 @@ class MultiColorChart extends React.Component { ]} style={{ data: { - stroke: chart_color_blue_300.value - } + stroke: chart_color_blue_300.var + } }} /> diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap index 9425b763f56..80498bf429d 100644 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -38,7 +38,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); width: 6px; fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx index ff672df7780..e9aa4d9271a 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; +import chart_container_cursor_line_Fill from '@patternfly/react-tokens/dist/esm/chart_container_cursor_line_Fill'; import * as React from 'react'; import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container'; @@ -34,7 +34,7 @@ export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerTy container.defaultProps.cursorComponent = ( ); diff --git a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts index 4c9733c26a0..27cea4f5c91 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts @@ -1,6 +1,6 @@ /* eslint-disable camelcase */ import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity'; -import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; +import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; interface ChartInteractiveLegendInterface { // The names or groups of names associated with each data series @@ -57,10 +57,10 @@ export const getInteractiveLegendItemStyles = (hidden = false) => ? {} : { labels: { - fill: chart_color_black_500.value + fill: chart_global_label_Fill.var }, symbol: { - fill: chart_color_black_500.value, + fill: chart_global_label_Fill.var, type: 'eyeSlash' } }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index 459c936c283..6aba552d4ec 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -216,7 +216,7 @@ export const getLegendTooltipVisibleData = ({ const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; if ( !activePoint || - (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.value) + (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) ) { continue; // Skip hidden data } @@ -253,7 +253,7 @@ export const getLegendTooltipVisibleText = ({ const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; if ( !activePoint || - (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.value) + (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) ) { continue; // Skip hidden data } diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap index 0d66d5fcb0b..0a9d458d431 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap @@ -80,7 +80,7 @@ exports[`renders container via ChartGroup 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-color-blue-300, #06c); width: 6px; fill-opacity: var(--pf-chart-area--Opacity, 0.3); stroke-width: 2; stroke: var(--pf-chart-color-blue-300, #06c);" + style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" /> diff --git a/packages/react-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs.css.js index 91d5909af54..ab32e68f539 100644 --- a/packages/react-docs/patternfly-docs.css.js +++ b/packages/react-docs/patternfly-docs.css.js @@ -19,3 +19,10 @@ import '@patternfly/patternfly/patternfly.css'; // Utilities import '@patternfly/patternfly/patternfly-addons.css'; + +// Charts +import '@patternfly/patternfly/patternfly-charts.css'; + +// Dark theme +import '@patternfly/patternfly/patternfly-theme-dark.css'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.css';