@patternfly/react-styles 6.5.0-prerelease.23 → 6.5.0-prerelease.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/Banner/banner.css +4 -0
  3. package/css/components/Banner/banner.d.ts +1 -0
  4. package/css/components/Banner/banner.js +1 -0
  5. package/css/components/Banner/banner.mjs +1 -0
  6. package/css/components/Hero/hero.css +19 -19
  7. package/css/components/Hero/hero.d.ts +1 -1
  8. package/css/components/Hero/hero.js +1 -1
  9. package/css/components/Hero/hero.mjs +1 -1
  10. package/css/components/Pagination/pagination.css +5 -3
  11. package/css/components/Toolbar/toolbar.css +4 -1
  12. package/css/components/_index.css +32 -23
  13. package/css/components/_index.d.ts +1 -2
  14. package/css/components/_index.js +1 -2
  15. package/css/components/_index.mjs +1 -2
  16. package/css/docs/components/Compass/examples/Compass.css +3 -3
  17. package/css/docs/components/Compass/examples/Compass.d.ts +1 -1
  18. package/css/docs/components/Compass/examples/Compass.js +1 -1
  19. package/css/docs/components/Compass/examples/Compass.mjs +1 -1
  20. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.24...@patternfly/react-styles@6.5.0-prerelease.25) (2026-05-12)
