@patternfly/react-styles 6.5.0-prerelease.3 → 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 (19) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/Compass/compass.css +4 -57
  3. package/css/components/Compass/compass.d.ts +1 -4
  4. package/css/components/Compass/compass.js +1 -4
  5. package/css/components/Compass/compass.mjs +1 -4
  6. package/css/components/Drawer/drawer.css +8 -0
  7. package/css/components/Drawer/drawer.d.ts +1 -0
  8. package/css/components/Drawer/drawer.js +1 -0
  9. package/css/components/Drawer/drawer.mjs +1 -0
  10. package/css/components/Hero/hero.css +74 -0
  11. package/css/components/Hero/hero.d.ts +11 -0
  12. package/css/components/Hero/hero.js +12 -0
  13. package/css/components/Hero/hero.mjs +10 -0
  14. package/css/components/Tabs/tabs.css +0 -1
  15. package/css/components/_index.css +162 -133
  16. package/css/components/_index.d.ts +3 -3
  17. package/css/components/_index.js +3 -3
  18. package/css/components/_index.mjs +3 -3
  19. 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.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
+
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)
13
+
14
+ ### Features
15
+
16
+ - **drawer:** add no-glass panel variant, test ([#12125](https://github.com/patternfly/patternfly-react/issues/12125)) ([a10ca34](https://github.com/patternfly/patternfly-react/commit/a10ca34069d25caa2954ef464d5b82a9057e0316))
17
+
6
18
  # [6.5.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.2...@patternfly/react-styles@6.5.0-prerelease.3) (2025-11-05)
7
19
 
8
20
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/Compass/compass.css CHANGED
@@ -8,15 +8,8 @@
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
9
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
12
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
13
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
14
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
15
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
16
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
17
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
18
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
19
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
11
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
20
13
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
21
14
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
22
15
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -26,17 +19,6 @@
26
19
  --pf-v6-c-compass__message-bar--Width: 450px;
27
20
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
28
21
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
29
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
30
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
31
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
32
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
33
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
34
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
35
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
36
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
37
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
38
- --pf-v6-c-compass__hero-body--Width: 800px;
39
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
40
22
  }
41
23
 
42
24
  .pf-v6-c-compass {
@@ -49,7 +31,6 @@
49
31
  justify-content: center;
50
32
  height: 100dvh;
51
33
  padding: var(--pf-v6-c-compass--Padding);
52
- margin-inline: auto;
53
34
  background-image: var(--pf-v6-c-compass--BackgroundImage);
54
35
  background-size: cover;
55
36
  }
@@ -129,16 +110,12 @@
129
110
 
130
111
  .pf-v6-c-compass__panel {
131
112
  padding: var(--pf-v6-c-compass__panel--Padding);
132
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
133
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
113
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
114
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
134
115
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
135
116
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
136
117
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
137
118
  }
138
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
139
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
140
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
141
- }
142
119
  .pf-v6-c-compass__panel.pf-m-no-border {
143
120
  border-width: 0;
144
121
  }
@@ -155,36 +132,6 @@
155
132
  overflow: auto;
156
133
  }
157
134
 
158
- .pf-v6-c-compass__hero {
159
- display: flex;
160
- padding-block-start: 32px;
161
- padding-block-end: 32px;
162
- padding-inline-start: 72px;
163
- padding-inline-end: 0;
164
- 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%);
165
- background-repeat: no-repeat;
166
- background-position: right center;
167
- background-size: contain;
168
- border-radius: 24px 72px;
169
- }
170
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
171
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
172
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
173
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
174
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
175
- }
176
-
177
- .pf-v6-c-compass__hero-body {
178
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
179
- }
180
-
181
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
182
- --pf-v6-c-compass--glass--opacity: 100%;
183
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
184
- --pf-v6-c-compass--glass--blend-mode: none;
185
- --pf-v6-c-compass--glass--blend-mode--dark: none;
186
- }
187
-
188
135
  /* stylelint-disable */
189
136
  @media (max-width: 1200px) {
190
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",
@@ -24,7 +22,6 @@ declare const _default: {
24
22
  "pill": "pf-m-pill",
25
23
  "scrollable": "pf-m-scrollable"
26
24
  },
27
- "themeDark": "pf-v6-theme-dark",
28
- "themeNoGlass": "pf-v6-theme-no-glass"
25
+ "themeDark": "pf-v6-theme-dark"
29
26
  };
30
27
  export default _default;
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",
@@ -26,6 +24,5 @@ exports.default = {
26
24
  "pill": "pf-m-pill",
27
25
  "scrollable": "pf-m-scrollable"
28
26
  },
