@patternfly/patternfly 4.192.5 → 4.194.0

package/patternfly-charts-theme-dark.css

@@ -0,0 +1,69 @@
+:where(.pf-theme-dark) .pf-c-chart svg g[clip-path] {
+  mix-blend-mode: normal;
+}
+:root:where(.pf-theme-dark) {
+  --pf-chart-color-blue-100: #add6ff;
+  --pf-chart-color-blue-200: #85c2ff;
+  --pf-chart-color-blue-300: #47a3ff;
+  --pf-chart-color-blue-400: #0a85ff;
+  --pf-chart-color-blue-500: #06c;
+  --pf-chart-color-green-100: #d6eed3;
+  --pf-chart-color-green-200: #aedca7;
+  --pf-chart-color-green-300: #85cb7c;
+  --pf-chart-color-green-400: #5cb950;
+  --pf-chart-color-green-500: #3e8635;
+  --pf-chart-color-cyan-100: #b9feff;
+  --pf-chart-color-cyan-200: #86fdff;
+  --pf-chart-color-cyan-300: #00b5b8;
+  --pf-chart-color-cyan-400: #008c8f;
+  --pf-chart-color-cyan-500: #005f60;
+  --pf-chart-color-purple-100: #cec8e4;
+  --pf-chart-color-purple-200: #a99fd1;
+  --pf-chart-color-purple-300: #9183c3;
+  --pf-chart-color-purple-400: #7968b6;
+  --pf-chart-color-purple-500: #6753ac;
+  --pf-chart-color-red-100: #ffadad;
+  --pf-chart-color-red-200: #ff7070;
+  --pf-chart-color-red-300: #ff4747;
+  --pf-chart-color-red-400: #ff0a0a;
+  --pf-chart-color-red-500: #a30000;
+  --pf-chart-global--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-chart-global--BorderColor--accent: var(--pf-global--BorderColor--400);
+  --pf-chart-global--label--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--title--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--subtitle--Fill: var(--pf-global--Color--200);
+  --pf-chart-global--tooltip--Fill: var(--pf-global--Color--100);
+  --pf-chart-global--tooltip--bg--Fill: var(--pf-global--BackgroundColor--300);
+  --pf-chart-axis--axis--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--grid--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--axis--tick--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--grid--Fill: var(--pf-chart-global--BorderColor);
+  --pf-chart-axis--tick-label--Fill: var(--pf-chart-global--label--Fill);
+  --pf-chart-bullet--label--title--Fill: var(--pf-chart-global--title--Fill);
+  --pf-chart-bullet--label--grouptitle--Fill: var(--pf-chart-bullet--label--title--Fill);
+  --pf-chart-bullet--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
+  --pf-chart-bullet--negative-measure--ColorScale--100: var(--pf-global--palette--red-400);
+  --pf-chart-bullet--negative-measure--ColorScale--200: var(--pf-global--palette--red-300);
+  --pf-chart-bullet--negative-measure--ColorScale--300: var(--pf-global--palette--red-200);
+  --pf-chart-bullet--negative-measure--ColorScale--400: var(--pf-global--palette--red-100);
+  --pf-chart-bullet--negative-measure--ColorScale--500: var(--pf-global--palette--red-9999);
+  --pf-chart-bullet--qualitative-range--ColorScale--100: var(--pf-global--palette--black-600);
+  --pf-chart-bullet--qualitative-range--ColorScale--200: var(--pf-global--palette--black-500);
+  --pf-chart-bullet--qualitative-range--ColorScale--300: var(--pf-global--palette--black-400);
+  --pf-chart-bullet--qualitative-range--ColorScale--400: var(--pf-global--palette--black-300);
+  --pf-chart-bullet--qualitative-range--ColorScale--500: var(--pf-global--palette--black-200);
+  --pf-chart-container--cursor--line--Fill: var(--pf-chart-global--BorderColor--accent);
+  --pf-chart-donut--label--title--Fill: var(--pf-chart-global--title--Fill);
+  --pf-chart-donut--label--subtitle--Fill: var(--pf-chart-global--subtitle--Fill);
+  --pf-chart-line--data--stroke--Color: var(--pf-chart-global--BorderColor);
+  --pf-chart-tooltip--Fill: var(--pf-chart-global--tooltip--Fill);
+  --pf-chart-voronoi--labels--Fill: var(--pf-chart-global--tooltip--Fill);
+  --pf-chart-tooltip--flyoutStyle--Fill: var(--pf-chart-global--tooltip--bg--Fill);
+  --pf-chart-voronoi--flyout--stroke--Fill: var(--pf-chart-global--tooltip--bg--Fill);
+  --pf-chart-voronoi--flyout--stroke--Color: var(--pf-chart-global--tooltip--bg--Fill);
+}
+
+:where(.pf-theme-dark) .ws-preview {
+  background: var(--pf-global--BackgroundColor--100);
+}

