@patternfly/react-styles 6.5.0-prerelease.3 → 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.
Files changed (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Compass/compass.css +4 -22
  3. package/css/components/Compass/compass.d.ts +1 -2
  4. package/css/components/Compass/compass.js +1 -2
  5. package/css/components/Compass/compass.mjs +1 -2
  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/Tabs/tabs.css +0 -1
  11. package/css/components/_index.css +12 -23
  12. package/css/components/_index.d.ts +0 -1
  13. package/css/components/_index.js +0 -1
  14. package/css/components/_index.mjs +0 -1
  15. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.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
+
6
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)
7
13
 
8
14
  **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);
@@ -129,16 +122,12 @@
129
122
 
130
123
  .pf-v6-c-compass__panel {
131
124
  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));
125
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
126
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
134
127
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
135
128
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
136
129
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
137
130
  }
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
131
  .pf-v6-c-compass__panel.pf-m-no-border {
143
132
  border-width: 0;
144
133
  }
@@ -178,13 +167,6 @@
178
167
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
179
168
  }
180
169
 
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
170
  /* stylelint-disable */
189
171
  @media (max-width: 1200px) {
190
172
  .pf-v6-c-compass * {
package/css/components/Compass/compass.d.ts CHANGED
@@ -24,7 +24,6 @@ declare const _default: {
24
24
  "pill": "pf-m-pill",
25
25
  "scrollable": "pf-m-scrollable"
26
26
  },
27
- "themeDark": "pf-v6-theme-dark",
28
- "themeNoGlass": "pf-v6-theme-no-glass"
27
+ "themeDark": "pf-v6-theme-dark"
29
28
  };
30
29
  export default _default;
package/css/components/Compass/compass.js CHANGED
@@ -26,6 +26,5 @@ exports.default = {
26
26
  "pill": "pf-m-pill",
27
27
  "scrollable": "pf-m-scrollable"
28
28
  },
29
- "themeDark": "pf-v6-theme-dark",
30
- "themeNoGlass": "pf-v6-theme-no-glass"
29
+ "themeDark": "pf-v6-theme-dark"
31
30
  };
package/css/components/Compass/compass.mjs CHANGED
@@ -24,6 +24,5 @@ export default {
24
24
  "pill": "pf-m-pill",
25
25
  "scrollable": "pf-m-scrollable"
26
26
  },
27
- "themeDark": "pf-v6-theme-dark",
28
- "themeNoGlass": "pf-v6-theme-no-glass"
27
+ "themeDark": "pf-v6-theme-dark"
29
28
  };
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/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);
@@ -3638,16 +3631,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3638
3631
 
3639
3632
  .pf-v6-c-compass__panel {
3640
3633
  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));
3634
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3635
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3643
3636
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3644
3637
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3645
3638
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3646
3639
  }
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
3640
  .pf-v6-c-compass__panel.pf-m-no-border {
3652
3641
  border-width: 0;
3653
3642
  }
@@ -3687,13 +3676,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3687
3676
  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3688
3677
  }
3689
3678
 
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
3679
  /* stylelint-disable */
3698
3680
  @media (max-width: 1200px) {
3699
3681
  .pf-v6-c-compass * {
@@ -6035,6 +6017,9 @@ ul) {
6035
6017
  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6036
6018
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6037
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);
6038
6023
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6039
6024
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6040
6025
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6211,6 +6196,11 @@ ul) {
6211
6196
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6212
6197
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6213
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
+ }
6214
6204
  }
6215
6205
 
6216
6206
  .pf-v6-c-drawer__section {
@@ -20247,7 +20237,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20247
20237
  .pf-v6-c-tabs.pf-m-nav {
20248
20238
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20249
20239
  --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
20240
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20252
20241
  }
20253
20242
  .pf-v6-c-tabs.pf-m-nav::before,
package/css/components/_index.d.ts CHANGED
@@ -1350,7 +1350,6 @@ 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",
1354
1353
  "tile": "pf-v6-c-tile",
1355
1354
  "tileBody": "pf-v6-c-tile__body",
1356
1355
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.js CHANGED
@@ -1352,7 +1352,6 @@ 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",
1356
1355
  "tile": "pf-v6-c-tile",
1357
1356
  "tileBody": "pf-v6-c-tile__body",
1358
1357
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.mjs CHANGED
@@ -1350,7 +1350,6 @@ 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",
1354
1353
  "tile": "pf-v6-c-tile",
1355
1354
  "tileBody": "pf-v6-c-tile__body",
1356
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.3",
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.14",
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": "d09b3a3cb11d10807ada3c9fbde44254818f2fa2"
27
+ "gitHead": "3fe4262830dc7bbeea2360dfc8a9c584cf752520"
28
28
  }