@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.119

package/patternfly-charts.scss

@@ -1,5 +1,7 @@
-@import "base/chart-globals";
-// stylelint-disable
+@import "./sass-utilities/scss-variables";
+
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$chart: #{$pf-prefix} + 'chart';
 
 .#{$chart} {
   // Color blending mode
@@ -9,411 +11,5 @@
 }
 
 :where(:root) {
-  // Chart colors
-  // blue
-  --#{$chart}-color-blue-100: #{$pf-v6-chart-color-blue-100};
-  --#{$chart}-color-blue-200: #{$pf-v6-chart-color-blue-200};
-  --#{$chart}-color-blue-300: #{$pf-v6-chart-color-blue-300};
-  --#{$chart}-color-blue-400: #{$pf-v6-chart-color-blue-400};
-  --#{$chart}-color-blue-500: #{$pf-v6-chart-color-blue-500};
-
-  // green
-  --#{$chart}-color-green-100: #{$pf-v6-chart-color-green-100};
-  --#{$chart}-color-green-200: #{$pf-v6-chart-color-green-200};
-  --#{$chart}-color-green-300: #{$pf-v6-chart-color-green-300};
-  --#{$chart}-color-green-400: #{$pf-v6-chart-color-green-400};
-  --#{$chart}-color-green-500: #{$pf-v6-chart-color-green-500};
-
-  // cyan
-  --#{$chart}-color-cyan-100: #{$pf-v6-chart-color-cyan-100};
-  --#{$chart}-color-cyan-200: #{$pf-v6-chart-color-cyan-200};
-  --#{$chart}-color-cyan-300: #{$pf-v6-chart-color-cyan-300};
-  --#{$chart}-color-cyan-400: #{$pf-v6-chart-color-cyan-400};
-  --#{$chart}-color-cyan-500: #{$pf-v6-chart-color-cyan-500};
-
-  // purple
-  --#{$chart}-color-purple-100: #{$pf-v6-chart-color-purple-100};
-  --#{$chart}-color-purple-200: #{$pf-v6-chart-color-purple-200};
-  --#{$chart}-color-purple-300: #{$pf-v6-chart-color-purple-300};
-  --#{$chart}-color-purple-400: #{$pf-v6-chart-color-purple-400};
-  --#{$chart}-color-purple-500: #{$pf-v6-chart-color-purple-500};
-
-  // gold
-  --#{$chart}-color-gold-100: #{$pf-v6-chart-color-gold-100};
-  --#{$chart}-color-gold-200: #{$pf-v6-chart-color-gold-200};
-  --#{$chart}-color-gold-300: #{$pf-v6-chart-color-gold-300};
-  --#{$chart}-color-gold-400: #{$pf-v6-chart-color-gold-400};
-  --#{$chart}-color-gold-500: #{$pf-v6-chart-color-gold-500};
-
-  // orange
-  --#{$chart}-color-orange-100: #{$pf-v6-chart-color-orange-100};
-  --#{$chart}-color-orange-200: #{$pf-v6-chart-color-orange-200};
-  --#{$chart}-color-orange-300: #{$pf-v6-chart-color-orange-300};
-  --#{$chart}-color-orange-400: #{$pf-v6-chart-color-orange-400};
-  --#{$chart}-color-orange-500: #{$pf-v6-chart-color-orange-500};
-
-  // red
-  --#{$chart}-color-red-100: #{$pf-v6-chart-color-red-100};
-  --#{$chart}-color-red-200: #{$pf-v6-chart-color-red-200};
-  --#{$chart}-color-red-300: #{$pf-v6-chart-color-red-300};
-  --#{$chart}-color-red-400: #{$pf-v6-chart-color-red-400};
-  --#{$chart}-color-red-500: #{$pf-v6-chart-color-red-500};
-
-  // black
-  --#{$chart}-color-black-100: #{$pf-v6-chart-color-black-100};
-  --#{$chart}-color-black-200: #{$pf-v6-chart-color-black-200};
-  --#{$chart}-color-black-300: #{$pf-v6-chart-color-black-300};
-  --#{$chart}-color-black-400: #{$pf-v6-chart-color-black-400};
-  --#{$chart}-color-black-500: #{$pf-v6-chart-color-black-500};
-
-  // typography
-  --#{$chart}-global--FontSize--xs: #{$pf-v6-chart-global--FontSize--xs};
-  --#{$chart}-global--FontSize--sm: #{$pf-v6-chart-global--FontSize--sm};
-  --#{$chart}-global--FontSize--lg: #{$pf-v6-chart-global--FontSize--lg};
-  --#{$chart}-global--FontSize--2xl: #{$pf-v6-chart-global--FontSize--2xl};
-  --#{$chart}-global--FontFamily: #{$pf-v6-chart-global--FontFamily};
-  --#{$chart}-global--letter-spacing: #{$pf-v6-chart-global--letter-spacing};
-
-  // label
-  --#{$chart}-global--label--Padding: #{$pf-v6-chart-global--label--Padding};
-  --#{$chart}-global--label--Margin: #{$pf-v6-chart-global--label--Margin};
-  --#{$chart}-global--label--stroke: #{$pf-v6-chart-global--label--stroke};
-  --#{$chart}-global--label--text-anchor: #{$pf-v6-chart-global--label--text-anchor};
-  --#{$chart}-global--label--stroke--Width: #{$pf-v6-chart-global--label--stroke--Width};
-  --#{$chart}-global--label--Fill: #{$pf-v6-chart-global--label--Fill};
-
-  // Layout Props
-  --#{$chart}-global--layout--Padding: #{$pf-v6-chart-global--layout--Padding};
-  --#{$chart}-global--layout--Height: #{$pf-v6-chart-global--layout--Height};
-  --#{$chart}-global--layout--Width: #{$pf-v6-chart-global--layout--Width};
-
-  // Stroke and Border Width
-  --#{$chart}-global--stroke--Width--xs: #{$pf-v6-chart-global--stroke--Width--xs};
-  --#{$chart}-global--stroke--Width--sm: #{$pf-v6-chart-global--stroke--Width--sm};
-  --#{$chart}-global--BorderWidth--xs: #{$pf-v6-chart-global--BorderWidth--xs};
-  --#{$chart}-global--BorderWidth--sm: #{$pf-v6-chart-global--BorderWidth--sm};
-  --#{$chart}-global--BorderWidth--lg: #{$pf-v6-chart-global--BorderWidth--lg};
-
-  // Stroke
-  --#{$chart}-global--stroke-line-cap: #{$pf-v6-chart-global--stroke-line-cap};
-  --#{$chart}-global--stroke-line-join: #{$pf-v6-chart-global--stroke-line-join};
-
-  // Fills and Strokes
-  --#{$chart}-global--danger--Color--100: #{$pf-v6-chart-global--danger--Color--100};
-  --#{$chart}-global--warning--Color--100: #{$pf-v6-chart-global--warning--Color--100};
-  --#{$chart}-global--warning--Color--200: #{$pf-v6-chart-global--warning--Color--200};
-  --#{$chart}-global--success--Color--100: #{$pf-v6-chart-global--success--Color--100};
-  --#{$chart}-global--Fill--Color--900: #{$pf-v6-chart-global--Fill--Color--900};
-  --#{$chart}-global--Fill--Color--700: #{$pf-v6-chart-global--Fill--Color--700};
-  --#{$chart}-global--Fill--Color--500: #{$pf-v6-chart-global--Fill--Color--500};
-  --#{$chart}-global--Fill--Color--400: #{$pf-v6-chart-global--Fill--Color--400};
-  --#{$chart}-global--Fill--Color--300: #{$pf-v6-chart-global--Fill--Color--300};
-  --#{$chart}-global--Fill--Color--200: #{$pf-v6-chart-global--Fill--Color--200};
-  --#{$chart}-global--Fill--Color--white: #{$pf-v6-chart-global--Fill--Color--white};
-
-  // Individual Charts
-
-  // Area Chart
-  --#{$chart}-area--Opacity: #{$pf-v6-chart-area--Opacity};
-  --#{$chart}-area--stroke--Width: #{$pf-v6-chart-area--stroke--Width};
-  --#{$chart}-area--data--Fill: #{$pf-v6-chart-area--data--Fill};
-
-  // Axis Chart
-  --#{$chart}-axis--axis--stroke--Width: #{$pf-v6-chart-axis--axis--stroke--Width};
-  --#{$chart}-axis--axis--stroke--Color: #{$pf-v6-chart-axis--axis--stroke--Color};
-  --#{$chart}-axis--axis--Fill: #{$pf-v6-chart-axis--axis--Fill};
-  --#{$chart}-axis--axis-label--Padding: #{$pf-v6-chart-axis--axis-label--Padding};
-  --#{$chart}-axis--axis-label--stroke--Color: #{$pf-v6-chart-axis--axis-label--stroke--Color};
-  --#{$chart}-axis--grid--Fill: #{$pf-v6-chart-axis--grid--Fill};
-  --#{$chart}-axis--grid--stroke--Color: #{$pf-v6-chart-axis--grid--stroke--Color};
-  --#{$chart}-axis--grid--PointerEvents: #{$pf-v6-chart-axis--grid--PointerEvents};
-  --#{$chart}-axis--tick--Fill: #{$pf-v6-chart-axis--tick--Fill};
-  --#{$chart}-axis--tick--Size: #{$pf-v6-chart-axis--tick--Size};
-  --#{$chart}-axis--tick--Width: #{$pf-v6-chart-axis--tick--Width};
-  --#{$chart}-axis--tick--stroke--Color: #{$pf-v6-chart-axis--tick--stroke--Color};
-  --#{$chart}-axis--tick-label--Fill: #{$pf-v6-chart-axis--tick-label--Fill};
-
-  // Bar Chart
-  --#{$chart}-bar--Width: #{$pf-v6-chart-bar--Width};
-  --#{$chart}-bar--data--stroke: #{$pf-v6-chart-bar--data--stroke};
-  --#{$chart}-bar--data--Fill: #{$pf-v6-chart-bar--data--Fill};
-  --#{$chart}-bar--data--Padding: #{$pf-v6-chart-bar--data--Padding};
-  --#{$chart}-bar--data-stroke--Width: #{$pf-v6-chart-bar--data-stroke--Width};
-
-  // Box Plot Chart
-  --#{$chart}-boxplot--max--Padding: #{$pf-v6-chart-boxplot--max--Padding};
-  --#{$chart}-boxplot--max--stroke--Color: #{$pf-v6-chart-boxplot--max--stroke--Color};
-  --#{$chart}-boxplot--max--stroke--Width: #{$pf-v6-chart-boxplot--max--stroke--Width};
-  --#{$chart}-boxplot--median--Padding: #{$pf-v6-chart-boxplot--median--Padding};
-  --#{$chart}-boxplot--median--stroke--Color: #{$pf-v6-chart-boxplot--median--stroke--Color};
-  --#{$chart}-boxplot--median--stroke--Width: #{$pf-v6-chart-boxplot--median--stroke--Width};
-  --#{$chart}-boxplot--min--Padding: #{$pf-v6-chart-boxplot--min--Padding};
-  --#{$chart}-boxplot--min--stroke--Width: #{$pf-v6-chart-boxplot--min--stroke--Width};
-  --#{$chart}-boxplot--min--stroke--Color: #{$pf-v6-chart-boxplot--min--stroke--Color};
-  --#{$chart}-boxplot--lower-quartile--Padding: #{$pf-v6-chart-boxplot--lower-quartile--Padding};
-  --#{$chart}-boxplot--lower-quartile--Fill: #{$pf-v6-chart-boxplot--lower-quartile--Fill};
-  --#{$chart}-boxplot--upper-quartile--Padding: #{$pf-v6-chart-boxplot--upper-quartile--Padding};
-  --#{$chart}-boxplot--upper-quartile--Fill: #{$pf-v6-chart-boxplot--upper-quartile--Fill};
-  --#{$chart}-boxplot--box--Width: #{$pf-v6-chart-boxplot--box--Width};
-
-  // Bullet Chart
-  --#{$chart}-bullet--axis--tick--count: #{$pf-v6-chart-bullet--axis--tick--count};
-  --#{$chart}-bullet--comparative-measure--Fill--Color: #{$pf-v6-chart-bullet--comparative-measure--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--stroke--Color: #{$pf-v6-chart-bullet--comparative-measure--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--stroke--Width: #{$pf-v6-chart-bullet--comparative-measure--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--error--Fill--Color: #{$pf-v6-chart-bullet--comparative-measure--error--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--error--stroke--Color: #{$pf-v6-chart-bullet--comparative-measure--error--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--error--stroke--Width: #{$pf-v6-chart-bullet--comparative-measure--error--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--error--Width: #{$pf-v6-chart-bullet--comparative-measure--error--Width};
-  --#{$chart}-bullet--comparative-measure--warning--Fill--Color: #{$pf-v6-chart-bullet--comparative-measure--warning--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--warning--stroke--Color: #{$pf-v6-chart-bullet--comparative-measure--warning--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--warning--stroke--Width: #{$pf-v6-chart-bullet--comparative-measure--warning--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--warning--Width: #{$pf-v6-chart-bullet--comparative-measure--warning--Width};
-  --#{$chart}-bullet--comparative-measure--Width: #{$pf-v6-chart-bullet--comparative-measure--Width};
-  --#{$chart}-bullet--group-title--divider--Fill--Color: #{$pf-v6-chart-bullet--group-title--divider--Fill--Color};
-  --#{$chart}-bullet--group-title--divider--stroke--Color: #{$pf-v6-chart-bullet--group-title--divider--stroke--Color};
-  --#{$chart}-bullet--group-title--divider--stroke--Width: #{$pf-v6-chart-bullet--group-title--divider--stroke--Width};
-  --#{$chart}-bullet--Height: #{$pf-v6-chart-bullet--Height};
-  --#{$chart}-bullet--label--title--Fill: #{$pf-v6-chart-bullet--label--title--Fill};
-  --#{$chart}-bullet--label--grouptitle--Fill: #{$pf-v6-chart-bullet--label--grouptitle--Fill};
-  --#{$chart}-bullet--label--subtitle--Fill: #{$pf-v6-chart-bullet--label--subtitle--Fill};
-  --#{$chart}-bullet--primary-measure--dot--size: #{$pf-v6-chart-bullet--primary-measure--dot--size};
-  --#{$chart}-bullet--primary-measure--segmented--Width: #{$pf-v6-chart-bullet--primary-measure--segmented--Width};
-  --#{$chart}-bullet--negative-measure--ColorScale--100: #{$pf-v6-chart-color-red-100};
-  --#{$chart}-bullet--negative-measure--ColorScale--200: #{$pf-v6-chart-color-red-200};
-  --#{$chart}-bullet--negative-measure--ColorScale--300: #{$pf-v6-chart-color-red-300};
-  --#{$chart}-bullet--negative-measure--ColorScale--400: #{$pf-v6-chart-color-red-400};
-  --#{$chart}-bullet--negative-measure--ColorScale--500: #{$pf-v6-chart-color-red-500};
-  --#{$chart}-bullet--qualitative-range--Width: #{$pf-v6-chart-bullet--qualitative-range--Width};
-  --#{$chart}-bullet--qualitative-range--ColorScale--100: #{$pf-v6-chart-color-black-100};
-  --#{$chart}-bullet--qualitative-range--ColorScale--200: #{$pf-v6-chart-color-black-200};
-  --#{$chart}-bullet--qualitative-range--ColorScale--300: #{$pf-v6-chart-color-black-300};
-  --#{$chart}-bullet--qualitative-range--ColorScale--400: #{$pf-v6-chart-color-black-400};
-  --#{$chart}-bullet--qualitative-range--ColorScale--500: #{$pf-v6-chart-color-black-500};
-
-  // Candlestick
-  --#{$chart}-candelstick--data--stroke--Width: #{$pf-v6-chart-candelstick--data--stroke--Width};
-  --#{$chart}-candelstick--data--stroke--Color: #{$pf-v6-chart-candelstick--data--stroke--Color};
-  --#{$chart}-candelstick--candle--positive--Color: #{$pf-v6-chart-candelstick--candle--positive--Color};
-  --#{$chart}-candelstick--candle--negative--Color: #{$pf-v6-chart-candelstick--candle--negative--Color};
-
-  // Container
-  --#{$chart}-container--cursor--line--Fill: #{$pf-v6-chart-container--cursor--line--Fill};
-
-  // Simple Donut Chart
-  --#{$chart}-donut--label--title--Fill: #{$pf-v6-chart-donut--label--title--Fill};
-  --#{$chart}-donut--label--subtitle--Fill: #{$pf-v6-chart-donut--label--subtitle--Fill};
-  --#{$chart}-donut--label--subtitle--position: #{$pf-v6-chart-donut--label--subtitle--position};
-  --#{$chart}-donut--pie--Height: #{$pf-v6-chart-donut--pie--Height};
-  --#{$chart}-donut--pie--angle--Padding: #{$pf-v6-chart-donut--pie--angle--Padding};
-  --#{$chart}-donut--pie--Padding: #{$pf-v6-chart-donut--pie--Padding};
-  --#{$chart}-donut--pie--Width: #{$pf-v6-chart-donut--pie--Width};
-
-  // Donut Threshold Chart
-  --#{$chart}-donut--threshold--first--Color: #{$pf-v6-chart-donut--threshold--first--Color};
-  --#{$chart}-donut--threshold--second--Color: #{$pf-v6-chart-donut--threshold--second--Color};
-  --#{$chart}-donut--threshold--third--Color: #{$pf-v6-chart-donut--threshold--third--Color};
-  --#{$chart}-donut--threshold--warning--Color: #{$pf-v6-chart-donut--threshold--warning--Color};
-  --#{$chart}-donut--threshold--danger--Color: #{$pf-v6-chart-donut--threshold--danger--Color};
-  --#{$chart}-donut--threshold--dynamic--pie--Height: #{$pf-v6-chart-donut--threshold--dynamic--pie--Height};
-  --#{$chart}-donut--threshold--dynamic--pie--Padding: #{$pf-v6-chart-donut--threshold--dynamic--pie--Padding};
-  --#{$chart}-donut--threshold--dynamic--pie--Width: #{$pf-v6-chart-donut--threshold--dynamic--pie--Width};
-  --#{$chart}-donut--threshold--static--pie--Height: #{$pf-v6-chart-donut--threshold--static--pie--Height};
-  --#{$chart}-donut--threshold--static--pie--angle--Padding: #{$pf-v6-chart-donut--threshold--static--pie--angle--Padding};
-  --#{$chart}-donut--threshold--static--pie--Padding: #{$pf-v6-chart-donut--threshold--static--pie--Padding};
-  --#{$chart}-donut--threshold--static--pie--Width: #{$pf-v6-chart-donut--threshold--static--pie--Width};
-
-  // Donut Utilization Chart
-  --#{$chart}-donut--utilization--dynamic--pie--Height: #{$pf-v6-chart-donut--utilization--dynamic--pie--Height};
-  --#{$chart}-donut--utilization--dynamic--pie--angle--Padding: #{$pf-v6-chart-donut--utilization--dynamic--pie--angle--Padding};
-  --#{$chart}-donut--utilization--dynamic--pie--Padding: #{$pf-v6-chart-donut--utilization--dynamic--pie--Padding};
-  --#{$chart}-donut--utilization--dynamic--pie--Width: #{$pf-v6-chart-donut--utilization--dynamic--pie--Width};
-  --#{$chart}-donut--utilization--static--pie--Padding: #{$pf-v6-chart-donut--utilization--static--pie--Padding};
-
-  // Error Bar
-  --#{$chart}-errorbar--BorderWidth: #{$pf-v6-chart-errorbar--BorderWidth};
-  --#{$chart}-errorbar--data--Fill: #{$pf-v6-chart-errorbar--data--Fill};
-  --#{$chart}-errorbar--data--Opacity: #{$pf-v6-chart-errorbar--data--Opacity};
-  --#{$chart}-errorbar--data-stroke--Width: #{$pf-v6-chart-errorbar--data-stroke--Width};
-  --#{$chart}-errorbar--data-stroke--Color: #{$pf-v6-chart-errorbar--data-stroke--Color};
-
-  // Legend
-  --#{$chart}-legend--gutter--Width: #{$pf-v6-chart-legend--gutter--Width};
-  --#{$chart}-legend--orientation: #{$pf-v6-chart-legend--orientation};
-  --#{$chart}-legend--position: #{$pf-v6-chart-legend--position};
-  --#{$chart}-legend--title--orientation: #{$pf-v6-chart-legend--title--orientation};
-  --#{$chart}-legend--data--type: #{$pf-v6-chart-legend--data--type};
-  --#{$chart}-legend--title--Padding: #{$pf-v6-chart-legend--title--Padding};
-  --#{$chart}-legend--Margin: #{$pf-v6-chart-legend--Margin};
-
-  // Line Chart
-  --#{$chart}-line--data--Fill: #{$pf-v6-chart-line--data--Fill};
-  --#{$chart}-line--data--Opacity: #{$pf-v6-chart-line--data--Opacity};
-  --#{$chart}-line--data--stroke--Width: #{$pf-v6-chart-line--data--stroke--Width};
-  --#{$chart}-line--data--stroke--Color: #{$pf-v6-chart-line--data--stroke--Color};
-
-  // Pie Chart
-  --#{$chart}-pie--Padding: #{$pf-v6-chart-pie--Padding};
-  --#{$chart}-pie--data--Padding: #{$pf-v6-chart-pie--data--Padding};
-  --#{$chart}-pie--data--stroke--Width: #{$pf-v6-chart-pie--data--stroke--Width};
-  --#{$chart}-pie--data--stroke--Color: #{$pf-v6-chart-pie--data--stroke--Color};
-  --#{$chart}-pie--labels--Padding: #{$pf-v6-chart-pie--labels--Padding};
-  --#{$chart}-pie--Height: #{$pf-v6-chart-pie--Height};
-  --#{$chart}-pie--Width: #{$pf-v6-chart-pie--Width};
-
-  // Scatter Chart
-  --#{$chart}-scatter--data--stroke--Color: #{$pf-v6-chart-scatter--data--stroke--Color};
-  --#{$chart}-scatter--data--stroke--Width: #{$pf-v6-chart-scatter--data--stroke--Width};
-  --#{$chart}-scatter--data--Opacity: #{$pf-v6-chart-scatter--data--Opacity};
-  --#{$chart}-scatter--data--Fill: #{$pf-v6-chart-scatter--data--Fill};
-  --#{$chart}-scatter--active--size: #{$pf-v6-chart-scatter--active--size};
-  --#{$chart}-scatter--size: #{$pf-v6-chart-scatter--size};
-
-  // Scatter Chart
-  --#{$chart}-stack--data--stroke--Width: #{$pf-v6-chart-stack--data--stroke--Width};
-
-  // Threshold
-  --#{$chart}-threshold--stroke-dash-array: #{$pf-v6-chart-threshold--stroke-dash-array};
-  --#{$chart}-threshold--stroke--Width: #{$pf-v6-chart-threshold--stroke--Width};
-
-  // Tooltip
-  --#{$chart}-tooltip--corner-radius: #{$pf-v6-chart-tooltip--corner-radius};
-  --#{$chart}-tooltip--pointer-length: #{$pf-v6-chart-tooltip--pointer-length};
-  --#{$chart}-tooltip--Fill: #{$pf-v6-chart-tooltip--Fill};
-  --#{$chart}-tooltip--flyoutStyle--corner-radius: #{$pf-v6-chart-tooltip--flyoutStyle--corner-radius};
-  --#{$chart}-tooltip--flyoutStyle--stroke--Width: #{$pf-v6-chart-tooltip--flyoutStyle--stroke--Width};
-  --#{$chart}-tooltip--flyoutStyle--PointerEvents: #{$pf-v6-chart-tooltip--flyoutStyle--PointerEvents};
-  --#{$chart}-tooltip--flyoutStyle--stroke--Color: #{$pf-v6-chart-tooltip--flyoutStyle--stroke--Color};
-  --#{$chart}-tooltip--flyoutStyle--Fill: #{$pf-v6-chart-tooltip--flyoutStyle--Fill};
-  --#{$chart}-tooltip--pointer--Width: #{$pf-v6-chart-tooltip--pointer--Width};
-  --#{$chart}-tooltip--Padding: #{$pf-v6-chart-tooltip--Padding};
-  --#{$chart}-tooltip--PointerEvents: #{$pf-v6-chart-tooltip--PointerEvents};
-
-  // Voronoi Chart
-  --#{$chart}-voronoi--data--Fill: #{$pf-v6-chart-voronoi--data--Fill};
-  --#{$chart}-voronoi--data--stroke--Color: #{$pf-v6-chart-voronoi--data--stroke--Color};
-  --#{$chart}-voronoi--data--stroke--Width: #{$pf-v6-chart-voronoi--data--stroke--Width};
-  --#{$chart}-voronoi--labels--Padding: #{$pf-v6-chart-voronoi--labels--Padding};
-  --#{$chart}-voronoi--labels--Fill: #{$pf-v6-chart-voronoi--labels--Fill};
-  --#{$chart}-voronoi--labels--PointerEvents: #{$pf-v6-chart-voronoi--labels--PointerEvents};
-  --#{$chart}-voronoi--flyout--stroke--Width: #{$pf-v6-chart-voronoi--flyout--stroke--Width};
-  --#{$chart}-voronoi--flyout--PointerEvents: #{$pf-v6-chart-voronoi--flyout--PointerEvents};
-  --#{$chart}-voronoi--flyout--stroke--Color: #{$pf-v6-chart-voronoi--flyout--stroke--Color};
-  --#{$chart}-voronoi--flyout--stroke--Fill: #{$pf-v6-chart-voronoi--flyout--stroke--Fill};
-  --#{$chart}-voronoi--flyout--PointerEvents: #{$pf-v6-chart-voronoi--flyout--PointerEvents};
-
-  // Theme color scales
-
-  // blue
-  --#{$chart}-theme--blue--ColorScale--100: #{$pf-v6-chart-theme--blue--ColorScale--100};
-  --#{$chart}-theme--blue--ColorScale--200: #{$pf-v6-chart-theme--blue--ColorScale--200};
-  --#{$chart}-theme--blue--ColorScale--300: #{$pf-v6-chart-theme--blue--ColorScale--300};
-  --#{$chart}-theme--blue--ColorScale--400: #{$pf-v6-chart-theme--blue--ColorScale--400};
-  --#{$chart}-theme--blue--ColorScale--500: #{$pf-v6-chart-theme--blue--ColorScale--500};
-
-  // cyan
-  --#{$chart}-theme--cyan--ColorScale--100: #{$pf-v6-chart-theme--cyan--ColorScale--100};
-  --#{$chart}-theme--cyan--ColorScale--200: #{$pf-v6-chart-theme--cyan--ColorScale--200};
-  --#{$chart}-theme--cyan--ColorScale--300: #{$pf-v6-chart-theme--cyan--ColorScale--300};
-  --#{$chart}-theme--cyan--ColorScale--400: #{$pf-v6-chart-theme--cyan--ColorScale--400};
-  --#{$chart}-theme--cyan--ColorScale--500: #{$pf-v6-chart-theme--cyan--ColorScale--500};
-
-  // gold
-  --#{$chart}-theme--gold--ColorScale--100: #{$pf-v6-chart-theme--gold--ColorScale--100};
-  --#{$chart}-theme--gold--ColorScale--200: #{$pf-v6-chart-theme--gold--ColorScale--200};
-  --#{$chart}-theme--gold--ColorScale--300: #{$pf-v6-chart-theme--gold--ColorScale--300};
-  --#{$chart}-theme--gold--ColorScale--400: #{$pf-v6-chart-theme--gold--ColorScale--400};
-  --#{$chart}-theme--gold--ColorScale--500: #{$pf-v6-chart-theme--gold--ColorScale--500};
-
-    // gray
-  --#{$chart}-theme--gray--ColorScale--100: #{$pf-v6-chart-theme--gray--ColorScale--100};
-  --#{$chart}-theme--gray--ColorScale--200: #{$pf-v6-chart-theme--gray--ColorScale--200};
-  --#{$chart}-theme--gray--ColorScale--300: #{$pf-v6-chart-theme--gray--ColorScale--300};
-  --#{$chart}-theme--gray--ColorScale--400: #{$pf-v6-chart-theme--gray--ColorScale--400};
-  --#{$chart}-theme--gray--ColorScale--500: #{$pf-v6-chart-theme--gray--ColorScale--500};
-
-  // green
-  --#{$chart}-theme--green--ColorScale--100: #{$pf-v6-chart-theme--green--ColorScale--100};
-  --#{$chart}-theme--green--ColorScale--200: #{$pf-v6-chart-theme--green--ColorScale--200};
-  --#{$chart}-theme--green--ColorScale--300: #{$pf-v6-chart-theme--green--ColorScale--300};
-  --#{$chart}-theme--green--ColorScale--400: #{$pf-v6-chart-theme--green--ColorScale--400};
-  --#{$chart}-theme--green--ColorScale--500: #{$pf-v6-chart-theme--green--ColorScale--500};
-
-  // multi ordered
-  --#{$chart}-theme--multi-color-ordered--ColorScale--100: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--200: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--300: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--400: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--500: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--500};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--600: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--600};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--700: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--700};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--800: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--800};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--900: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--900};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1000: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1000};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1100: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1200: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1300: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1400: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1500: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1500};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1600: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1600};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1700: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1700};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1800: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1800};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1900: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--1900};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2000: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2000};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2100: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2200: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2300: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2400: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2500: #{$pf-v6-chart-theme--multi-color-ordered--ColorScale--2500};
-
-  // multi unordered
-  --#{$chart}-theme--multi-color-unordered--ColorScale--100: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--200: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--300: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--400: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--500: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--600: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--700: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--800: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--900: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1000: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1100: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1200: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1300: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1400: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1500: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1600: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1700: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1800: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1900: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--1900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2000: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2100: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2200: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2300: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2400: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2500: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2600: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2700: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2800: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2900: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--2900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3000: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3100: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3200: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3300: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3400: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3500: #{$pf-v6-chart-theme--multi-color-unordered--ColorScale--3500};
-
-  // orange
-  --#{$chart}-theme--orange--ColorScale--100: #{$pf-v6-chart-theme--orange--ColorScale--100};
-  --#{$chart}-theme--orange--ColorScale--200: #{$pf-v6-chart-theme--orange--ColorScale--200};
-  --#{$chart}-theme--orange--ColorScale--300: #{$pf-v6-chart-theme--orange--ColorScale--300};
-  --#{$chart}-theme--orange--ColorScale--400: #{$pf-v6-chart-theme--orange--ColorScale--400};
-  --#{$chart}-theme--orange--ColorScale--500: #{$pf-v6-chart-theme--orange--ColorScale--500};
-
-  // purple
-  --#{$chart}-theme--purple--ColorScale--100: #{$pf-v6-chart-theme--purple--ColorScale--100};
-  --#{$chart}-theme--purple--ColorScale--200: #{$pf-v6-chart-theme--purple--ColorScale--200};
-  --#{$chart}-theme--purple--ColorScale--300: #{$pf-v6-chart-theme--purple--ColorScale--300};
-  --#{$chart}-theme--purple--ColorScale--400: #{$pf-v6-chart-theme--purple--ColorScale--400};
-  --#{$chart}-theme--purple--ColorScale--500: #{$pf-v6-chart-theme--purple--ColorScale--500};
+  // TODO update with tokens
 }