@patternfly/patternfly 6.5.0-prerelease.80 → 6.5.0-prerelease.82

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 (39) hide show
  1. package/components/Banner/banner.css +4 -0
  2. package/components/Banner/banner.scss +7 -0
  3. package/components/Card/card.scss +7 -9
  4. package/components/Hero/hero.css +19 -19
  5. package/components/Hero/hero.scss +30 -29
  6. package/components/_index.css +23 -19
  7. package/docs/components/Banner/examples/Banner.md +131 -0
  8. package/docs/components/Card/examples/Card.md +3 -3
  9. package/docs/components/Compass/examples/Compass.css +3 -3
  10. package/docs/components/Compass/examples/Compass.md +1 -2
  11. package/docs/components/Hero/examples/Hero.md +1 -1
  12. package/docs/components/Masthead/examples/masthead.md +79 -7
  13. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  14. package/docs/demos/Alert/examples/Alert.md +3 -3
  15. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  16. package/docs/demos/Banner/examples/Banner.md +2 -2
  17. package/docs/demos/CardView/examples/CardView.md +1 -1
  18. package/docs/demos/Compass/examples/Compass.md +14 -15
  19. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  20. package/docs/demos/DataList/examples/DataList.md +4 -4
  21. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  22. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  23. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  24. package/docs/demos/Masthead/examples/Masthead.md +9 -9
  25. package/docs/demos/Modal/examples/Modal.md +6 -6
  26. package/docs/demos/Nav/examples/Nav.md +18 -18
  27. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  28. package/docs/demos/Page/examples/Page.md +14 -14
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  30. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  31. package/docs/demos/Table/examples/Table.md +16 -16
  32. package/docs/demos/Tabs/examples/Tabs.md +6 -6
  33. package/docs/demos/Toolbar/examples/Toolbar.md +2 -2
  34. package/docs/demos/Wizard/examples/Wizard.md +9 -9
  35. package/package.json +5 -3
  36. package/patternfly-no-globals.css +23 -19
  37. package/patternfly.css +23 -19
  38. package/patternfly.min.css +1 -1
  39. package/patternfly.min.css.map +1 -1
package/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -52,7 +52,7 @@ wrapperTag: div
52
52
  <div class="pf-v6-c-masthead__brand">
53
53
  <a class="pf-v6-c-masthead__logo" href="#">
54
54
  <svg height="37px" viewBox="0 0 679 158">
55
- <title>PF-HorizontalLogo-Color</title>
55
+ <title>PatternFly</title>
56
56
  <defs>
57
57
  <linearGradient
58
58
  x1="68%"
@@ -803,7 +803,7 @@ wrapperTag: div
803
803
  <div class="pf-v6-c-masthead__brand">
804
804
  <a class="pf-v6-c-masthead__logo" href="#">
805
805
  <svg height="37px" viewBox="0 0 679 158">
806
- <title>PF-HorizontalLogo-Color</title>
806
+ <title>PatternFly</title>
807
807
  <defs>
808
808
  <linearGradient
809
809
  x1="68%"
@@ -1536,7 +1536,7 @@ wrapperTag: div
1536
1536
  <div class="pf-v6-c-masthead__brand">
1537
1537
  <a class="pf-v6-c-masthead__logo" href="#">
1538
1538
  <svg height="37px" viewBox="0 0 679 158">
1539
- <title>PF-HorizontalLogo-Color</title>
1539
+ <title>PatternFly</title>
1540
1540
  <defs>
1541
1541
  <linearGradient
1542
1542
  x1="68%"
@@ -2365,7 +2365,7 @@ wrapperTag: div
2365
2365
  <div class="pf-v6-c-masthead__brand">
2366
2366
  <a class="pf-v6-c-masthead__logo" href="#">
2367
2367
  <svg height="37px" viewBox="0 0 679 158">
2368
- <title>PF-HorizontalLogo-Color</title>
2368
+ <title>PatternFly</title>
2369
2369
  <defs>
2370
2370
  <linearGradient
2371
2371
  x1="68%"
