@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/patternfly-charts.scss

@@ -1,5 +1,9 @@
-@import "base/chart-globals";
-// stylelint-disable
+@use './sass-utilities' as *;
+@use "./base/tokens/tokens-charts" as charts;
+@use "./base/tokens/tokens-charts-dark" as charts-dark;
+
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$chart: #{$pf-prefix} + 'chart';
 
 .#{$chart} {
   // Color blending mode
@@ -8,412 +12,423 @@
   }
 }
 
+// Charts tokens
+:where(:root) {
+  @include charts.pf-v6-tokens;
+}
+
+// Charts dark tokens
+:where(.pf-v6-theme-dark) {
+  @include charts-dark.pf-v6-tokens;
+}
+
+// Charts styles
+// stylelint-disable-next-line no-duplicate-selectors
 :where(:root) {
   // Chart colors
   // blue
-  --#{$chart}-color-blue-100: #{$pf-v5-chart-color-blue-100};
-  --#{$chart}-color-blue-200: #{$pf-v5-chart-color-blue-200};
-  --#{$chart}-color-blue-300: #{$pf-v5-chart-color-blue-300};
-  --#{$chart}-color-blue-400: #{$pf-v5-chart-color-blue-400};
-  --#{$chart}-color-blue-500: #{$pf-v5-chart-color-blue-500};
+  --#{$chart}-color-blue-100: var(--pf-t--chart--color--blue--100);
+  --#{$chart}-color-blue-200: var(--pf-t--chart--color--blue--200);
+  --#{$chart}-color-blue-300: var(--pf-t--chart--color--blue--300);
+  --#{$chart}-color-blue-400: var(--pf-t--chart--color--blue--400);
+  --#{$chart}-color-blue-500: var(--pf-t--chart--color--blue--500);
 
   // green
-  --#{$chart}-color-green-100: #{$pf-v5-chart-color-green-100};
-  --#{$chart}-color-green-200: #{$pf-v5-chart-color-green-200};
-  --#{$chart}-color-green-300: #{$pf-v5-chart-color-green-300};
-  --#{$chart}-color-green-400: #{$pf-v5-chart-color-green-400};
-  --#{$chart}-color-green-500: #{$pf-v5-chart-color-green-500};
-
-  // cyan
-  --#{$chart}-color-cyan-100: #{$pf-v5-chart-color-cyan-100};
-  --#{$chart}-color-cyan-200: #{$pf-v5-chart-color-cyan-200};
-  --#{$chart}-color-cyan-300: #{$pf-v5-chart-color-cyan-300};
-  --#{$chart}-color-cyan-400: #{$pf-v5-chart-color-cyan-400};
-  --#{$chart}-color-cyan-500: #{$pf-v5-chart-color-cyan-500};
+  --#{$chart}-color-green-100: var(--pf-t--chart--color--green--100);
+  --#{$chart}-color-green-200: var(--pf-t--chart--color--green--200);
+  --#{$chart}-color-green-300: var(--pf-t--chart--color--green--300);
+  --#{$chart}-color-green-400: var(--pf-t--chart--color--green--400);
+  --#{$chart}-color-green-500: var(--pf-t--chart--color--green--500);
+
+  // teal
+  --#{$chart}-color-teal-100: var(--pf-t--chart--color--teal--100);
+  --#{$chart}-color-teal-200: var(--pf-t--chart--color--teal--200);
+  --#{$chart}-color-teal-300: var(--pf-t--chart--color--teal--300);
+  --#{$chart}-color-teal-400: var(--pf-t--chart--color--teal--400);
+  --#{$chart}-color-teal-500: var(--pf-t--chart--color--teal--500);
 
   // purple
-  --#{$chart}-color-purple-100: #{$pf-v5-chart-color-purple-100};
-  --#{$chart}-color-purple-200: #{$pf-v5-chart-color-purple-200};
-  --#{$chart}-color-purple-300: #{$pf-v5-chart-color-purple-300};
-  --#{$chart}-color-purple-400: #{$pf-v5-chart-color-purple-400};
-  --#{$chart}-color-purple-500: #{$pf-v5-chart-color-purple-500};
-
-  // gold
-  --#{$chart}-color-gold-100: #{$pf-v5-chart-color-gold-100};
-  --#{$chart}-color-gold-200: #{$pf-v5-chart-color-gold-200};
-  --#{$chart}-color-gold-300: #{$pf-v5-chart-color-gold-300};
-  --#{$chart}-color-gold-400: #{$pf-v5-chart-color-gold-400};
-  --#{$chart}-color-gold-500: #{$pf-v5-chart-color-gold-500};
+  --#{$chart}-color-purple-100: var(--pf-t--chart--color--purple--100);
+  --#{$chart}-color-purple-200: var(--pf-t--chart--color--purple--200);
+  --#{$chart}-color-purple-300: var(--pf-t--chart--color--purple--300);
+  --#{$chart}-color-purple-400: var(--pf-t--chart--color--purple--400);
+  --#{$chart}-color-purple-500: var(--pf-t--chart--color--purple--500);
+
+  // yellow
+  --#{$chart}-color-yellow-100: var(--pf-t--chart--color--yellow--100);
+  --#{$chart}-color-yellow-200: var(--pf-t--chart--color--yellow--200);
+  --#{$chart}-color-yellow-300: var(--pf-t--chart--color--yellow--300);
+  --#{$chart}-color-yellow-400: var(--pf-t--chart--color--yellow--400);
+  --#{$chart}-color-yellow-500: var(--pf-t--chart--color--yellow--500);
 
   // orange
-  --#{$chart}-color-orange-100: #{$pf-v5-chart-color-orange-100};
-  --#{$chart}-color-orange-200: #{$pf-v5-chart-color-orange-200};
-  --#{$chart}-color-orange-300: #{$pf-v5-chart-color-orange-300};
-  --#{$chart}-color-orange-400: #{$pf-v5-chart-color-orange-400};
-  --#{$chart}-color-orange-500: #{$pf-v5-chart-color-orange-500};
-
-  // red
-  --#{$chart}-color-red-100: #{$pf-v5-chart-color-red-100};
-  --#{$chart}-color-red-200: #{$pf-v5-chart-color-red-200};
-  --#{$chart}-color-red-300: #{$pf-v5-chart-color-red-300};
-  --#{$chart}-color-red-400: #{$pf-v5-chart-color-red-400};
-  --#{$chart}-color-red-500: #{$pf-v5-chart-color-red-500};
+  --#{$chart}-color-orange-100: var(--pf-t--chart--color--orange--100);
+  --#{$chart}-color-orange-200: var(--pf-t--chart--color--orange--200);
+  --#{$chart}-color-orange-300: var(--pf-t--chart--color--orange--300);
+  --#{$chart}-color-orange-400: var(--pf-t--chart--color--orange--400);
+  --#{$chart}-color-orange-500: var(--pf-t--chart--color--orange--500);
 
   // black
-  --#{$chart}-color-black-100: #{$pf-v5-chart-color-black-100};
-  --#{$chart}-color-black-200: #{$pf-v5-chart-color-black-200};
-  --#{$chart}-color-black-300: #{$pf-v5-chart-color-black-300};
-  --#{$chart}-color-black-400: #{$pf-v5-chart-color-black-400};
-  --#{$chart}-color-black-500: #{$pf-v5-chart-color-black-500};
+  --#{$chart}-color-black-100: var(--pf-t--chart--color--black--100);
+  --#{$chart}-color-black-200: var(--pf-t--chart--color--black--200);
+  --#{$chart}-color-black-300: var(--pf-t--chart--color--black--300);
+  --#{$chart}-color-black-400: var(--pf-t--chart--color--black--400);
+  --#{$chart}-color-black-500: var(--pf-t--chart--color--black--500);
+
+  // red-orange
+  --#{$chart}-color-red-orange-100: var(--pf-t--chart--color--red-orange--100);
+  --#{$chart}-color-red-orange-200: var(--pf-t--chart--color--red-orange--200);
+  --#{$chart}-color-red-orange-300: var(--pf-t--chart--color--red-orange--300);
+  --#{$chart}-color-red-orange-400: var(--pf-t--chart--color--red-orange--400);
+  --#{$chart}-color-red-orange-500: var(--pf-t--chart--color--red-orange--500);
 
   // typography
-  --#{$chart}-global--FontSize--xs: #{$pf-v5-chart-global--FontSize--xs};
-  --#{$chart}-global--FontSize--sm: #{$pf-v5-chart-global--FontSize--sm};
-  --#{$chart}-global--FontSize--lg: #{$pf-v5-chart-global--FontSize--lg};
-  --#{$chart}-global--FontSize--2xl: #{$pf-v5-chart-global--FontSize--2xl};
-  --#{$chart}-global--FontFamily: #{$pf-v5-chart-global--FontFamily};
-  --#{$chart}-global--letter-spacing: #{$pf-v5-chart-global--letter-spacing};
+  --#{$chart}-global--FontSize--xs: var(--pf-t--chart--global--FontSize--xs);
+  --#{$chart}-global--FontSize--sm: var(--pf-t--chart--global--FontSize--sm);
+  --#{$chart}-global--FontSize--lg: var(--pf-t--chart--global--FontSize--lg);
+  --#{$chart}-global--FontSize--2xl: var(--pf-t--chart--global--FontSize--2xl);
+  --#{$chart}-global--FontFamily: var(--pf-t--global--font--family--body);
+  --#{$chart}-global--letter-spacing: var(--pf-t--chart--global--letter-spacing);
 
   // label
-  --#{$chart}-global--label--Padding: #{$pf-v5-chart-global--label--Padding};
-  --#{$chart}-global--label--Margin: #{$pf-v5-chart-global--label--Margin};
-  --#{$chart}-global--label--stroke: #{$pf-v5-chart-global--label--stroke};
-  --#{$chart}-global--label--text-anchor: #{$pf-v5-chart-global--label--text-anchor};
-  --#{$chart}-global--label--stroke--Width: #{$pf-v5-chart-global--label--stroke--Width};
-  --#{$chart}-global--label--Fill: #{$pf-v5-chart-global--label--Fill};
+  --#{$chart}-global--label--Padding: var(--pf-t--chart--global--label--padding);
+  --#{$chart}-global--label--Margin: var(--pf-t--chart--global--label--margin);
+  --#{$chart}-global--label--stroke: var(--pf-t--chart--global--label--stroke);
+  --#{$chart}-global--label--text-anchor: var(--pf-t--chart--global--label--text-anchor);
+  --#{$chart}-global--label--stroke--Width: 0;
+  --#{$chart}-global--label--Fill: var(--pf-t--chart--global--label--fill);
 
   // Layout Props
-  --#{$chart}-global--layout--Padding: #{$pf-v5-chart-global--layout--Padding};
-  --#{$chart}-global--layout--Height: #{$pf-v5-chart-global--layout--Height};
-  --#{$chart}-global--layout--Width: #{$pf-v5-chart-global--layout--Width};
+  --#{$chart}-global--layout--Padding: var(--pf-t--chart--global--layout--padding);
+  --#{$chart}-global--layout--Height: var(--pf-t--chart--global--layout--height);
+  --#{$chart}-global--layout--Width: var(--pf-t--chart--global--layout--width);
 
   // Stroke and Border Width
-  --#{$chart}-global--stroke--Width--xs: #{$pf-v5-chart-global--stroke--Width--xs};
-  --#{$chart}-global--stroke--Width--sm: #{$pf-v5-chart-global--stroke--Width--sm};
-  --#{$chart}-global--BorderWidth--xs: #{$pf-v5-chart-global--BorderWidth--xs};
-  --#{$chart}-global--BorderWidth--sm: #{$pf-v5-chart-global--BorderWidth--sm};
-  --#{$chart}-global--BorderWidth--lg: #{$pf-v5-chart-global--BorderWidth--lg};
+  --#{$chart}-global--stroke--Width--xs: var(--pf-t--chart--global--stroke--width--xs);
+  --#{$chart}-global--stroke--Width--sm: var(--pf-t--chart--global--stroke--width--sm);
+  --#{$chart}-global--BorderWidth--xs: var(--pf-t--chart--global--BorderWidth--xs);
+  --#{$chart}-global--BorderWidth--sm: var(--pf-t--chart--global--BorderWidth--sm);
+  --#{$chart}-global--BorderWidth--lg: var(--pf-t--chart--global--BorderWidth--lg);
 
   // Stroke
-  --#{$chart}-global--stroke-line-cap: #{$pf-v5-chart-global--stroke-line-cap};
-  --#{$chart}-global--stroke-line-join: #{$pf-v5-chart-global--stroke-line-join};
+  --#{$chart}-global--stroke-line-cap: var(--pf-t--chart--global--stroke-line-cap);
+  --#{$chart}-global--stroke-line-join: var(--pf-t--chart--global--stroke-line-join);
 
   // Fills and Strokes
-  --#{$chart}-global--danger--Color--100: #{$pf-v5-chart-global--danger--Color--100};
-  --#{$chart}-global--warning--Color--100: #{$pf-v5-chart-global--warning--Color--100};
-  --#{$chart}-global--warning--Color--200: #{$pf-v5-chart-global--warning--Color--200};
-  --#{$chart}-global--success--Color--100: #{$pf-v5-chart-global--success--Color--100};
-  --#{$chart}-global--Fill--Color--900: #{$pf-v5-chart-global--Fill--Color--900};
-  --#{$chart}-global--Fill--Color--700: #{$pf-v5-chart-global--Fill--Color--700};
-  --#{$chart}-global--Fill--Color--500: #{$pf-v5-chart-global--Fill--Color--500};
-  --#{$chart}-global--Fill--Color--400: #{$pf-v5-chart-global--Fill--Color--400};
-  --#{$chart}-global--Fill--Color--300: #{$pf-v5-chart-global--Fill--Color--300};
-  --#{$chart}-global--Fill--Color--200: #{$pf-v5-chart-global--Fill--Color--200};
-  --#{$chart}-global--Fill--Color--white: #{$pf-v5-chart-global--Fill--Color--white};
+  --#{$chart}-global--danger--Color--100: var(--pf-t--chart--global--danger--color--100);
+  --#{$chart}-global--warning--Color--100: var(--pf-t--chart--global--warning--color--100);
+  --#{$chart}-global--warning--Color--200: var(--pf-t--chart--global--warning--color--200);
+  --#{$chart}-global--success--Color--100: var(--pf-t--chart--global--success--color--100);
+  --#{$chart}-global--Fill--Color--900: var(--pf-t--chart--global--fill--color--900);
+  --#{$chart}-global--Fill--Color--700: var(--pf-t--chart--global--fill--color--700);
+  --#{$chart}-global--Fill--Color--500: var(--pf-t--chart--global--fill--color--500);
+  --#{$chart}-global--Fill--Color--400: var(--pf-t--chart--global--fill--color--400);
+  --#{$chart}-global--Fill--Color--300: var(--pf-t--chart--global--fill--color--300);
+  --#{$chart}-global--Fill--Color--200: var(--pf-t--chart--global--fill--color--200);
+  --#{$chart}-global--Fill--Color--white: var(--pf-t--chart--global--fill--color--white);
 
   // Individual Charts
 
   // Area Chart
-  --#{$chart}-area--Opacity: #{$pf-v5-chart-area--Opacity};
-  --#{$chart}-area--stroke--Width: #{$pf-v5-chart-area--stroke--Width};
-  --#{$chart}-area--data--Fill: #{$pf-v5-chart-area--data--Fill};
+  --#{$chart}-area--Opacity: .3;
+  --#{$chart}-area--stroke--Width: var(--#{$chart}-global--stroke--Width--sm);
+  --#{$chart}-area--data--Fill: var(--#{$chart}-global--Fill--Color--900);
 
   // Axis Chart
-  --#{$chart}-axis--axis--stroke--Width: #{$pf-v5-chart-axis--axis--stroke--Width};
-  --#{$chart}-axis--axis--stroke--Color: #{$pf-v5-chart-axis--axis--stroke--Color};
-  --#{$chart}-axis--axis--Fill: #{$pf-v5-chart-axis--axis--Fill};
-  --#{$chart}-axis--axis-label--Padding: #{$pf-v5-chart-axis--axis-label--Padding};
-  --#{$chart}-axis--axis-label--stroke--Color: #{$pf-v5-chart-axis--axis-label--stroke--Color};
-  --#{$chart}-axis--grid--Fill: #{$pf-v5-chart-axis--grid--Fill};
-  --#{$chart}-axis--grid--stroke--Color: #{$pf-v5-chart-axis--grid--stroke--Color};
-  --#{$chart}-axis--grid--PointerEvents: #{$pf-v5-chart-axis--grid--PointerEvents};
-  --#{$chart}-axis--tick--Fill: #{$pf-v5-chart-axis--tick--Fill};
-  --#{$chart}-axis--tick--Size: #{$pf-v5-chart-axis--tick--Size};
-  --#{$chart}-axis--tick--Width: #{$pf-v5-chart-axis--tick--Width};
-  --#{$chart}-axis--tick--stroke--Color: #{$pf-v5-chart-axis--tick--stroke--Color};
-  --#{$chart}-axis--tick-label--Fill: #{$pf-v5-chart-axis--tick-label--Fill};
+  --#{$chart}-axis--axis--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-axis--axis--stroke--Color: var(--#{$chart}-global--Fill--Color--300);
+  --#{$chart}-axis--axis--Fill: transparent;
+  --#{$chart}-axis--axis-label--Padding: 40;
+  --#{$chart}-axis--axis-label--stroke--Color: transparent;
+  --#{$chart}-axis--grid--Fill: none;
+  --#{$chart}-axis--grid--stroke--Color: var(--#{$chart}-global--Fill--Color--300);
+  --#{$chart}-axis--grid--PointerEvents: painted;
+  --#{$chart}-axis--tick--Fill: transparent;
+  --#{$chart}-axis--tick--Size: 5;
+  --#{$chart}-axis--tick--Width: 1;
+  --#{$chart}-axis--tick--stroke--Color: var(--#{$chart}-global--Fill--Color--300);
+  --#{$chart}-axis--tick-label--Fill: var(--#{$chart}-global--Fill--Color--700);
 
   // Bar Chart
-  --#{$chart}-bar--Width: #{$pf-v5-chart-bar--Width};
-  --#{$chart}-bar--data--stroke: #{$pf-v5-chart-bar--data--stroke};
-  --#{$chart}-bar--data--Fill: #{$pf-v5-chart-bar--data--Fill};
-  --#{$chart}-bar--data--Padding: #{$pf-v5-chart-bar--data--Padding};
-  --#{$chart}-bar--data-stroke--Width: #{$pf-v5-chart-bar--data-stroke--Width};
+  --#{$chart}-bar--Width: 10;
+  --#{$chart}-bar--data--stroke: none;
+  --#{$chart}-bar--data--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-bar--data--Padding: 8;
+  --#{$chart}-bar--data-stroke--Width: 0;
 
   // Box Plot Chart
-  --#{$chart}-boxplot--max--Padding: #{$pf-v5-chart-boxplot--max--Padding};
-  --#{$chart}-boxplot--max--stroke--Color: #{$pf-v5-chart-boxplot--max--stroke--Color};
-  --#{$chart}-boxplot--max--stroke--Width: #{$pf-v5-chart-boxplot--max--stroke--Width};
-  --#{$chart}-boxplot--median--Padding: #{$pf-v5-chart-boxplot--median--Padding};
-  --#{$chart}-boxplot--median--stroke--Color: #{$pf-v5-chart-boxplot--median--stroke--Color};
-  --#{$chart}-boxplot--median--stroke--Width: #{$pf-v5-chart-boxplot--median--stroke--Width};
-  --#{$chart}-boxplot--min--Padding: #{$pf-v5-chart-boxplot--min--Padding};
-  --#{$chart}-boxplot--min--stroke--Width: #{$pf-v5-chart-boxplot--min--stroke--Width};
-  --#{$chart}-boxplot--min--stroke--Color: #{$pf-v5-chart-boxplot--min--stroke--Color};
-  --#{$chart}-boxplot--lower-quartile--Padding: #{$pf-v5-chart-boxplot--lower-quartile--Padding};
-  --#{$chart}-boxplot--lower-quartile--Fill: #{$pf-v5-chart-boxplot--lower-quartile--Fill};
-  --#{$chart}-boxplot--upper-quartile--Padding: #{$pf-v5-chart-boxplot--upper-quartile--Padding};
-  --#{$chart}-boxplot--upper-quartile--Fill: #{$pf-v5-chart-boxplot--upper-quartile--Fill};
-  --#{$chart}-boxplot--box--Width: #{$pf-v5-chart-boxplot--box--Width};
+  --#{$chart}-boxplot--max--Padding: 8;
+  --#{$chart}-boxplot--max--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-boxplot--max--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-boxplot--median--Padding: 8;
+  --#{$chart}-boxplot--median--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-boxplot--median--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-boxplot--min--Padding: 8;
+  --#{$chart}-boxplot--min--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-boxplot--min--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-boxplot--lower-quartile--Padding: 8;
+  --#{$chart}-boxplot--lower-quartile--Fill: var(--#{$chart}-global--Fill--Color--500);
+  --#{$chart}-boxplot--upper-quartile--Padding: 8;
+  --#{$chart}-boxplot--upper-quartile--Fill: var(--#{$chart}-global--Fill--Color--500);
+  --#{$chart}-boxplot--box--Width: 20;
 
   // Bullet Chart
-  --#{$chart}-bullet--axis--tick--count: #{$pf-v5-chart-bullet--axis--tick--count};
-  --#{$chart}-bullet--comparative-measure--Fill--Color: #{$pf-v5-chart-bullet--comparative-measure--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--stroke--Color: #{$pf-v5-chart-bullet--comparative-measure--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--stroke--Width: #{$pf-v5-chart-bullet--comparative-measure--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--error--Fill--Color: #{$pf-v5-chart-bullet--comparative-measure--error--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--error--stroke--Color: #{$pf-v5-chart-bullet--comparative-measure--error--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--error--stroke--Width: #{$pf-v5-chart-bullet--comparative-measure--error--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--error--Width: #{$pf-v5-chart-bullet--comparative-measure--error--Width};
-  --#{$chart}-bullet--comparative-measure--warning--Fill--Color: #{$pf-v5-chart-bullet--comparative-measure--warning--Fill--Color};
-  --#{$chart}-bullet--comparative-measure--warning--stroke--Color: #{$pf-v5-chart-bullet--comparative-measure--warning--stroke--Color};
-  --#{$chart}-bullet--comparative-measure--warning--stroke--Width: #{$pf-v5-chart-bullet--comparative-measure--warning--stroke--Width};
-  --#{$chart}-bullet--comparative-measure--warning--Width: #{$pf-v5-chart-bullet--comparative-measure--warning--Width};
-  --#{$chart}-bullet--comparative-measure--Width: #{$pf-v5-chart-bullet--comparative-measure--Width};
-  --#{$chart}-bullet--group-title--divider--Fill--Color: #{$pf-v5-chart-bullet--group-title--divider--Fill--Color};
-  --#{$chart}-bullet--group-title--divider--stroke--Color: #{$pf-v5-chart-bullet--group-title--divider--stroke--Color};
-  --#{$chart}-bullet--group-title--divider--stroke--Width: #{$pf-v5-chart-bullet--group-title--divider--stroke--Width};
-  --#{$chart}-bullet--Height: #{$pf-v5-chart-bullet--Height};
-  --#{$chart}-bullet--label--title--Fill: #{$pf-v5-chart-bullet--label--title--Fill};
-  --#{$chart}-bullet--label--grouptitle--Fill: #{$pf-v5-chart-bullet--label--grouptitle--Fill};
-  --#{$chart}-bullet--label--subtitle--Fill: #{$pf-v5-chart-bullet--label--subtitle--Fill};
-  --#{$chart}-bullet--primary-measure--dot--size: #{$pf-v5-chart-bullet--primary-measure--dot--size};
-  --#{$chart}-bullet--primary-measure--segmented--Width: #{$pf-v5-chart-bullet--primary-measure--segmented--Width};
-  --#{$chart}-bullet--negative-measure--ColorScale--100: #{$pf-v5-chart-color-red-100};
-  --#{$chart}-bullet--negative-measure--ColorScale--200: #{$pf-v5-chart-color-red-200};
-  --#{$chart}-bullet--negative-measure--ColorScale--300: #{$pf-v5-chart-color-red-300};
-  --#{$chart}-bullet--negative-measure--ColorScale--400: #{$pf-v5-chart-color-red-400};
-  --#{$chart}-bullet--negative-measure--ColorScale--500: #{$pf-v5-chart-color-red-500};
-  --#{$chart}-bullet--qualitative-range--Width: #{$pf-v5-chart-bullet--qualitative-range--Width};
-  --#{$chart}-bullet--qualitative-range--ColorScale--100: #{$pf-v5-chart-color-black-100};
-  --#{$chart}-bullet--qualitative-range--ColorScale--200: #{$pf-v5-chart-color-black-200};
-  --#{$chart}-bullet--qualitative-range--ColorScale--300: #{$pf-v5-chart-color-black-300};
-  --#{$chart}-bullet--qualitative-range--ColorScale--400: #{$pf-v5-chart-color-black-400};
-  --#{$chart}-bullet--qualitative-range--ColorScale--500: #{$pf-v5-chart-color-black-500};
+  --#{$chart}-bullet--axis--tick--count: 5;
+  --#{$chart}-bullet--comparative-measure--Fill--Color: var(--#{$chart}-global--Fill--Color--700);
+  --#{$chart}-bullet--comparative-measure--stroke--Color: var(--#{$chart}-global--Fill--Color--700);
+  --#{$chart}-bullet--comparative-measure--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-bullet--comparative-measure--Width: 30;
+  --#{$chart}-bullet--comparative-measure--error--Fill--Color: var(--#{$chart}-global--danger--Color--100);
+  --#{$chart}-bullet--comparative-measure--error--stroke--Color: var(--#{$chart}-global--danger--Color--100);
+  --#{$chart}-bullet--comparative-measure--error--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-bullet--comparative-measure--error--Width: 30;
+  --#{$chart}-bullet--comparative-measure--warning--Fill--Color: var(--#{$chart}-global--warning--Color--100);
+  --#{$chart}-bullet--comparative-measure--warning--stroke--Color: var(--#{$chart}-global--warning--Color--100);
+  --#{$chart}-bullet--comparative-measure--warning--stroke--Width: var(--pf-t--chart--global--stroke--width--sm);
+  --#{$chart}-bullet--comparative-measure--warning--Width: 30;
+  --#{$chart}-bullet--group-title--divider--Fill--Color: var(--pf-t--global--border--color--default);
+  --#{$chart}-bullet--group-title--divider--stroke--Color: var(--pf-t--global--border--color--default);
+  --#{$chart}-bullet--group-title--divider--stroke--Width: var(--pf-t--chart--global--stroke--width--sm);
+  --#{$chart}-bullet--Height: 140;
+  --#{$chart}-bullet--label--title--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-bullet--label--grouptitle--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-bullet--label--subtitle--Fill: var(--#{$chart}-global--Fill--Color--400);
+  --#{$chart}-bullet--primary-measure--dot--size: 6;
+  --#{$chart}-bullet--primary-measure--segmented--Width: 9;
+  --#{$chart}-bullet--negative-measure--ColorScale--100: var(--#{$chart}-color-red-orange-100);
+  --#{$chart}-bullet--negative-measure--ColorScale--200: var(--#{$chart}-color-red-orange-200);
+  --#{$chart}-bullet--negative-measure--ColorScale--300: var(--#{$chart}-color-red-orange-300);
+  --#{$chart}-bullet--negative-measure--ColorScale--400: var(--#{$chart}-color-red-orange-400);
+  --#{$chart}-bullet--negative-measure--ColorScale--500: var(--#{$chart}-color-red-orange-500);
+  --#{$chart}-bullet--qualitative-range--Width: 30;
+  --#{$chart}-bullet--qualitative-range--ColorScale--100: var(--#{$chart}-color-black-100);
+  --#{$chart}-bullet--qualitative-range--ColorScale--200: var(--#{$chart}-color-black-200);
+  --#{$chart}-bullet--qualitative-range--ColorScale--300: var(--#{$chart}-color-black-300);
+  --#{$chart}-bullet--qualitative-range--ColorScale--400: var(--#{$chart}-color-black-400);
+  --#{$chart}-bullet--qualitative-range--ColorScale--500: var(--#{$chart}-color-black-500);
 
   // Candlestick
-  --#{$chart}-candelstick--data--stroke--Width: #{$pf-v5-chart-candelstick--data--stroke--Width};
-  --#{$chart}-candelstick--data--stroke--Color: #{$pf-v5-chart-candelstick--data--stroke--Color};
-  --#{$chart}-candelstick--candle--positive--Color: #{$pf-v5-chart-candelstick--candle--positive--Color};
-  --#{$chart}-candelstick--candle--negative--Color: #{$pf-v5-chart-candelstick--candle--negative--Color};
+  --#{$chart}-candelstick--data--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-candelstick--data--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-candelstick--candle--positive--Color: var(--#{$chart}-global--Fill--Color--white);
+  --#{$chart}-candelstick--candle--negative--Color: var(--#{$chart}-global--Fill--Color--900);
 
   // Container
-  --#{$chart}-container--cursor--line--Fill: #{$pf-v5-chart-container--cursor--line--Fill};
+  --#{$chart}-container--cursor--line--Fill: var(--pf-t--global--border--color--default);
 
   // Simple Donut Chart
-  --#{$chart}-donut--label--title--Fill: #{$pf-v5-chart-donut--label--title--Fill};
-  --#{$chart}-donut--label--subtitle--Fill: #{$pf-v5-chart-donut--label--subtitle--Fill};
-  --#{$chart}-donut--label--subtitle--position: #{$pf-v5-chart-donut--label--subtitle--position};
-  --#{$chart}-donut--pie--Height: #{$pf-v5-chart-donut--pie--Height};
-  --#{$chart}-donut--pie--angle--Padding: #{$pf-v5-chart-donut--pie--angle--Padding};
-  --#{$chart}-donut--pie--Padding: #{$pf-v5-chart-donut--pie--Padding};
-  --#{$chart}-donut--pie--Width: #{$pf-v5-chart-donut--pie--Width};
+  --#{$chart}-donut--label--title--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-donut--label--subtitle--Fill: var(--#{$chart}-global--Fill--Color--400);
+  --#{$chart}-donut--label--subtitle--position: center;
+  --#{$chart}-donut--pie--Height: 230;
+  --#{$chart}-donut--pie--angle--Padding: 1;
+  --#{$chart}-donut--pie--Padding: 20;
+  --#{$chart}-donut--pie--Width: 230;
 
   // Donut Threshold Chart
-  --#{$chart}-donut--threshold--first--Color: #{$pf-v5-chart-donut--threshold--first--Color};
-  --#{$chart}-donut--threshold--second--Color: #{$pf-v5-chart-donut--threshold--second--Color};
-  --#{$chart}-donut--threshold--third--Color: #{$pf-v5-chart-donut--threshold--third--Color};
-  --#{$chart}-donut--threshold--warning--Color: #{$pf-v5-chart-donut--threshold--warning--Color};
-  --#{$chart}-donut--threshold--danger--Color: #{$pf-v5-chart-donut--threshold--danger--Color};
-  --#{$chart}-donut--threshold--dynamic--pie--Height: #{$pf-v5-chart-donut--threshold--dynamic--pie--Height};
-  --#{$chart}-donut--threshold--dynamic--pie--Padding: #{$pf-v5-chart-donut--threshold--dynamic--pie--Padding};
-  --#{$chart}-donut--threshold--dynamic--pie--Width: #{$pf-v5-chart-donut--threshold--dynamic--pie--Width};
-  --#{$chart}-donut--threshold--static--pie--Height: #{$pf-v5-chart-donut--threshold--static--pie--Height};
-  --#{$chart}-donut--threshold--static--pie--angle--Padding: #{$pf-v5-chart-donut--threshold--static--pie--angle--Padding};
-  --#{$chart}-donut--threshold--static--pie--Padding: #{$pf-v5-chart-donut--threshold--static--pie--Padding};
-  --#{$chart}-donut--threshold--static--pie--Width: #{$pf-v5-chart-donut--threshold--static--pie--Width};
+  --#{$chart}-donut--threshold--first--Color: var(--#{$chart}-global--Fill--Color--200);
+  --#{$chart}-donut--threshold--second--Color: var(--#{$chart}-global--Fill--Color--300);
+  --#{$chart}-donut--threshold--third--Color: var(--#{$chart}-global--Fill--Color--400);
+  --#{$chart}-donut--threshold--warning--Color: var(--#{$chart}-global--warning--Color--200);
+  --#{$chart}-donut--threshold--danger--Color: var(--#{$chart}-global--danger--Color--100);
+  --#{$chart}-donut--threshold--dynamic--pie--Height: 202;
+  --#{$chart}-donut--threshold--dynamic--pie--Padding: 202;
+  --#{$chart}-donut--threshold--dynamic--pie--Width: 20;
+  --#{$chart}-donut--threshold--static--pie--Height: 230;
+  --#{$chart}-donut--threshold--static--pie--angle--Padding: 1;
+  --#{$chart}-donut--threshold--static--pie--Padding: 20;
+  --#{$chart}-donut--threshold--static--pie--Width: 230;
 
   // Donut Utilization Chart
-  --#{$chart}-donut--utilization--dynamic--pie--Height: #{$pf-v5-chart-donut--utilization--dynamic--pie--Height};
-  --#{$chart}-donut--utilization--dynamic--pie--angle--Padding: #{$pf-v5-chart-donut--utilization--dynamic--pie--angle--Padding};
-  --#{$chart}-donut--utilization--dynamic--pie--Padding: #{$pf-v5-chart-donut--utilization--dynamic--pie--Padding};
-  --#{$chart}-donut--utilization--dynamic--pie--Width: #{$pf-v5-chart-donut--utilization--dynamic--pie--Width};
-  --#{$chart}-donut--utilization--static--pie--Padding: #{$pf-v5-chart-donut--utilization--static--pie--Padding};
+  --#{$chart}-donut--utilization--dynamic--pie--Height: 230;
+  --#{$chart}-donut--utilization--dynamic--pie--angle--Padding: 1;
+  --#{$chart}-donut--utilization--dynamic--pie--Padding: 20;
+  --#{$chart}-donut--utilization--dynamic--pie--Width: 230;
+  --#{$chart}-donut--utilization--static--pie--Padding: 20;
 
   // Error Bar
-  --#{$chart}-errorbar--BorderWidth: #{$pf-v5-chart-errorbar--BorderWidth};
-  --#{$chart}-errorbar--data--Fill: #{$pf-v5-chart-errorbar--data--Fill};
-  --#{$chart}-errorbar--data--Opacity: #{$pf-v5-chart-errorbar--data--Opacity};
-  --#{$chart}-errorbar--data-stroke--Width: #{$pf-v5-chart-errorbar--data-stroke--Width};
-  --#{$chart}-errorbar--data-stroke--Color: #{$pf-v5-chart-errorbar--data-stroke--Color};
+  --#{$chart}-errorbar--BorderWidth: var(--#{$chart}-global--BorderWidth--lg);
+  --#{$chart}-errorbar--data--Fill: transparent;
+  --#{$chart}-errorbar--data--Opacity: 1;
+  --#{$chart}-errorbar--data-stroke--Width: var(--#{$chart}-global--stroke--Width--sm);
+  --#{$chart}-errorbar--data-stroke--Color: var(--#{$chart}-global--Fill--Color--900);
 
   // Legend
-  --#{$chart}-legend--gutter--Width: #{$pf-v5-chart-legend--gutter--Width};
-  --#{$chart}-legend--orientation: #{$pf-v5-chart-legend--orientation};
-  --#{$chart}-legend--position: #{$pf-v5-chart-legend--position};
-  --#{$chart}-legend--title--orientation: #{$pf-v5-chart-legend--title--orientation};
-  --#{$chart}-legend--data--type: #{$pf-v5-chart-legend--data--type};
-  --#{$chart}-legend--title--Padding: #{$pf-v5-chart-legend--title--Padding};
-  --#{$chart}-legend--Margin: #{$pf-v5-chart-legend--Margin};
+  --#{$chart}-legend--gutter--Width: 20;
+  --#{$chart}-legend--orientation: horizontal;
+  --#{$chart}-legend--position: right;
+  --#{$chart}-legend--title--orientation: top;
+  --#{$chart}-legend--data--type: square;
+  --#{$chart}-legend--title--Padding: 2;
+  --#{$chart}-legend--Margin: 16;
 
   // Line Chart
-  --#{$chart}-line--data--Fill: #{$pf-v5-chart-line--data--Fill};
-  --#{$chart}-line--data--Opacity: #{$pf-v5-chart-line--data--Opacity};
-  --#{$chart}-line--data--stroke--Width: #{$pf-v5-chart-line--data--stroke--Width};
-  --#{$chart}-line--data--stroke--Color: #{$pf-v5-chart-line--data--stroke--Color};
+  --#{$chart}-line--data--Fill: transparent;
+  --#{$chart}-line--data--Opacity: 1;
+  --#{$chart}-line--data--stroke--Width: var(--#{$chart}-global--stroke--Width--sm);
+  --#{$chart}-line--data--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
 
   // Pie Chart
-  --#{$chart}-pie--Padding: #{$pf-v5-chart-pie--Padding};
-  --#{$chart}-pie--data--Padding: #{$pf-v5-chart-pie--data--Padding};
-  --#{$chart}-pie--data--stroke--Width: #{$pf-v5-chart-pie--data--stroke--Width};
-  --#{$chart}-pie--data--stroke--Color: #{$pf-v5-chart-pie--data--stroke--Color};
-  --#{$chart}-pie--labels--Padding: #{$pf-v5-chart-pie--labels--Padding};
-  --#{$chart}-pie--Height: #{$pf-v5-chart-pie--Height};
-  --#{$chart}-pie--Width: #{$pf-v5-chart-pie--Width};
+  --#{$chart}-pie--Padding: 20;
+  --#{$chart}-pie--data--Padding: 8;
+  --#{$chart}-pie--data--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-pie--data--stroke--Color: transparent;
+  --#{$chart}-pie--labels--Padding: 8;
+  --#{$chart}-pie--Height: 230;
+  --#{$chart}-pie--Width: 230;
 
   // Scatter Chart
-  --#{$chart}-scatter--data--stroke--Color: #{$pf-v5-chart-scatter--data--stroke--Color};
-  --#{$chart}-scatter--data--stroke--Width: #{$pf-v5-chart-scatter--data--stroke--Width};
-  --#{$chart}-scatter--data--Opacity: #{$pf-v5-chart-scatter--data--Opacity};
-  --#{$chart}-scatter--data--Fill: #{$pf-v5-chart-scatter--data--Fill};
-  --#{$chart}-scatter--active--size: #{$pf-v5-chart-scatter--active--size};
-  --#{$chart}-scatter--size: #{$pf-v5-chart-scatter--size};
+  --#{$chart}-scatter--data--stroke--Color: transparent;
+  --#{$chart}-scatter--data--stroke--Width: 0;
+  --#{$chart}-scatter--data--Opacity: 1;
+  --#{$chart}-scatter--data--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-scatter--active--size: 5;
+  --#{$chart}-scatter--size: 3;
 
   // Scatter Chart
-  --#{$chart}-stack--data--stroke--Width: #{$pf-v5-chart-stack--data--stroke--Width};
+  --#{$chart}-stack--data--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
 
   // Threshold
-  --#{$chart}-threshold--stroke-dash-array: #{$pf-v5-chart-threshold--stroke-dash-array};
-  --#{$chart}-threshold--stroke--Width: #{$pf-v5-chart-threshold--stroke--Width};
+  --#{$chart}-threshold--stroke-dash-array: 4,2;
+  --#{$chart}-threshold--stroke--Width: 1.5;
 
   // Tooltip
-  --#{$chart}-tooltip--corner-radius: #{$pf-v5-chart-tooltip--corner-radius};
-  --#{$chart}-tooltip--pointer-length: #{$pf-v5-chart-tooltip--pointer-length};
-  --#{$chart}-tooltip--Fill: #{$pf-v5-chart-tooltip--Fill};
-  --#{$chart}-tooltip--flyoutStyle--corner-radius: #{$pf-v5-chart-tooltip--flyoutStyle--corner-radius};
-  --#{$chart}-tooltip--flyoutStyle--stroke--Width: #{$pf-v5-chart-tooltip--flyoutStyle--stroke--Width};
-  --#{$chart}-tooltip--flyoutStyle--PointerEvents: #{$pf-v5-chart-tooltip--flyoutStyle--PointerEvents};
-  --#{$chart}-tooltip--flyoutStyle--stroke--Color: #{$pf-v5-chart-tooltip--flyoutStyle--stroke--Color};
-  --#{$chart}-tooltip--flyoutStyle--Fill: #{$pf-v5-chart-tooltip--flyoutStyle--Fill};
-  --#{$chart}-tooltip--pointer--Width: #{$pf-v5-chart-tooltip--pointer--Width};
-  --#{$chart}-tooltip--Padding: #{$pf-v5-chart-tooltip--Padding};
-  --#{$chart}-tooltip--PointerEvents: #{$pf-v5-chart-tooltip--PointerEvents};
+  --#{$chart}-tooltip--corner-radius: 0;
+  --#{$chart}-tooltip--pointer-length: 10;
+  --#{$chart}-tooltip--Fill: var(--#{$chart}-global--Fill--Color--200);
+  --#{$chart}-tooltip--flyoutStyle--corner-radius: 0;
+  --#{$chart}-tooltip--flyoutStyle--stroke--Width: 0;
+  --#{$chart}-tooltip--flyoutStyle--PointerEvents: none;
+  --#{$chart}-tooltip--flyoutStyle--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-tooltip--flyoutStyle--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-tooltip--pointer--Width: 20;
+  --#{$chart}-tooltip--Padding: 8;
+  --#{$chart}-tooltip--PointerEvents: none;
 
   // Voronoi Chart
-  --#{$chart}-voronoi--data--Fill: #{$pf-v5-chart-voronoi--data--Fill};
-  --#{$chart}-voronoi--data--stroke--Color: #{$pf-v5-chart-voronoi--data--stroke--Color};
-  --#{$chart}-voronoi--data--stroke--Width: #{$pf-v5-chart-voronoi--data--stroke--Width};
-  --#{$chart}-voronoi--labels--Padding: #{$pf-v5-chart-voronoi--labels--Padding};
-  --#{$chart}-voronoi--labels--Fill: #{$pf-v5-chart-voronoi--labels--Fill};
-  --#{$chart}-voronoi--labels--PointerEvents: #{$pf-v5-chart-voronoi--labels--PointerEvents};
-  --#{$chart}-voronoi--flyout--stroke--Width: #{$pf-v5-chart-voronoi--flyout--stroke--Width};
-  --#{$chart}-voronoi--flyout--PointerEvents: #{$pf-v5-chart-voronoi--flyout--PointerEvents};
-  --#{$chart}-voronoi--flyout--stroke--Color: #{$pf-v5-chart-voronoi--flyout--stroke--Color};
-  --#{$chart}-voronoi--flyout--stroke--Fill: #{$pf-v5-chart-voronoi--flyout--stroke--Fill};
-  --#{$chart}-voronoi--flyout--PointerEvents: #{$pf-v5-chart-voronoi--flyout--PointerEvents};
+  --#{$chart}-voronoi--data--Fill: transparent;
+  --#{$chart}-voronoi--data--stroke--Color: transparent;
+  --#{$chart}-voronoi--data--stroke--Width: 0;
+  --#{$chart}-voronoi--labels--Padding: 8;
+  --#{$chart}-voronoi--labels--Fill: var(--#{$chart}-global--Fill--Color--200);
+  --#{$chart}-voronoi--labels--PointerEvents: none;
+  --#{$chart}-voronoi--flyout--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
+  --#{$chart}-voronoi--flyout--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-voronoi--flyout--stroke--Fill: var(--#{$chart}-global--Fill--Color--900);
+  --#{$chart}-voronoi--flyout--PointerEvents: none;
 
   // Theme color scales
 
   // blue
-  --#{$chart}-theme--blue--ColorScale--100: #{$pf-v5-chart-theme--blue--ColorScale--100};
-  --#{$chart}-theme--blue--ColorScale--200: #{$pf-v5-chart-theme--blue--ColorScale--200};
-  --#{$chart}-theme--blue--ColorScale--300: #{$pf-v5-chart-theme--blue--ColorScale--300};
-  --#{$chart}-theme--blue--ColorScale--400: #{$pf-v5-chart-theme--blue--ColorScale--400};
-  --#{$chart}-theme--blue--ColorScale--500: #{$pf-v5-chart-theme--blue--ColorScale--500};
-
-  // cyan
-  --#{$chart}-theme--cyan--ColorScale--100: #{$pf-v5-chart-theme--cyan--ColorScale--100};
-  --#{$chart}-theme--cyan--ColorScale--200: #{$pf-v5-chart-theme--cyan--ColorScale--200};
-  --#{$chart}-theme--cyan--ColorScale--300: #{$pf-v5-chart-theme--cyan--ColorScale--300};
-  --#{$chart}-theme--cyan--ColorScale--400: #{$pf-v5-chart-theme--cyan--ColorScale--400};
-  --#{$chart}-theme--cyan--ColorScale--500: #{$pf-v5-chart-theme--cyan--ColorScale--500};
-
-  // gold
-  --#{$chart}-theme--gold--ColorScale--100: #{$pf-v5-chart-theme--gold--ColorScale--100};
-  --#{$chart}-theme--gold--ColorScale--200: #{$pf-v5-chart-theme--gold--ColorScale--200};
-  --#{$chart}-theme--gold--ColorScale--300: #{$pf-v5-chart-theme--gold--ColorScale--300};
-  --#{$chart}-theme--gold--ColorScale--400: #{$pf-v5-chart-theme--gold--ColorScale--400};
-  --#{$chart}-theme--gold--ColorScale--500: #{$pf-v5-chart-theme--gold--ColorScale--500};
-
-    // gray
-  --#{$chart}-theme--gray--ColorScale--100: #{$pf-v5-chart-theme--gray--ColorScale--100};
-  --#{$chart}-theme--gray--ColorScale--200: #{$pf-v5-chart-theme--gray--ColorScale--200};
-  --#{$chart}-theme--gray--ColorScale--300: #{$pf-v5-chart-theme--gray--ColorScale--300};
-  --#{$chart}-theme--gray--ColorScale--400: #{$pf-v5-chart-theme--gray--ColorScale--400};
-  --#{$chart}-theme--gray--ColorScale--500: #{$pf-v5-chart-theme--gray--ColorScale--500};
+  --#{$chart}-theme--blue--ColorScale--100: var(--pf-t--chart--theme--colorscales--blue--colorscale--100);
+  --#{$chart}-theme--blue--ColorScale--200: var(--pf-t--chart--theme--colorscales--blue--colorscale--200);
+  --#{$chart}-theme--blue--ColorScale--300: var(--pf-t--chart--theme--colorscales--blue--colorscale--300);
+  --#{$chart}-theme--blue--ColorScale--400: var(--pf-t--chart--theme--colorscales--blue--colorscale--400);
+  --#{$chart}-theme--blue--ColorScale--500: var(--pf-t--chart--theme--colorscales--blue--colorscale--500);
+
+  // teal
+  --#{$chart}-theme--teal--ColorScale--100: var(--pf-t--chart--theme--colorscales--teal--colorscale--100);
+  --#{$chart}-theme--teal--ColorScale--200: var(--pf-t--chart--theme--colorscales--teal--colorscale--200);
+  --#{$chart}-theme--teal--ColorScale--300: var(--pf-t--chart--theme--colorscales--teal--colorscale--300);
+  --#{$chart}-theme--teal--ColorScale--400: var(--pf-t--chart--theme--colorscales--teal--colorscale--400);
+  --#{$chart}-theme--teal--ColorScale--500: var(--pf-t--chart--theme--colorscales--teal--colorscale--500);
+
+  // yellow
+  --#{$chart}-theme--yellow--ColorScale--100: var(--pf-t--chart--theme--colorscales--yellow--colorscale--100);
+  --#{$chart}-theme--yellow--ColorScale--200: var(--pf-t--chart--theme--colorscales--yellow--colorscale--200);
+  --#{$chart}-theme--yellow--ColorScale--300: var(--pf-t--chart--theme--colorscales--yellow--colorscale--300);
+  --#{$chart}-theme--yellow--ColorScale--400: var(--pf-t--chart--theme--colorscales--yellow--colorscale--400);
+  --#{$chart}-theme--yellow--ColorScale--500: var(--pf-t--chart--theme--colorscales--yellow--colorscale--500);
+
+  // gray
+  --#{$chart}-theme--gray--ColorScale--100: var(--pf-t--chart--theme--colorscales--gray--colorscale--100);
+  --#{$chart}-theme--gray--ColorScale--200: var(--pf-t--chart--theme--colorscales--gray--colorscale--200);
+  --#{$chart}-theme--gray--ColorScale--300: var(--pf-t--chart--theme--colorscales--gray--colorscale--300);
+  --#{$chart}-theme--gray--ColorScale--400: var(--pf-t--chart--theme--colorscales--gray--colorscale--400);
+  --#{$chart}-theme--gray--ColorScale--500: var(--pf-t--chart--theme--colorscales--gray--colorscale--500);
 
   // green
-  --#{$chart}-theme--green--ColorScale--100: #{$pf-v5-chart-theme--green--ColorScale--100};
-  --#{$chart}-theme--green--ColorScale--200: #{$pf-v5-chart-theme--green--ColorScale--200};
-  --#{$chart}-theme--green--ColorScale--300: #{$pf-v5-chart-theme--green--ColorScale--300};
-  --#{$chart}-theme--green--ColorScale--400: #{$pf-v5-chart-theme--green--ColorScale--400};
-  --#{$chart}-theme--green--ColorScale--500: #{$pf-v5-chart-theme--green--ColorScale--500};
-
-  // multi ordered
-  --#{$chart}-theme--multi-color-ordered--ColorScale--100: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--200: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--300: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--400: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--500: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--500};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--600: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--600};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--700: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--700};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--800: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--800};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--900: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--900};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1000: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1000};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1100: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1200: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1300: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1400: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1500: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1500};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1600: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1600};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1700: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1700};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1800: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1800};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--1900: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--1900};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2000: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2000};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2100: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2100};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2200: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2200};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2300: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2300};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2400: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2400};
-  --#{$chart}-theme--multi-color-ordered--ColorScale--2500: #{$pf-v5-chart-theme--multi-color-ordered--ColorScale--2500};
-
-  // multi unordered
-  --#{$chart}-theme--multi-color-unordered--ColorScale--100: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--200: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--300: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--400: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--500: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--600: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--700: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--800: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--900: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1000: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1100: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1200: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1300: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1400: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1500: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1600: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1700: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1800: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--1900: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--1900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2000: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2100: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2200: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2300: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2400: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2500: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2500};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2600: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2600};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2700: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2700};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2800: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2800};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--2900: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--2900};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3000: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3000};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3100: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3100};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3200: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3200};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3300: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3300};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3400: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3400};
-  --#{$chart}-theme--multi-color-unordered--ColorScale--3500: #{$pf-v5-chart-theme--multi-color-unordered--ColorScale--3500};
+  --#{$chart}-theme--green--ColorScale--100: var(--pf-t--chart--theme--colorscales--green--colorscale--100);
+  --#{$chart}-theme--green--ColorScale--200: var(--pf-t--chart--theme--colorscales--green--colorscale--200);
+  --#{$chart}-theme--green--ColorScale--300: var(--pf-t--chart--theme--colorscales--green--colorscale--300);
+  --#{$chart}-theme--green--ColorScale--400: var(--pf-t--chart--theme--colorscales--green--colorscale--400);
+  --#{$chart}-theme--green--ColorScale--500: var(--pf-t--chart--theme--colorscales--green--colorscale--500);
 
   // orange
-  --#{$chart}-theme--orange--ColorScale--100: #{$pf-v5-chart-theme--orange--ColorScale--100};
-  --#{$chart}-theme--orange--ColorScale--200: #{$pf-v5-chart-theme--orange--ColorScale--200};
-  --#{$chart}-theme--orange--ColorScale--300: #{$pf-v5-chart-theme--orange--ColorScale--300};
-  --#{$chart}-theme--orange--ColorScale--400: #{$pf-v5-chart-theme--orange--ColorScale--400};
-  --#{$chart}-theme--orange--ColorScale--500: #{$pf-v5-chart-theme--orange--ColorScale--500};
+  --#{$chart}-theme--orange--ColorScale--100: var(--pf-t--chart--theme--colorscales--orange--colorscale--100);
+  --#{$chart}-theme--orange--ColorScale--200: var(--pf-t--chart--theme--colorscales--orange--colorscale--200);
+  --#{$chart}-theme--orange--ColorScale--300: var(--pf-t--chart--theme--colorscales--orange--colorscale--300);
+  --#{$chart}-theme--orange--ColorScale--400: var(--pf-t--chart--theme--colorscales--orange--colorscale--400);
+  --#{$chart}-theme--orange--ColorScale--500: var(--pf-t--chart--theme--colorscales--orange--colorscale--500);
 
   // purple
-  --#{$chart}-theme--purple--ColorScale--100: #{$pf-v5-chart-theme--purple--ColorScale--100};
-  --#{$chart}-theme--purple--ColorScale--200: #{$pf-v5-chart-theme--purple--ColorScale--200};
-  --#{$chart}-theme--purple--ColorScale--300: #{$pf-v5-chart-theme--purple--ColorScale--300};
-  --#{$chart}-theme--purple--ColorScale--400: #{$pf-v5-chart-theme--purple--ColorScale--400};
-  --#{$chart}-theme--purple--ColorScale--500: #{$pf-v5-chart-theme--purple--ColorScale--500};
+  --#{$chart}-theme--purple--ColorScale--100: var(--pf-t--chart--theme--colorscales--purple--colorscale--100);
+  --#{$chart}-theme--purple--ColorScale--200: var(--pf-t--chart--theme--colorscales--purple--colorscale--200);
+  --#{$chart}-theme--purple--ColorScale--300: var(--pf-t--chart--theme--colorscales--purple--colorscale--300);
+  --#{$chart}-theme--purple--ColorScale--400: var(--pf-t--chart--theme--colorscales--purple--colorscale--400);
+  --#{$chart}-theme--purple--ColorScale--500: var(--pf-t--chart--theme--colorscales--purple--colorscale--500);
+
+  // multi ordered
+  --#{$chart}-theme--multi-color-ordered--ColorScale--100: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--200: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--300: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--400: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--500: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--600: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--700: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--800: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--900: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1000: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1100: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1200: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1300: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1400: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1500: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1600: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1700: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1800: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--1900: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2000: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2100: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2200: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2300: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2400: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400);
+  --#{$chart}-theme--multi-color-ordered--ColorScale--2500: var(--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500);
+
+  // multi unordered
+  --#{$chart}-theme--multi-color-unordered--ColorScale--100: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--200: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--300: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--600: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--700: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--800: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--900: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1000: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1100: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1200: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1300: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1600: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1700: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1800: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--1900: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2000: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2100: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2200: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2300: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2600: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2700: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2800: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--2900: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3000: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3100: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3200: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3300: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3400: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400);
+  --#{$chart}-theme--multi-color-unordered--ColorScale--3500: var(--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500);
 }