@patternfly/react-styles 6.5.0-prerelease.4 → 6.5.0-prerelease.5

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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Compass/compass.css +0 -35
  3. package/css/components/Compass/compass.d.ts +0 -2
  4. package/css/components/Compass/compass.js +0 -2
  5. package/css/components/Compass/compass.mjs +0 -2
  6. package/css/components/Hero/hero.css +74 -0
  7. package/css/components/Hero/hero.d.ts +11 -0
  8. package/css/components/Hero/hero.js +12 -0
  9. package/css/components/Hero/hero.mjs +10 -0
  10. package/css/components/_index.css +150 -110
  11. package/css/components/_index.d.ts +3 -2
  12. package/css/components/_index.js +3 -2
  13. package/css/components/_index.mjs +3 -2
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
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.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.4...@patternfly/react-styles@6.5.0-prerelease.5) (2025-11-12)
7
+
8
+ ### Features
9
+
10
+ - **Hero:** added component ([#12131](https://github.com/patternfly/patternfly-react/issues/12131)) ([8da87a2](https://github.com/patternfly/patternfly-react/commit/8da87a2615bb6cfc350a52677ec6bdae335bb6f8))
11
+
6
12
  # [6.5.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.3...@patternfly/react-styles@6.5.0-prerelease.4) (2025-11-06)
7
13
 
8
14
  ### Features
package/css/components/Compass/compass.css CHANGED
@@ -19,17 +19,6 @@
19
19
  --pf-v6-c-compass__message-bar--Width: 450px;
20
20
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
21
21
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
22
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
23
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
24
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
25
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
26
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
27
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
28
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
29
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
30
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
31
- --pf-v6-c-compass__hero-body--Width: 800px;
32
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
33
22
  }
34
23
 
35
24
  .pf-v6-c-compass {
@@ -42,7 +31,6 @@
42
31
  justify-content: center;
43
32
  height: 100dvh;
44
33
  padding: var(--pf-v6-c-compass--Padding);
45
- margin-inline: auto;
46
34
  background-image: var(--pf-v6-c-compass--BackgroundImage);
47
35
  background-size: cover;
48
36
  }
@@ -144,29 +132,6 @@
144
132
  overflow: auto;
145
133
  }
146
134
 
147
- .pf-v6-c-compass__hero {
148
- display: flex;
149
- padding-block-start: 32px;
150
- padding-block-end: 32px;
151
- padding-inline-start: 72px;
152
- padding-inline-end: 0;
153
- background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
154
- background-repeat: no-repeat;
155
- background-position: right center;
156
- background-size: contain;
157
- border-radius: 24px 72px;
158
- }
159
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
160
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
161
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
162
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
163
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
164
- }
165
-
166
- .pf-v6-c-compass__hero-body {
167
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
168
- }
169
-
170
135
  /* stylelint-disable */