@@ -3190,7 +3190,7 @@ wrapperTag: div
3190
3190
  <div class="pf-v6-c-masthead__brand">
3191
3191
  <a class="pf-v6-c-masthead__logo" href="#">
3192
3192
  <svg height="37px" viewBox="0 0 679 158">
3193
- <title>PF-HorizontalLogo-Color</title>
3193
+ <title>PatternFly</title>
3194
3194
  <defs>
3195
3195
  <linearGradient
3196
3196
  x1="68%"
@@ -3890,7 +3890,7 @@ wrapperTag: div
3890
3890
  <div class="pf-v6-c-masthead__brand">
3891
3891
  <a class="pf-v6-c-masthead__logo" href="#">
3892
3892
  <svg height="37px" viewBox="0 0 679 158">
3893
- <title>PF-HorizontalLogo-Color</title>
3893
+ <title>PatternFly</title>
3894
3894
  <defs>
3895
3895
  <linearGradient
3896
3896
  x1="68%"
@@ -4573,7 +4573,7 @@ wrapperTag: div
4573
4573
  <div class="pf-v6-c-masthead__brand">
4574
4574
  <a class="pf-v6-c-masthead__logo" href="#">
4575
4575
  <svg height="37px" viewBox="0 0 679 158">
4576
- <title>PF-HorizontalLogo-Color</title>
4576
+ <title>PatternFly</title>
4577
4577
  <defs>
4578
4578
  <linearGradient
4579
4579
  x1="68%"
@@ -5238,7 +5238,7 @@ wrapperTag: div
5238
5238
  <div class="pf-v6-c-masthead__brand">
5239
5239
  <a class="pf-v6-c-masthead__logo" href="#">
5240
5240
  <svg height="37px" viewBox="0 0 679 158">
5241
- <title>PF-HorizontalLogo-Color</title>
5241
+ <title>PatternFly</title>
5242
5242
  <defs>
5243
5243
  <linearGradient
5244
5244
  x1="68%"
@@ -5986,7 +5986,7 @@ wrapperTag: div
5986
5986
  <div class="pf-v6-c-masthead__brand">
5987
5987
  <a class="pf-v6-c-masthead__logo" href="#">
5988
5988
  <svg height="37px" viewBox="0 0 679 158">
5989
- <title>PF-HorizontalLogo-Color</title>
5989
+ <title>PatternFly</title>
5990
5990
  <defs>
5991
5991
  <linearGradient
5992
5992
  x1="68%"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.80",
4
+ "version": "6.5.0-prerelease.82",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -19,6 +19,7 @@
19
19
  "backstop:test:felt-hc": "backstop test --config='backstop.js' --felt --high-contrast",
20
20
  "backstop:test:felt-dark-hc": "backstop test --config='backstop.js' --felt --dark --high-contrast",
21
21
  "backstop:test:felt-dark-glass": "backstop test --config='backstop.js' --felt --dark --glass",
22
+ "backstop:test:all": "npm run backstop:test; npm run backstop:test:dark; npm run backstop:test:glass; npm run backstop:test:hc; npm run backstop:test:dark-hc; npm run backstop:test:dark-glass; npm run backstop:test:felt; npm run backstop:test:felt-dark; npm run backstop:test:felt-glass; npm run backstop:test:felt-hc; npm run backstop:test:felt-dark-hc; npm run backstop:test:felt-dark-glass",
22
23
  "backstop:approve": "backstop approve --config='backstop.js'",
23
24
  "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
24
25
  "backstop:approve:glass": "backstop approve --config='backstop.js' --glass",
@@ -31,6 +32,7 @@
31
32
  "backstop:approve:felt-hc": "backstop approve --config='backstop.js' --felt --high-contrast",
32
33
  "backstop:approve:felt-dark-hc": "backstop approve --config='backstop.js' --felt --dark --high-contrast",
33
34
  "backstop:approve:felt-dark-glass": "backstop approve --config='backstop.js' --felt --dark --glass",
