From 75f06b04c2ac7f48fabe33592f34578662630159 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Wed, 4 May 2022 19:28:13 -0500 Subject: [PATCH 1/9] feat(charts): added PF dark theme support --- .../ChartArea/examples/ChartArea.md | 1 + .../components/ChartBar/examples/ChartBar.md | 1 + .../ChartBullet/examples/ChartBullet.md | 1 + .../src/components/ChartLabel/ChartLabel.tsx | 1 + .../ChartLine/examples/ChartLine.md | 1 + .../ChartScatter/examples/ChartScatter.md | 1 + .../ChartStack/examples/ChartStack.md | 1 + .../ChartTheme/examples/ChartTheme.md | 1 + .../ChartTheme/styles/bullet-styles.ts | 6 +- .../ChartTheme/styles/common-styles.ts | 4 +- .../ChartTheme/styles/donut-styles.ts | 4 +- .../styles/donut-utilization-styles.ts | 2 +- .../styles/legend-tooltip-styles.ts | 2 +- .../ChartTheme/themes/base-theme.ts | 16 +- .../ChartTheme/themes/bullet-theme.ts | 40 ++--- .../themes/dark/blue-color-theme.ts | 20 +-- .../themes/dark/cyan-color-theme.ts | 20 +-- .../themes/dark/gold-color-theme.ts | 20 +-- .../themes/dark/gray-color-theme.ts | 20 +-- .../themes/dark/green-color-theme.ts | 20 +-- .../themes/dark/multi-color-ordered-theme.ts | 100 ++++++------- .../dark/multi-color-unordered-theme.ts | 140 +++++++++--------- .../themes/dark/orange-color-theme.ts | 20 +-- .../themes/dark/purple-color-theme.ts | 20 +-- .../themes/donut-utilization-theme.ts | 2 +- .../themes/light/blue-color-theme.ts | 20 +-- .../themes/light/cyan-color-theme.ts | 20 +-- .../themes/light/gold-color-theme.ts | 20 +-- .../themes/light/gray-color-theme.ts | 20 +-- .../themes/light/green-color-theme.ts | 20 +-- .../themes/light/multi-color-ordered-theme.ts | 101 +++++++------ .../light/multi-color-unordered-theme.ts | 140 +++++++++--------- .../themes/light/orange-color-theme.ts | 20 +-- .../themes/light/purple-color-theme.ts | 20 +-- .../ChartThreshold/examples/ChartThreshold.md | 13 +- .../ChartTooltip/examples/ChartTooltip.md | 1 + .../components/ChartUtils/chart-container.tsx | 4 +- .../ChartUtils/chart-interactive-legend.ts | 6 +- .../components/ChartUtils/chart-tooltip.ts | 4 +- packages/react-docs/patternfly-docs.css.js | 2 + 40 files changed, 448 insertions(+), 427 deletions(-) diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 5fb254faf9c..983b88d5322 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -14,6 +14,7 @@ hideDarkMode: true import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import '@patternfly/patternfly/patternfly-charts.css'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md index 816f3d5009a..c5ff7dccaa6 100644 --- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md +++ b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md @@ -13,6 +13,7 @@ hideDarkMode: true import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md index bcbc5e0db16..3dbad595abb 100644 --- a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md @@ -10,6 +10,7 @@ hideDarkMode: true --- import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/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/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index d4c42c68343..7d708b5f87c 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -13,6 +13,7 @@ hideDarkMode: true import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartScatter/examples/ChartScatter.md b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md index 1461b20006f..78dd00be76a 100644 --- a/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md +++ b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md @@ -23,6 +23,7 @@ import { ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartStack/examples/ChartStack.md b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md index b2feca6568d..c2d491e2954 100644 --- a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md +++ b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md @@ -24,6 +24,7 @@ import { createContainer, getResizeObserver } from '@patternfly/react-charts'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index efe57b9de15..9bcfc8908e4 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -20,6 +20,7 @@ import { ChartVoronoiContainer, mergeTheme } from '@patternfly/react-charts'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; 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..93490750e21 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_dark_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_100'; +import chart_theme_dark_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_200'; +import chart_theme_dark_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_300'; +import chart_theme_dark_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_400'; +import chart_theme_dark_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_blue_ColorScale_100.var, + chart_theme_dark_blue_ColorScale_200.var, + chart_theme_dark_blue_ColorScale_300.var, + chart_theme_dark_blue_ColorScale_400.var, + chart_theme_dark_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..e533f70a0d8 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_dark_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_100'; +import chart_theme_dark_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_200'; +import chart_theme_dark_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_300'; +import chart_theme_dark_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_400'; +import chart_theme_dark_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_cyan_ColorScale_100.var, + chart_theme_dark_cyan_ColorScale_200.var, + chart_theme_dark_cyan_ColorScale_300.var, + chart_theme_dark_cyan_ColorScale_400.var, + chart_theme_dark_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..bc141d0c737 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_dark_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_100'; +import chart_theme_dark_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_200'; +import chart_theme_dark_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_300'; +import chart_theme_dark_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_400'; +import chart_theme_dark_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_gold_ColorScale_100.var, + chart_theme_dark_gold_ColorScale_200.var, + chart_theme_dark_gold_ColorScale_300.var, + chart_theme_dark_gold_ColorScale_400.var, + chart_theme_dark_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..9053f8857b3 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_dark_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_100'; +import chart_theme_dark_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_200'; +import chart_theme_dark_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_300'; +import chart_theme_dark_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_400'; +import chart_theme_dark_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_gray_ColorScale_100.var, + chart_theme_dark_gray_ColorScale_200.var, + chart_theme_dark_gray_ColorScale_300.var, + chart_theme_dark_gray_ColorScale_400.var, + chart_theme_dark_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..36a830f9bb5 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_dark_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_100'; +import chart_theme_dark_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_200'; +import chart_theme_dark_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_300'; +import chart_theme_dark_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_400'; +import chart_theme_dark_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_green_ColorScale_100.var, + chart_theme_dark_green_ColorScale_200.var, + chart_theme_dark_green_ColorScale_300.var, + chart_theme_dark_green_ColorScale_400.var, + chart_theme_dark_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..50162494bbd 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_dark_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_100'; +import chart_theme_dark_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_200'; +import chart_theme_dark_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_300'; +import chart_theme_dark_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_400'; +import chart_theme_dark_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_500'; +import chart_theme_dark_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_600'; +import chart_theme_dark_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_700'; +import chart_theme_dark_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_800'; +import chart_theme_dark_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_900'; +import chart_theme_dark_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1000'; +import chart_theme_dark_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1100'; +import chart_theme_dark_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1200'; +import chart_theme_dark_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1300'; +import chart_theme_dark_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1400'; +import chart_theme_dark_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1500'; +import chart_theme_dark_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1600'; +import chart_theme_dark_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1700'; +import chart_theme_dark_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1800'; +import chart_theme_dark_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1900'; +import chart_theme_dark_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2000'; +import chart_theme_dark_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2100'; +import chart_theme_dark_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2200'; +import chart_theme_dark_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2300'; +import chart_theme_dark_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2400'; +import chart_theme_dark_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_multi_color_ordered_ColorScale_100.var, + chart_theme_dark_multi_color_ordered_ColorScale_200.var, + chart_theme_dark_multi_color_ordered_ColorScale_300.var, + chart_theme_dark_multi_color_ordered_ColorScale_400.var, + chart_theme_dark_multi_color_ordered_ColorScale_500.var, + chart_theme_dark_multi_color_ordered_ColorScale_600.var, + chart_theme_dark_multi_color_ordered_ColorScale_700.var, + chart_theme_dark_multi_color_ordered_ColorScale_800.var, + chart_theme_dark_multi_color_ordered_ColorScale_900.var, + chart_theme_dark_multi_color_ordered_ColorScale_1000.var, + chart_theme_dark_multi_color_ordered_ColorScale_1100.var, + chart_theme_dark_multi_color_ordered_ColorScale_1200.var, + chart_theme_dark_multi_color_ordered_ColorScale_1300.var, + chart_theme_dark_multi_color_ordered_ColorScale_1400.var, + chart_theme_dark_multi_color_ordered_ColorScale_1500.var, + chart_theme_dark_multi_color_ordered_ColorScale_1600.var, + chart_theme_dark_multi_color_ordered_ColorScale_1700.var, + chart_theme_dark_multi_color_ordered_ColorScale_1800.var, + chart_theme_dark_multi_color_ordered_ColorScale_1900.var, + chart_theme_dark_multi_color_ordered_ColorScale_2000.var, + chart_theme_dark_multi_color_ordered_ColorScale_2100.var, + chart_theme_dark_multi_color_ordered_ColorScale_2200.var, + chart_theme_dark_multi_color_ordered_ColorScale_2300.var, + chart_theme_dark_multi_color_ordered_ColorScale_2400.var, + chart_theme_dark_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..3af597710bc 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_dark_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_100'; +import chart_theme_dark_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_200'; +import chart_theme_dark_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_300'; +import chart_theme_dark_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_400'; +import chart_theme_dark_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_500'; +import chart_theme_dark_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_600'; +import chart_theme_dark_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_700'; +import chart_theme_dark_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_800'; +import chart_theme_dark_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_900'; +import chart_theme_dark_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1000'; +import chart_theme_dark_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1100'; +import chart_theme_dark_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1200'; +import chart_theme_dark_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1300'; +import chart_theme_dark_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1400'; +import chart_theme_dark_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1500'; +import chart_theme_dark_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1600'; +import chart_theme_dark_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1700'; +import chart_theme_dark_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1800'; +import chart_theme_dark_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1900'; +import chart_theme_dark_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2000'; +import chart_theme_dark_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2100'; +import chart_theme_dark_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2200'; +import chart_theme_dark_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2300'; +import chart_theme_dark_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2400'; +import chart_theme_dark_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2500'; +import chart_theme_dark_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2600'; +import chart_theme_dark_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2700'; +import chart_theme_dark_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2800'; +import chart_theme_dark_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2900'; +import chart_theme_dark_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3000'; +import chart_theme_dark_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3100'; +import chart_theme_dark_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3200'; +import chart_theme_dark_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3300'; +import chart_theme_dark_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3400'; +import chart_theme_dark_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_multi_color_unordered_ColorScale_100.var, + chart_theme_dark_multi_color_unordered_ColorScale_200.var, + chart_theme_dark_multi_color_unordered_ColorScale_300.var, + chart_theme_dark_multi_color_unordered_ColorScale_400.var, + chart_theme_dark_multi_color_unordered_ColorScale_500.var, + chart_theme_dark_multi_color_unordered_ColorScale_600.var, + chart_theme_dark_multi_color_unordered_ColorScale_700.var, + chart_theme_dark_multi_color_unordered_ColorScale_800.var, + chart_theme_dark_multi_color_unordered_ColorScale_900.var, + chart_theme_dark_multi_color_unordered_ColorScale_1000.var, + chart_theme_dark_multi_color_unordered_ColorScale_1100.var, + chart_theme_dark_multi_color_unordered_ColorScale_1200.var, + chart_theme_dark_multi_color_unordered_ColorScale_1300.var, + chart_theme_dark_multi_color_unordered_ColorScale_1400.var, + chart_theme_dark_multi_color_unordered_ColorScale_1500.var, + chart_theme_dark_multi_color_unordered_ColorScale_1600.var, + chart_theme_dark_multi_color_unordered_ColorScale_1700.var, + chart_theme_dark_multi_color_unordered_ColorScale_1800.var, + chart_theme_dark_multi_color_unordered_ColorScale_1900.var, + chart_theme_dark_multi_color_unordered_ColorScale_2000.var, + chart_theme_dark_multi_color_unordered_ColorScale_2100.var, + chart_theme_dark_multi_color_unordered_ColorScale_2200.var, + chart_theme_dark_multi_color_unordered_ColorScale_2300.var, + chart_theme_dark_multi_color_unordered_ColorScale_2400.var, + chart_theme_dark_multi_color_unordered_ColorScale_2500.var, + chart_theme_dark_multi_color_unordered_ColorScale_2600.var, + chart_theme_dark_multi_color_unordered_ColorScale_2700.var, + chart_theme_dark_multi_color_unordered_ColorScale_2800.var, + chart_theme_dark_multi_color_unordered_ColorScale_2900.var, + chart_theme_dark_multi_color_unordered_ColorScale_3000.var, + chart_theme_dark_multi_color_unordered_ColorScale_3100.var, + chart_theme_dark_multi_color_unordered_ColorScale_3200.var, + chart_theme_dark_multi_color_unordered_ColorScale_3300.var, + chart_theme_dark_multi_color_unordered_ColorScale_3400.var, + chart_theme_dark_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..a3d6ca40750 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_dark_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_100'; +import chart_theme_dark_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_200'; +import chart_theme_dark_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_300'; +import chart_theme_dark_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_400'; +import chart_theme_dark_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_orange_ColorScale_100.var, + chart_theme_dark_orange_ColorScale_200.var, + chart_theme_dark_orange_ColorScale_300.var, + chart_theme_dark_orange_ColorScale_400.var, + chart_theme_dark_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..3276b3e80a3 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_dark_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_100'; +import chart_theme_dark_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_200'; +import chart_theme_dark_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_300'; +import chart_theme_dark_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_400'; +import chart_theme_dark_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_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_dark_purple_ColorScale_100.var, + chart_theme_dark_purple_ColorScale_200.var, + chart_theme_dark_purple_ColorScale_300.var, + chart_theme_dark_purple_ColorScale_400.var, + chart_theme_dark_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..c30b4f7d0b6 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_light_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_100'; +import chart_theme_light_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_200'; +import chart_theme_light_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_300'; +import chart_theme_light_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_400'; +import chart_theme_light_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_blue_ColorScale_100.var, + chart_theme_light_blue_ColorScale_200.var, + chart_theme_light_blue_ColorScale_300.var, + chart_theme_light_blue_ColorScale_400.var, + chart_theme_light_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..cc680cbdc80 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_light_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_100'; +import chart_theme_light_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_200'; +import chart_theme_light_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_300'; +import chart_theme_light_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_400'; +import chart_theme_light_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_cyan_ColorScale_100.var, + chart_theme_light_cyan_ColorScale_200.var, + chart_theme_light_cyan_ColorScale_300.var, + chart_theme_light_cyan_ColorScale_400.var, + chart_theme_light_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..590e96722fd 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_light_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_100'; +import chart_theme_light_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_200'; +import chart_theme_light_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_300'; +import chart_theme_light_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_400'; +import chart_theme_light_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_gold_ColorScale_100.var, + chart_theme_light_gold_ColorScale_200.var, + chart_theme_light_gold_ColorScale_300.var, + chart_theme_light_gold_ColorScale_400.var, + chart_theme_light_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..ba93dcea982 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_light_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_100'; +import chart_theme_light_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_200'; +import chart_theme_light_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_300'; +import chart_theme_light_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_400'; +import chart_theme_light_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_gray_ColorScale_100.var, + chart_theme_light_gray_ColorScale_200.var, + chart_theme_light_gray_ColorScale_300.var, + chart_theme_light_gray_ColorScale_400.var, + chart_theme_light_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..37ae5849d91 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_light_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_100'; +import chart_theme_light_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_200'; +import chart_theme_light_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_300'; +import chart_theme_light_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_400'; +import chart_theme_light_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_green_ColorScale_100.var, + chart_theme_light_green_ColorScale_200.var, + chart_theme_light_green_ColorScale_300.var, + chart_theme_light_green_ColorScale_400.var, + chart_theme_light_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..d0912804044 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_light_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_100'; +import chart_theme_light_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_200'; +import chart_theme_light_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_300'; +import chart_theme_light_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_400'; +import chart_theme_light_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_500'; +import chart_theme_light_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_600'; +import chart_theme_light_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_700'; +import chart_theme_light_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_800'; +import chart_theme_light_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_900'; +import chart_theme_light_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1000'; +import chart_theme_light_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1100'; +import chart_theme_light_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1200'; +import chart_theme_light_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1300'; +import chart_theme_light_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1400'; +import chart_theme_light_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1500'; +import chart_theme_light_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1600'; +import chart_theme_light_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1700'; +import chart_theme_light_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1800'; +import chart_theme_light_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1900'; +import chart_theme_light_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2000'; +import chart_theme_light_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2100'; +import chart_theme_light_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2200'; +import chart_theme_light_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2300'; +import chart_theme_light_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2400'; +import chart_theme_light_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_multi_color_ordered_ColorScale_100.var, + chart_theme_light_multi_color_ordered_ColorScale_200.var, + chart_theme_light_multi_color_ordered_ColorScale_300.var, + chart_theme_light_multi_color_ordered_ColorScale_400.var, + chart_theme_light_multi_color_ordered_ColorScale_500.var, + chart_theme_light_multi_color_ordered_ColorScale_600.var, + chart_theme_light_multi_color_ordered_ColorScale_700.var, + chart_theme_light_multi_color_ordered_ColorScale_800.var, + chart_theme_light_multi_color_ordered_ColorScale_900.var, + chart_theme_light_multi_color_ordered_ColorScale_1000.var, + chart_theme_light_multi_color_ordered_ColorScale_1100.var, + chart_theme_light_multi_color_ordered_ColorScale_1200.var, + chart_theme_light_multi_color_ordered_ColorScale_1300.var, + chart_theme_light_multi_color_ordered_ColorScale_1400.var, + chart_theme_light_multi_color_ordered_ColorScale_1500.var, + chart_theme_light_multi_color_ordered_ColorScale_1600.var, + chart_theme_light_multi_color_ordered_ColorScale_1700.var, + chart_theme_light_multi_color_ordered_ColorScale_1800.var, + chart_theme_light_multi_color_ordered_ColorScale_1900.var, + chart_theme_light_multi_color_ordered_ColorScale_2000.var, + chart_theme_light_multi_color_ordered_ColorScale_2100.var, + chart_theme_light_multi_color_ordered_ColorScale_2200.var, + chart_theme_light_multi_color_ordered_ColorScale_2300.var, + chart_theme_light_multi_color_ordered_ColorScale_2400.var, + chart_theme_light_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..03af9359899 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_light_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_100'; +import chart_theme_light_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_200'; +import chart_theme_light_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_300'; +import chart_theme_light_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_400'; +import chart_theme_light_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_500'; +import chart_theme_light_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_600'; +import chart_theme_light_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_700'; +import chart_theme_light_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_800'; +import chart_theme_light_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_900'; +import chart_theme_light_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1000'; +import chart_theme_light_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1100'; +import chart_theme_light_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1200'; +import chart_theme_light_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1300'; +import chart_theme_light_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1400'; +import chart_theme_light_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1500'; +import chart_theme_light_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1600'; +import chart_theme_light_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1700'; +import chart_theme_light_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1800'; +import chart_theme_light_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1900'; +import chart_theme_light_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2000'; +import chart_theme_light_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2100'; +import chart_theme_light_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2200'; +import chart_theme_light_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2300'; +import chart_theme_light_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2400'; +import chart_theme_light_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2500'; +import chart_theme_light_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2600'; +import chart_theme_light_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2700'; +import chart_theme_light_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2800'; +import chart_theme_light_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2900'; +import chart_theme_light_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3000'; +import chart_theme_light_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3100'; +import chart_theme_light_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3200'; +import chart_theme_light_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3300'; +import chart_theme_light_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3400'; +import chart_theme_light_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_multi_color_unordered_ColorScale_100.var, + chart_theme_light_multi_color_unordered_ColorScale_200.var, + chart_theme_light_multi_color_unordered_ColorScale_300.var, + chart_theme_light_multi_color_unordered_ColorScale_400.var, + chart_theme_light_multi_color_unordered_ColorScale_500.var, + chart_theme_light_multi_color_unordered_ColorScale_600.var, + chart_theme_light_multi_color_unordered_ColorScale_700.var, + chart_theme_light_multi_color_unordered_ColorScale_800.var, + chart_theme_light_multi_color_unordered_ColorScale_900.var, + chart_theme_light_multi_color_unordered_ColorScale_1000.var, + chart_theme_light_multi_color_unordered_ColorScale_1100.var, + chart_theme_light_multi_color_unordered_ColorScale_1200.var, + chart_theme_light_multi_color_unordered_ColorScale_1300.var, + chart_theme_light_multi_color_unordered_ColorScale_1400.var, + chart_theme_light_multi_color_unordered_ColorScale_1500.var, + chart_theme_light_multi_color_unordered_ColorScale_1600.var, + chart_theme_light_multi_color_unordered_ColorScale_1700.var, + chart_theme_light_multi_color_unordered_ColorScale_1800.var, + chart_theme_light_multi_color_unordered_ColorScale_1900.var, + chart_theme_light_multi_color_unordered_ColorScale_2000.var, + chart_theme_light_multi_color_unordered_ColorScale_2100.var, + chart_theme_light_multi_color_unordered_ColorScale_2200.var, + chart_theme_light_multi_color_unordered_ColorScale_2300.var, + chart_theme_light_multi_color_unordered_ColorScale_2400.var, + chart_theme_light_multi_color_unordered_ColorScale_2500.var, + chart_theme_light_multi_color_unordered_ColorScale_2600.var, + chart_theme_light_multi_color_unordered_ColorScale_2700.var, + chart_theme_light_multi_color_unordered_ColorScale_2800.var, + chart_theme_light_multi_color_unordered_ColorScale_2900.var, + chart_theme_light_multi_color_unordered_ColorScale_3000.var, + chart_theme_light_multi_color_unordered_ColorScale_3100.var, + chart_theme_light_multi_color_unordered_ColorScale_3200.var, + chart_theme_light_multi_color_unordered_ColorScale_3300.var, + chart_theme_light_multi_color_unordered_ColorScale_3400.var, + chart_theme_light_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..5295ac16f2e 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_light_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_100'; +import chart_theme_light_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_200'; +import chart_theme_light_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_300'; +import chart_theme_light_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_400'; +import chart_theme_light_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_orange_ColorScale_100.var, + chart_theme_light_orange_ColorScale_200.var, + chart_theme_light_orange_ColorScale_300.var, + chart_theme_light_orange_ColorScale_400.var, + chart_theme_light_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..25ef594abdf 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_light_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_100'; +import chart_theme_light_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_200'; +import chart_theme_light_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_300'; +import chart_theme_light_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_400'; +import chart_theme_light_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_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_light_purple_ColorScale_100.var, + chart_theme_light_purple_ColorScale_200.var, + chart_theme_light_purple_ColorScale_300.var, + chart_theme_light_purple_ColorScale_400.var, + chart_theme_light_purple_ColorScale_500.var ]; export const LightPurpleColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index bc1802be9c6..15c0a523fa5 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -23,6 +23,7 @@ import { getResizeObserver } from '@patternfly/react-charts'; import '@patternfly/patternfly/patternfly-charts.css'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.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 +100,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 +153,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/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index 4fe53ded2e2..73fda91fcae 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -30,6 +30,7 @@ import { createContainer, mergeTheme } from '@patternfly/react-charts'; +import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; import './chart-tooltip.css'; ## Introduction 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-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs.css.js index 91d5909af54..93e3306149d 100644 --- a/packages/react-docs/patternfly-docs.css.js +++ b/packages/react-docs/patternfly-docs.css.js @@ -19,3 +19,5 @@ import '@patternfly/patternfly/patternfly.css'; // Utilities import '@patternfly/patternfly/patternfly-addons.css'; + +import '@patternfly/patternfly/patternfly-theme-dark.css'; From 6239d97d1556d0b306a6f897d0b43aa889e6cff1 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Thu, 5 May 2022 11:08:29 -0500 Subject: [PATCH 2/9] chore(charts): use single theme colorscale vars --- .../themes/dark/blue-color-theme.ts | 20 +-- .../themes/dark/cyan-color-theme.ts | 20 +-- .../themes/dark/gold-color-theme.ts | 20 +-- .../themes/dark/gray-color-theme.ts | 20 +-- .../themes/dark/green-color-theme.ts | 20 +-- .../themes/dark/multi-color-ordered-theme.ts | 100 ++++++------- .../dark/multi-color-unordered-theme.ts | 140 +++++++++--------- .../themes/dark/orange-color-theme.ts | 20 +-- .../themes/dark/purple-color-theme.ts | 20 +-- .../themes/light/blue-color-theme.ts | 20 +-- .../themes/light/cyan-color-theme.ts | 20 +-- .../themes/light/gold-color-theme.ts | 20 +-- .../themes/light/gray-color-theme.ts | 20 +-- .../themes/light/green-color-theme.ts | 20 +-- .../themes/light/multi-color-ordered-theme.ts | 100 ++++++------- .../light/multi-color-unordered-theme.ts | 140 +++++++++--------- .../themes/light/orange-color-theme.ts | 20 +-- .../themes/light/purple-color-theme.ts | 20 +-- 18 files changed, 380 insertions(+), 380 deletions(-) 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 93490750e21..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_theme_dark_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_100'; -import chart_theme_dark_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_200'; -import chart_theme_dark_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_300'; -import chart_theme_dark_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_400'; -import chart_theme_dark_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_blue_ColorScale_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_theme_dark_blue_ColorScale_100.var, - chart_theme_dark_blue_ColorScale_200.var, - chart_theme_dark_blue_ColorScale_300.var, - chart_theme_dark_blue_ColorScale_400.var, - chart_theme_dark_blue_ColorScale_500.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 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 e533f70a0d8..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_theme_dark_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_100'; -import chart_theme_dark_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_200'; -import chart_theme_dark_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_300'; -import chart_theme_dark_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_400'; -import chart_theme_dark_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_cyan_ColorScale_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_theme_dark_cyan_ColorScale_100.var, - chart_theme_dark_cyan_ColorScale_200.var, - chart_theme_dark_cyan_ColorScale_300.var, - chart_theme_dark_cyan_ColorScale_400.var, - chart_theme_dark_cyan_ColorScale_500.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 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 bc141d0c737..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_theme_dark_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_100'; -import chart_theme_dark_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_200'; -import chart_theme_dark_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_300'; -import chart_theme_dark_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_400'; -import chart_theme_dark_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gold_ColorScale_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_theme_dark_gold_ColorScale_100.var, - chart_theme_dark_gold_ColorScale_200.var, - chart_theme_dark_gold_ColorScale_300.var, - chart_theme_dark_gold_ColorScale_400.var, - chart_theme_dark_gold_ColorScale_500.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 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 9053f8857b3..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_theme_dark_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_100'; -import chart_theme_dark_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_200'; -import chart_theme_dark_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_300'; -import chart_theme_dark_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_400'; -import chart_theme_dark_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_gray_ColorScale_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_theme_dark_gray_ColorScale_100.var, - chart_theme_dark_gray_ColorScale_200.var, - chart_theme_dark_gray_ColorScale_300.var, - chart_theme_dark_gray_ColorScale_400.var, - chart_theme_dark_gray_ColorScale_500.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 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 36a830f9bb5..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_theme_dark_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_100'; -import chart_theme_dark_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_200'; -import chart_theme_dark_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_300'; -import chart_theme_dark_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_400'; -import chart_theme_dark_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_green_ColorScale_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_theme_dark_green_ColorScale_100.var, - chart_theme_dark_green_ColorScale_200.var, - chart_theme_dark_green_ColorScale_300.var, - chart_theme_dark_green_ColorScale_400.var, - chart_theme_dark_green_ColorScale_500.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 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 50162494bbd..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_theme_dark_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_100'; -import chart_theme_dark_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_200'; -import chart_theme_dark_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_300'; -import chart_theme_dark_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_400'; -import chart_theme_dark_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_500'; -import chart_theme_dark_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_600'; -import chart_theme_dark_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_700'; -import chart_theme_dark_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_800'; -import chart_theme_dark_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_900'; -import chart_theme_dark_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1000'; -import chart_theme_dark_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1100'; -import chart_theme_dark_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1200'; -import chart_theme_dark_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1300'; -import chart_theme_dark_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1400'; -import chart_theme_dark_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1500'; -import chart_theme_dark_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1600'; -import chart_theme_dark_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1700'; -import chart_theme_dark_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1800'; -import chart_theme_dark_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_1900'; -import chart_theme_dark_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2000'; -import chart_theme_dark_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2100'; -import chart_theme_dark_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2200'; -import chart_theme_dark_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2300'; -import chart_theme_dark_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2400'; -import chart_theme_dark_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_ordered_ColorScale_2500'; +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_theme_dark_multi_color_ordered_ColorScale_100.var, - chart_theme_dark_multi_color_ordered_ColorScale_200.var, - chart_theme_dark_multi_color_ordered_ColorScale_300.var, - chart_theme_dark_multi_color_ordered_ColorScale_400.var, - chart_theme_dark_multi_color_ordered_ColorScale_500.var, - chart_theme_dark_multi_color_ordered_ColorScale_600.var, - chart_theme_dark_multi_color_ordered_ColorScale_700.var, - chart_theme_dark_multi_color_ordered_ColorScale_800.var, - chart_theme_dark_multi_color_ordered_ColorScale_900.var, - chart_theme_dark_multi_color_ordered_ColorScale_1000.var, - chart_theme_dark_multi_color_ordered_ColorScale_1100.var, - chart_theme_dark_multi_color_ordered_ColorScale_1200.var, - chart_theme_dark_multi_color_ordered_ColorScale_1300.var, - chart_theme_dark_multi_color_ordered_ColorScale_1400.var, - chart_theme_dark_multi_color_ordered_ColorScale_1500.var, - chart_theme_dark_multi_color_ordered_ColorScale_1600.var, - chart_theme_dark_multi_color_ordered_ColorScale_1700.var, - chart_theme_dark_multi_color_ordered_ColorScale_1800.var, - chart_theme_dark_multi_color_ordered_ColorScale_1900.var, - chart_theme_dark_multi_color_ordered_ColorScale_2000.var, - chart_theme_dark_multi_color_ordered_ColorScale_2100.var, - chart_theme_dark_multi_color_ordered_ColorScale_2200.var, - chart_theme_dark_multi_color_ordered_ColorScale_2300.var, - chart_theme_dark_multi_color_ordered_ColorScale_2400.var, - chart_theme_dark_multi_color_ordered_ColorScale_2500.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 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 3af597710bc..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_theme_dark_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_100'; -import chart_theme_dark_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_200'; -import chart_theme_dark_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_300'; -import chart_theme_dark_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_400'; -import chart_theme_dark_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_500'; -import chart_theme_dark_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_600'; -import chart_theme_dark_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_700'; -import chart_theme_dark_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_800'; -import chart_theme_dark_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_900'; -import chart_theme_dark_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1000'; -import chart_theme_dark_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1100'; -import chart_theme_dark_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1200'; -import chart_theme_dark_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1300'; -import chart_theme_dark_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1400'; -import chart_theme_dark_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1500'; -import chart_theme_dark_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1600'; -import chart_theme_dark_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1700'; -import chart_theme_dark_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1800'; -import chart_theme_dark_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_1900'; -import chart_theme_dark_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2000'; -import chart_theme_dark_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2100'; -import chart_theme_dark_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2200'; -import chart_theme_dark_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2300'; -import chart_theme_dark_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2400'; -import chart_theme_dark_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2500'; -import chart_theme_dark_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2600'; -import chart_theme_dark_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2700'; -import chart_theme_dark_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2800'; -import chart_theme_dark_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_2900'; -import chart_theme_dark_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3000'; -import chart_theme_dark_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3100'; -import chart_theme_dark_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3200'; -import chart_theme_dark_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3300'; -import chart_theme_dark_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3400'; -import chart_theme_dark_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_multi_color_unordered_ColorScale_3500'; +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_theme_dark_multi_color_unordered_ColorScale_100.var, - chart_theme_dark_multi_color_unordered_ColorScale_200.var, - chart_theme_dark_multi_color_unordered_ColorScale_300.var, - chart_theme_dark_multi_color_unordered_ColorScale_400.var, - chart_theme_dark_multi_color_unordered_ColorScale_500.var, - chart_theme_dark_multi_color_unordered_ColorScale_600.var, - chart_theme_dark_multi_color_unordered_ColorScale_700.var, - chart_theme_dark_multi_color_unordered_ColorScale_800.var, - chart_theme_dark_multi_color_unordered_ColorScale_900.var, - chart_theme_dark_multi_color_unordered_ColorScale_1000.var, - chart_theme_dark_multi_color_unordered_ColorScale_1100.var, - chart_theme_dark_multi_color_unordered_ColorScale_1200.var, - chart_theme_dark_multi_color_unordered_ColorScale_1300.var, - chart_theme_dark_multi_color_unordered_ColorScale_1400.var, - chart_theme_dark_multi_color_unordered_ColorScale_1500.var, - chart_theme_dark_multi_color_unordered_ColorScale_1600.var, - chart_theme_dark_multi_color_unordered_ColorScale_1700.var, - chart_theme_dark_multi_color_unordered_ColorScale_1800.var, - chart_theme_dark_multi_color_unordered_ColorScale_1900.var, - chart_theme_dark_multi_color_unordered_ColorScale_2000.var, - chart_theme_dark_multi_color_unordered_ColorScale_2100.var, - chart_theme_dark_multi_color_unordered_ColorScale_2200.var, - chart_theme_dark_multi_color_unordered_ColorScale_2300.var, - chart_theme_dark_multi_color_unordered_ColorScale_2400.var, - chart_theme_dark_multi_color_unordered_ColorScale_2500.var, - chart_theme_dark_multi_color_unordered_ColorScale_2600.var, - chart_theme_dark_multi_color_unordered_ColorScale_2700.var, - chart_theme_dark_multi_color_unordered_ColorScale_2800.var, - chart_theme_dark_multi_color_unordered_ColorScale_2900.var, - chart_theme_dark_multi_color_unordered_ColorScale_3000.var, - chart_theme_dark_multi_color_unordered_ColorScale_3100.var, - chart_theme_dark_multi_color_unordered_ColorScale_3200.var, - chart_theme_dark_multi_color_unordered_ColorScale_3300.var, - chart_theme_dark_multi_color_unordered_ColorScale_3400.var, - chart_theme_dark_multi_color_unordered_ColorScale_3500.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 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 a3d6ca40750..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_theme_dark_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_100'; -import chart_theme_dark_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_200'; -import chart_theme_dark_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_300'; -import chart_theme_dark_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_400'; -import chart_theme_dark_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_orange_ColorScale_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_theme_dark_orange_ColorScale_100.var, - chart_theme_dark_orange_ColorScale_200.var, - chart_theme_dark_orange_ColorScale_300.var, - chart_theme_dark_orange_ColorScale_400.var, - chart_theme_dark_orange_ColorScale_500.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 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 3276b3e80a3..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_theme_dark_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_100'; -import chart_theme_dark_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_200'; -import chart_theme_dark_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_300'; -import chart_theme_dark_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_400'; -import chart_theme_dark_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_dark_purple_ColorScale_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_theme_dark_purple_ColorScale_100.var, - chart_theme_dark_purple_ColorScale_200.var, - chart_theme_dark_purple_ColorScale_300.var, - chart_theme_dark_purple_ColorScale_400.var, - chart_theme_dark_purple_ColorScale_500.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 DarkPurpleColorTheme = ColorTheme({ 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 c30b4f7d0b6..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_theme_light_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_100'; -import chart_theme_light_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_200'; -import chart_theme_light_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_300'; -import chart_theme_light_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_400'; -import chart_theme_light_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_blue_ColorScale_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_theme_light_blue_ColorScale_100.var, - chart_theme_light_blue_ColorScale_200.var, - chart_theme_light_blue_ColorScale_300.var, - chart_theme_light_blue_ColorScale_400.var, - chart_theme_light_blue_ColorScale_500.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 cc680cbdc80..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_theme_light_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_100'; -import chart_theme_light_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_200'; -import chart_theme_light_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_300'; -import chart_theme_light_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_400'; -import chart_theme_light_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_cyan_ColorScale_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_theme_light_cyan_ColorScale_100.var, - chart_theme_light_cyan_ColorScale_200.var, - chart_theme_light_cyan_ColorScale_300.var, - chart_theme_light_cyan_ColorScale_400.var, - chart_theme_light_cyan_ColorScale_500.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 590e96722fd..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_theme_light_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_100'; -import chart_theme_light_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_200'; -import chart_theme_light_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_300'; -import chart_theme_light_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_400'; -import chart_theme_light_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gold_ColorScale_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_theme_light_gold_ColorScale_100.var, - chart_theme_light_gold_ColorScale_200.var, - chart_theme_light_gold_ColorScale_300.var, - chart_theme_light_gold_ColorScale_400.var, - chart_theme_light_gold_ColorScale_500.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 ba93dcea982..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_theme_light_gray_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_100'; -import chart_theme_light_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_200'; -import chart_theme_light_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_300'; -import chart_theme_light_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_400'; -import chart_theme_light_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_gray_ColorScale_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_theme_light_gray_ColorScale_100.var, - chart_theme_light_gray_ColorScale_200.var, - chart_theme_light_gray_ColorScale_300.var, - chart_theme_light_gray_ColorScale_400.var, - chart_theme_light_gray_ColorScale_500.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 37ae5849d91..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_theme_light_green_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_100'; -import chart_theme_light_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_200'; -import chart_theme_light_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_300'; -import chart_theme_light_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_400'; -import chart_theme_light_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_green_ColorScale_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_theme_light_green_ColorScale_100.var, - chart_theme_light_green_ColorScale_200.var, - chart_theme_light_green_ColorScale_300.var, - chart_theme_light_green_ColorScale_400.var, - chart_theme_light_green_ColorScale_500.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 d0912804044..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,59 +1,59 @@ /* eslint-disable camelcase */ -import chart_theme_light_multi_color_ordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_100'; -import chart_theme_light_multi_color_ordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_200'; -import chart_theme_light_multi_color_ordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_300'; -import chart_theme_light_multi_color_ordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_400'; -import chart_theme_light_multi_color_ordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_500'; -import chart_theme_light_multi_color_ordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_600'; -import chart_theme_light_multi_color_ordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_700'; -import chart_theme_light_multi_color_ordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_800'; -import chart_theme_light_multi_color_ordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_900'; -import chart_theme_light_multi_color_ordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1000'; -import chart_theme_light_multi_color_ordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1100'; -import chart_theme_light_multi_color_ordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1200'; -import chart_theme_light_multi_color_ordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1300'; -import chart_theme_light_multi_color_ordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1400'; -import chart_theme_light_multi_color_ordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1500'; -import chart_theme_light_multi_color_ordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1600'; -import chart_theme_light_multi_color_ordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1700'; -import chart_theme_light_multi_color_ordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1800'; -import chart_theme_light_multi_color_ordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_1900'; -import chart_theme_light_multi_color_ordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2000'; -import chart_theme_light_multi_color_ordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2100'; -import chart_theme_light_multi_color_ordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2200'; -import chart_theme_light_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2300'; -import chart_theme_light_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2400'; -import chart_theme_light_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_ordered_ColorScale_2500'; +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_theme_light_multi_color_ordered_ColorScale_100.var, - chart_theme_light_multi_color_ordered_ColorScale_200.var, - chart_theme_light_multi_color_ordered_ColorScale_300.var, - chart_theme_light_multi_color_ordered_ColorScale_400.var, - chart_theme_light_multi_color_ordered_ColorScale_500.var, - chart_theme_light_multi_color_ordered_ColorScale_600.var, - chart_theme_light_multi_color_ordered_ColorScale_700.var, - chart_theme_light_multi_color_ordered_ColorScale_800.var, - chart_theme_light_multi_color_ordered_ColorScale_900.var, - chart_theme_light_multi_color_ordered_ColorScale_1000.var, - chart_theme_light_multi_color_ordered_ColorScale_1100.var, - chart_theme_light_multi_color_ordered_ColorScale_1200.var, - chart_theme_light_multi_color_ordered_ColorScale_1300.var, - chart_theme_light_multi_color_ordered_ColorScale_1400.var, - chart_theme_light_multi_color_ordered_ColorScale_1500.var, - chart_theme_light_multi_color_ordered_ColorScale_1600.var, - chart_theme_light_multi_color_ordered_ColorScale_1700.var, - chart_theme_light_multi_color_ordered_ColorScale_1800.var, - chart_theme_light_multi_color_ordered_ColorScale_1900.var, - chart_theme_light_multi_color_ordered_ColorScale_2000.var, - chart_theme_light_multi_color_ordered_ColorScale_2100.var, - chart_theme_light_multi_color_ordered_ColorScale_2200.var, - chart_theme_light_multi_color_ordered_ColorScale_2300.var, - chart_theme_light_multi_color_ordered_ColorScale_2400.var, - chart_theme_light_multi_color_ordered_ColorScale_2500.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 03af9359899..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_theme_light_multi_color_unordered_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_100'; -import chart_theme_light_multi_color_unordered_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_200'; -import chart_theme_light_multi_color_unordered_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_300'; -import chart_theme_light_multi_color_unordered_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_400'; -import chart_theme_light_multi_color_unordered_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_500'; -import chart_theme_light_multi_color_unordered_ColorScale_600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_600'; -import chart_theme_light_multi_color_unordered_ColorScale_700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_700'; -import chart_theme_light_multi_color_unordered_ColorScale_800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_800'; -import chart_theme_light_multi_color_unordered_ColorScale_900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_900'; -import chart_theme_light_multi_color_unordered_ColorScale_1000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1000'; -import chart_theme_light_multi_color_unordered_ColorScale_1100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1100'; -import chart_theme_light_multi_color_unordered_ColorScale_1200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1200'; -import chart_theme_light_multi_color_unordered_ColorScale_1300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1300'; -import chart_theme_light_multi_color_unordered_ColorScale_1400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1400'; -import chart_theme_light_multi_color_unordered_ColorScale_1500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1500'; -import chart_theme_light_multi_color_unordered_ColorScale_1600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1600'; -import chart_theme_light_multi_color_unordered_ColorScale_1700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1700'; -import chart_theme_light_multi_color_unordered_ColorScale_1800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1800'; -import chart_theme_light_multi_color_unordered_ColorScale_1900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_1900'; -import chart_theme_light_multi_color_unordered_ColorScale_2000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2000'; -import chart_theme_light_multi_color_unordered_ColorScale_2100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2100'; -import chart_theme_light_multi_color_unordered_ColorScale_2200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2200'; -import chart_theme_light_multi_color_unordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2300'; -import chart_theme_light_multi_color_unordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2400'; -import chart_theme_light_multi_color_unordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2500'; -import chart_theme_light_multi_color_unordered_ColorScale_2600 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2600'; -import chart_theme_light_multi_color_unordered_ColorScale_2700 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2700'; -import chart_theme_light_multi_color_unordered_ColorScale_2800 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2800'; -import chart_theme_light_multi_color_unordered_ColorScale_2900 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_2900'; -import chart_theme_light_multi_color_unordered_ColorScale_3000 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3000'; -import chart_theme_light_multi_color_unordered_ColorScale_3100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3100'; -import chart_theme_light_multi_color_unordered_ColorScale_3200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3200'; -import chart_theme_light_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3300'; -import chart_theme_light_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3400'; -import chart_theme_light_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_multi_color_unordered_ColorScale_3500'; +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_theme_light_multi_color_unordered_ColorScale_100.var, - chart_theme_light_multi_color_unordered_ColorScale_200.var, - chart_theme_light_multi_color_unordered_ColorScale_300.var, - chart_theme_light_multi_color_unordered_ColorScale_400.var, - chart_theme_light_multi_color_unordered_ColorScale_500.var, - chart_theme_light_multi_color_unordered_ColorScale_600.var, - chart_theme_light_multi_color_unordered_ColorScale_700.var, - chart_theme_light_multi_color_unordered_ColorScale_800.var, - chart_theme_light_multi_color_unordered_ColorScale_900.var, - chart_theme_light_multi_color_unordered_ColorScale_1000.var, - chart_theme_light_multi_color_unordered_ColorScale_1100.var, - chart_theme_light_multi_color_unordered_ColorScale_1200.var, - chart_theme_light_multi_color_unordered_ColorScale_1300.var, - chart_theme_light_multi_color_unordered_ColorScale_1400.var, - chart_theme_light_multi_color_unordered_ColorScale_1500.var, - chart_theme_light_multi_color_unordered_ColorScale_1600.var, - chart_theme_light_multi_color_unordered_ColorScale_1700.var, - chart_theme_light_multi_color_unordered_ColorScale_1800.var, - chart_theme_light_multi_color_unordered_ColorScale_1900.var, - chart_theme_light_multi_color_unordered_ColorScale_2000.var, - chart_theme_light_multi_color_unordered_ColorScale_2100.var, - chart_theme_light_multi_color_unordered_ColorScale_2200.var, - chart_theme_light_multi_color_unordered_ColorScale_2300.var, - chart_theme_light_multi_color_unordered_ColorScale_2400.var, - chart_theme_light_multi_color_unordered_ColorScale_2500.var, - chart_theme_light_multi_color_unordered_ColorScale_2600.var, - chart_theme_light_multi_color_unordered_ColorScale_2700.var, - chart_theme_light_multi_color_unordered_ColorScale_2800.var, - chart_theme_light_multi_color_unordered_ColorScale_2900.var, - chart_theme_light_multi_color_unordered_ColorScale_3000.var, - chart_theme_light_multi_color_unordered_ColorScale_3100.var, - chart_theme_light_multi_color_unordered_ColorScale_3200.var, - chart_theme_light_multi_color_unordered_ColorScale_3300.var, - chart_theme_light_multi_color_unordered_ColorScale_3400.var, - chart_theme_light_multi_color_unordered_ColorScale_3500.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 5295ac16f2e..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_theme_light_orange_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_100'; -import chart_theme_light_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_200'; -import chart_theme_light_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_300'; -import chart_theme_light_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_400'; -import chart_theme_light_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_orange_ColorScale_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_theme_light_orange_ColorScale_100.var, - chart_theme_light_orange_ColorScale_200.var, - chart_theme_light_orange_ColorScale_300.var, - chart_theme_light_orange_ColorScale_400.var, - chart_theme_light_orange_ColorScale_500.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 25ef594abdf..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_theme_light_purple_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_100'; -import chart_theme_light_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_200'; -import chart_theme_light_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_300'; -import chart_theme_light_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_400'; -import chart_theme_light_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_light_purple_ColorScale_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_theme_light_purple_ColorScale_100.var, - chart_theme_light_purple_ColorScale_200.var, - chart_theme_light_purple_ColorScale_300.var, - chart_theme_light_purple_ColorScale_400.var, - chart_theme_light_purple_ColorScale_500.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({ From 8308389a44002984c8e3bc2f642321cbdc5baa90 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Thu, 5 May 2022 18:45:13 -0500 Subject: [PATCH 3/9] chore(charts): update react-tokens to test fallback --- .../ChartArea/examples/ChartArea.md | 5 ++ .../components/ChartBar/examples/ChartBar.md | 1 - .../ChartBullet/examples/ChartBullet.md | 2 +- .../ChartLine/examples/ChartLine.md | 2 +- .../ChartScatter/examples/ChartScatter.md | 2 +- .../ChartStack/examples/ChartStack.md | 2 +- .../ChartTheme/examples/ChartTheme.md | 2 +- .../ChartTheme/styles/bullet-styles.ts | 6 +- .../ChartTheme/styles/common-styles.ts | 6 +- .../ChartTheme/styles/donut-styles.ts | 4 +- .../styles/donut-utilization-styles.ts | 2 +- .../styles/legend-tooltip-styles.ts | 2 +- .../ChartTheme/themes/axis-theme.ts | 4 +- .../ChartTheme/themes/base-theme.ts | 58 +++++++-------- .../ChartTheme/themes/bullet-theme.ts | 36 +++++----- .../themes/dark/blue-color-theme.ts | 10 +-- .../themes/dark/cyan-color-theme.ts | 10 +-- .../themes/dark/gold-color-theme.ts | 10 +-- .../themes/dark/gray-color-theme.ts | 10 +-- .../themes/dark/green-color-theme.ts | 10 +-- .../themes/dark/multi-color-ordered-theme.ts | 50 ++++++------- .../dark/multi-color-unordered-theme.ts | 70 +++++++++---------- .../themes/dark/orange-color-theme.ts | 10 +-- .../themes/dark/purple-color-theme.ts | 10 +-- .../themes/donut-threshold-theme.ts | 8 +-- .../themes/donut-utilization-theme.ts | 8 +-- .../themes/light/blue-color-theme.ts | 10 +-- .../themes/light/cyan-color-theme.ts | 10 +-- .../themes/light/gold-color-theme.ts | 10 +-- .../themes/light/gray-color-theme.ts | 10 +-- .../themes/light/green-color-theme.ts | 10 +-- .../themes/light/multi-color-ordered-theme.ts | 50 ++++++------- .../light/multi-color-unordered-theme.ts | 70 +++++++++---------- .../themes/light/orange-color-theme.ts | 10 +-- .../themes/light/purple-color-theme.ts | 10 +-- .../ChartThreshold/examples/ChartThreshold.md | 12 ++-- .../ChartTooltip/examples/ChartTooltip.md | 2 +- .../components/ChartUtils/chart-container.tsx | 2 +- .../ChartUtils/chart-interactive-legend.ts | 4 +- .../components/ChartUtils/chart-tooltip.ts | 4 +- packages/react-docs/patternfly-docs.css.js | 5 ++ 41 files changed, 284 insertions(+), 275 deletions(-) diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 983b88d5322..7a929ea99c3 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -12,9 +12,14 @@ propComponents: [ hideDarkMode: true --- +<<<<<<< HEAD import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import '@patternfly/patternfly/patternfly-charts.css'; import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; +======= +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; + +>>>>>>> 2e8b88912 (chore(charts): update react-tokens to test fallback) ## 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/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md index c5ff7dccaa6..816f3d5009a 100644 --- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md +++ b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md @@ -13,7 +13,6 @@ hideDarkMode: true import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md index 3dbad595abb..1376d8d5665 100644 --- a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md @@ -10,7 +10,7 @@ hideDarkMode: true --- import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index 7d708b5f87c..a26d7a9da90 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -13,7 +13,7 @@ hideDarkMode: true import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartScatter/examples/ChartScatter.md b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md index 78dd00be76a..88c92649c2e 100644 --- a/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md +++ b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md @@ -23,7 +23,7 @@ import { ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartStack/examples/ChartStack.md b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md index c2d491e2954..d1f4b3c3224 100644 --- a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md +++ b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md @@ -24,7 +24,7 @@ import { createContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index 9bcfc8908e4..2dc6081bd67 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -20,7 +20,7 @@ import { ChartVoronoiContainer, mergeTheme } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; + import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; 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 5f91e30e92c..8536f6ccda7 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts @@ -22,17 +22,17 @@ export const BulletStyles = { label: { groupTitle: { // Victory props only - fill: chart_bullet_label_grouptitle_Fill.var, + fill: chart_bullet_label_grouptitle_Fill.var2, fontSize: chart_global_FontSize_2xl.value }, subTitle: { // Victory props only - fill: chart_bullet_label_subtitle_Fill.var, + fill: chart_bullet_label_subtitle_Fill.var2, fontSize: chart_global_FontSize_sm.value }, title: { // Victory props only - fill: chart_bullet_label_title_Fill.var, + fill: chart_bullet_label_title_Fill.var2, 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 f5096ad4c58..683e201420a 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts @@ -8,8 +8,8 @@ import chart_legend_Margin from '@patternfly/react-tokens/dist/esm/chart_legend_ import chart_legend_position from '@patternfly/react-tokens/dist/esm/chart_legend_position'; // Typography -const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.var; -const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.var; +const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.var2; +const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.value; const TYPOGRAPHY_FONT_SIZE = chart_global_FontSize_sm.value; export const CommonStyles = { @@ -18,7 +18,7 @@ export const CommonStyles = { fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, margin: chart_global_label_Margin.value, - fill: chart_global_label_Fill.var + fill: chart_global_label_Fill.var2 }, 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 4dec2d82c06..3cd949956e6 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts @@ -10,13 +10,13 @@ export const DonutStyles = { label: { subTitle: { // Victory props only - fill: chart_donut_label_subtitle_Fill.var, + fill: chart_donut_label_subtitle_Fill.var2, fontSize: chart_global_FontSize_sm.value }, subTitlePosition: chart_donut_label_subtitle_position.value, title: { // Victory props only - fill: chart_donut_label_title_Fill.var, + fill: chart_donut_label_title_Fill.var2, 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 200562c4e4b..330c8e17483 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.var, chart_donut_threshold_danger_Color.var] + colorScale: [chart_donut_threshold_warning_Color.var2, chart_donut_threshold_danger_Color.var2] } }; 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 7ac822586dc..52b247f9b56 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.var, + fill: chart_voronoi_labels_Fill.var2, fontWeight: global_FontWeight_bold.value } as any }; diff --git a/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts index be2cf035a9c..b43b54ecbc8 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts @@ -7,10 +7,10 @@ export const AxisTheme = { axis: { style: { grid: { - stroke: chart_axis_grid_stroke_Color.var + stroke: chart_axis_grid_stroke_Color.var2 }, ticks: { - stroke: chart_axis_tick_stroke_Color.var + stroke: chart_axis_tick_stroke_Color.var2 } } } 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 a40ec3d1fb0..2189a5298c5 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts @@ -113,8 +113,8 @@ const LABEL_PROPS = { fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, padding: chart_global_label_Padding.value, - stroke: chart_global_label_stroke.var, - fill: chart_global_label_Fill.var + stroke: chart_global_label_stroke.var2, + fill: chart_global_label_Fill.var2 }; const LABEL_CENTERED_PROPS = { ...LABEL_PROPS, @@ -138,7 +138,7 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_area_data_Fill.var, + fill: chart_area_data_Fill.var2, fillOpacity: chart_area_Opacity.value, // Omit stroke to add a line border from color scale // stroke: chart_global_label_stroke.value, @@ -151,28 +151,28 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { axis: { - fill: chart_axis_axis_Fill.var, + fill: chart_axis_axis_Fill.var2, strokeWidth: chart_axis_axis_stroke_Width.value, - stroke: chart_axis_axis_stroke_Color.var, + stroke: chart_axis_axis_stroke_Color.var2, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN }, axisLabel: { ...LABEL_CENTERED_PROPS, padding: chart_axis_axis_label_Padding.value, - stroke: chart_axis_axis_label_stroke_Color.var + stroke: chart_axis_axis_label_stroke_Color.var2 }, grid: { - fill: chart_axis_grid_Fill.var, + fill: chart_axis_grid_Fill.var2, stroke: 'none', pointerEvents: chart_axis_grid_PointerEvents.value, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN }, ticks: { - fill: chart_axis_tick_Fill.var, + fill: chart_axis_tick_Fill.var2, size: chart_axis_tick_Size.value, - stroke: chart_axis_tick_stroke_Color.var, + stroke: chart_axis_tick_stroke_Color.var2, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN, strokeWidth: chart_axis_tick_Width.value @@ -188,9 +188,9 @@ export const BaseTheme = { barWidth: chart_bar_Width.value, style: { data: { - fill: chart_bar_data_Fill.var, + fill: chart_bar_data_Fill.var2, padding: chart_bar_data_Padding.value, - stroke: chart_bar_data_stroke.var, + stroke: chart_bar_data_stroke.var2, strokeWidth: chart_bar_data_stroke_Width.value }, labels: LABEL_PROPS @@ -201,29 +201,29 @@ export const BaseTheme = { style: { max: { padding: chart_boxplot_max_Padding.value, - stroke: chart_boxplot_max_stroke_Color.var, + stroke: chart_boxplot_max_stroke_Color.var2, strokeWidth: chart_boxplot_max_stroke_Width.value }, maxLabels: LABEL_PROPS, median: { padding: chart_boxplot_median_Padding.value, - stroke: chart_boxplot_median_stroke_Color.var, + stroke: chart_boxplot_median_stroke_Color.var2, strokeWidth: chart_boxplot_median_stroke_Width.value }, medianLabels: LABEL_PROPS, min: { padding: chart_boxplot_min_Padding.value, - stroke: chart_boxplot_min_stroke_Color.var, + stroke: chart_boxplot_min_stroke_Color.var2, strokeWidth: chart_boxplot_min_stroke_Width.value }, minLabels: LABEL_PROPS, q1: { - fill: chart_boxplot_lower_quartile_Fill.var, + fill: chart_boxplot_lower_quartile_Fill.var2, padding: chart_boxplot_lower_quartile_Padding.value }, q1Labels: LABEL_PROPS, q3: { - fill: chart_boxplot_upper_quartile_Fill.var, + fill: chart_boxplot_upper_quartile_Fill.var2, padding: chart_boxplot_upper_quartile_Padding.value }, q3Labels: LABEL_PROPS @@ -233,12 +233,12 @@ export const BaseTheme = { candlestick: { ...LAYOUT_PROPS, candleColors: { - positive: chart_candelstick_candle_positive_Color.var, - negative: chart_candelstick_candle_negative_Color.var + positive: chart_candelstick_candle_positive_Color.var2, + negative: chart_candelstick_candle_negative_Color.var2 }, style: { data: { - stroke: chart_candelstick_data_stroke_Color.var, + stroke: chart_candelstick_data_stroke_Color.var2, strokeWidth: chart_candelstick_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -252,9 +252,9 @@ export const BaseTheme = { borderWidth: chart_errorbar_BorderWidth.value, style: { data: { - fill: chart_errorbar_data_Fill.var, + fill: chart_errorbar_data_Fill.var2, opacity: chart_errorbar_data_Opacity.value, - stroke: chart_errorbar_data_stroke_Color.var, + stroke: chart_errorbar_data_stroke_Color.var2, strokeWidth: chart_errorbar_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -283,9 +283,9 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_line_data_Fill.var, + fill: chart_line_data_Fill.var2, opacity: chart_line_data_Opacity.value, - stroke: chart_line_data_stroke_Color.var, + stroke: chart_line_data_stroke_Color.var2, strokeWidth: chart_line_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -296,7 +296,7 @@ export const BaseTheme = { style: { data: { padding: chart_pie_data_Padding.value, - stroke: chart_pie_data_stroke_Color.var, + stroke: chart_pie_data_stroke_Color.var2, strokeWidth: chart_pie_data_stroke_Width.value }, labels: { @@ -311,9 +311,9 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_scatter_data_Fill.var, + fill: chart_scatter_data_Fill.var2, opacity: chart_scatter_data_Opacity.value, - stroke: chart_scatter_data_stroke_Color.var, + stroke: chart_scatter_data_stroke_Color.var2, strokeWidth: chart_scatter_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -340,8 +340,8 @@ export const BaseTheme = { pointerLength: chart_tooltip_pointer_length.value, pointerWidth: chart_tooltip_pointer_Width.value, style: { - fill: chart_tooltip_Fill.var, // text - pointerEvents: chart_tooltip_PointerEvents.var + fill: chart_tooltip_Fill.var2, // text + pointerEvents: chart_tooltip_PointerEvents.var2 } }, voronoi: { @@ -354,7 +354,7 @@ export const BaseTheme = { }, labels: { ...LABEL_CENTERED_PROPS, - fill: chart_voronoi_labels_Fill.var, // text + fill: chart_voronoi_labels_Fill.var2, // text padding: chart_voronoi_labels_Padding.value, pointerEvents: chart_voronoi_labels_PointerEvents.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 baa2f64b2b6..9462a7fefc0 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts @@ -40,8 +40,8 @@ export const BulletComparativeErrorMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_error_Fill_Color.var, - stroke: chart_bullet_comparative_measure_error_stroke_Color.var, + fill: chart_bullet_comparative_measure_error_Fill_Color.var2, + stroke: chart_bullet_comparative_measure_error_stroke_Color.var2, strokeWidth: chart_bullet_comparative_measure_error_stroke_Width.value } } @@ -54,8 +54,8 @@ export const BulletComparativeMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_Fill_Color.var, - stroke: chart_bullet_comparative_measure_stroke_Color.var, + fill: chart_bullet_comparative_measure_Fill_Color.var2, + stroke: chart_bullet_comparative_measure_stroke_Color.var2, strokeWidth: chart_bullet_comparative_measure_stroke_Width.value } } @@ -68,8 +68,8 @@ export const BulletComparativeWarningMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_warning_Fill_Color.var, - stroke: chart_bullet_comparative_measure_warning_stroke_Color.var, + fill: chart_bullet_comparative_measure_warning_Fill_Color.var2, + stroke: chart_bullet_comparative_measure_warning_stroke_Color.var2, strokeWidth: chart_bullet_comparative_measure_warning_stroke_Width.value } } @@ -89,8 +89,8 @@ export const BulletGroupTitleTheme = { line: { style: { data: { - fill: chart_bullet_group_title_divider_Fill_Color.var, - stroke: chart_bullet_group_title_divider_stroke_Color.var, + fill: chart_bullet_group_title_divider_Fill_Color.var2, + stroke: chart_bullet_group_title_divider_stroke_Color.var2, strokeWidth: chart_bullet_group_title_divider_stroke_Width.value } } @@ -108,11 +108,11 @@ export const BulletPrimaryDotMeasureTheme = { export const BulletPrimaryNegativeMeasureTheme = { group: { colorScale: [ - 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 + chart_bullet_negative_measure_ColorScale_100.var2, + chart_bullet_negative_measure_ColorScale_200.var2, + chart_bullet_negative_measure_ColorScale_300.var2, + chart_bullet_negative_measure_ColorScale_400.var2, + chart_bullet_negative_measure_ColorScale_500.var2 ], height: chart_bullet_Height.value } @@ -129,11 +129,11 @@ export const BulletPrimarySegmentedMeasureTheme = { export const BulletQualitativeRangeTheme = { group: { colorScale: [ - 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 + chart_bullet_qualitative_range_ColorScale_100.var2, + chart_bullet_qualitative_range_ColorScale_200.var2, + chart_bullet_qualitative_range_ColorScale_300.var2, + chart_bullet_qualitative_range_ColorScale_400.var2, + chart_bullet_qualitative_range_ColorScale_500.var2 ], 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 996a5e04b05..c5fdb44a4c1 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_blue_ColorScale_100.var2, + chart_theme_blue_ColorScale_200.var2, + chart_theme_blue_ColorScale_300.var2, + chart_theme_blue_ColorScale_400.var2, + chart_theme_blue_ColorScale_500.var2 ]; 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 b8899684d26..38a5dc54187 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_cyan_ColorScale_100.var2, + chart_theme_cyan_ColorScale_200.var2, + chart_theme_cyan_ColorScale_300.var2, + chart_theme_cyan_ColorScale_400.var2, + chart_theme_cyan_ColorScale_500.var2 ]; 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 a3f1e56bf48..69d838a0d1e 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_gold_ColorScale_100.var2, + chart_theme_gold_ColorScale_200.var2, + chart_theme_gold_ColorScale_300.var2, + chart_theme_gold_ColorScale_400.var2, + chart_theme_gold_ColorScale_500.var2 ]; 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 dc9affa9f82..65757bb9302 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_gray_ColorScale_100.var2, + chart_theme_gray_ColorScale_200.var2, + chart_theme_gray_ColorScale_300.var2, + chart_theme_gray_ColorScale_400.var2, + chart_theme_gray_ColorScale_500.var2 ]; 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 88a441d396f..19f30608ba5 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_green_ColorScale_100.var2, + chart_theme_green_ColorScale_200.var2, + chart_theme_green_ColorScale_300.var2, + chart_theme_green_ColorScale_400.var2, + chart_theme_green_ColorScale_500.var2 ]; 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 6e59b55f754..89841779e6a 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 @@ -29,31 +29,31 @@ 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_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 + chart_theme_multi_color_ordered_ColorScale_100.var2, + chart_theme_multi_color_ordered_ColorScale_200.var2, + chart_theme_multi_color_ordered_ColorScale_300.var2, + chart_theme_multi_color_ordered_ColorScale_400.var2, + chart_theme_multi_color_ordered_ColorScale_500.var2, + chart_theme_multi_color_ordered_ColorScale_600.var2, + chart_theme_multi_color_ordered_ColorScale_700.var2, + chart_theme_multi_color_ordered_ColorScale_800.var2, + chart_theme_multi_color_ordered_ColorScale_900.var2, + chart_theme_multi_color_ordered_ColorScale_1000.var2, + chart_theme_multi_color_ordered_ColorScale_1100.var2, + chart_theme_multi_color_ordered_ColorScale_1200.var2, + chart_theme_multi_color_ordered_ColorScale_1300.var2, + chart_theme_multi_color_ordered_ColorScale_1400.var2, + chart_theme_multi_color_ordered_ColorScale_1500.var2, + chart_theme_multi_color_ordered_ColorScale_1600.var2, + chart_theme_multi_color_ordered_ColorScale_1700.var2, + chart_theme_multi_color_ordered_ColorScale_1800.var2, + chart_theme_multi_color_ordered_ColorScale_1900.var2, + chart_theme_multi_color_ordered_ColorScale_2000.var2, + chart_theme_multi_color_ordered_ColorScale_2100.var2, + chart_theme_multi_color_ordered_ColorScale_2200.var2, + chart_theme_multi_color_ordered_ColorScale_2300.var2, + chart_theme_multi_color_ordered_ColorScale_2400.var2, + chart_theme_multi_color_ordered_ColorScale_2500.var2 ]; 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 ad9945b1e01..a33268ece50 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 @@ -39,41 +39,41 @@ 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_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 + chart_theme_multi_color_unordered_ColorScale_100.var2, + chart_theme_multi_color_unordered_ColorScale_200.var2, + chart_theme_multi_color_unordered_ColorScale_300.var2, + chart_theme_multi_color_unordered_ColorScale_400.var2, + chart_theme_multi_color_unordered_ColorScale_500.var2, + chart_theme_multi_color_unordered_ColorScale_600.var2, + chart_theme_multi_color_unordered_ColorScale_700.var2, + chart_theme_multi_color_unordered_ColorScale_800.var2, + chart_theme_multi_color_unordered_ColorScale_900.var2, + chart_theme_multi_color_unordered_ColorScale_1000.var2, + chart_theme_multi_color_unordered_ColorScale_1100.var2, + chart_theme_multi_color_unordered_ColorScale_1200.var2, + chart_theme_multi_color_unordered_ColorScale_1300.var2, + chart_theme_multi_color_unordered_ColorScale_1400.var2, + chart_theme_multi_color_unordered_ColorScale_1500.var2, + chart_theme_multi_color_unordered_ColorScale_1600.var2, + chart_theme_multi_color_unordered_ColorScale_1700.var2, + chart_theme_multi_color_unordered_ColorScale_1800.var2, + chart_theme_multi_color_unordered_ColorScale_1900.var2, + chart_theme_multi_color_unordered_ColorScale_2000.var2, + chart_theme_multi_color_unordered_ColorScale_2100.var2, + chart_theme_multi_color_unordered_ColorScale_2200.var2, + chart_theme_multi_color_unordered_ColorScale_2300.var2, + chart_theme_multi_color_unordered_ColorScale_2400.var2, + chart_theme_multi_color_unordered_ColorScale_2500.var2, + chart_theme_multi_color_unordered_ColorScale_2600.var2, + chart_theme_multi_color_unordered_ColorScale_2700.var2, + chart_theme_multi_color_unordered_ColorScale_2800.var2, + chart_theme_multi_color_unordered_ColorScale_2900.var2, + chart_theme_multi_color_unordered_ColorScale_3000.var2, + chart_theme_multi_color_unordered_ColorScale_3100.var2, + chart_theme_multi_color_unordered_ColorScale_3200.var2, + chart_theme_multi_color_unordered_ColorScale_3300.var2, + chart_theme_multi_color_unordered_ColorScale_3400.var2, + chart_theme_multi_color_unordered_ColorScale_3500.var2 ]; 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 4dc7cb3155c..3277b91d494 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_orange_ColorScale_100.var2, + chart_theme_orange_ColorScale_200.var2, + chart_theme_orange_ColorScale_300.var2, + chart_theme_orange_ColorScale_400.var2, + chart_theme_orange_ColorScale_500.var2 ]; 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 6a2ee2dcffc..8532604eb21 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_purple_ColorScale_100.var2, + chart_theme_purple_ColorScale_200.var2, + chart_theme_purple_ColorScale_300.var2, + chart_theme_purple_ColorScale_400.var2, + chart_theme_purple_ColorScale_500.var2 ]; export const DarkPurpleColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts index fa68f19ac5a..1302dd642bc 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts @@ -13,7 +13,7 @@ import chart_donut_threshold_static_pie_Width from '@patternfly/react-tokens/dis // Donut threshold dynamic theme export const DonutThresholdDynamicTheme = { legend: { - colorScale: [chart_donut_threshold_second_Color.var, chart_donut_threshold_third_Color.var] + colorScale: [chart_donut_threshold_second_Color.var2, chart_donut_threshold_third_Color.var2] }, pie: { height: chart_donut_threshold_dynamic_pie_Height.value, @@ -26,9 +26,9 @@ export const DonutThresholdDynamicTheme = { export const DonutThresholdStaticTheme = { pie: { colorScale: [ - chart_donut_threshold_first_Color.var, - chart_donut_threshold_second_Color.var, - chart_donut_threshold_third_Color.var + chart_donut_threshold_first_Color.var2, + chart_donut_threshold_second_Color.var2, + chart_donut_threshold_third_Color.var2 ], height: chart_donut_threshold_static_pie_Height.value, padAngle: chart_donut_threshold_static_pie_angle_Padding.value, 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 b6ab86f3fc0..f8cf397b10e 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 @@ -22,13 +22,13 @@ export const DonutUtilizationDynamicTheme = { export const DonutUtilizationStaticTheme = { legend: { colorScale: [ - chart_donut_threshold_first_Color.var, - chart_donut_threshold_second_Color.var, - chart_donut_threshold_third_Color.var + chart_donut_threshold_first_Color.var2, + chart_donut_threshold_second_Color.var2, + chart_donut_threshold_third_Color.var2 ] }, pie: { - colorScale: [chart_donut_threshold_first_Color.var], + colorScale: [chart_donut_threshold_first_Color.var2], 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 52f071c7316..3f2af5e0f20 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_blue_ColorScale_100.var2, + chart_theme_blue_ColorScale_200.var2, + chart_theme_blue_ColorScale_300.var2, + chart_theme_blue_ColorScale_400.var2, + chart_theme_blue_ColorScale_500.var2 ]; 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 6e2073d4086..5d58de7c481 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_cyan_ColorScale_100.var2, + chart_theme_cyan_ColorScale_200.var2, + chart_theme_cyan_ColorScale_300.var2, + chart_theme_cyan_ColorScale_400.var2, + chart_theme_cyan_ColorScale_500.var2 ]; 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 f770ee46e92..f4d484fefad 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_gold_ColorScale_100.var2, + chart_theme_gold_ColorScale_200.var2, + chart_theme_gold_ColorScale_300.var2, + chart_theme_gold_ColorScale_400.var2, + chart_theme_gold_ColorScale_500.var2 ]; 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 d3836d92b9b..a35b611ebbe 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_gray_ColorScale_100.var2, + chart_theme_gray_ColorScale_200.var2, + chart_theme_gray_ColorScale_300.var2, + chart_theme_gray_ColorScale_400.var2, + chart_theme_gray_ColorScale_500.var2 ]; 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 2a27a4546d8..4fcd4918f51 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_green_ColorScale_100.var2, + chart_theme_green_ColorScale_200.var2, + chart_theme_green_ColorScale_300.var2, + chart_theme_green_ColorScale_400.var2, + chart_theme_green_ColorScale_500.var2 ]; 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 a1bf997dc4c..a40a470214f 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 @@ -29,31 +29,31 @@ 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_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 + chart_theme_multi_color_ordered_ColorScale_100.var2, + chart_theme_multi_color_ordered_ColorScale_200.var2, + chart_theme_multi_color_ordered_ColorScale_300.var2, + chart_theme_multi_color_ordered_ColorScale_400.var2, + chart_theme_multi_color_ordered_ColorScale_500.var2, + chart_theme_multi_color_ordered_ColorScale_600.var2, + chart_theme_multi_color_ordered_ColorScale_700.var2, + chart_theme_multi_color_ordered_ColorScale_800.var2, + chart_theme_multi_color_ordered_ColorScale_900.var2, + chart_theme_multi_color_ordered_ColorScale_1000.var2, + chart_theme_multi_color_ordered_ColorScale_1100.var2, + chart_theme_multi_color_ordered_ColorScale_1200.var2, + chart_theme_multi_color_ordered_ColorScale_1300.var2, + chart_theme_multi_color_ordered_ColorScale_1400.var2, + chart_theme_multi_color_ordered_ColorScale_1500.var2, + chart_theme_multi_color_ordered_ColorScale_1600.var2, + chart_theme_multi_color_ordered_ColorScale_1700.var2, + chart_theme_multi_color_ordered_ColorScale_1800.var2, + chart_theme_multi_color_ordered_ColorScale_1900.var2, + chart_theme_multi_color_ordered_ColorScale_2000.var2, + chart_theme_multi_color_ordered_ColorScale_2100.var2, + chart_theme_multi_color_ordered_ColorScale_2200.var2, + chart_theme_multi_color_ordered_ColorScale_2300.var2, + chart_theme_multi_color_ordered_ColorScale_2400.var2, + chart_theme_multi_color_ordered_ColorScale_2500.var2 ]; 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 09c21cb4912..bc9c4825261 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 @@ -39,41 +39,41 @@ 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_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 + chart_theme_multi_color_unordered_ColorScale_100.var2, + chart_theme_multi_color_unordered_ColorScale_200.var2, + chart_theme_multi_color_unordered_ColorScale_300.var2, + chart_theme_multi_color_unordered_ColorScale_400.var2, + chart_theme_multi_color_unordered_ColorScale_500.var2, + chart_theme_multi_color_unordered_ColorScale_600.var2, + chart_theme_multi_color_unordered_ColorScale_700.var2, + chart_theme_multi_color_unordered_ColorScale_800.var2, + chart_theme_multi_color_unordered_ColorScale_900.var2, + chart_theme_multi_color_unordered_ColorScale_1000.var2, + chart_theme_multi_color_unordered_ColorScale_1100.var2, + chart_theme_multi_color_unordered_ColorScale_1200.var2, + chart_theme_multi_color_unordered_ColorScale_1300.var2, + chart_theme_multi_color_unordered_ColorScale_1400.var2, + chart_theme_multi_color_unordered_ColorScale_1500.var2, + chart_theme_multi_color_unordered_ColorScale_1600.var2, + chart_theme_multi_color_unordered_ColorScale_1700.var2, + chart_theme_multi_color_unordered_ColorScale_1800.var2, + chart_theme_multi_color_unordered_ColorScale_1900.var2, + chart_theme_multi_color_unordered_ColorScale_2000.var2, + chart_theme_multi_color_unordered_ColorScale_2100.var2, + chart_theme_multi_color_unordered_ColorScale_2200.var2, + chart_theme_multi_color_unordered_ColorScale_2300.var2, + chart_theme_multi_color_unordered_ColorScale_2400.var2, + chart_theme_multi_color_unordered_ColorScale_2500.var2, + chart_theme_multi_color_unordered_ColorScale_2600.var2, + chart_theme_multi_color_unordered_ColorScale_2700.var2, + chart_theme_multi_color_unordered_ColorScale_2800.var2, + chart_theme_multi_color_unordered_ColorScale_2900.var2, + chart_theme_multi_color_unordered_ColorScale_3000.var2, + chart_theme_multi_color_unordered_ColorScale_3100.var2, + chart_theme_multi_color_unordered_ColorScale_3200.var2, + chart_theme_multi_color_unordered_ColorScale_3300.var2, + chart_theme_multi_color_unordered_ColorScale_3400.var2, + chart_theme_multi_color_unordered_ColorScale_3500.var2 ]; 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 0f4f9d25297..ee5b18ef41c 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_orange_ColorScale_100.var2, + chart_theme_orange_ColorScale_200.var2, + chart_theme_orange_ColorScale_300.var2, + chart_theme_orange_ColorScale_400.var2, + chart_theme_orange_ColorScale_500.var2 ]; 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 b1dc10b23d1..fde66600a7d 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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - 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 + chart_theme_purple_ColorScale_100.var2, + chart_theme_purple_ColorScale_200.var2, + chart_theme_purple_ColorScale_300.var2, + chart_theme_purple_ColorScale_400.var2, + chart_theme_purple_ColorScale_500.var2 ]; export const LightPurpleColorTheme = ColorTheme({ diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index 15c0a523fa5..1d5d6f8cb57 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -22,8 +22,8 @@ import { ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts.css'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.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'; @@ -100,11 +100,11 @@ class MultiColorChart extends React.Component { { name: 'Birds' }, { name: 'Cats Threshold', - symbol: { fill: chart_color_blue_300.var, type: 'threshold' } + symbol: { fill: chart_color_blue_300.var2, type: 'threshold' } }, { name: 'Birds Threshold', - symbol: { fill: chart_color_orange_300.var, type: 'threshold' } + symbol: { fill: chart_color_orange_300.var2, type: 'threshold' } } ]} itemsPerRow={itemsPerRow} @@ -153,7 +153,7 @@ class MultiColorChart extends React.Component { ]} style={{ data: { - stroke: chart_color_blue_300.var + stroke: chart_color_blue_300.var2 } }} /> @@ -166,7 +166,7 @@ class MultiColorChart extends React.Component { ]} style={{ data: { - stroke: chart_color_orange_300.var + stroke: chart_color_orange_300.var2 } }} /> diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index 73fda91fcae..86620389acc 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -30,7 +30,7 @@ import { createContainer, mergeTheme } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; + import './chart-tooltip.css'; ## Introduction diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx index e9aa4d9271a..5953f804ba5 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx @@ -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 27cea4f5c91..baddc7f566b 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts @@ -57,10 +57,10 @@ export const getInteractiveLegendItemStyles = (hidden = false) => ? {} : { labels: { - fill: chart_global_label_Fill.var + fill: chart_global_label_Fill.var2 }, symbol: { - fill: chart_global_label_Fill.var, + fill: chart_global_label_Fill.var2, 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 6aba552d4ec..cdf767bace4 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.var) + (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var2) ) { 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.var) + (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var2) ) { continue; // Skip hidden data } diff --git a/packages/react-docs/patternfly-docs.css.js b/packages/react-docs/patternfly-docs.css.js index 93e3306149d..ab32e68f539 100644 --- a/packages/react-docs/patternfly-docs.css.js +++ b/packages/react-docs/patternfly-docs.css.js @@ -20,4 +20,9 @@ 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'; From 55e53fdb6f9c206b54df64989a3607f18bbd1de7 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Thu, 5 May 2022 18:49:16 -0500 Subject: [PATCH 4/9] chore(charts): merge cleanup --- .../src/components/ChartArea/examples/ChartArea.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 7a929ea99c3..47d6877fa70 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -12,14 +12,7 @@ propComponents: [ hideDarkMode: true --- -<<<<<<< HEAD import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; -import '@patternfly/patternfly/patternfly-charts.css'; -import '@patternfly/patternfly/patternfly-charts-theme-dark.css'; -======= -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; - ->>>>>>> 2e8b88912 (chore(charts): update react-tokens to test fallback) ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! From 2709b084142ac69ca8d2bfcdb616222f856d6023 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Thu, 5 May 2022 19:07:01 -0500 Subject: [PATCH 5/9] chore(charts): cleanup --- .../src/components/ChartBullet/examples/ChartBullet.md | 1 - .../react-charts/src/components/ChartLine/examples/ChartLine.md | 1 - .../src/components/ChartScatter/examples/ChartScatter.md | 1 - .../src/components/ChartStack/examples/ChartStack.md | 1 - .../src/components/ChartTheme/examples/ChartTheme.md | 1 - .../src/components/ChartTheme/styles/common-styles.ts | 2 +- .../src/components/ChartTooltip/examples/ChartTooltip.md | 1 - 7 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md index 1376d8d5665..bcbc5e0db16 100644 --- a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md @@ -11,7 +11,6 @@ hideDarkMode: true import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts'; - ## 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/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index a26d7a9da90..d4c42c68343 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -14,7 +14,6 @@ hideDarkMode: true import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; - ## 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/ChartScatter/examples/ChartScatter.md b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md index 88c92649c2e..1461b20006f 100644 --- a/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md +++ b/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md @@ -24,7 +24,6 @@ import { getResizeObserver } from '@patternfly/react-charts'; - ## 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/ChartStack/examples/ChartStack.md b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md index d1f4b3c3224..b2feca6568d 100644 --- a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md +++ b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md @@ -25,7 +25,6 @@ import { getResizeObserver } from '@patternfly/react-charts'; - ## 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/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index 2dc6081bd67..efe57b9de15 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -20,7 +20,6 @@ import { ChartVoronoiContainer, mergeTheme } from '@patternfly/react-charts'; - import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; 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 683e201420a..75cf4e0bfa7 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts @@ -9,7 +9,7 @@ import chart_legend_position from '@patternfly/react-tokens/dist/esm/chart_legen // Typography const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.var2; -const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.value; +const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.var2; const TYPOGRAPHY_FONT_SIZE = chart_global_FontSize_sm.value; export const CommonStyles = { diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index 86620389acc..4fe53ded2e2 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -30,7 +30,6 @@ import { createContainer, mergeTheme } from '@patternfly/react-charts'; - import './chart-tooltip.css'; ## Introduction From de0974fe51ae89a4e267e62f383f201f92a52904 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Thu, 5 May 2022 20:05:51 -0500 Subject: [PATCH 6/9] chore(charts): revert token name change --- .../ChartTheme/styles/bullet-styles.ts | 6 +- .../ChartTheme/styles/common-styles.ts | 6 +- .../ChartTheme/styles/donut-styles.ts | 4 +- .../styles/donut-utilization-styles.ts | 2 +- .../styles/legend-tooltip-styles.ts | 2 +- .../ChartTheme/themes/axis-theme.ts | 4 +- .../ChartTheme/themes/base-theme.ts | 58 +++++++-------- .../ChartTheme/themes/bullet-theme.ts | 36 +++++----- .../themes/dark/blue-color-theme.ts | 10 +-- .../themes/dark/cyan-color-theme.ts | 10 +-- .../themes/dark/gold-color-theme.ts | 10 +-- .../themes/dark/gray-color-theme.ts | 10 +-- .../themes/dark/green-color-theme.ts | 10 +-- .../themes/dark/multi-color-ordered-theme.ts | 50 ++++++------- .../dark/multi-color-unordered-theme.ts | 70 +++++++++---------- .../themes/dark/orange-color-theme.ts | 10 +-- .../themes/dark/purple-color-theme.ts | 10 +-- .../themes/donut-threshold-theme.ts | 8 +-- .../themes/donut-utilization-theme.ts | 8 +-- .../themes/light/blue-color-theme.ts | 10 +-- .../themes/light/cyan-color-theme.ts | 10 +-- .../themes/light/gold-color-theme.ts | 10 +-- .../themes/light/gray-color-theme.ts | 10 +-- .../themes/light/green-color-theme.ts | 10 +-- .../themes/light/multi-color-ordered-theme.ts | 50 ++++++------- .../light/multi-color-unordered-theme.ts | 70 +++++++++---------- .../themes/light/orange-color-theme.ts | 10 +-- .../themes/light/purple-color-theme.ts | 10 +-- .../ChartThreshold/examples/ChartThreshold.md | 8 +-- .../components/ChartUtils/chart-container.tsx | 2 +- .../ChartUtils/chart-interactive-legend.ts | 4 +- .../components/ChartUtils/chart-tooltip.ts | 4 +- 32 files changed, 266 insertions(+), 266 deletions(-) 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 8536f6ccda7..5f91e30e92c 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts @@ -22,17 +22,17 @@ export const BulletStyles = { label: { groupTitle: { // Victory props only - fill: chart_bullet_label_grouptitle_Fill.var2, + fill: chart_bullet_label_grouptitle_Fill.var, fontSize: chart_global_FontSize_2xl.value }, subTitle: { // Victory props only - fill: chart_bullet_label_subtitle_Fill.var2, + fill: chart_bullet_label_subtitle_Fill.var, fontSize: chart_global_FontSize_sm.value }, title: { // Victory props only - fill: chart_bullet_label_title_Fill.var2, + 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 75cf4e0bfa7..f5096ad4c58 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts @@ -8,8 +8,8 @@ import chart_legend_Margin from '@patternfly/react-tokens/dist/esm/chart_legend_ import chart_legend_position from '@patternfly/react-tokens/dist/esm/chart_legend_position'; // Typography -const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.var2; -const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.var2; +const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.var; +const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.var; const TYPOGRAPHY_FONT_SIZE = chart_global_FontSize_sm.value; export const CommonStyles = { @@ -18,7 +18,7 @@ export const CommonStyles = { fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, margin: chart_global_label_Margin.value, - fill: chart_global_label_Fill.var2 + 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 3cd949956e6..4dec2d82c06 100644 --- a/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts +++ b/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts @@ -10,13 +10,13 @@ export const DonutStyles = { label: { subTitle: { // Victory props only - fill: chart_donut_label_subtitle_Fill.var2, + 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.var2, + 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 330c8e17483..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.var2, chart_donut_threshold_danger_Color.var2] + 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 52b247f9b56..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.var2, + fill: chart_voronoi_labels_Fill.var, fontWeight: global_FontWeight_bold.value } as any }; diff --git a/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts index b43b54ecbc8..be2cf035a9c 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/axis-theme.ts @@ -7,10 +7,10 @@ export const AxisTheme = { axis: { style: { grid: { - stroke: chart_axis_grid_stroke_Color.var2 + stroke: chart_axis_grid_stroke_Color.var }, ticks: { - stroke: chart_axis_tick_stroke_Color.var2 + stroke: chart_axis_tick_stroke_Color.var } } } 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 2189a5298c5..a40ec3d1fb0 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts @@ -113,8 +113,8 @@ const LABEL_PROPS = { fontSize: TYPOGRAPHY_FONT_SIZE, letterSpacing: TYPOGRAPHY_LETTER_SPACING, padding: chart_global_label_Padding.value, - stroke: chart_global_label_stroke.var2, - fill: chart_global_label_Fill.var2 + stroke: chart_global_label_stroke.var, + fill: chart_global_label_Fill.var }; const LABEL_CENTERED_PROPS = { ...LABEL_PROPS, @@ -138,7 +138,7 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_area_data_Fill.var2, + fill: chart_area_data_Fill.var, fillOpacity: chart_area_Opacity.value, // Omit stroke to add a line border from color scale // stroke: chart_global_label_stroke.value, @@ -151,28 +151,28 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { axis: { - fill: chart_axis_axis_Fill.var2, + fill: chart_axis_axis_Fill.var, strokeWidth: chart_axis_axis_stroke_Width.value, - stroke: chart_axis_axis_stroke_Color.var2, + stroke: chart_axis_axis_stroke_Color.var, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN }, axisLabel: { ...LABEL_CENTERED_PROPS, padding: chart_axis_axis_label_Padding.value, - stroke: chart_axis_axis_label_stroke_Color.var2 + stroke: chart_axis_axis_label_stroke_Color.var }, grid: { - fill: chart_axis_grid_Fill.var2, + fill: chart_axis_grid_Fill.var, stroke: 'none', pointerEvents: chart_axis_grid_PointerEvents.value, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN }, ticks: { - fill: chart_axis_tick_Fill.var2, + fill: chart_axis_tick_Fill.var, size: chart_axis_tick_Size.value, - stroke: chart_axis_tick_stroke_Color.var2, + stroke: chart_axis_tick_stroke_Color.var, strokeLinecap: STROKE_LINE_CAP, strokeLinejoin: STROKE_LINE_JOIN, strokeWidth: chart_axis_tick_Width.value @@ -188,9 +188,9 @@ export const BaseTheme = { barWidth: chart_bar_Width.value, style: { data: { - fill: chart_bar_data_Fill.var2, + fill: chart_bar_data_Fill.var, padding: chart_bar_data_Padding.value, - stroke: chart_bar_data_stroke.var2, + stroke: chart_bar_data_stroke.var, strokeWidth: chart_bar_data_stroke_Width.value }, labels: LABEL_PROPS @@ -201,29 +201,29 @@ export const BaseTheme = { style: { max: { padding: chart_boxplot_max_Padding.value, - stroke: chart_boxplot_max_stroke_Color.var2, + stroke: chart_boxplot_max_stroke_Color.var, strokeWidth: chart_boxplot_max_stroke_Width.value }, maxLabels: LABEL_PROPS, median: { padding: chart_boxplot_median_Padding.value, - stroke: chart_boxplot_median_stroke_Color.var2, + stroke: chart_boxplot_median_stroke_Color.var, strokeWidth: chart_boxplot_median_stroke_Width.value }, medianLabels: LABEL_PROPS, min: { padding: chart_boxplot_min_Padding.value, - stroke: chart_boxplot_min_stroke_Color.var2, + stroke: chart_boxplot_min_stroke_Color.var, strokeWidth: chart_boxplot_min_stroke_Width.value }, minLabels: LABEL_PROPS, q1: { - fill: chart_boxplot_lower_quartile_Fill.var2, + fill: chart_boxplot_lower_quartile_Fill.var, padding: chart_boxplot_lower_quartile_Padding.value }, q1Labels: LABEL_PROPS, q3: { - fill: chart_boxplot_upper_quartile_Fill.var2, + fill: chart_boxplot_upper_quartile_Fill.var, padding: chart_boxplot_upper_quartile_Padding.value }, q3Labels: LABEL_PROPS @@ -233,12 +233,12 @@ export const BaseTheme = { candlestick: { ...LAYOUT_PROPS, candleColors: { - positive: chart_candelstick_candle_positive_Color.var2, - negative: chart_candelstick_candle_negative_Color.var2 + positive: chart_candelstick_candle_positive_Color.var, + negative: chart_candelstick_candle_negative_Color.var }, style: { data: { - stroke: chart_candelstick_data_stroke_Color.var2, + stroke: chart_candelstick_data_stroke_Color.var, strokeWidth: chart_candelstick_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -252,9 +252,9 @@ export const BaseTheme = { borderWidth: chart_errorbar_BorderWidth.value, style: { data: { - fill: chart_errorbar_data_Fill.var2, + fill: chart_errorbar_data_Fill.var, opacity: chart_errorbar_data_Opacity.value, - stroke: chart_errorbar_data_stroke_Color.var2, + stroke: chart_errorbar_data_stroke_Color.var, strokeWidth: chart_errorbar_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -283,9 +283,9 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_line_data_Fill.var2, + fill: chart_line_data_Fill.var, opacity: chart_line_data_Opacity.value, - stroke: chart_line_data_stroke_Color.var2, + stroke: chart_line_data_stroke_Color.var, strokeWidth: chart_line_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -296,7 +296,7 @@ export const BaseTheme = { style: { data: { padding: chart_pie_data_Padding.value, - stroke: chart_pie_data_stroke_Color.var2, + stroke: chart_pie_data_stroke_Color.var, strokeWidth: chart_pie_data_stroke_Width.value }, labels: { @@ -311,9 +311,9 @@ export const BaseTheme = { ...LAYOUT_PROPS, style: { data: { - fill: chart_scatter_data_Fill.var2, + fill: chart_scatter_data_Fill.var, opacity: chart_scatter_data_Opacity.value, - stroke: chart_scatter_data_stroke_Color.var2, + stroke: chart_scatter_data_stroke_Color.var, strokeWidth: chart_scatter_data_stroke_Width.value }, labels: LABEL_CENTERED_PROPS @@ -340,8 +340,8 @@ export const BaseTheme = { pointerLength: chart_tooltip_pointer_length.value, pointerWidth: chart_tooltip_pointer_Width.value, style: { - fill: chart_tooltip_Fill.var2, // text - pointerEvents: chart_tooltip_PointerEvents.var2 + fill: chart_tooltip_Fill.var, // text + pointerEvents: chart_tooltip_PointerEvents.var } }, voronoi: { @@ -354,7 +354,7 @@ export const BaseTheme = { }, labels: { ...LABEL_CENTERED_PROPS, - fill: chart_voronoi_labels_Fill.var2, // text + fill: chart_voronoi_labels_Fill.var, // text padding: chart_voronoi_labels_Padding.value, pointerEvents: chart_voronoi_labels_PointerEvents.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 9462a7fefc0..baa2f64b2b6 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/bullet-theme.ts @@ -40,8 +40,8 @@ export const BulletComparativeErrorMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_error_Fill_Color.var2, - stroke: chart_bullet_comparative_measure_error_stroke_Color.var2, + fill: chart_bullet_comparative_measure_error_Fill_Color.var, + stroke: chart_bullet_comparative_measure_error_stroke_Color.var, strokeWidth: chart_bullet_comparative_measure_error_stroke_Width.value } } @@ -54,8 +54,8 @@ export const BulletComparativeMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_Fill_Color.var2, - stroke: chart_bullet_comparative_measure_stroke_Color.var2, + fill: chart_bullet_comparative_measure_Fill_Color.var, + stroke: chart_bullet_comparative_measure_stroke_Color.var, strokeWidth: chart_bullet_comparative_measure_stroke_Width.value } } @@ -68,8 +68,8 @@ export const BulletComparativeWarningMeasureTheme = { height: chart_bullet_Height.value, style: { data: { - fill: chart_bullet_comparative_measure_warning_Fill_Color.var2, - stroke: chart_bullet_comparative_measure_warning_stroke_Color.var2, + fill: chart_bullet_comparative_measure_warning_Fill_Color.var, + stroke: chart_bullet_comparative_measure_warning_stroke_Color.var, strokeWidth: chart_bullet_comparative_measure_warning_stroke_Width.value } } @@ -89,8 +89,8 @@ export const BulletGroupTitleTheme = { line: { style: { data: { - fill: chart_bullet_group_title_divider_Fill_Color.var2, - stroke: chart_bullet_group_title_divider_stroke_Color.var2, + fill: chart_bullet_group_title_divider_Fill_Color.var, + stroke: chart_bullet_group_title_divider_stroke_Color.var, strokeWidth: chart_bullet_group_title_divider_stroke_Width.value } } @@ -108,11 +108,11 @@ export const BulletPrimaryDotMeasureTheme = { export const BulletPrimaryNegativeMeasureTheme = { group: { colorScale: [ - chart_bullet_negative_measure_ColorScale_100.var2, - chart_bullet_negative_measure_ColorScale_200.var2, - chart_bullet_negative_measure_ColorScale_300.var2, - chart_bullet_negative_measure_ColorScale_400.var2, - chart_bullet_negative_measure_ColorScale_500.var2 + 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_bullet_qualitative_range_ColorScale_100.var2, - chart_bullet_qualitative_range_ColorScale_200.var2, - chart_bullet_qualitative_range_ColorScale_300.var2, - chart_bullet_qualitative_range_ColorScale_400.var2, - chart_bullet_qualitative_range_ColorScale_500.var2 + 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 c5fdb44a4c1..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_blue_ColorScale_100.var2, - chart_theme_blue_ColorScale_200.var2, - chart_theme_blue_ColorScale_300.var2, - chart_theme_blue_ColorScale_400.var2, - chart_theme_blue_ColorScale_500.var2 + 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 38a5dc54187..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_cyan_ColorScale_100.var2, - chart_theme_cyan_ColorScale_200.var2, - chart_theme_cyan_ColorScale_300.var2, - chart_theme_cyan_ColorScale_400.var2, - chart_theme_cyan_ColorScale_500.var2 + 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 69d838a0d1e..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_gold_ColorScale_100.var2, - chart_theme_gold_ColorScale_200.var2, - chart_theme_gold_ColorScale_300.var2, - chart_theme_gold_ColorScale_400.var2, - chart_theme_gold_ColorScale_500.var2 + 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 65757bb9302..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_gray_ColorScale_100.var2, - chart_theme_gray_ColorScale_200.var2, - chart_theme_gray_ColorScale_300.var2, - chart_theme_gray_ColorScale_400.var2, - chart_theme_gray_ColorScale_500.var2 + 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 19f30608ba5..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_green_ColorScale_100.var2, - chart_theme_green_ColorScale_200.var2, - chart_theme_green_ColorScale_300.var2, - chart_theme_green_ColorScale_400.var2, - chart_theme_green_ColorScale_500.var2 + 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 89841779e6a..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 @@ -29,31 +29,31 @@ 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_theme_multi_color_ordered_ColorScale_100.var2, - chart_theme_multi_color_ordered_ColorScale_200.var2, - chart_theme_multi_color_ordered_ColorScale_300.var2, - chart_theme_multi_color_ordered_ColorScale_400.var2, - chart_theme_multi_color_ordered_ColorScale_500.var2, - chart_theme_multi_color_ordered_ColorScale_600.var2, - chart_theme_multi_color_ordered_ColorScale_700.var2, - chart_theme_multi_color_ordered_ColorScale_800.var2, - chart_theme_multi_color_ordered_ColorScale_900.var2, - chart_theme_multi_color_ordered_ColorScale_1000.var2, - chart_theme_multi_color_ordered_ColorScale_1100.var2, - chart_theme_multi_color_ordered_ColorScale_1200.var2, - chart_theme_multi_color_ordered_ColorScale_1300.var2, - chart_theme_multi_color_ordered_ColorScale_1400.var2, - chart_theme_multi_color_ordered_ColorScale_1500.var2, - chart_theme_multi_color_ordered_ColorScale_1600.var2, - chart_theme_multi_color_ordered_ColorScale_1700.var2, - chart_theme_multi_color_ordered_ColorScale_1800.var2, - chart_theme_multi_color_ordered_ColorScale_1900.var2, - chart_theme_multi_color_ordered_ColorScale_2000.var2, - chart_theme_multi_color_ordered_ColorScale_2100.var2, - chart_theme_multi_color_ordered_ColorScale_2200.var2, - chart_theme_multi_color_ordered_ColorScale_2300.var2, - chart_theme_multi_color_ordered_ColorScale_2400.var2, - chart_theme_multi_color_ordered_ColorScale_2500.var2 + 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 a33268ece50..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 @@ -39,41 +39,41 @@ 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_theme_multi_color_unordered_ColorScale_100.var2, - chart_theme_multi_color_unordered_ColorScale_200.var2, - chart_theme_multi_color_unordered_ColorScale_300.var2, - chart_theme_multi_color_unordered_ColorScale_400.var2, - chart_theme_multi_color_unordered_ColorScale_500.var2, - chart_theme_multi_color_unordered_ColorScale_600.var2, - chart_theme_multi_color_unordered_ColorScale_700.var2, - chart_theme_multi_color_unordered_ColorScale_800.var2, - chart_theme_multi_color_unordered_ColorScale_900.var2, - chart_theme_multi_color_unordered_ColorScale_1000.var2, - chart_theme_multi_color_unordered_ColorScale_1100.var2, - chart_theme_multi_color_unordered_ColorScale_1200.var2, - chart_theme_multi_color_unordered_ColorScale_1300.var2, - chart_theme_multi_color_unordered_ColorScale_1400.var2, - chart_theme_multi_color_unordered_ColorScale_1500.var2, - chart_theme_multi_color_unordered_ColorScale_1600.var2, - chart_theme_multi_color_unordered_ColorScale_1700.var2, - chart_theme_multi_color_unordered_ColorScale_1800.var2, - chart_theme_multi_color_unordered_ColorScale_1900.var2, - chart_theme_multi_color_unordered_ColorScale_2000.var2, - chart_theme_multi_color_unordered_ColorScale_2100.var2, - chart_theme_multi_color_unordered_ColorScale_2200.var2, - chart_theme_multi_color_unordered_ColorScale_2300.var2, - chart_theme_multi_color_unordered_ColorScale_2400.var2, - chart_theme_multi_color_unordered_ColorScale_2500.var2, - chart_theme_multi_color_unordered_ColorScale_2600.var2, - chart_theme_multi_color_unordered_ColorScale_2700.var2, - chart_theme_multi_color_unordered_ColorScale_2800.var2, - chart_theme_multi_color_unordered_ColorScale_2900.var2, - chart_theme_multi_color_unordered_ColorScale_3000.var2, - chart_theme_multi_color_unordered_ColorScale_3100.var2, - chart_theme_multi_color_unordered_ColorScale_3200.var2, - chart_theme_multi_color_unordered_ColorScale_3300.var2, - chart_theme_multi_color_unordered_ColorScale_3400.var2, - chart_theme_multi_color_unordered_ColorScale_3500.var2 + 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 3277b91d494..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_orange_ColorScale_100.var2, - chart_theme_orange_ColorScale_200.var2, - chart_theme_orange_ColorScale_300.var2, - chart_theme_orange_ColorScale_400.var2, - chart_theme_orange_ColorScale_500.var2 + 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 8532604eb21..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_purple_ColorScale_100.var2, - chart_theme_purple_ColorScale_200.var2, - chart_theme_purple_ColorScale_300.var2, - chart_theme_purple_ColorScale_400.var2, - chart_theme_purple_ColorScale_500.var2 + 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-threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts index 1302dd642bc..fa68f19ac5a 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts @@ -13,7 +13,7 @@ import chart_donut_threshold_static_pie_Width from '@patternfly/react-tokens/dis // Donut threshold dynamic theme export const DonutThresholdDynamicTheme = { legend: { - colorScale: [chart_donut_threshold_second_Color.var2, chart_donut_threshold_third_Color.var2] + colorScale: [chart_donut_threshold_second_Color.var, chart_donut_threshold_third_Color.var] }, pie: { height: chart_donut_threshold_dynamic_pie_Height.value, @@ -26,9 +26,9 @@ export const DonutThresholdDynamicTheme = { export const DonutThresholdStaticTheme = { pie: { colorScale: [ - chart_donut_threshold_first_Color.var2, - chart_donut_threshold_second_Color.var2, - chart_donut_threshold_third_Color.var2 + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var ], height: chart_donut_threshold_static_pie_Height.value, padAngle: chart_donut_threshold_static_pie_angle_Padding.value, 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 f8cf397b10e..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 @@ -22,13 +22,13 @@ export const DonutUtilizationDynamicTheme = { export const DonutUtilizationStaticTheme = { legend: { colorScale: [ - chart_donut_threshold_first_Color.var2, - chart_donut_threshold_second_Color.var2, - chart_donut_threshold_third_Color.var2 + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var ] }, pie: { - colorScale: [chart_donut_threshold_first_Color.var2], + 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 3f2af5e0f20..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_blue_ColorScale_100.var2, - chart_theme_blue_ColorScale_200.var2, - chart_theme_blue_ColorScale_300.var2, - chart_theme_blue_ColorScale_400.var2, - chart_theme_blue_ColorScale_500.var2 + 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 5d58de7c481..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_cyan_ColorScale_100.var2, - chart_theme_cyan_ColorScale_200.var2, - chart_theme_cyan_ColorScale_300.var2, - chart_theme_cyan_ColorScale_400.var2, - chart_theme_cyan_ColorScale_500.var2 + 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 f4d484fefad..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_gold_ColorScale_100.var2, - chart_theme_gold_ColorScale_200.var2, - chart_theme_gold_ColorScale_300.var2, - chart_theme_gold_ColorScale_400.var2, - chart_theme_gold_ColorScale_500.var2 + 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 a35b611ebbe..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_gray_ColorScale_100.var2, - chart_theme_gray_ColorScale_200.var2, - chart_theme_gray_ColorScale_300.var2, - chart_theme_gray_ColorScale_400.var2, - chart_theme_gray_ColorScale_500.var2 + 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 4fcd4918f51..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_green_ColorScale_100.var2, - chart_theme_green_ColorScale_200.var2, - chart_theme_green_ColorScale_300.var2, - chart_theme_green_ColorScale_400.var2, - chart_theme_green_ColorScale_500.var2 + 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 a40a470214f..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 @@ -29,31 +29,31 @@ 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_theme_multi_color_ordered_ColorScale_100.var2, - chart_theme_multi_color_ordered_ColorScale_200.var2, - chart_theme_multi_color_ordered_ColorScale_300.var2, - chart_theme_multi_color_ordered_ColorScale_400.var2, - chart_theme_multi_color_ordered_ColorScale_500.var2, - chart_theme_multi_color_ordered_ColorScale_600.var2, - chart_theme_multi_color_ordered_ColorScale_700.var2, - chart_theme_multi_color_ordered_ColorScale_800.var2, - chart_theme_multi_color_ordered_ColorScale_900.var2, - chart_theme_multi_color_ordered_ColorScale_1000.var2, - chart_theme_multi_color_ordered_ColorScale_1100.var2, - chart_theme_multi_color_ordered_ColorScale_1200.var2, - chart_theme_multi_color_ordered_ColorScale_1300.var2, - chart_theme_multi_color_ordered_ColorScale_1400.var2, - chart_theme_multi_color_ordered_ColorScale_1500.var2, - chart_theme_multi_color_ordered_ColorScale_1600.var2, - chart_theme_multi_color_ordered_ColorScale_1700.var2, - chart_theme_multi_color_ordered_ColorScale_1800.var2, - chart_theme_multi_color_ordered_ColorScale_1900.var2, - chart_theme_multi_color_ordered_ColorScale_2000.var2, - chart_theme_multi_color_ordered_ColorScale_2100.var2, - chart_theme_multi_color_ordered_ColorScale_2200.var2, - chart_theme_multi_color_ordered_ColorScale_2300.var2, - chart_theme_multi_color_ordered_ColorScale_2400.var2, - chart_theme_multi_color_ordered_ColorScale_2500.var2 + 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 bc9c4825261..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 @@ -39,41 +39,41 @@ 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_theme_multi_color_unordered_ColorScale_100.var2, - chart_theme_multi_color_unordered_ColorScale_200.var2, - chart_theme_multi_color_unordered_ColorScale_300.var2, - chart_theme_multi_color_unordered_ColorScale_400.var2, - chart_theme_multi_color_unordered_ColorScale_500.var2, - chart_theme_multi_color_unordered_ColorScale_600.var2, - chart_theme_multi_color_unordered_ColorScale_700.var2, - chart_theme_multi_color_unordered_ColorScale_800.var2, - chart_theme_multi_color_unordered_ColorScale_900.var2, - chart_theme_multi_color_unordered_ColorScale_1000.var2, - chart_theme_multi_color_unordered_ColorScale_1100.var2, - chart_theme_multi_color_unordered_ColorScale_1200.var2, - chart_theme_multi_color_unordered_ColorScale_1300.var2, - chart_theme_multi_color_unordered_ColorScale_1400.var2, - chart_theme_multi_color_unordered_ColorScale_1500.var2, - chart_theme_multi_color_unordered_ColorScale_1600.var2, - chart_theme_multi_color_unordered_ColorScale_1700.var2, - chart_theme_multi_color_unordered_ColorScale_1800.var2, - chart_theme_multi_color_unordered_ColorScale_1900.var2, - chart_theme_multi_color_unordered_ColorScale_2000.var2, - chart_theme_multi_color_unordered_ColorScale_2100.var2, - chart_theme_multi_color_unordered_ColorScale_2200.var2, - chart_theme_multi_color_unordered_ColorScale_2300.var2, - chart_theme_multi_color_unordered_ColorScale_2400.var2, - chart_theme_multi_color_unordered_ColorScale_2500.var2, - chart_theme_multi_color_unordered_ColorScale_2600.var2, - chart_theme_multi_color_unordered_ColorScale_2700.var2, - chart_theme_multi_color_unordered_ColorScale_2800.var2, - chart_theme_multi_color_unordered_ColorScale_2900.var2, - chart_theme_multi_color_unordered_ColorScale_3000.var2, - chart_theme_multi_color_unordered_ColorScale_3100.var2, - chart_theme_multi_color_unordered_ColorScale_3200.var2, - chart_theme_multi_color_unordered_ColorScale_3300.var2, - chart_theme_multi_color_unordered_ColorScale_3400.var2, - chart_theme_multi_color_unordered_ColorScale_3500.var2 + 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 ee5b18ef41c..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_orange_ColorScale_100.var2, - chart_theme_orange_ColorScale_200.var2, - chart_theme_orange_ColorScale_300.var2, - chart_theme_orange_ColorScale_400.var2, - chart_theme_orange_ColorScale_500.var2 + 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 fde66600a7d..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 @@ -9,11 +9,11 @@ import { ColorTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit const COLOR_SCALE = [ - chart_theme_purple_ColorScale_100.var2, - chart_theme_purple_ColorScale_200.var2, - chart_theme_purple_ColorScale_300.var2, - chart_theme_purple_ColorScale_400.var2, - chart_theme_purple_ColorScale_500.var2 + 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/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index 1d5d6f8cb57..1abdd129141 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -100,11 +100,11 @@ class MultiColorChart extends React.Component { { name: 'Birds' }, { name: 'Cats Threshold', - symbol: { fill: chart_color_blue_300.var2, type: 'threshold' } + symbol: { fill: chart_color_blue_300.var, type: 'threshold' } }, { name: 'Birds Threshold', - symbol: { fill: chart_color_orange_300.var2, type: 'threshold' } + symbol: { fill: chart_color_orange_300.var, type: 'threshold' } } ]} itemsPerRow={itemsPerRow} @@ -153,7 +153,7 @@ class MultiColorChart extends React.Component { ]} style={{ data: { - stroke: chart_color_blue_300.var2 + stroke: chart_color_blue_300.var } }} /> @@ -166,7 +166,7 @@ class MultiColorChart extends React.Component { ]} style={{ data: { - stroke: chart_color_orange_300.var2 + stroke: chart_color_orange_300.var } }} /> diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx index 5953f804ba5..e9aa4d9271a 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx @@ -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 baddc7f566b..27cea4f5c91 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts @@ -57,10 +57,10 @@ export const getInteractiveLegendItemStyles = (hidden = false) => ? {} : { labels: { - fill: chart_global_label_Fill.var2 + fill: chart_global_label_Fill.var }, symbol: { - fill: chart_global_label_Fill.var2, + 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 cdf767bace4..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.var2) + (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.var2) + (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) ) { continue; // Skip hidden data } From e441ed8f70ec8a8358749003290a1450fc4c32d8 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Fri, 6 May 2022 10:46:36 -0500 Subject: [PATCH 7/9] chore(charts): remove newlines --- .../src/components/ChartThreshold/examples/ChartThreshold.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index 1abdd129141..987a43e3a88 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -22,8 +22,6 @@ import { ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts'; - - 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'; From 5e009370c9c4990706c242c4e859db4bfe49358c Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Fri, 6 May 2022 11:14:24 -0500 Subject: [PATCH 8/9] chore(charts): snapshots --- .../Chart/__snapshots__/Chart.test.tsx.snap | 70 +++++++++---------- .../__snapshots__/ChartArea.test.tsx.snap | 6 +- .../__snapshots__/ChartAxis.test.tsx.snap | 44 ++++++------ .../__snapshots__/ChartBar.test.tsx.snap | 64 ++++++++--------- .../__snapshots__/ChartBullet.test.tsx.snap | 20 +++--- .../ChartBulletGroupTitle.test.tsx.snap | 4 +- ...ChartBulletPrimaryDotMeasure.test.tsx.snap | 6 +- ...ulletPrimarySegmentedMeasure.test.tsx.snap | 6 +- .../ChartBulletQualitativeRange.test.tsx.snap | 6 +- .../ChartBulletTitle.test.tsx.snap | 4 +- .../ChartContainer.test.tsx.snap | 10 +-- .../ChartCursorContainer.test.tsx.snap | 4 +- .../ChartCursorFlyout.test.tsx.snap | 4 +- .../ChartCursorTooltip.test.tsx.snap | 4 +- .../__snapshots__/ChartDonut.test.tsx.snap | 26 +++---- .../ChartDonutThreshold.test.tsx.snap | 2 +- .../ChartDonutUtilization.test.tsx.snap | 12 ++-- .../__snapshots__/ChartGroup.test.tsx.snap | 4 +- .../__snapshots__/ChartLabel.test.tsx.snap | 2 +- .../__snapshots__/ChartLegend.test.tsx.snap | 26 +++---- .../ChartLegendTooltip.test.tsx.snap | 38 +++++----- .../ChartLegendTooltipLabel.test.tsx.snap | 4 +- .../__snapshots__/ChartLine.test.tsx.snap | 34 ++++----- .../__snapshots__/ChartPie.test.tsx.snap | 26 +++---- .../__snapshots__/ChartPoint.test.tsx.snap | 26 +++---- .../__snapshots__/ChartScatter.test.tsx.snap | 60 ++++++++-------- .../__snapshots__/ChartStack.test.tsx.snap | 50 ++++++------- .../ChartThreshold.test.tsx.snap | 28 ++++---- .../__snapshots__/ChartTooltip.test.tsx.snap | 4 +- .../ChartVoronoContainer.test.tsx.snap | 4 +- 30 files changed, 299 insertions(+), 299 deletions(-) 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/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/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap index 0d66d5fcb0b..0a9d458d431 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.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-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/__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/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/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/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);" /> From 8a80a0eb8a131c4f1b238cf37c538c84157a1cc3 Mon Sep 17 00:00:00 2001 From: Michael Coker Date: Sun, 8 May 2022 17:49:08 -0500 Subject: [PATCH 9/9] chore(charts): updated colors to use react tokens var --- .../ChartCursorContainer.tsx | 2 +- .../ChartTheme/examples/ChartTheme.md | 75 +++++++++---------- 2 files changed, 38 insertions(+), 39 deletions(-) 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 @@ -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)