171
136
  @media (max-width: 1200px) {
172
137
  .pf-v6-c-compass * {
package/css/components/Compass/compass.d.ts CHANGED
@@ -4,8 +4,6 @@ declare const _default: {
4
4
  "compassContent": "pf-v6-c-compass__content",
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
- "compassHero": "pf-v6-c-compass__hero",
8
- "compassHeroBody": "pf-v6-c-compass__hero-body",
9
7
  "compassMain": "pf-v6-c-compass__main",
10
8
  "compassMessageBar": "pf-v6-c-compass__message-bar",
11
9
  "compassNav": "pf-v6-c-compass__nav",
package/css/components/Compass/compass.js CHANGED
@@ -6,8 +6,6 @@ exports.default = {
6
6
  "compassContent": "pf-v6-c-compass__content",
7
7
  "compassFooter": "pf-v6-c-compass__footer",
8
8
  "compassHeader": "pf-v6-c-compass__header",
9
- "compassHero": "pf-v6-c-compass__hero",
10
- "compassHeroBody": "pf-v6-c-compass__hero-body",
11
9
  "compassMain": "pf-v6-c-compass__main",
12
10
  "compassMessageBar": "pf-v6-c-compass__message-bar",
13
11
  "compassNav": "pf-v6-c-compass__nav",
package/css/components/Compass/compass.mjs CHANGED
@@ -4,8 +4,6 @@ export default {
4
4
  "compassContent": "pf-v6-c-compass__content",
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
- "compassHero": "pf-v6-c-compass__hero",
8
- "compassHeroBody": "pf-v6-c-compass__hero-body",
9
7
  "compassMain": "pf-v6-c-compass__main",
10
8
  "compassMessageBar": "pf-v6-c-compass__message-bar",
11
9
  "compassNav": "pf-v6-c-compass__nav",
package/css/components/Hero/hero.css ADDED
@@ -0,0 +1,74 @@
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);
4
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
5
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
6
+ --pf-v6-c-hero--gradient--angle: 109deg;
7
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
9
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
10
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
11
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
12
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
13
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
+ --pf-v6-c-hero--BackgroundImage--light: none;
16
+ --pf-v6-c-hero--BackgroundImage--dark: none;
17
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
18
+ --pf-v6-c-hero--BackgroundPosition: right center;
19
+ --pf-v6-c-hero--BackgroundSize: contain;
20
+ --pf-v6-c-hero--BorderStyle: solid;
21
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
22
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
23
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
24
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
25
+ --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;
32
+ --pf-v6-c-hero__body--Width: 800px;
33
+ --pf-v6-c-hero__body--MaxWidth: 80%;
34
+ }
35
+
36
+ .pf-v6-c-hero {
37
+ display: flex;
38
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
39
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
40
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
41
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
42
+ 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
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
44
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
45
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
46
+ border-color: var(--pf-v6-c-hero--BorderColor);
47
+ border-style: var(--pf-v6-c-hero--BorderStyle);
48
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
49
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
50
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
51
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
52
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
53
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
54
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
55
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
56
+ }
57
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
58
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
59
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
60
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
61
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
62
+ }
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
+
72
+ .pf-v6-c-hero__body {
73
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
74
+ }
package/css/components/Hero/hero.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import './hero.css';
2
+ declare const _default: {
3
+ "hero": "pf-v6-c-hero",
4
+ "heroBody": "pf-v6-c-hero__body",
5
+ "modifiers": {
6
+ "noGlass": "pf-m-no-glass"
7
+ },
8
+ "themeDark": "pf-v6-theme-dark",
9
+ "themeGlass": "pf-v6-theme-glass"
10
+ };
11
+ export default _default;
package/css/components/Hero/hero.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./hero.css');
4
+ exports.default = {
5
+ "hero": "pf-v6-c-hero",
6
+ "heroBody": "pf-v6-c-hero__body",
7
+ "modifiers": {
8
+ "noGlass": "pf-m-no-glass"
9
+ },
10
+ "themeDark": "pf-v6-theme-dark",
11
+ "themeGlass": "pf-v6-theme-glass"
12
+ };
package/css/components/Hero/hero.mjs ADDED
@@ -0,0 +1,10 @@
1
+ import './hero.css';
2
+ export default {
3
+ "hero": "pf-v6-c-hero",
4
+ "heroBody": "pf-v6-c-hero__body",
5
+ "modifiers": {
6
+ "noGlass": "pf-m-no-glass"
7
+ },
8
+ "themeDark": "pf-v6-theme-dark",
9
+ "themeGlass": "pf-v6-theme-glass"
10
+ };
package/css/components/_index.css CHANGED
@@ -3528,17 +3528,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3528
3528
  --pf-v6-c-compass__message-bar--Width: 450px;
3529
3529
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3530
3530
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3531
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
3532
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
3533
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
3534
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
3535
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
3536
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
3537
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
3538
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
3539
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
3540
- --pf-v6-c-compass__hero-body--Width: 800px;
3541
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
3542
3531
  }
3543
3532
 
3544
3533
  .pf-v6-c-compass {
@@ -3551,7 +3540,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3551
3540
  justify-content: center;
3552
3541
  height: 100dvh;
3553
3542
  padding: var(--pf-v6-c-compass--Padding);
3554
- margin-inline: auto;
3555
3543
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3556
3544
  background-size: cover;
3557
3545
  }
@@ -3653,29 +3641,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3653
3641
  overflow: auto;
3654
3642
  }
3655
3643
 
3656
- .pf-v6-c-compass__hero {
3657
- display: flex;
3658
- padding-block-start: 32px;
3659
- padding-block-end: 32px;
3660
- padding-inline-start: 72px;
3661
- padding-inline-end: 0;
3662
- background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
3663
- background-repeat: no-repeat;
3664
- background-position: right center;
3665
- background-size: contain;
3666
- border-radius: 24px 72px;
3667
- }
3668
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
3669
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
3670
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
3671
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
3672
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
3673
- }
3674
-
3675
- .pf-v6-c-compass__hero-body {
3676
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3677
- }
3678
-
3679
3644
  /* stylelint-disable */