package/patternfly-charts-theme-dark.scss

@@ -0,0 +1,8 @@
+@import "themes/dark/patternfly-charts-theme-dark";
+
+$pf-theme-dark-class: ".pf-theme-dark" !default;
+$pf-charts-theme-dark-class: $pf-theme-dark-class !default;
+
+:where(#{$pf-theme-dark-class}) {
+  @include pf-charts-theme-dark($pf-charts-theme-dark-class);
+}

package/patternfly-charts.css

@@ -128,14 +128,28 @@
   --pf-chart-bullet--group-title--divider--stroke--Color: #f0f0f0;
   --pf-chart-bullet--group-title--divider--stroke--Width: 2;
   --pf-chart-bullet--Height: 140;
+  --pf-chart-bullet--label--title--Fill: #151515;
+  --pf-chart-bullet--label--grouptitle--Fill: #151515;
   --pf-chart-bullet--label--subtitle--Fill: #b8bbbe;
   --pf-chart-bullet--primary-measure--dot--size: 6;
   --pf-chart-bullet--primary-measure--segmented--Width: 9;
+  --pf-chart-bullet--negative-measure--ColorScale--100: #c9190b;
+  --pf-chart-bullet--negative-measure--ColorScale--200: #a30000;
+  --pf-chart-bullet--negative-measure--ColorScale--300: #7d1007;
+  --pf-chart-bullet--negative-measure--ColorScale--400: #470000;
+  --pf-chart-bullet--negative-measure--ColorScale--500: #2c0000;
   --pf-chart-bullet--qualitative-range--Width: 30;
+  --pf-chart-bullet--qualitative-range--ColorScale--100: #f0f0f0;
+  --pf-chart-bullet--qualitative-range--ColorScale--200: #d2d2d2;
+  --pf-chart-bullet--qualitative-range--ColorScale--300: #b8bbbe;
+  --pf-chart-bullet--qualitative-range--ColorScale--400: #8a8d90;
+  --pf-chart-bullet--qualitative-range--ColorScale--500: #6a6e73;
   --pf-chart-candelstick--data--stroke--Width: 1;
   --pf-chart-candelstick--data--stroke--Color: #151515;
   --pf-chart-candelstick--candle--positive--Color: #fff;
   --pf-chart-candelstick--candle--negative--Color: #151515;
+  --pf-chart-container--cursor--line--Fill: #151515;
+  --pf-chart-donut--label--title--Fill: #151515;
   --pf-chart-donut--label--subtitle--Fill: #b8bbbe;
   --pf-chart-donut--label--subtitle--position: center;
   --pf-chart-donut--pie--Height: 230;
@@ -213,4 +227,99 @@
   --pf-chart-voronoi--flyout--stroke--Color: #151515;
   --pf-chart-voronoi--flyout--stroke--Fill: #151515;
   --pf-chart-voronoi--flyout--PointerEvents: none;