35
+ "backstop:approve:all": "npm run backstop:approve; npm run backstop:approve:dark; npm run backstop:approve:glass; npm run backstop:approve:hc; npm run backstop:approve:dark-hc; npm run backstop:approve:dark-glass; npm run backstop:approve:felt; npm run backstop:approve:felt-dark; npm run backstop:approve:felt-glass; npm run backstop:approve:felt-hc; npm run backstop:approve:felt-dark-hc; npm run backstop:approve:felt-dark-glass",
34
36
  "backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
35
37
  "playwright": "node ./node_modules/playwright/cli.js",
36
38
  "build-patternfly": "gulp buildPatternfly",
@@ -69,7 +71,7 @@
69
71
  "@commitlint/config-conventional": "^19.1.0",
70
72
  "@fortawesome/fontawesome": "^1.1.8",
71
73
  "@octokit/rest": "^20.1.0",
72
- "@patternfly/documentation-framework": "6.38.5",
74
+ "@patternfly/documentation-framework": "6.38.7",
73
75
  "@patternfly/patternfly-a11y": "5.1.0",
74
76
  "@patternfly/react-code-editor": "6.4.3",
75
77
  "@patternfly/react-core": "6.4.3",
@@ -134,7 +136,7 @@
134
136
  "axios": "^1.13.1",
135
137
  "body-parser": "^2.2.0",
136
138
  "ws": "^8.18.0",
137
- "follow-redirects": "^1.15.11",
139
+ "follow-redirects": "^1.16.0",
138
140
  "express": "^4.21.2",
139
141
  "parse-git-config": "^3.0.0",
140
142
  "braces": "^3.0.3",
package/patternfly-no-globals.css CHANGED
@@ -10484,6 +10484,7 @@
10484
10484
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10485
10485
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10486
10486
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10487
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
10487
10488
  }
10488
10489
 
10489
10490
  .pf-v6-c-banner {
@@ -10557,6 +10558,9 @@
10557
10558
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
10558
10559
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
10559
10560
  }
10561
+ .pf-v6-c-banner.pf-m-pill {
10562
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
10563
+ }
10560
10564
  .pf-v6-c-banner a {
10561
10565
  color: var(--pf-v6-c-banner--link--Color);
10562
10566
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
@@ -17869,10 +17873,10 @@ ul) {
17869
17873
  }
17870
17874
 
17871
17875
  .pf-v6-c-hero {
17872
- --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
17873
- --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
17876
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
17877
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
17874
17878
  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
17875
- --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
17879
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
17876
17880
  --pf-v6-c-hero--gradient--angle: 109deg;
17877
17881
  --pf-v6-c-hero--gradient--stop-1--light: transparent;
17878
17882
  --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -17880,8 +17884,7 @@ ul) {
17880
17884
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
17881
17885
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
17882
17886
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
17883
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
17884
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
17887
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
17885
17888
  --pf-v6-c-hero--BackgroundImage--light: none;
17886
17889
  --pf-v6-c-hero--BackgroundImage--dark: none;
17887
17890
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -17893,14 +17896,16 @@ ul) {
17893
17896
  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
17894
17897
  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
17895
17898
  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
17896
- --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
17897
- --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
17898
- --pf-v6-c-hero--BorderStartStartRadius: 24px;
17899
- --pf-v6-c-hero--BorderStartEndRadius: 72px;
17900
- --pf-v6-c-hero--BorderEndEndRadius: 24px;
17901
- --pf-v6-c-hero--BorderEndStartRadius: 72px;
17899
+ --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
17900
+ --pf-v6-c-hero--BorderStartEndRadius: 48px;
17901
+ --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
17902
+ --pf-v6-c-hero--BorderEndStartRadius: 48px;
17902
17903
  --pf-v6-c-hero__body--Width: 800px;
17903
17904
  --pf-v6-c-hero__body--MaxWidth: 80%;
17905
+ --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
17906
+ --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
17907
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
17908
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
17904
17909
  }
17905
17910
 
17906
17911
  .pf-v6-c-hero {
@@ -17909,6 +17914,7 @@ ul) {
17909
17914
  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
17910
17915
  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
17911
17916
  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
17917
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
17912
17918
  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%);
17913
17919
  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