3680
3645
  @media (max-width: 1200px) {
3681
3646
  .pf-v6-c-compass * {
@@ -8130,81 +8095,6 @@ ul) {
8130
8095
  pointer-events: none;
8131
8096
  }
8132
8097
 
8133
- .pf-v6-c-hint {
8134
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8135
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8136
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8137
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8138
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8139
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8140
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8141
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8142
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8143
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8144
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8145
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8146
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8147
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8148
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8149
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8150
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8151
- }
8152
-
8153
- .pf-v6-c-hint {
8154
- display: grid;
8155
- grid-template-columns: 1fr auto;
8156
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8157
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8158
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8159
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8160
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8161
- color: var(--pf-v6-c-hint--Color);
8162
- background-color: var(--pf-v6-c-hint--BackgroundColor);
8163
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8164
- border-radius: var(--pf-v6-c-hint--BorderRadius);
8165
- }
8166
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8167
- text-align: start;
8168
- white-space: normal;
8169
- }
8170
-
8171
- .pf-v6-c-hint__actions {
8172
- display: inline-grid;
8173
- grid-row: 1;
8174
- grid-column: 2;
8175
- grid-auto-flow: column;
8176
- align-self: start;
8177
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8178
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8179
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8180
- text-align: end;
8181
- }
8182
- .pf-v6-c-hint__actions.pf-m-no-offset {
8183
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8184
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8185
- }
8186
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8187
- grid-column: 1;
8188
- }
8189
-
8190
- .pf-v6-c-hint__title {
8191
- align-self: center;
8192
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
8193
- }
8194
-
8195
- .pf-v6-c-hint__body {
8196
- grid-column: 1/-1;
8197
- font-size: var(--pf-v6-c-hint__body--FontSize);
8198
- }
8199
-
8200
- .pf-v6-c-hint__footer {
8201
- grid-column: 1/-1;
8202
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8203
- }
8204
- .pf-v6-c-hint__footer > :not(:last-child) {
8205
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8206
- }
8207
-
8208
8098
  .pf-v6-c-helper-text {
8209
8099
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
8210
8100
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8290,6 +8180,156 @@ ul) {
8290
8180
  color: var(--pf-v6-c-helper-text__item-text--Color);
8291
8181
  }
8292
8182
 