+  --pf-chart-theme--blue--ColorScale--100: #06c;
+  --pf-chart-theme--blue--ColorScale--200: #8bc1f7;
+  --pf-chart-theme--blue--ColorScale--300: #002f5d;
+  --pf-chart-theme--blue--ColorScale--400: #519de9;
+  --pf-chart-theme--blue--ColorScale--500: #004b95;
+  --pf-chart-theme--cyan--ColorScale--100: #009596;
+  --pf-chart-theme--cyan--ColorScale--200: #a2d9d9;
+  --pf-chart-theme--cyan--ColorScale--300: #003737;
+  --pf-chart-theme--cyan--ColorScale--400: #73c5c5;
+  --pf-chart-theme--cyan--ColorScale--500: #005f60;
+  --pf-chart-theme--gold--ColorScale--100: #f4c145;
+  --pf-chart-theme--gold--ColorScale--200: #f9e0a2;
+  --pf-chart-theme--gold--ColorScale--300: #c58c00;
+  --pf-chart-theme--gold--ColorScale--400: #f6d173;
+  --pf-chart-theme--gold--ColorScale--500: #f0ab00;
+  --pf-chart-theme--gray--ColorScale--100: #b8bbbe;
+  --pf-chart-theme--gray--ColorScale--200: #f0f0f0;
+  --pf-chart-theme--gray--ColorScale--300: #6a6e73;
+  --pf-chart-theme--gray--ColorScale--400: #d2d2d2;
+  --pf-chart-theme--gray--ColorScale--500: #8a8d90;
+  --pf-chart-theme--green--ColorScale--100: #4cb140;
+  --pf-chart-theme--green--ColorScale--200: #bde2b9;
+  --pf-chart-theme--green--ColorScale--300: #23511e;
+  --pf-chart-theme--green--ColorScale--400: #7cc674;
+  --pf-chart-theme--green--ColorScale--500: #38812f;
+  --pf-chart-theme--multi-color-ordered--ColorScale--100: #06c;
+  --pf-chart-theme--multi-color-ordered--ColorScale--200: #4cb140;
+  --pf-chart-theme--multi-color-ordered--ColorScale--300: #009596;
+  --pf-chart-theme--multi-color-ordered--ColorScale--400: #f4c145;
+  --pf-chart-theme--multi-color-ordered--ColorScale--500: #ec7a08;
+  --pf-chart-theme--multi-color-ordered--ColorScale--600: #8bc1f7;
+  --pf-chart-theme--multi-color-ordered--ColorScale--700: #23511e;
+  --pf-chart-theme--multi-color-ordered--ColorScale--800: #a2d9d9;
+  --pf-chart-theme--multi-color-ordered--ColorScale--900: #f9e0a2;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1000: #8f4700;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1100: #002f5d;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1200: #bde2b9;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1300: #003737;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1400: #c58c00;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1500: #f4b678;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1600: #519de9;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1700: #38812f;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1800: #73c5c5;
+  --pf-chart-theme--multi-color-ordered--ColorScale--1900: #f6d173;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2000: #c46100;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2100: #004b95;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2200: #7cc674;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2300: #005f60;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2400: #f0ab00;
+  --pf-chart-theme--multi-color-ordered--ColorScale--2500: #ef9234;
+  --pf-chart-theme--multi-color-unordered--ColorScale--100: #06c;
+  --pf-chart-theme--multi-color-unordered--ColorScale--200: #f4c145;
+  --pf-chart-theme--multi-color-unordered--ColorScale--300: #4cb140;
+  --pf-chart-theme--multi-color-unordered--ColorScale--400: #5752d1;
+  --pf-chart-theme--multi-color-unordered--ColorScale--500: #ec7a08;
+  --pf-chart-theme--multi-color-unordered--ColorScale--600: #009596;
+  --pf-chart-theme--multi-color-unordered--ColorScale--700: #b8bbbe;
+  --pf-chart-theme--multi-color-unordered--ColorScale--800: #8bc1f7;
+  --pf-chart-theme--multi-color-unordered--ColorScale--900: #c58c00;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1000: #bde2b9;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1100: #2a265f;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1200: #f4b678;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1300: #003737;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1400: #f0f0f0;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1500: #002f5d;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1600: #f9e0a2;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1700: #23511e;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1800: #b2b0ea;
+  --pf-chart-theme--multi-color-unordered--ColorScale--1900: #8f4700;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2000: #a2d9d9;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2100: #6a6e73;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2200: #519de9;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2300: #f0ab00;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2400: #7cc674;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2500: #3c3d99;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2600: #ef9234;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2700: #005f60;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2800: #d2d2d2;
+  --pf-chart-theme--multi-color-unordered--ColorScale--2900: #004b95;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3000: #f6d173;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3100: #38812f;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3200: #8481dd;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3300: #c46100;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3400: #73c5c5;
+  --pf-chart-theme--multi-color-unordered--ColorScale--3500: #8a8d90;
+  --pf-chart-theme--orange--ColorScale--100: #ec7a08;
+  --pf-chart-theme--orange--ColorScale--200: #f4b678;
+  --pf-chart-theme--orange--ColorScale--300: #8f4700;
+  --pf-chart-theme--orange--ColorScale--400: #ef9234;
+  --pf-chart-theme--orange--ColorScale--500: #c46100;
+  --pf-chart-theme--purple--ColorScale--100: #5752d1;
+  --pf-chart-theme--purple--ColorScale--200: #b2b0ea;
+  --pf-chart-theme--purple--ColorScale--300: #2a265f;
+  --pf-chart-theme--purple--ColorScale--400: #8481dd;
+  --pf-chart-theme--purple--ColorScale--500: #3c3d99;
 }

package/patternfly-charts.scss

@@ -176,10 +176,22 @@
   --pf-chart-bullet--group-title--divider--stroke--Color: #{$pf-chart-bullet--group-title--divider--stroke--Color};
   --pf-chart-bullet--group-title--divider--stroke--Width: #{$pf-chart-bullet--group-title--divider--stroke--Width};
   --pf-chart-bullet--Height: #{$pf-chart-bullet--Height};
+  --pf-chart-bullet--label--title--Fill: #{$pf-chart-bullet--label--title--Fill};
+  --pf-chart-bullet--label--grouptitle--Fill: #{$pf-chart-bullet--label--grouptitle--Fill};
   --pf-chart-bullet--label--subtitle--Fill: #{$pf-chart-bullet--label--subtitle--Fill};
   --pf-chart-bullet--primary-measure--dot--size: #{$pf-chart-bullet--primary-measure--dot--size};
   --pf-chart-bullet--primary-measure--segmented--Width: #{$pf-chart-bullet--primary-measure--segmented--Width};
+  --pf-chart-bullet--negative-measure--ColorScale--100: #{$pf-chart-color-red-100};
+  --pf-chart-bullet--negative-measure--ColorScale--200: #{$pf-chart-color-red-200};
+  --pf-chart-bullet--negative-measure--ColorScale--300: #{$pf-chart-color-red-300};
+  --pf-chart-bullet--negative-measure--ColorScale--400: #{$pf-chart-color-red-400};
+  --pf-chart-bullet--negative-measure--ColorScale--500: #{$pf-chart-color-red-500};
   --pf-chart-bullet--qualitative-range--Width: #{$pf-chart-bullet--qualitative-range--Width};
+  --pf-chart-bullet--qualitative-range--ColorScale--100: #{$pf-chart-color-black-100};
+  --pf-chart-bullet--qualitative-range--ColorScale--200: #{$pf-chart-color-black-200};
+  --pf-chart-bullet--qualitative-range--ColorScale--300: #{$pf-chart-color-black-300};
+  --pf-chart-bullet--qualitative-range--ColorScale--400: #{$pf-chart-color-black-400};
+  --pf-chart-bullet--qualitative-range--ColorScale--500: #{$pf-chart-color-black-500};
 
   // Candlestick
   --pf-chart-candelstick--data--stroke--Width: #{$pf-chart-candelstick--data--stroke--Width};
