@patternfly/patternfly 6.5.0-prerelease.20 → 6.5.0-prerelease.21

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 (16) hide show
  1. package/components/Compass/compass.css +0 -34
  2. package/components/Compass/compass.scss +0 -41
  3. package/components/Hero/hero.css +74 -0
  4. package/components/Hero/hero.scss +86 -0
  5. package/components/_index.css +150 -109
  6. package/components/_index.scss +2 -1
  7. package/docs/components/Compass/examples/Compass.md +4 -4
  8. package/docs/components/Drawer/examples/Drawer.md +1 -1
  9. package/docs/components/Hero/examples/Hero.md +25 -0
  10. package/docs/demos/Compass/examples/Compass.md +27 -25
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +150 -109
  13. package/patternfly.css +150 -109
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/sass-utilities/namespaces-components.scss +3 -0
package/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 {
@@ -143,29 +132,6 @@
143
132
  overflow: auto;
144
133
  }
145
134
 
146
- .pf-v6-c-compass__hero {
147
- display: flex;
148
- padding-block-start: 32px;
149
- padding-block-end: 32px;
150
- padding-inline-start: 72px;
151
- padding-inline-end: 0;
152
- 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%);
153
- background-repeat: no-repeat;
154
- background-position: right center;
155
- background-size: contain;
156
- border-radius: 24px 72px;
157
- }
158
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
159
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
160
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
161
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
162
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
163
- }
164
-
165
- .pf-v6-c-compass__hero-body {
166
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
167
- }
168
-
169
135
  /* stylelint-disable */
170
136
  @media (max-width: 1200px) {
171
137
  .pf-v6-c-compass * {
package/components/Compass/compass.scss CHANGED
@@ -21,17 +21,6 @@
21
21
  --#{$compass}__message-bar--Width: 450px;
22
22
  --#{$compass}__message-bar--MinWidth: 300px;
23
23
  --#{$compass}__message-bar--MaxWidth: 600px;
24
- --#{$compass}__hero--gradient--angle: 109deg;
25
- --#{$compass}__hero--gradient--stop-1--light: transparent;
26
- --#{$compass}__hero--gradient--stop-2--light: transparent;
27
- --#{$compass}__hero--gradient--stop-3--light: transparent;
28
- --#{$compass}__hero--gradient--stop-1--dark: transparent;
29
- --#{$compass}__hero--gradient--stop-2--dark: transparent;
30
- --#{$compass}__hero--gradient--stop-3--dark: transparent;
31
- --#{$compass}__hero--BackgroundImage--light: none;
32
- --#{$compass}__hero--BackgroundImage--dark: none;
33
- --#{$compass}__hero-body--Width: 800px;
34
- --#{$compass}__hero-body--MaxWidth: 80%;
35
24
  }
36
25
 
37
26
  .#{$compass} {
@@ -170,36 +159,6 @@
170
159
  }
171
160
  }
172
161
 
