@patternfly/patternfly 6.5.0-prerelease.84 → 6.5.0-prerelease.86

package/patternfly-charts.scss

@@ -1,6 +1,8 @@
 @use './sass-utilities' as *;
 @use "./base/tokens/tokens-charts" as charts;
 @use "./base/tokens/tokens-charts-dark" as charts-dark;
+@use "./base/tokens/tokens-charts-highcontrast" as charts-highcontrast;
+@use "./base/tokens/tokens-charts-highcontrast-dark" as charts-highcontrast-dark;
 
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $chart: #{$pf-prefix} + 'chart';
@@ -17,11 +19,21 @@ $chart: #{$pf-prefix} + 'chart';
   @include charts.pf-v6-tokens;
 }
 
+// Charts dark tokens
+:where(.pf-v6-theme-high-contrast) {
+  @include charts-highcontrast.pf-v6-tokens;
+}
+
 // Charts dark tokens
 :where(.pf-v6-theme-dark) {
   @include charts-dark.pf-v6-tokens;
 }
 
+// Charts dark tokens
+:where(.pf-v6-theme-dark.pf-v6-theme-high-contrast) {
+  @include charts-highcontrast-dark.pf-v6-tokens;
+}
+
 // Charts styles
 // stylelint-disable-next-line no-duplicate-selectors
 :where(:root) {
@@ -93,7 +105,7 @@ $chart: #{$pf-prefix} + 'chart';
   // label
   --#{$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--stroke: var(--pf-t--chart--global--label--stroke--color);
   --#{$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);
@@ -130,38 +142,38 @@ $chart: #{$pf-prefix} + 'chart';
   // Individual Charts
 
   // Area Chart
-  --#{$chart}-area--Opacity: .3;
+  --#{$chart}-area--Opacity: var(--pf-t--chart--global--fill--opacity--area);
   --#{$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: var(--#{$chart}-global--stroke--Width--xs);
-  --#{$chart}-axis--axis--stroke--Color: var(--#{$chart}-global--Fill--Color--300);
+  --#{$chart}-axis--axis--stroke--Color: var(--pf-t--global--border--color--default);
   --#{$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--stroke--Color: var(--pf-t--global--border--color--default);
   --#{$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--stroke--Color: var(--pf-t--global--border--color--default);
   --#{$chart}-axis--tick-label--Fill: var(--#{$chart}-global--Fill--Color--700);
 
   // Bar Chart
   --#{$chart}-bar--Width: 10;
-  --#{$chart}-bar--data--stroke: none;
+  --#{$chart}-bar--data--stroke: var(--pf-t--global--border--color--high-contrast);
   --#{$chart}-bar--data--Fill: var(--#{$chart}-global--Fill--Color--900);
   --#{$chart}-bar--data--Padding: 8;
-  --#{$chart}-bar--data-stroke--Width: 0;
+  --#{$chart}-bar--data-stroke--Width: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Box Plot Chart
   --#{$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--Color: var(--pf-t--global--border--color--alt);
   --#{$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);
@@ -201,11 +213,13 @@ $chart: #{$pf-prefix} + 'chart';
   --#{$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);
+  --#{$chart}-bullet--qualitative-range--ColorScale--100: var(--pf-t--chart--global--fill--color--100);
+  --#{$chart}-bullet--qualitative-range--ColorScale--200: var(--pf-t--chart--global--fill--color--200);
+  --#{$chart}-bullet--qualitative-range--ColorScale--300: var(--pf-t--chart--global--fill--color--300);
+  --#{$chart}-bullet--qualitative-range--ColorScale--400: var(--pf-t--chart--global--fill--color--400);
+  --#{$chart}-bullet--qualitative-range--ColorScale--500: var(--pf-t--chart--global--fill--color--500);
+  --#{$chart}-bullet--bar--stroke--Color: var(--pf-t--global--border--color--alt);
+  --#{$chart}-bullet--bar--stroke--Width: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Candlestick
   --#{$chart}-candelstick--data--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
@@ -224,6 +238,8 @@ $chart: #{$pf-prefix} + 'chart';
   --#{$chart}-donut--pie--angle--Padding: 1;
   --#{$chart}-donut--pie--Padding: 20;
   --#{$chart}-donut--pie--Width: 230;
+  --#{$chart}-donut--pie--data--stroke--Color: var(--pf-t--global--border--color--high-contrast);
+  --#{$chart}-donut--pie--data--stroke--Width: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Donut Threshold Chart
   --#{$chart}-donut--threshold--first--Color: var(--#{$chart}-global--Fill--Color--200);
@@ -261,6 +277,8 @@ $chart: #{$pf-prefix} + 'chart';
   --#{$chart}-legend--data--type: square;
   --#{$chart}-legend--title--Padding: 2;
   --#{$chart}-legend--Margin: 16;
+  --#{$chart}-legend--data--stroke--Color: var(--pf-t--global--border--color--high-contrast);
+  --#{$chart}-legend--data--stroke--Width: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Line Chart
   --#{$chart}-line--data--Fill: transparent;
@@ -271,8 +289,8 @@ $chart: #{$pf-prefix} + 'chart';
   // Pie Chart
   --#{$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--data--stroke--Width: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$chart}-pie--data--stroke--Color: var(--pf-t--global--border--color--alt);
   --#{$chart}-pie--labels--Padding: 8;
   --#{$chart}-pie--Height: 230;
   --#{$chart}-pie--Width: 230;
@@ -523,6 +541,11 @@ $chart: #{$pf-prefix} + 'chart';
 
   // Skeleton
   --#{$chart}-echarts-skeleton--label--Color: transparent;
+  --#{$chart}-skeleton--ColorScale--100: var(--#{$chart}-color-black-100);
+  --#{$chart}-skeleton--ColorScale--200: var(--#{$chart}-color-black-200);
+  --#{$chart}-skeleton--ColorScale--300: var(--#{$chart}-color-black-300);
+  --#{$chart}-skeleton--ColorScale--400: var(--#{$chart}-color-black-400);
+  --#{$chart}-skeleton--ColorScale--500: var(--#{$chart}-color-black-500);
 
   // Toolbox
   --#{$chart}-echarts-toolbox--emphasis--item-style--BorderColor: var(--#{$chart}-theme--blue--ColorScale--400);

package/patternfly-no-globals.css

@@ -23973,6 +23973,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
   --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
+  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -23990,10 +23991,10 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
 }
 :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
-  --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
-  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
-  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
+  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
 .pf-v6-c-pagination {
   --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -24109,6 +24110,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
   inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
   background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
+  border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
   box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
 }
 .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
@@ -31914,7 +31916,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
   --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
-  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);

package/patternfly.css

@@ -24120,6 +24120,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
   --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
+  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -24137,10 +24138,10 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
 }
 :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
-  --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
-  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
-  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
+  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
 .pf-v6-c-pagination {
   --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -24256,6 +24257,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
   inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
   background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
+  border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
   box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
 }
 .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
@@ -32061,7 +32063,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
   --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
-  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);