17914
17920
  background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -17924,20 +17930,18 @@ ul) {
17924
17930
  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
17925
17931
  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
17926
17932
  }
17933
+ :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
17934
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
17935
+ --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
17936
+ backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
17937
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
17938
+ }
17927
17939
  :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
17928
17940
  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
17929
17941
  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
17930
17942
  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
17931
17943
  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
17932
17944
  }
17933
- :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
17934
- --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
17935
- box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
17936
- }
17937
- .pf-v6-c-hero:not(.pf-m-no-glass) {
17938
- background-color: var(--pf-v6-c-hero--BackgroundColor);
17939
- backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
17940
- }
17941
17945
 
17942
17946
  .pf-v6-c-hero__body {
17943
17947
  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
package/patternfly.css CHANGED
@@ -10631,6 +10631,7 @@ button) {
10631
10631
  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10632
10632
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10633
10633
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10634
+ --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
10634
10635
  }
10635
10636
 
10636
10637
  .pf-v6-c-banner {
@@ -10704,6 +10705,9 @@ button) {
10704
10705
  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
10705
10706
  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
10706
10707
  }
10708
+ .pf-v6-c-banner.pf-m-pill {
10709
+ border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
10710
+ }
10707
10711
  .pf-v6-c-banner a {
10708
10712
  color: var(--pf-v6-c-banner--link--Color);
10709
10713
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
@@ -18016,10 +18020,10 @@ ul) {
18016
18020
  }
18017
18021
 
18018
18022
  .pf-v6-c-hero {
18019
- --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
18020
- --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
18023
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
18024
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
18021
18025
  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
18022
- --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
18026
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
18023
18027
  --pf-v6-c-hero--gradient--angle: 109deg;
18024
18028
  --pf-v6-c-hero--gradient--stop-1--light: transparent;
18025
18029
  --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -18027,8 +18031,7 @@ ul) {
18027
18031
  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
18028
18032
  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
18029
18033
  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
18030
- --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
18031
- --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
18034
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
18032
18035
  --pf-v6-c-hero--BackgroundImage--light: none;
18033
18036
  --pf-v6-c-hero--BackgroundImage--dark: none;
18034
18037
  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -18040,14 +18043,16 @@ ul) {
18040
18043
  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
18041
18044
  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
18042
18045
  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
18043
- --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
18044
- --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
18045
- --pf-v6-c-hero--BorderStartStartRadius: 24px;
18046
- --pf-v6-c-hero--BorderStartEndRadius: 72px;
18047
- --pf-v6-c-hero--BorderEndEndRadius: 24px;
18048
- --pf-v6-c-hero--BorderEndStartRadius: 72px;
18046
+ --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
18047
+ --pf-v6-c-hero--BorderStartEndRadius: 48px;
18048
+ --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
18049
+ --pf-v6-c-hero--BorderEndStartRadius: 48px;
18049
18050
  --pf-v6-c-hero__body--Width: 800px;
18050
18051
  --pf-v6-c-hero__body--MaxWidth: 80%;
18052
+ --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
18053
+ --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
18054
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
18055
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
18051
18056
  }
18052
18057
 
18053
18058
  .pf-v6-c-hero {
@@ -18056,6 +18061,7 @@ ul) {
18056
18061
  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
18057
18062
  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
18058
18063
  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
18064
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
18059
18065
  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%);
18060
18066
  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
18061
18067
  background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -18071,20 +18077,18 @@ ul) {
18071
18077
  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
18072
18078
  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
18073
18079
  }
18080
+ :where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
18081
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
18082
+ --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
18083
+ backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
18084
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
18085
+ }
18074
18086
  :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
18075
18087
  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
18076
18088
  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
18077
18089
  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
18078
18090
  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
18079
18091
  }
18080
- :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
18081
- --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
18082
- box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
18083
- }
18084
- .pf-v6-c-hero:not(.pf-m-no-glass) {
18085
- background-color: var(--pf-v6-c-hero--BackgroundColor);
18086
- backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
18087
- }
18088
18092
 
18089
18093
  .pf-v6-c-hero__body {
18090
18094
  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));