8183
+ .pf-v6-c-hero {
8184
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8185
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8186
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8187
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8188
+ --pf-v6-c-hero--gradient--angle: 109deg;
8189
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8190
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8191
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8192
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8193
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8194
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8195
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
8196
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
8197
+ --pf-v6-c-hero--BackgroundImage--light: none;
8198
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8199
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8200
+ --pf-v6-c-hero--BackgroundPosition: right center;
8201
+ --pf-v6-c-hero--BackgroundSize: contain;
8202
+ --pf-v6-c-hero--BorderStyle: solid;
8203
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8204
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8205
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8206
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8207
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8208
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8209
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8210
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8211
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8212
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8213
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8214
+ --pf-v6-c-hero__body--Width: 800px;
8215
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8216
+ }
8217
+
8218
+ .pf-v6-c-hero {
8219
+ display: flex;
8220
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8221
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8222
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8223
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8224
+ 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%);
8225
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8226
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8227
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8228
+ border-color: var(--pf-v6-c-hero--BorderColor);
8229
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8230
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8231
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8232
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8233
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8234
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8235
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8236
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8237
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8238
+ }
8239
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8240
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8241
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8242
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8243
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8244
+ }
8245
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8246
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8247
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8248
+ }
8249
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8250
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8251
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8252
+ }
8253
+
8254
+ .pf-v6-c-hero__body {
8255
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8256
+ }
8257
+
8258
+ .pf-v6-c-hint {
8259
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8260
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8261
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8262
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8263
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8264
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8265
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8266
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8267
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8268
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8269
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8270
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8271
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8272
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8273
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8274
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8275
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8276
+ }
8277
+
8278
+ .pf-v6-c-hint {
8279
+ display: grid;
8280
+ grid-template-columns: 1fr auto;
8281
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8282
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8283
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8284
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8285
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8286
+ color: var(--pf-v6-c-hint--Color);
8287
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8288
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8289
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8290
+ }
8291
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8292
+ text-align: start;
8293
+ white-space: normal;
8294
+ }
8295
+
8296
+ .pf-v6-c-hint__actions {
8297
+ display: inline-grid;
8298
+ grid-row: 1;
8299
+ grid-column: 2;
8300
+ grid-auto-flow: column;
8301
+ align-self: start;
8302
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8303
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8304
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8305
+ text-align: end;
8306
+ }
8307
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8308
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8309
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8310
+ }
8311
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8312
+ grid-column: 1;
8313
+ }
8314
+
8315
+ .pf-v6-c-hint__title {
8316
+ align-self: center;
8317
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8318
+ }
8319
+
8320
+ .pf-v6-c-hint__body {
8321
+ grid-column: 1/-1;
8322
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8323
+ }
8324
+
8325
+ .pf-v6-c-hint__footer {
8326
+ grid-column: 1/-1;
8327
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8328
+ }
8329
+ .pf-v6-c-hint__footer > :not(:last-child) {
8330
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8331
+ }
8332
+
8293
8333
  .pf-v6-c-icon {
8294
8334
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8295
8335
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
package/css/components/_index.d.ts CHANGED
@@ -116,8 +116,6 @@ declare const _default: {
116
116
  "compassContent": "pf-v6-c-compass__content",
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
- "compassHero": "pf-v6-c-compass__hero",
120
- "compassHeroBody": "pf-v6-c-compass__hero-body",
121
119
  "compassMain": "pf-v6-c-compass__main",
122
120
  "compassMessageBar": "pf-v6-c-compass__message-bar",
123
121
  "compassNav": "pf-v6-c-compass__nav",
@@ -259,6 +257,8 @@ declare const _default: {
259
257
  "helperTextItem": "pf-v6-c-helper-text__item",
260
258
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
261
259
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
260
+ "hero": "pf-v6-c-hero",
261
+ "heroBody": "pf-v6-c-hero__body",
262
262
  "hint": "pf-v6-c-hint",
263
263
  "hintActions": "pf-v6-c-hint__actions",
264
264
  "hintBody": "pf-v6-c-hint__body",
@@ -1350,6 +1350,7 @@ declare const _default: {
1350
1350
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1351
1351
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1352
1352
  "themeDark": "pf-v6-theme-dark",
1353
+ "themeGlass": "pf-v6-theme-glass",
1353
1354
  "tile": "pf-v6-c-tile",
1354
1355
  "tileBody": "pf-v6-c-tile__body",
1355
1356
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.js CHANGED
@@ -118,8 +118,6 @@ exports.default = {
118
118
  "compassContent": "pf-v6-c-compass__content",
119
119
  "compassFooter": "pf-v6-c-compass__footer",
120
120
  "compassHeader": "pf-v6-c-compass__header",
121
- "compassHero": "pf-v6-c-compass__hero",
122
- "compassHeroBody": "pf-v6-c-compass__hero-body",
123
121
  "compassMain": "pf-v6-c-compass__main",
124
122
  "compassMessageBar": "pf-v6-c-compass__message-bar",
125
123
  "compassNav": "pf-v6-c-compass__nav",
@@ -261,6 +259,8 @@ exports.default = {
261
259
  "helperTextItem": "pf-v6-c-helper-text__item",
262
260
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
263
261
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
262
+ "hero": "pf-v6-c-hero",
263
+ "heroBody": "pf-v6-c-hero__body",
264
264
  "hint": "pf-v6-c-hint",
265
265
  "hintActions": "pf-v6-c-hint__actions",
266
266
  "hintBody": "pf-v6-c-hint__body",
@@ -1352,6 +1352,7 @@ exports.default = {
1352
1352
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1353
1353
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1354
1354
  "themeDark": "pf-v6-theme-dark",
1355
+ "themeGlass": "pf-v6-theme-glass",
1355
1356
  "tile": "pf-v6-c-tile",
1356
1357
  "tileBody": "pf-v6-c-tile__body",
1357
1358
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.mjs CHANGED
@@ -116,8 +116,6 @@ export default {
116
116
  "compassContent": "pf-v6-c-compass__content",
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
- "compassHero": "pf-v6-c-compass__hero",
120
- "compassHeroBody": "pf-v6-c-compass__hero-body",
121
119
  "compassMain": "pf-v6-c-compass__main",
122
120
  "compassMessageBar": "pf-v6-c-compass__message-bar",
123
121
  "compassNav": "pf-v6-c-compass__nav",
@@ -259,6 +257,8 @@ export default {
259
257
  "helperTextItem": "pf-v6-c-helper-text__item",
260
258
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
261
259
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
260
+ "hero": "pf-v6-c-hero",
261
+ "heroBody": "pf-v6-c-hero__body",
262
262
  "hint": "pf-v6-c-hint",
263
263
  "hintActions": "pf-v6-c-hint__actions",
264
264
  "hintBody": "pf-v6-c-hint__body",
@@ -1350,6 +1350,7 @@ export default {
1350
1350
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1351
1351
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1352
1352
  "themeDark": "pf-v6-theme-dark",
1353
+ "themeGlass": "pf-v6-theme-glass",
1353
1354
  "tile": "pf-v6-c-tile",
1354
1355
  "tileBody": "pf-v6-c-tile__body",
1355
1356
  "tileHeader": "pf-v6-c-tile__header",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.4",
3
+ "version": "6.5.0-prerelease.5",
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.19",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.21",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "3fe4262830dc7bbeea2360dfc8a9c584cf752520"
27
+ "gitHead": "b1ae7eb5e94f906f4373f38e14d9125e5cccd1c5"
28
28
  }