7
+
8
+ ### Features
9
+
10
+ - **react-charts:** add high contrast ([#12419](https://github.com/patternfly/patternfly-react/issues/12419)) ([e9c801c](https://github.com/patternfly/patternfly-react/commit/e9c801c84067fb9ed42d10d19deadf8dfca55289))
11
+
12
+ # [6.5.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.23...@patternfly/react-styles@6.5.0-prerelease.24) (2026-05-08)
13
+
14
+ ### Features
15
+
16
+ - **Hero:** glass styling update ([#12412](https://github.com/patternfly/patternfly-react/issues/12412)) ([bea138e](https://github.com/patternfly/patternfly-react/commit/bea138ecd4d33a2f591dac628b875b295ec71c31))
17
+
6
18
  # [6.5.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.22...@patternfly/react-styles@6.5.0-prerelease.23) (2026-05-08)
7
19
 
8
20
  ### Features
package/css/components/Banner/banner.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
51
51
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
52
52
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
53
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
53
54
  }
54
55
 
55
56
  .pf-v6-c-banner {
@@ -123,6 +124,9 @@
123
124
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
124
125
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
125
126
  }
127
+ .pf-v6-c-banner.pf-m-pill {
128
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
129
+ }
126
130
  .pf-v6-c-banner a {
127
131
  color: var(--pf-v6-c-banner--link--Color);
128
132
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
package/css/components/Banner/banner.d.ts CHANGED
@@ -17,6 +17,7 @@ declare const _default: {
17
17
  "blue": "pf-m-blue",
18
18
  "purple": "pf-m-purple",
19
19
  "sticky": "pf-m-sticky",
20
+ "pill": "pf-m-pill",
20
21
  "disabled": "pf-m-disabled",
21
22
  "inline": "pf-m-inline"
22
23
  }
package/css/components/Banner/banner.js CHANGED
@@ -19,6 +19,7 @@ exports.default = {
19
19
  "blue": "pf-m-blue",
20
20
  "purple": "pf-m-purple",
21
21
  "sticky": "pf-m-sticky",
22
+ "pill": "pf-m-pill",
22
23
  "disabled": "pf-m-disabled",
23
24
  "inline": "pf-m-inline"
24
25
  }
package/css/components/Banner/banner.mjs CHANGED
@@ -17,6 +17,7 @@ export default {
17
17
  "blue": "pf-m-blue",
18
18
  "purple": "pf-m-purple",
19
19
  "sticky": "pf-m-sticky",
20
+ "pill": "pf-m-pill",
20
21
  "disabled": "pf-m-disabled",
21
22
  "inline": "pf-m-inline"
22
23
  }
package/css/components/Hero/hero.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .pf-v6-c-hero {
2
- --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
3
- --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
2
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
3
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
4
4
  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
5
- --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
5
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
6
6
  --pf-v6-c-hero--gradient--angle: 109deg;
7
7
  --pf-v6-c-hero--gradient--stop-1--light: transparent;
8
8
  --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -10,8 +10,7 @@
10
10
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
11
11
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
12
12
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
13
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
14
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
13
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
15
14
  --pf-v6-c-hero--BackgroundImage--light: none;
16
15
  --pf-v6-c-hero--BackgroundImage--dark: none;
17
16
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -23,14 +22,16 @@
23
22
  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
24
23
  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
25
24
  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
26
- --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
27
- --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
28
- --pf-v6-c-hero--BorderStartStartRadius: 24px;
29
- --pf-v6-c-hero--BorderStartEndRadius: 72px;
30
- --pf-v6-c-hero--BorderEndEndRadius: 24px;
31
- --pf-v6-c-hero--BorderEndStartRadius: 72px;
25
+ --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
26
+ --pf-v6-c-hero--BorderStartEndRadius: 48px;
27
+ --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
28
+ --pf-v6-c-hero--BorderEndStartRadius: 48px;
32
29
  --pf-v6-c-hero__body--Width: 800px;
33
30
  --pf-v6-c-hero__body--MaxWidth: 80%;
31
+ --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
32
+ --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
33
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
34
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
34
35
  }
35
36
 
36
37
  .pf-v6-c-hero {
@@ -39,6 +40,7 @@
39
40
  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
40
41
  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
41
42
  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
43
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
42
44
  background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
43
45
  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
44
46
  background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -54,20 +56,18 @@
54
56
  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
55
57
  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
56
58
  }
59
+ :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
60
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
61
+ --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
62
+ backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
63
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
64
+ }
57
65
  :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
58
66
  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
59
67
  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
60
68
  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
61
69
  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
62
70
  }
63
- :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
64
- --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
65
- box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
66
- }
67
- .pf-v6-c-hero:not(.pf-m-no-glass) {
68
- background-color: var(--pf-v6-c-hero--BackgroundColor);
69
- backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
70
- }
71
71
 
72
72
  .pf-v6-c-hero__body {
73
73
  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
package/css/components/Hero/hero.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const _default: {
3
3
  "hero": "pf-v6-c-hero",
4
4
  "heroBody": "pf-v6-c-hero__body",
5
5
  "modifiers": {
6
- "noGlass": "pf-m-no-glass"
6
+ "glass": "pf-m-glass"
7
7
  },
8
8
  "themeDark": "pf-v6-theme-dark",
9
9
  "themeGlass": "pf-v6-theme-glass"
package/css/components/Hero/hero.js CHANGED
@@ -5,7 +5,7 @@ exports.default = {
5
5
  "hero": "pf-v6-c-hero",
6
6
  "heroBody": "pf-v6-c-hero__body",
7
7
  "modifiers": {
8
- "noGlass": "pf-m-no-glass"
8
+ "glass": "pf-m-glass"
9
9
  },
10
10
  "themeDark": "pf-v6-theme-dark",
11
11
  "themeGlass": "pf-v6-theme-glass"
package/css/components/Hero/hero.mjs CHANGED
@@ -3,7 +3,7 @@ export default {
3
3
  "hero": "pf-v6-c-hero",
4
4
  "heroBody": "pf-v6-c-hero__body",
5
5
  "modifiers": {
6
- "noGlass": "pf-m-no-glass"
6
+ "glass": "pf-m-glass"
7
7
  },
8
8
  "themeDark": "pf-v6-theme-dark",
9
9
  "themeGlass": "pf-v6-theme-glass"
package/css/components/Pagination/pagination.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
33
33
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
34
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
35
+ --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
35
36
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
37
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
37
38
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -49,10 +50,10 @@
49
50
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
50
51
  }
51
52
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
52
- --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
53
53
  --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
54
- --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
55
- --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
54
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
55
+ --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
56
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
56
57
  }
57
58
  .pf-v6-c-pagination {
58
59
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -168,6 +169,7 @@
168
169
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
169
170
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
170
171
  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
172
+ border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
171
173
  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
172
174
  }
173
175
  .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
package/css/components/Toolbar/toolbar.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
40
  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
41
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
41
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
42
42
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
43
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
44
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
@@ -331,7 +331,10 @@
331
331
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
332
332
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
333
333
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
334
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
335
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
334
336
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
337
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
335
338
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
336
339
  }
337
340
  .pf-v6-c-toolbar.pf-m-sticky-base {
package/css/components/_index.css CHANGED
@@ -1337,6 +1337,7 @@
1337
1337
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1338
1338
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1339
1339
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1340
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
1340
1341
  }
1341
1342
 
1342
1343
  .pf-v6-c-banner {
@@ -1410,6 +1411,9 @@
1410
1411
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
1411
1412
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
1412
1413
  }
1414
+ .pf-v6-c-banner.pf-m-pill {
1415
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
1416
+ }
1413
1417
  .pf-v6-c-banner a {
1414
1418
  color: var(--pf-v6-c-banner--link--Color);
1415
1419
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
@@ -8722,10 +8726,10 @@ ul) {
8722
8726
  }
8723
8727
 
8724
8728
  .pf-v6-c-hero {
8725
- --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8726
- --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8729
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
8730
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
8727
8731
  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8728
- --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8732
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
8729
8733
  --pf-v6-c-hero--gradient--angle: 109deg;
8730
8734
  --pf-v6-c-hero--gradient--stop-1--light: transparent;
8731
8735
  --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -8733,8 +8737,7 @@ ul) {
8733
8737
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8734
8738
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8735
8739
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8736
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
8737
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
8740
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
8738
8741
  --pf-v6-c-hero--BackgroundImage--light: none;
8739
8742
  --pf-v6-c-hero--BackgroundImage--dark: none;
8740
8743
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -8746,14 +8749,16 @@ ul) {
8746
8749
  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8747
8750
  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8748
8751
  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8749
- --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8750
- --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8751
- --pf-v6-c-hero--BorderStartStartRadius: 24px;
8752
- --pf-v6-c-hero--BorderStartEndRadius: 72px;
8753
- --pf-v6-c-hero--BorderEndEndRadius: 24px;
8754
- --pf-v6-c-hero--BorderEndStartRadius: 72px;
8752
+ --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
8753
+ --pf-v6-c-hero--BorderStartEndRadius: 48px;
8754
+ --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
8755
+ --pf-v6-c-hero--BorderEndStartRadius: 48px;
8755
8756
  --pf-v6-c-hero__body--Width: 800px;
8756
8757
  --pf-v6-c-hero__body--MaxWidth: 80%;
8758
+ --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
8759
+ --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
8760
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
8761
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
8757
8762
  }
8758
8763
 
8759
8764
  .pf-v6-c-hero {
@@ -8762,6 +8767,7 @@ ul) {
8762
8767
  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8763
8768
  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8764
8769
  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8770
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8765
8771
  background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
8766
8772
  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8767
8773
  background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -8777,20 +8783,18 @@ ul) {
8777
8783
  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8778
8784
  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8779
8785
  }
8786
+ :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
8787
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8788
+ --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
8789
+ backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
8790
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8791
+ }
8780
8792
  :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8781
8793
  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8782
8794
  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8783
8795
  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8784
8796
  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8785
8797
  }
8786
- :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8787
- --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8788
- box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8789
- }
8790
- .pf-v6-c-hero:not(.pf-m-no-glass) {
8791
- background-color: var(--pf-v6-c-hero--BackgroundColor);
8792
- backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8793
- }
8794
8798
 
8795
8799
  .pf-v6-c-hero__body {
8796
8800
  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
@@ -14821,6 +14825,7 @@ ul.pf-v6-c-list {
14821
14825
  --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
14822
14826
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14823
14827
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14828
+ --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
14824
14829
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14825
14830
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
14826
14831
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14838,10 +14843,10 @@ ul.pf-v6-c-list {
14838
14843
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
14839
14844
  }
14840
14845
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
14841
- --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
14842
14846
  --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14843
- --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14844
- --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
14847
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
14848
+ --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
14849
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
14845
14850
  }
14846
14851
  .pf-v6-c-pagination {
14847
14852
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -14957,6 +14962,7 @@ ul.pf-v6-c-list {
14957
14962
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
14958
14963
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
14959
14964
  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
14965
+ border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
14960
14966
  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14961
14967
  }
14962
14968
  .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
@@ -22762,7 +22768,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22762
22768
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22763
22769
  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
22764
22770
  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
22765
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22771
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22766
22772
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22767
22773
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22768
22774
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
@@ -23055,7 +23061,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23055
23061
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
23056
23062
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
23057
23063
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
23064
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
23065
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
23058
23066
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
23067
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
23059
23068
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
23060
23069
  }
23061
23070
  .pf-v6-c-toolbar.pf-m-sticky-base {
package/css/components/_index.d.ts CHANGED
@@ -407,6 +407,7 @@ declare const _default: {
407
407
  "blue": "pf-m-blue",
408
408
  "purple": "pf-m-purple",
409
409
  "sticky": "pf-m-sticky",
410
+ "pill": "pf-m-pill",
410
411
  "picture": "pf-m-picture",
411
412
  "current": "pf-m-current",
412
413
  "primary": "pf-m-primary",
@@ -582,7 +583,6 @@ declare const _default: {
582
583
  "resizable": "pf-m-resizable",
583
584
  "panelLeft": "pf-m-panel-left",
584
585
  "resizing": "pf-m-resizing",
585
- "pill": "pf-m-pill",
586
586
  "noBackground": "pf-m-no-background",
587
587
  "padding": "pf-m-padding",
588
588
  "width_25": "pf-m-width-25",
@@ -635,7 +635,6 @@ declare const _default: {
635
635
  "resizeBoth": "pf-m-resize-both",
636
636
  "indeterminate": "pf-m-indeterminate",
637
637
  "dynamic": "pf-m-dynamic",
638
- "noGlass": "pf-m-no-glass",
639
638
  "2xl": "pf-m-2xl",
640
639
  "3xl": "pf-m-3xl",
641
640
  "bodySm": "pf-m-body-sm",
package/css/components/_index.js CHANGED
@@ -409,6 +409,7 @@ exports.default = {
409
409
  "blue": "pf-m-blue",
410
410
  "purple": "pf-m-purple",
411
411
  "sticky": "pf-m-sticky",
412
+ "pill": "pf-m-pill",
412
413
  "picture": "pf-m-picture",
413
414
  "current": "pf-m-current",
414
415
  "primary": "pf-m-primary",
@@ -584,7 +585,6 @@ exports.default = {
584
585
  "resizable": "pf-m-resizable",
585
586
  "panelLeft": "pf-m-panel-left",
586
587
  "resizing": "pf-m-resizing",
587
- "pill": "pf-m-pill",
588
588
  "noBackground": "pf-m-no-background",
589
589
  "padding": "pf-m-padding",
590
590
  "width_25": "pf-m-width-25",
@@ -637,7 +637,6 @@ exports.default = {
637
637
  "resizeBoth": "pf-m-resize-both",
638
638
  "indeterminate": "pf-m-indeterminate",
639
639
  "dynamic": "pf-m-dynamic",
640
- "noGlass": "pf-m-no-glass",
641
640
  "2xl": "pf-m-2xl",
642
641
  "3xl": "pf-m-3xl",
643
642
  "bodySm": "pf-m-body-sm",
package/css/components/_index.mjs CHANGED
@@ -407,6 +407,7 @@ export default {
407
407
  "blue": "pf-m-blue",
408
408
  "purple": "pf-m-purple",
409
409
  "sticky": "pf-m-sticky",
410
+ "pill": "pf-m-pill",
410
411
  "picture": "pf-m-picture",
411
412
  "current": "pf-m-current",
412
413
  "primary": "pf-m-primary",
@@ -582,7 +583,6 @@ export default {
582
583
  "resizable": "pf-m-resizable",
583
584
  "panelLeft": "pf-m-panel-left",
584
585
  "resizing": "pf-m-resizing",
585
- "pill": "pf-m-pill",
586
586
  "noBackground": "pf-m-no-background",
587
587
  "padding": "pf-m-padding",
588
588
  "width_25": "pf-m-width-25",
@@ -635,7 +635,6 @@ export default {
635
635
  "resizeBoth": "pf-m-resize-both",
636
636
  "indeterminate": "pf-m-indeterminate",
637
637
  "dynamic": "pf-m-dynamic",
638
- "noGlass": "pf-m-no-glass",
639
638
  "2xl": "pf-m-2xl",
640
639
  "3xl": "pf-m-3xl",
641
640
  "bodySm": "pf-m-body-sm",
package/css/docs/components/Compass/examples/Compass.css CHANGED
@@ -1,8 +1,8 @@
1
- #ws-page-main .ws-core-a-compass .pf-v6-c-compass {
1
+ #ws-page-main .ws-core-c-compass .pf-v6-c-compass {
2
2
  height: 600px;
3
3
  }
4
4
 
5
- #ws-core-a-compass-basic [class*="pf-v6-c-compass"],
6
- #ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
5
+ #ws-core-c-compass-basic [class*="pf-v6-c-compass"],
6
+ #ws-core-c-compass-docked [class*="pf-v6-c-compass"] {
7
7
  outline: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
8
8
  }
package/css/docs/components/Compass/examples/Compass.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import './Compass.css';
2
2
  declare const _default: {
3
3
  "compass": "pf-v6-c-compass",
4
- "wsCoreACompass": "ws-core-a-compass"
4
+ "wsCoreCCompass": "ws-core-c-compass"
5
5
  };
6
6
  export default _default;
package/css/docs/components/Compass/examples/Compass.js CHANGED
@@ -3,5 +3,5 @@ exports.__esModule = true;
3
3
  require('./Compass.css');
4
4
  exports.default = {
5
5
  "compass": "pf-v6-c-compass",
6
- "wsCoreACompass": "ws-core-a-compass"
6
+ "wsCoreCCompass": "ws-core-c-compass"
7
7
  };
package/css/docs/components/Compass/examples/Compass.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import './Compass.css';
2
2
  export default {
3
3
  "compass": "pf-v6-c-compass",
4
- "wsCoreACompass": "ws-core-a-compass"
4
+ "wsCoreCCompass": "ws-core-c-compass"
5
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.23",
3
+ "version": "6.5.0-prerelease.25",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.5.0-prerelease.80",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.86",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "ea832af189f62520e49b172f13cac22df6c5d3a4"
27
+ "gitHead": "cd39fc119e43af9e8e451833f1271592f83fc0c1"
28
28
  }