29
- "themeDark": "pf-v6-theme-dark",
30
- "themeNoGlass": "pf-v6-theme-no-glass"
27
+ "themeDark": "pf-v6-theme-dark"
31
28
  };
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",
@@ -24,6 +22,5 @@ export default {
24
22
  "pill": "pf-m-pill",
25
23
  "scrollable": "pf-m-scrollable"
26
24
  },
27
- "themeDark": "pf-v6-theme-dark",
28
- "themeNoGlass": "pf-v6-theme-no-glass"
25
+ "themeDark": "pf-v6-theme-dark"
29
26
  };
package/css/components/Drawer/drawer.css CHANGED
@@ -53,6 +53,9 @@
53
53
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
54
54
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
55
55
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
56
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
57
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
58
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
56
59
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
57
60
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
61
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -229,6 +232,11 @@
229
232
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
230
233
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
231
234
  }
235
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
236
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
237
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
238
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
239
+ }
232
240
  }
233
241
 
234
242
  .pf-v6-c-drawer__section {
package/css/components/Drawer/drawer.d.ts CHANGED
@@ -24,6 +24,7 @@ declare const _default: {
24
24
  "expanded": "pf-m-expanded",
25
25
  "resizing": "pf-m-resizing",
26
26
  "pill": "pf-m-pill",
27
+ "noGlass": "pf-m-no-glass",
27
28
  "secondary": "pf-m-secondary",
28
29
  "noBackground": "pf-m-no-background",
29
30
  "primary": "pf-m-primary",
package/css/components/Drawer/drawer.js CHANGED
@@ -26,6 +26,7 @@ exports.default = {
26
26
  "expanded": "pf-m-expanded",
27
27
  "resizing": "pf-m-resizing",
28
28
  "pill": "pf-m-pill",
29
+ "noGlass": "pf-m-no-glass",
29
30
  "secondary": "pf-m-secondary",
30
31
  "noBackground": "pf-m-no-background",
31
32
  "primary": "pf-m-primary",
package/css/components/Drawer/drawer.mjs CHANGED
@@ -24,6 +24,7 @@ export default {
24
24
  "expanded": "pf-m-expanded",
25
25
  "resizing": "pf-m-resizing",
26
26
  "pill": "pf-m-pill",
27
+ "noGlass": "pf-m-no-glass",
27
28
  "secondary": "pf-m-secondary",
28
29
  "noBackground": "pf-m-no-background",
29
30
  "primary": "pf-m-primary",
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/Tabs/tabs.css CHANGED
@@ -449,7 +449,6 @@
449
449
  .pf-v6-c-tabs.pf-m-nav {
450
450
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
451
451
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
452
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
453
452
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
454
453
  }
455
454
  .pf-v6-c-tabs.pf-m-nav::before,
package/css/components/_index.css CHANGED
@@ -3517,15 +3517,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3518
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3519
3519
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3520
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
3521
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
3522
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
3523
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
3524
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
3525
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
3526
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
3527
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
3528
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
3520
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3521
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3529
3522
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3530
3523
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3531
3524
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -3535,17 +3528,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3535
3528
  --pf-v6-c-compass__message-bar--Width: 450px;
3536
3529
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3537
3530
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3538
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
3539
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
3540
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
3541
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
3542
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
3543
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
3544
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
3545
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
3546
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
3547
- --pf-v6-c-compass__hero-body--Width: 800px;
3548
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
3549
3531
  }
3550
3532
 
3551
3533
  .pf-v6-c-compass {
@@ -3558,7 +3540,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3558
3540
  justify-content: center;
3559
3541
  height: 100dvh;
3560
3542
  padding: var(--pf-v6-c-compass--Padding);
3561
- margin-inline: auto;
3562
3543
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3563
3544
  background-size: cover;
3564
3545
  }
@@ -3638,16 +3619,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3638
3619
 
3639
3620
  .pf-v6-c-compass__panel {
3640
3621
  padding: var(--pf-v6-c-compass__panel--Padding);
3641
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
3642
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
3622
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3623
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3643
3624
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3644
3625
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3645
3626
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3646
3627
  }
3647
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
3648
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
3649
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
3650
- }
3651
3628
  .pf-v6-c-compass__panel.pf-m-no-border {
3652
3629
  border-width: 0;
3653
3630
  }
@@ -3664,36 +3641,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3664
3641
  overflow: auto;
3665
3642
  }
3666
3643
 
3667
- .pf-v6-c-compass__hero {
3668
- display: flex;
3669
- padding-block-start: 32px;
3670
- padding-block-end: 32px;
3671
- padding-inline-start: 72px;
3672
- padding-inline-end: 0;
3673
- 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%);
3674
- background-repeat: no-repeat;
3675
- background-position: right center;
3676
- background-size: contain;
3677
- border-radius: 24px 72px;
3678
- }
3679
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
3680
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
3681
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
3682
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
3683
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
3684
- }
3685
-
3686
- .pf-v6-c-compass__hero-body {
3687
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3688
- }
3689
-
3690
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
3691
- --pf-v6-c-compass--glass--opacity: 100%;
3692
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
3693
- --pf-v6-c-compass--glass--blend-mode: none;
3694
- --pf-v6-c-compass--glass--blend-mode--dark: none;
3695
- }
3696
-
3697
3644
  /* stylelint-disable */