@@ -187,7 +199,11 @@
   --pf-chart-candelstick--candle--positive--Color: #{$pf-chart-candelstick--candle--positive--Color};
   --pf-chart-candelstick--candle--negative--Color: #{$pf-chart-candelstick--candle--negative--Color};
 
+  // Container
+  --pf-chart-container--cursor--line--Fill: #{$pf-chart-container--cursor--line--Fill};
+
   // Simple Donut Chart
+  --pf-chart-donut--label--title--Fill: #{$pf-chart-donut--label--title--Fill};
   --pf-chart-donut--label--subtitle--Fill: #{$pf-chart-donut--label--subtitle--Fill};
   --pf-chart-donut--label--subtitle--position: #{$pf-chart-donut--label--subtitle--position};
   --pf-chart-donut--pie--Height: #{$pf-chart-donut--pie--Height};
@@ -287,4 +303,119 @@
   --pf-chart-voronoi--flyout--stroke--Color: #{$pf-chart-voronoi--flyout--stroke--Color};
   --pf-chart-voronoi--flyout--stroke--Fill: #{$pf-chart-voronoi--flyout--stroke--Fill};
   --pf-chart-voronoi--flyout--PointerEvents: #{$pf-chart-voronoi--flyout--PointerEvents};
+
+  // Theme color scales
+
+  // blue
+  --pf-chart-theme--blue--ColorScale--100: #{$pf-chart-theme--blue--ColorScale--100};
+  --pf-chart-theme--blue--ColorScale--200: #{$pf-chart-theme--blue--ColorScale--200};
+  --pf-chart-theme--blue--ColorScale--300: #{$pf-chart-theme--blue--ColorScale--300};
+  --pf-chart-theme--blue--ColorScale--400: #{$pf-chart-theme--blue--ColorScale--400};
+  --pf-chart-theme--blue--ColorScale--500: #{$pf-chart-theme--blue--ColorScale--500};
+
+  // cyan
+  --pf-chart-theme--cyan--ColorScale--100: #{$pf-chart-theme--cyan--ColorScale--100};
+  --pf-chart-theme--cyan--ColorScale--200: #{$pf-chart-theme--cyan--ColorScale--200};
+  --pf-chart-theme--cyan--ColorScale--300: #{$pf-chart-theme--cyan--ColorScale--300};
+  --pf-chart-theme--cyan--ColorScale--400: #{$pf-chart-theme--cyan--ColorScale--400};
+  --pf-chart-theme--cyan--ColorScale--500: #{$pf-chart-theme--cyan--ColorScale--500};
+
+  // gold
+  --pf-chart-theme--gold--ColorScale--100: #{$pf-chart-theme--gold--ColorScale--100};
+  --pf-chart-theme--gold--ColorScale--200: #{$pf-chart-theme--gold--ColorScale--200};
+  --pf-chart-theme--gold--ColorScale--300: #{$pf-chart-theme--gold--ColorScale--300};
+  --pf-chart-theme--gold--ColorScale--400: #{$pf-chart-theme--gold--ColorScale--400};
+  --pf-chart-theme--gold--ColorScale--500: #{$pf-chart-theme--gold--ColorScale--500};
+
+    // gray
+  --pf-chart-theme--gray--ColorScale--100: #{$pf-chart-theme--gray--ColorScale--100};
+  --pf-chart-theme--gray--ColorScale--200: #{$pf-chart-theme--gray--ColorScale--200};
+  --pf-chart-theme--gray--ColorScale--300: #{$pf-chart-theme--gray--ColorScale--300};
+  --pf-chart-theme--gray--ColorScale--400: #{$pf-chart-theme--gray--ColorScale--400};
+  --pf-chart-theme--gray--ColorScale--500: #{$pf-chart-theme--gray--ColorScale--500};
+
+  // green
+  --pf-chart-theme--green--ColorScale--100: #{$pf-chart-theme--green--ColorScale--100};
+  --pf-chart-theme--green--ColorScale--200: #{$pf-chart-theme--green--ColorScale--200};
+  --pf-chart-theme--green--ColorScale--300: #{$pf-chart-theme--green--ColorScale--300};
+  --pf-chart-theme--green--ColorScale--400: #{$pf-chart-theme--green--ColorScale--400};
+  --pf-chart-theme--green--ColorScale--500: #{$pf-chart-theme--green--ColorScale--500};
+
+  // multi ordered
+  --pf-chart-theme--multi-color-ordered--ColorScale--100: #{$pf-chart-theme--multi-color-ordered--ColorScale--100};
+  --pf-chart-theme--multi-color-ordered--ColorScale--200: #{$pf-chart-theme--multi-color-ordered--ColorScale--200};
+  --pf-chart-theme--multi-color-ordered--ColorScale--300: #{$pf-chart-theme--multi-color-ordered--ColorScale--300};
+  --pf-chart-theme--multi-color-ordered--ColorScale--400: #{$pf-chart-theme--multi-color-ordered--ColorScale--400};
+  --pf-chart-theme--multi-color-ordered--ColorScale--500: #{$pf-chart-theme--multi-color-ordered--ColorScale--500};
+  --pf-chart-theme--multi-color-ordered--ColorScale--600: #{$pf-chart-theme--multi-color-ordered--ColorScale--600};
+  --pf-chart-theme--multi-color-ordered--ColorScale--700: #{$pf-chart-theme--multi-color-ordered--ColorScale--700};
+  --pf-chart-theme--multi-color-ordered--ColorScale--800: #{$pf-chart-theme--multi-color-ordered--ColorScale--800};
+  --pf-chart-theme--multi-color-ordered--ColorScale--900: #{$pf-chart-theme--multi-color-ordered--ColorScale--900};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1000: #{$pf-chart-theme--multi-color-ordered--ColorScale--1000};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1100: #{$pf-chart-theme--multi-color-ordered--ColorScale--1100};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1200: #{$pf-chart-theme--multi-color-ordered--ColorScale--1200};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1300: #{$pf-chart-theme--multi-color-ordered--ColorScale--1300};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1400: #{$pf-chart-theme--multi-color-ordered--ColorScale--1400};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1500: #{$pf-chart-theme--multi-color-ordered--ColorScale--1500};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1600: #{$pf-chart-theme--multi-color-ordered--ColorScale--1600};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1700: #{$pf-chart-theme--multi-color-ordered--ColorScale--1700};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1800: #{$pf-chart-theme--multi-color-ordered--ColorScale--1800};
+  --pf-chart-theme--multi-color-ordered--ColorScale--1900: #{$pf-chart-theme--multi-color-ordered--ColorScale--1900};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2000: #{$pf-chart-theme--multi-color-ordered--ColorScale--2000};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2100: #{$pf-chart-theme--multi-color-ordered--ColorScale--2100};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2200: #{$pf-chart-theme--multi-color-ordered--ColorScale--2200};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2300: #{$pf-chart-theme--multi-color-ordered--ColorScale--2300};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2400: #{$pf-chart-theme--multi-color-ordered--ColorScale--2400};
+  --pf-chart-theme--multi-color-ordered--ColorScale--2500: #{$pf-chart-theme--multi-color-ordered--ColorScale--2500};
+
+  // multi unordered
+  --pf-chart-theme--multi-color-unordered--ColorScale--100: #{$pf-chart-theme--multi-color-unordered--ColorScale--100};
+  --pf-chart-theme--multi-color-unordered--ColorScale--200: #{$pf-chart-theme--multi-color-unordered--ColorScale--200};
+  --pf-chart-theme--multi-color-unordered--ColorScale--300: #{$pf-chart-theme--multi-color-unordered--ColorScale--300};
+  --pf-chart-theme--multi-color-unordered--ColorScale--400: #{$pf-chart-theme--multi-color-unordered--ColorScale--400};
+  --pf-chart-theme--multi-color-unordered--ColorScale--500: #{$pf-chart-theme--multi-color-unordered--ColorScale--500};
+  --pf-chart-theme--multi-color-unordered--ColorScale--600: #{$pf-chart-theme--multi-color-unordered--ColorScale--600};
+  --pf-chart-theme--multi-color-unordered--ColorScale--700: #{$pf-chart-theme--multi-color-unordered--ColorScale--700};
+  --pf-chart-theme--multi-color-unordered--ColorScale--800: #{$pf-chart-theme--multi-color-unordered--ColorScale--800};
+  --pf-chart-theme--multi-color-unordered--ColorScale--900: #{$pf-chart-theme--multi-color-unordered--ColorScale--900};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1000: #{$pf-chart-theme--multi-color-unordered--ColorScale--1000};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1100: #{$pf-chart-theme--multi-color-unordered--ColorScale--1100};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1200: #{$pf-chart-theme--multi-color-unordered--ColorScale--1200};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1300: #{$pf-chart-theme--multi-color-unordered--ColorScale--1300};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1400: #{$pf-chart-theme--multi-color-unordered--ColorScale--1400};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1500: #{$pf-chart-theme--multi-color-unordered--ColorScale--1500};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1600: #{$pf-chart-theme--multi-color-unordered--ColorScale--1600};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1700: #{$pf-chart-theme--multi-color-unordered--ColorScale--1700};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1800: #{$pf-chart-theme--multi-color-unordered--ColorScale--1800};
+  --pf-chart-theme--multi-color-unordered--ColorScale--1900: #{$pf-chart-theme--multi-color-unordered--ColorScale--1900};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2000: #{$pf-chart-theme--multi-color-unordered--ColorScale--2000};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2100: #{$pf-chart-theme--multi-color-unordered--ColorScale--2100};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2200: #{$pf-chart-theme--multi-color-unordered--ColorScale--2200};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2300: #{$pf-chart-theme--multi-color-unordered--ColorScale--2300};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2400: #{$pf-chart-theme--multi-color-unordered--ColorScale--2400};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2500: #{$pf-chart-theme--multi-color-unordered--ColorScale--2500};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2600: #{$pf-chart-theme--multi-color-unordered--ColorScale--2600};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2700: #{$pf-chart-theme--multi-color-unordered--ColorScale--2700};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2800: #{$pf-chart-theme--multi-color-unordered--ColorScale--2800};
+  --pf-chart-theme--multi-color-unordered--ColorScale--2900: #{$pf-chart-theme--multi-color-unordered--ColorScale--2900};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3000: #{$pf-chart-theme--multi-color-unordered--ColorScale--3000};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3100: #{$pf-chart-theme--multi-color-unordered--ColorScale--3100};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3200: #{$pf-chart-theme--multi-color-unordered--ColorScale--3200};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3300: #{$pf-chart-theme--multi-color-unordered--ColorScale--3300};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3400: #{$pf-chart-theme--multi-color-unordered--ColorScale--3400};
+  --pf-chart-theme--multi-color-unordered--ColorScale--3500: #{$pf-chart-theme--multi-color-unordered--ColorScale--3500};
+
+  // orange
+  --pf-chart-theme--orange--ColorScale--100: #{$pf-chart-theme--orange--ColorScale--100};
+  --pf-chart-theme--orange--ColorScale--200: #{$pf-chart-theme--orange--ColorScale--200};
+  --pf-chart-theme--orange--ColorScale--300: #{$pf-chart-theme--orange--ColorScale--300};
+  --pf-chart-theme--orange--ColorScale--400: #{$pf-chart-theme--orange--ColorScale--400};
+  --pf-chart-theme--orange--ColorScale--500: #{$pf-chart-theme--orange--ColorScale--500};
+
+  // purple
+  --pf-chart-theme--purple--ColorScale--100: #{$pf-chart-theme--purple--ColorScale--100};
+  --pf-chart-theme--purple--ColorScale--200: #{$pf-chart-theme--purple--ColorScale--200};
+  --pf-chart-theme--purple--ColorScale--300: #{$pf-chart-theme--purple--ColorScale--300};
+  --pf-chart-theme--purple--ColorScale--400: #{$pf-chart-theme--purple--ColorScale--400};
+  --pf-chart-theme--purple--ColorScale--500: #{$pf-chart-theme--purple--ColorScale--500};
 }

