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

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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.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
+
8
+ ### Features
9
+
10
+ - **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))
11
+
12
+ # [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)
13
+
14
+ **Note:** Version bump only for package @patternfly/react-styles
15
+
6
16
  # [6.5.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.1...@patternfly/react-styles@6.5.0-prerelease.2) (2025-10-31)
7
17
 
8
18
  ### Features
@@ -113,10 +113,17 @@
113
113
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
114
114
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
115
115
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
116
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
116
117
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
117
118
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
119
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
120
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
118
121
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
119
122
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
123
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
124
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
125
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
126
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
120
127
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
121
128
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
122
129
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -126,10 +133,8 @@
126
133
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
127
134
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
128
135
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
129
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
130
136
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
131
137
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
132
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
133
138
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
134
139
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
135
140
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -454,12 +459,13 @@
454
459
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
455
460
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
456
461
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
462
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
463
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
464
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
457
465
  --pf-v6-c-button--BackgroundColor: transparent;
458
466
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
459
467
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
460
468
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
461
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
462
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
463
469
  --pf-v6-c-button--hover--BackgroundColor: transparent;
464
470
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
465
471
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -468,6 +474,8 @@
468
474
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
469
475
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
470
476
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
477
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
478
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
471
479
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
472
480
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
473
481
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -475,6 +483,7 @@
475
483
  --pf-v6-c-button--hover--BorderWidth: 0;
476
484
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
477
485
  text-align: start;
486
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
478
487
  white-space: normal;
479
488
  background: transparent;
480
489
  outline-offset: 0.125rem;
@@ -485,6 +494,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
485
494
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
486
495
  }
487
496
 
497
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
498
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
499
+ }
488
500
  .pf-v6-c-button.pf-m-link.pf-m-danger {
489
501
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
490
502
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -245,6 +245,12 @@
245
245
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
246
246
  }
247
247
 
248
+ .pf-v6-c-card__subtitle {
249
+ padding-block-start: var(--pf-t--global--spacer--sm);
250
+ font-size: var(--pf-t--global--font--size--body--sm);
251
+ color: var(--pf-t--global--text--color--subtle);
252
+ }
253
+
248
254
  .pf-v6-c-card__actions {
249
255
  display: flex;
250
256
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -12,6 +12,7 @@ declare const _default: {
12
12
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
13
13
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
14
14
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
15
+ "cardSubtitle": "pf-v6-c-card__subtitle",
15
16
  "cardTitle": "pf-v6-c-card__title",
16
17
  "cardTitleText": "pf-v6-c-card__title-text",
17
18
  "check": "pf-v6-c-check",
@@ -14,6 +14,7 @@ exports.default = {
14
14
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
15
15
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
16
16
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
17
+ "cardSubtitle": "pf-v6-c-card__subtitle",
17
18
  "cardTitle": "pf-v6-c-card__title",
18
19
  "cardTitleText": "pf-v6-c-card__title-text",
19
20
  "check": "pf-v6-c-check",
@@ -12,6 +12,7 @@ export default {
12
12
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
13
13
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
14
14
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
15
+ "cardSubtitle": "pf-v6-c-card__subtitle",
15
16
  "cardTitle": "pf-v6-c-card__title",
16
17
  "cardTitleText": "pf-v6-c-card__title-text",
17
18
  "check": "pf-v6-c-check",
@@ -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);
@@ -56,6 +49,9 @@
56
49
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
57
50
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
58
51
  }
52
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
53
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
54
+ }
59
55
 
60
56
  .pf-v6-c-compass__header {
61
57
  display: grid;
@@ -126,16 +122,12 @@
126
122
 
127
123
  .pf-v6-c-compass__panel {
128
124
  padding: var(--pf-v6-c-compass__panel--Padding);
129
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
130
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
125
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
126
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
131
127
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
132
128
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
133
129
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
134
130
  }
135
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
136
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
137
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
138
- }
139
131
  .pf-v6-c-compass__panel.pf-m-no-border {
140
132
  border-width: 0;
141
133
  }
@@ -175,13 +167,6 @@
175
167
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
176
168
  }
177
169
 
178
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
179
- --pf-v6-c-compass--glass--opacity: 100%;
180
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
181
- --pf-v6-c-compass--glass--blend-mode: none;
182
- --pf-v6-c-compass--glass--blend-mode--dark: none;
183
- }
184
-
185
170
  /* stylelint-disable */
186
171
  @media (max-width: 1200px) {
187
172
  .pf-v6-c-compass * {
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  "compassSidebar": "pf-v6-c-compass__sidebar",
15
15
  "menuToggle": "pf-v6-c-menu-toggle",
16
16
  "modifiers": {
17
+ "noGlass": "pf-m-no-glass",
17
18
  "plain": "pf-m-plain",
18
19
  "start": "pf-m-start",
19
20
  "end": "pf-m-end",
@@ -23,7 +24,6 @@ declare const _default: {
23
24
  "pill": "pf-m-pill",
24
25
  "scrollable": "pf-m-scrollable"
25
26
  },
26
- "themeDark": "pf-v6-theme-dark",
27
- "themeNoGlass": "pf-v6-theme-no-glass"
27
+ "themeDark": "pf-v6-theme-dark"
28
28
  };
29
29
  export default _default;
@@ -16,6 +16,7 @@ exports.default = {
16
16
  "compassSidebar": "pf-v6-c-compass__sidebar",
17
17
  "menuToggle": "pf-v6-c-menu-toggle",
18
18
  "modifiers": {
19
+ "noGlass": "pf-m-no-glass",
19
20
  "plain": "pf-m-plain",
20
21
  "start": "pf-m-start",
21
22
  "end": "pf-m-end",
@@ -25,6 +26,5 @@ exports.default = {
25
26
  "pill": "pf-m-pill",
26
27
  "scrollable": "pf-m-scrollable"
27
28
  },
28
- "themeDark": "pf-v6-theme-dark",
29
- "themeNoGlass": "pf-v6-theme-no-glass"
29
+ "themeDark": "pf-v6-theme-dark"
30
30
  };
@@ -14,6 +14,7 @@ export default {
14
14
  "compassSidebar": "pf-v6-c-compass__sidebar",
15
15
  "menuToggle": "pf-v6-c-menu-toggle",
16
16
  "modifiers": {
17
+ "noGlass": "pf-m-no-glass",
17
18
  "plain": "pf-m-plain",
18
19
  "start": "pf-m-start",
19
20
  "end": "pf-m-end",
@@ -23,6 +24,5 @@ export default {
23
24
  "pill": "pf-m-pill",
24
25
  "scrollable": "pf-m-scrollable"
25
26
  },
26
- "themeDark": "pf-v6-theme-dark",
27
- "themeNoGlass": "pf-v6-theme-no-glass"
27
+ "themeDark": "pf-v6-theme-dark"
28
28
  };
@@ -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 {
@@ -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",
@@ -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",
@@ -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",
@@ -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,
@@ -1685,10 +1685,17 @@ button.pf-v6-c-breadcrumb__link {
1685
1685
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1686
1686
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1687
1687
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1688
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1688
1689
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1689
1690
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1691
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1692
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1690
1693
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1691
1694
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1695
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1696
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1697
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1698
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1692
1699
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1693
1700
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1694
1701
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1698,10 +1705,8 @@ button.pf-v6-c-breadcrumb__link {
1698
1705
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1699
1706
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1700
1707
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1701
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1702
1708
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1703
1709
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1704
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1705
1710
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1706
1711
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1707
1712
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2026,12 +2031,13 @@ button.pf-v6-c-breadcrumb__link {
2026
2031
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2027
2032
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2028
2033
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2034
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2035
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2036
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2029
2037
  --pf-v6-c-button--BackgroundColor: transparent;
2030
2038
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2031
2039
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2032
2040
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2033
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2034
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2035
2041
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2036
2042
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2037
2043
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2040,6 +2046,8 @@ button.pf-v6-c-breadcrumb__link {
2040
2046
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2041
2047
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2042
2048
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2049
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2050
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2043
2051
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2044
2052
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2045
2053
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2047,6 +2055,7 @@ button.pf-v6-c-breadcrumb__link {
2047
2055
  --pf-v6-c-button--hover--BorderWidth: 0;
2048
2056
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2049
2057
  text-align: start;
2058
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2050
2059
  white-space: normal;
2051
2060
  background: transparent;
2052
2061
  outline-offset: 0.125rem;
@@ -2057,6 +2066,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2057
2066
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2058
2067
  }
2059
2068
 
2069
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2070
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2071
+ }
2060
2072
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2061
2073
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2062
2074
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2920,6 +2932,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2920
2932
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2921
2933
  }
2922
2934
 
2935
+ .pf-v6-c-card__subtitle {
2936
+ padding-block-start: var(--pf-t--global--spacer--sm);
2937
+ font-size: var(--pf-t--global--font--size--body--sm);
2938
+ color: var(--pf-t--global--text--color--subtle);
2939
+ }
2940
+
2923
2941
  .pf-v6-c-card__actions {
2924
2942
  display: flex;
2925
2943
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3499,15 +3517,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3499
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3500
3518
  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3501
3519
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3502
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
3503
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
3504
- --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));
3505
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
3506
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
3507
- --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));
3508
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
3509
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
3510
- --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);
3511
3522
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3512
3523
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3513
3524
  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
@@ -3547,6 +3558,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3547
3558
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3548
3559
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3549
3560
  }
3561
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3562
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3563
+ }
3550
3564
 
3551
3565
  .pf-v6-c-compass__header {
3552
3566
  display: grid;
@@ -3617,16 +3631,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3617
3631
 
3618
3632
  .pf-v6-c-compass__panel {
3619
3633
  padding: var(--pf-v6-c-compass__panel--Padding);
3620
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
3621
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
3634
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3635
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3622
3636
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3623
3637
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3624
3638
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3625
3639
  }
3626
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
3627
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
3628
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
3629
- }
3630
3640
  .pf-v6-c-compass__panel.pf-m-no-border {
3631
3641
  border-width: 0;
3632
3642
  }
@@ -3666,13 +3676,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3666
3676
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3667
3677
  }