3698
3645
  @media (max-width: 1200px) {
3699
3646
  .pf-v6-c-compass * {
@@ -6035,6 +5982,9 @@ ul) {
6035
5982
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6036
5983
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6037
5984
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
5985
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
5986
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
5987
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6038
5988
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6039
5989
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6040
5990
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6211,6 +6161,11 @@ ul) {
6211
6161
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6212
6162
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6213
6163
  }
6164
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6165
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6166
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6167
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6168
+ }
6214
6169
  }
6215
6170
 
6216
6171
  .pf-v6-c-drawer__section {
@@ -8140,81 +8095,6 @@ ul) {
8140
8095
  pointer-events: none;
8141
8096
  }
8142
8097
 
8143
- .pf-v6-c-hint {
8144
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8145
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8146
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8147
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8148
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8149
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8150
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8151
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8152
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8153
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8154
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8155
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8156
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8157
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8158
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8159
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8160
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8161
- }
8162
-
8163
- .pf-v6-c-hint {
8164
- display: grid;
8165
- grid-template-columns: 1fr auto;
8166
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8167
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8168
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8169
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8170
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8171
- color: var(--pf-v6-c-hint--Color);
8172
- background-color: var(--pf-v6-c-hint--BackgroundColor);
8173
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8174
- border-radius: var(--pf-v6-c-hint--BorderRadius);
8175
- }
8176
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8177
- text-align: start;
8178
- white-space: normal;
8179
- }
8180
-
8181
- .pf-v6-c-hint__actions {
8182
- display: inline-grid;
8183
- grid-row: 1;
8184
- grid-column: 2;
8185
- grid-auto-flow: column;
8186
- align-self: start;
8187
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8188
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8189
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8190
- text-align: end;
8191
- }
8192
- .pf-v6-c-hint__actions.pf-m-no-offset {
8193
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8194
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8195
- }
8196
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8197
- grid-column: 1;
8198
- }
8199
-
8200
- .pf-v6-c-hint__title {
8201
- align-self: center;
8202
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
8203
- }
8204
-
8205
- .pf-v6-c-hint__body {
8206
- grid-column: 1/-1;
8207
- font-size: var(--pf-v6-c-hint__body--FontSize);
8208
- }
8209
-
8210
- .pf-v6-c-hint__footer {
8211
- grid-column: 1/-1;
8212
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8213
- }
8214
- .pf-v6-c-hint__footer > :not(:last-child) {
8215
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8216
- }
8217
-
8218
8098
  .pf-v6-c-helper-text {
8219
8099
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
8220
8100
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8300,6 +8180,156 @@ ul) {
8300
8180
  color: var(--pf-v6-c-helper-text__item-text--Color);
8301
8181
  }
8302
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
+
8303
8333
  .pf-v6-c-icon {
8304
8334
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8305
8335
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -20247,7 +20277,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20247
20277
  .pf-v6-c-tabs.pf-m-nav {
20248
20278
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20249
20279
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20250
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
20251
20280
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20252
20281
  }
20253
20282
  .pf-v6-c-tabs.pf-m-nav::before,
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,7 +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
- "themeNoGlass": "pf-v6-theme-no-glass",
1353
+ "themeGlass": "pf-v6-theme-glass",
1354
1354
  "tile": "pf-v6-c-tile",
1355
1355
  "tileBody": "pf-v6-c-tile__body",
1356
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,7 +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
- "themeNoGlass": "pf-v6-theme-no-glass",
1355
+ "themeGlass": "pf-v6-theme-glass",
1356
1356
  "tile": "pf-v6-c-tile",
1357
1357
  "tileBody": "pf-v6-c-tile__body",
1358
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,7 +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
- "themeNoGlass": "pf-v6-theme-no-glass",
1353
+ "themeGlass": "pf-v6-theme-glass",
1354
1354
  "tile": "pf-v6-c-tile",
1355
1355
  "tileBody": "pf-v6-c-tile__body",
1356
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.3",
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.14",
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": "d09b3a3cb11d10807ada3c9fbde44254818f2fa2"
27
+ "gitHead": "b1ae7eb5e94f906f4373f38e14d9125e5cccd1c5"
28
28
  }