package/patternfly-no-reset.css

@@ -15247,12 +15247,14 @@ label.pf-c-input-group__text {
   --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
+.pf-c-label.pf-m-overflow:hover,
+.pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
+.pf-c-label.pf-m-overflow:focus,
+.pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
 .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -15300,7 +15302,7 @@ label.pf-c-input-group__text {
   margin-bottom: var(--pf-c-label__c-button--MarginBottom);
   margin-left: var(--pf-c-label__c-button--MarginLeft);
 }
-.pf-c-label.pf-m-overflow {
+.pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -22834,10 +22836,10 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 .pf-c-spinner__clipper {
@@ -22850,10 +22852,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__clipper::after {
@@ -22869,10 +22871,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 .pf-c-spinner__lead-ball {
@@ -22899,11 +22901,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__tail-ball {
@@ -22930,11 +22932,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 svg.pf-c-spinner {
@@ -26705,6 +26707,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__link--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tabs__link--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__item--m-current__link--Color: var(--pf-global--Color--100);
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -27223,6 +27226,7 @@ svg.pf-c-spinner.pf-m-xl {
   pointer-events: none;
 }
 .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color);
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);

package/patternfly.css

@@ -15374,12 +15374,14 @@ label.pf-c-input-group__text {
   --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
+.pf-c-label.pf-m-overflow:hover,
+.pf-c-label.pf-m-add:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
 .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--hover--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--hover--before--BorderColor);
 }
-.pf-c-label.pf-m-overflow:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
+.pf-c-label.pf-m-overflow:focus,
+.pf-c-label.pf-m-add:focus, .pf-c-label.pf-m-outline a.pf-c-label__content:focus,
 .pf-c-label.pf-m-outline button.pf-c-label__content:focus {
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--link--focus--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
@@ -15427,7 +15429,7 @@ label.pf-c-input-group__text {
   margin-bottom: var(--pf-c-label__c-button--MarginBottom);
   margin-left: var(--pf-c-label__c-button--MarginLeft);
 }
-.pf-c-label.pf-m-overflow {
+.pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-overflow__content--before--BorderWidth);
@@ -22961,10 +22963,10 @@ span.pf-c-spinner {
     transform: rotate(0deg);
   }
   50% {
-    transform: rotate(-540deg);
+    transform: rotate(540deg);
   }
   100% {
-    transform: rotate(-1080deg);
+    transform: rotate(1080deg);
   }
 }
 .pf-c-spinner__clipper {
@@ -22977,10 +22979,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(90deg);
   }
   100% {
-    transform: rotate(-270deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__clipper::after {
@@ -22996,10 +22998,10 @@ span.pf-c-spinner {
 
 @keyframes pf-animation-spinner__clipper-after {
   0% {
-    transform: rotate(90deg);
+    transform: rotate(-180deg);
   }
   100% {
-    transform: rotate(-180deg);
+    transform: rotate(90deg);
   }
 }
 .pf-c-spinner__lead-ball {
@@ -23026,11 +23028,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  34% {
-    transform: rotate(-180deg);
+  33% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .pf-c-spinner__tail-ball {
@@ -23057,11 +23059,11 @@ span.pf-c-spinner {
   0% {
     transform: rotate(0deg);
   }
-  67.5% {
-    transform: rotate(-180deg);
+  66% {
+    transform: rotate(180deg);
   }
   100% {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 svg.pf-c-spinner {
@@ -26832,6 +26834,7 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__link--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tabs__link--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__item--m-current__link--Color: var(--pf-global--Color--100);
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -27350,6 +27353,7 @@ svg.pf-c-spinner.pf-m-xl {
   pointer-events: none;
 }
 .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color);
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);