3668
3678
 
3669
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
3670
- --pf-v6-c-compass--glass--opacity: 100%;
3671
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
3672
- --pf-v6-c-compass--glass--blend-mode: none;
3673
- --pf-v6-c-compass--glass--blend-mode--dark: none;
3674
- }
3675
-
3676
3679
  /* stylelint-disable */
3677
3680
  @media (max-width: 1200px) {
3678
3681
  .pf-v6-c-compass * {
@@ -6014,6 +6017,9 @@ ul) {
6014
6017
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6015
6018
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6016
6019
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6020
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
6021
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
6022
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6017
6023
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6018
6024
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6019
6025
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6190,6 +6196,11 @@ ul) {
6190
6196
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6191
6197
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6192
6198
  }
6199
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6200
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6201
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6202
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6203
+ }
6193
6204
  }
6194
6205
 
6195
6206
  .pf-v6-c-drawer__section {
@@ -20226,7 +20237,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20226
20237
  .pf-v6-c-tabs.pf-m-nav {
20227
20238
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20228
20239
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20229
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
20230
20240
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20231
20241
  }
20232
20242
  .pf-v6-c-tabs.pf-m-nav::before,
@@ -77,6 +77,7 @@ declare const _default: {
77
77
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
78
78
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
79
79
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
80
+ "cardSubtitle": "pf-v6-c-card__subtitle",
80
81
  "cardTitle": "pf-v6-c-card__title",
81
82
  "cardTitleText": "pf-v6-c-card__title-text",
82
83
  "check": "pf-v6-c-check",
@@ -444,6 +445,7 @@ declare const _default: {
444
445
  "code": "pf-m-code",
445
446
  "readOnly": "pf-m-read-only",
446
447
  "dragHover": "pf-m-drag-hover",
448
+ "noGlass": "pf-m-no-glass",
447
449
  "noBorder": "pf-m-no-border",
448
450
  "pill": "pf-m-pill",
449
451
  "scrollable": "pf-m-scrollable",
@@ -1348,7 +1350,6 @@ declare const _default: {
1348
1350
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1349
1351
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1350
1352
  "themeDark": "pf-v6-theme-dark",
1351
- "themeNoGlass": "pf-v6-theme-no-glass",
1352
1353
  "tile": "pf-v6-c-tile",
1353
1354
  "tileBody": "pf-v6-c-tile__body",
1354
1355
  "tileHeader": "pf-v6-c-tile__header",
@@ -79,6 +79,7 @@ exports.default = {
79
79
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
80
80
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
81
81
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
82
+ "cardSubtitle": "pf-v6-c-card__subtitle",
82
83
  "cardTitle": "pf-v6-c-card__title",
83
84
  "cardTitleText": "pf-v6-c-card__title-text",
84
85
  "check": "pf-v6-c-check",
@@ -446,6 +447,7 @@ exports.default = {
446
447
  "code": "pf-m-code",
447
448
  "readOnly": "pf-m-read-only",
448
449
  "dragHover": "pf-m-drag-hover",
450
+ "noGlass": "pf-m-no-glass",
449
451
  "noBorder": "pf-m-no-border",
450
452
  "pill": "pf-m-pill",
451
453
  "scrollable": "pf-m-scrollable",
@@ -1350,7 +1352,6 @@ exports.default = {
1350
1352
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1351
1353
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1352
1354
  "themeDark": "pf-v6-theme-dark",
1353
- "themeNoGlass": "pf-v6-theme-no-glass",
1354
1355
  "tile": "pf-v6-c-tile",
1355
1356
  "tileBody": "pf-v6-c-tile__body",
1356
1357
  "tileHeader": "pf-v6-c-tile__header",
@@ -77,6 +77,7 @@ export default {
77
77
  "cardHeaderToggle": "pf-v6-c-card__header-toggle",
78
78
  "cardHeaderToggleIcon": "pf-v6-c-card__header-toggle-icon",
79
79
  "cardSelectableActions": "pf-v6-c-card__selectable-actions",
80
+ "cardSubtitle": "pf-v6-c-card__subtitle",
80
81
  "cardTitle": "pf-v6-c-card__title",
81
82
  "cardTitleText": "pf-v6-c-card__title-text",
82
83
  "check": "pf-v6-c-check",
@@ -444,6 +445,7 @@ export default {
444
445
  "code": "pf-m-code",
445
446
  "readOnly": "pf-m-read-only",
446
447
  "dragHover": "pf-m-drag-hover",
448
+ "noGlass": "pf-m-no-glass",
447
449
  "noBorder": "pf-m-no-border",
448
450
  "pill": "pf-m-pill",
449
451
  "scrollable": "pf-m-scrollable",
@@ -1348,7 +1350,6 @@ export default {
1348
1350
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1349
1351
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1350
1352
  "themeDark": "pf-v6-theme-dark",
1351
- "themeNoGlass": "pf-v6-theme-no-glass",
1352
1353
  "tile": "pf-v6-c-tile",
1353
1354
  "tileBody": "pf-v6-c-tile__body",
1354
1355
  "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.2",
3
+ "version": "6.5.0-prerelease.4",
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.12",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.19",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "c7b90a136c135c4cf74a7fc768cc17ee39227a6d"
27
+ "gitHead": "3fe4262830dc7bbeea2360dfc8a9c584cf752520"
28
28
  }