173
- .#{$compass}__hero {
174
- display: flex;
175
- padding-block-start: 32px;
176
- padding-block-end: 32px;
177
- padding-inline-start: 72px;
178
- padding-inline-end: 0;
179
- background-image: var(--#{$compass}__hero--BackgroundImage, var(--#{$compass}__hero--BackgroundImage--light)),
180
- linear-gradient(
181
- var(--#{$compass}__hero--gradient--angle),
182
- var(--#{$compass}__hero--gradient--stop-1, var(--#{$compass}__hero--gradient--stop-1--light)) 0%,
183
- var(--#{$compass}__hero--gradient--stop-2, var(--#{$compass}__hero--gradient--stop-2--light)) 50%,
184
- var(--#{$compass}__hero--gradient--stop-3, var(--#{$compass}__hero--gradient--stop-3--light)) 100%
185
- );
186
- background-repeat: no-repeat;
187
- background-position: right center;
188
- background-size: contain;
189
- border-radius: 24px 72px;
190
-
191
- :root:where(.pf-v6-theme-dark) & {
192
- --#{$compass}__hero--BackgroundImage: var(--#{$compass}__hero--BackgroundImage--dark);
193
- --#{$compass}__hero--gradient--stop-1: var(--#{$compass}__hero--gradient--stop-1--dark);
194
- --#{$compass}__hero--gradient--stop-2: var(--#{$compass}__hero--gradient--stop-2--dark);
195
- --#{$compass}__hero--gradient--stop-3: var(--#{$compass}__hero--gradient--stop-3--dark);
196
- }
197
- }
198
-
199
- .#{$compass}__hero-body {
200
- width: min(var(--#{$compass}__hero-body--Width), var(--#{$compass}__hero-body--MaxWidth));
201
- }
202
-
203
162
  :where(.pf-v6-theme-dark) .#{$compass} {
204
163
  // dark theme goes here
205
164
  }
package/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/components/Hero/hero.scss ADDED
@@ -0,0 +1,86 @@
1
+ @use '../../sass-utilities' as *;
2
+
3
+ @include pf-root($hero) {
4
+ --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
5
+ --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
6
+ --#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
7
+ --#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8
+ --#{$hero}--gradient--angle: 109deg;
9
+ --#{$hero}--gradient--stop-1--light: transparent;
10
+ --#{$hero}--gradient--stop-2--light: transparent;
11
+ --#{$hero}--gradient--stop-3--light: transparent;
12
+ --#{$hero}--gradient--stop-1--dark: transparent;
13
+ --#{$hero}--gradient--stop-2--dark: transparent;
14
+ --#{$hero}--gradient--stop-3--dark: transparent;
15
+ --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--default);
16
+ --#{$hero}--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
17
+ --#{$hero}--BackgroundImage--light: none;
18
+ --#{$hero}--BackgroundImage--dark: none;
19
+ --#{$hero}--BackgroundRepeat: no-repeat;
20
+ --#{$hero}--BackgroundPosition: right center;
21
+ --#{$hero}--BackgroundSize: contain;
22
+ --#{$hero}--BorderStyle: solid;
23
+ --#{$hero}--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
24
+ --#{$hero}--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
25
+ --#{$hero}--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
26
+ --#{$hero}--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
27
+ --#{$hero}--BorderColor: var(--pf-t--global--border--color--default);
28
+ --#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
29
+ --#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
30
+ --#{$hero}--BorderStartStartRadius: 24px;
31
+ --#{$hero}--BorderStartEndRadius: 72px;
32
+ --#{$hero}--BorderEndEndRadius: 24px;
33
+ --#{$hero}--BorderEndStartRadius: 72px;
34
+ --#{$hero}__body--Width: 800px;
35
+ --#{$hero}__body--MaxWidth: 80%;
36
+ }
37
+
38
+ .#{$hero} {
39
+ display: flex;
40
+ padding-block-start: var(--#{$hero}--PaddingBlockStart);
41
+ padding-block-end: var(--#{$hero}--PaddingBlockEnd);
42
+ padding-inline-start: var(--#{$hero}--PaddingInlineStart);
43
+ padding-inline-end: var(--#{$hero}--PaddingInlineEnd);
44
+ background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),
45
+ linear-gradient(
46
+ var(--#{$hero}--gradient--angle),
47
+ var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
48
+ var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
49
+ var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
50
+ );
51
+ background-repeat: var(--#{$hero}--BackgroundRepeat);
52
+ background-position: var(--#{$hero}--BackgroundPosition);
53
+ background-size: var(--#{$hero}--BackgroundSize);
54
+ border-color: var(--#{$hero}--BorderColor);
55
+ border-style: var(--#{$hero}--BorderStyle);
56
+ border-block-start-width: var(--#{$hero}--BorderBlockStartWidth);
57
+ border-block-end-width: var(--#{$hero}--BorderBlockEndWidth);
58
+ border-inline-start-width: var(--#{$hero}--BorderInlineStartWidth);
59
+ border-inline-end-width: var(--#{$hero}--BorderInlineEndWidth);
60
+ border-start-start-radius: var(--#{$hero}--BorderStartStartRadius);
61
+ border-start-end-radius: var(--#{$hero}--BorderStartEndRadius);
62
+ border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
63
+ border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
64
+
65
+ :root:where(.#{$pf-prefix}theme-dark) & {
66
+ --#{$hero}--BackgroundImage: var(--#{$hero}--BackgroundImage--dark);
67
+ --#{$hero}--gradient--stop-1: var(--#{$hero}--gradient--stop-1--dark);
68
+ --#{$hero}--gradient--stop-2: var(--#{$hero}--gradient--stop-2--dark);
69
+ --#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
70
+ }
71
+
72
+ :root:where(.#{$pf-prefix}theme-glass) & {
73
+ --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
74
+
75
+ box-shadow: var(--#{$hero}--m-glass--BoxShadow);
76
+ }
77
+
78
+ &:not(.pf-m-no-glass) {
79
+ background-color: var(--#{$hero}--BackgroundColor);
80
+ backdrop-filter: var(--#{$hero}--BackdropFilter);
81
+ }
82
+ }
83
+
84
+ .#{$hero}__body {
85
+ width: min(var(--#{$hero}__body--Width), var(--#{$hero}__body--MaxWidth));
86
+ }
package/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 {
@@ -3652,29 +3641,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3652
3641
  overflow: auto;
3653
3642
  }
3654
3643
 
3655
- .pf-v6-c-compass__hero {
3656
- display: flex;
3657
- padding-block-start: 32px;
3658
- padding-block-end: 32px;
3659
- padding-inline-start: 72px;
3660
- padding-inline-end: 0;
3661
- 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%);
3662
- background-repeat: no-repeat;
3663
- background-position: right center;
3664
- background-size: contain;
3665
- border-radius: 24px 72px;
3666
- }
3667
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
3668
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
3669
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
3670
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
3671
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
3672
- }
3673
-
3674
- .pf-v6-c-compass__hero-body {
3675
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3676
- }
3677
-
3678
3644
  /* stylelint-disable */
3679
3645
  @media (max-width: 1200px) {
3680
3646
  .pf-v6-c-compass * {
@@ -8129,81 +8095,6 @@ ul) {
8129
8095
  pointer-events: none;
8130
8096
  }
8131
8097
 
8132
- .pf-v6-c-hint {
8133
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8134
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8135
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8136
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8137
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8138
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8139
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8140
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8141
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8142
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8143
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8144
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8145
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8146
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8147
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8148
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8149
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8150
- }
8151
-
8152
- .pf-v6-c-hint {
8153
- display: grid;
8154
- grid-template-columns: 1fr auto;
8155
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8156
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8157
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8158
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8159
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8160
- color: var(--pf-v6-c-hint--Color);
8161
- background-color: var(--pf-v6-c-hint--BackgroundColor);
8162
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8163
- border-radius: var(--pf-v6-c-hint--BorderRadius);
8164
- }
8165
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8166
- text-align: start;
8167
- white-space: normal;
8168
- }
8169
-
8170
- .pf-v6-c-hint__actions {
8171
- display: inline-grid;
8172
- grid-row: 1;
8173
- grid-column: 2;
8174
- grid-auto-flow: column;
8175
- align-self: start;
8176
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8177
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8178
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8179
- text-align: end;
8180
- }
8181
- .pf-v6-c-hint__actions.pf-m-no-offset {
8182
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8183
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8184
- }
8185
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8186
- grid-column: 1;
8187
- }
8188
-
8189
- .pf-v6-c-hint__title {
8190
- align-self: center;
8191
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
8192
- }
8193
-
8194
- .pf-v6-c-hint__body {
8195
- grid-column: 1/-1;
8196
- font-size: var(--pf-v6-c-hint__body--FontSize);
8197
- }
8198
-
8199
- .pf-v6-c-hint__footer {
8200
- grid-column: 1/-1;
8201
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8202
- }
8203
- .pf-v6-c-hint__footer > :not(:last-child) {
8204
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8205
- }
8206
-
8207
8098
  .pf-v6-c-helper-text {
8208
8099
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
8209
8100
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8289,6 +8180,156 @@ ul) {
8289
8180
  color: var(--pf-v6-c-helper-text__item-text--Color);
8290
8181
  }
8291
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
+
8292
8333
  .pf-v6-c-icon {
8293
8334
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8294
8335
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
package/components/_index.scss CHANGED
@@ -32,8 +32,9 @@
32
32
  @use "./FileUpload/file-upload";
33
33
  @use "./Form/form";
34
34
  @use "./FormControl/form-control";
35
- @use "./Hint/hint";
36
35
  @use "./HelperText/helper-text";
36
+ @use "./Hero/hero";
37
+ @use "./Hint/hint";
37
38
  @use "./Icon/icon";
38
39
  @use "./InlineEdit/inline-edit";
39
40
  @use "./InputGroup/input-group";
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -21,8 +21,9 @@ cssPrefix: pf-v6-c-compass
21
21
  <div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
22
22
 
23
23
  <div class="pf-v6-c-compass__main">
24
- <div class="pf-v6-c-compass__panel pf-v6-c-compass__hero">hero</div>
25
-
24
+ <div class="pf-v6-c-compass__hero">
25
+ <div class="pf-v6-c-hero">hero</div>
26
+ </div>
26
27
  <div class="pf-v6-c-compass__main-header">main header</div>
27
28
 
28
29
  <div class="pf-v6-c-compass__content">content</div>
@@ -49,11 +50,10 @@ cssPrefix: pf-v6-c-compass
49
50
  | `.pf-v6-c-compass__profile` | `<div>` | Initiates the compass profile. |
50
51
  | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a compass sidebar. **Required** |
51
52
  | `.pf-v6-c-compass__main` | `<div>` | Initiates the compass main wrapper. **Required** |
52
- | `.pf-v6-c-compass__hero` | `<div>` | Initiates the compass logo hero. |
53
- | `.pf-v6-c-compass__hero-body` | `<div>` | Initiates the compass hero body. |
54
53
  | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the compass main header. |
55
54
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
56
55
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
56
+ | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
57
57
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
58
58
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
59
59
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -878,7 +878,7 @@ cssPrefix: pf-v6-c-drawer
878
878
  | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
879
879
  | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
880
880
  | `.pf-m-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
881
- | `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel remove glass styling when using glass theme. |
881
+ | `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel to remove glass styling when using glass theme. |
882
882
  | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
883
883
  | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
884
884
  | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
package/docs/components/Hero/examples/Hero.md ADDED
@@ -0,0 +1,25 @@
1
+ ---
2
+ id: 'Hero'
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-v6-c-hero
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html isBeta
11
+ <div class="pf-v6-c-hero">
12
+ <div class="pf-v6-c-hero__body">Basic hero content</div>
13
+ </div>
14
+
15
+ ```
16
+
17
+ ## Documentation
18
+
19
+ ### Usage
20
+
21
+ | Class | Applied to | Outcome |
22
+ | -- | -- | -- |
23
+ | `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
24
+ | `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
25
+ | `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |