@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.65

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 (41) hide show
  1. package/base/patternfly-svg-icons.css +6 -0
  2. package/base/patternfly-svg-icons.scss +6 -0
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Page/page.css +83 -34
  6. package/components/Page/page.scss +94 -39
  7. package/components/Table/table.css +2 -2
  8. package/components/Table/table.scss +2 -2
  9. package/components/_index.css +92 -37
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  11. package/docs/components/Page/examples/Page.md +62 -15
  12. package/docs/components/Table/examples/Table.md +1879 -151
  13. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  14. package/docs/demos/Alert/examples/Alert.md +24 -6
  15. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  16. package/docs/demos/Banner/examples/Banner.md +16 -4
  17. package/docs/demos/CardView/examples/CardView.md +8 -2
  18. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  19. package/docs/demos/DataList/examples/DataList.md +32 -8
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  21. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  23. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  24. package/docs/demos/Modal/examples/Modal.md +48 -12
  25. package/docs/demos/Nav/examples/Nav.md +80 -20
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  27. package/docs/demos/Page/examples/Page.md +113 -28
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  29. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  30. package/docs/demos/Table/examples/Table.md +496 -64
  31. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  32. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  33. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  34. package/package.json +21 -1
  35. package/patternfly-base-no-globals.css +6 -0
  36. package/patternfly-base.css +6 -0
  37. package/patternfly-no-globals.css +99 -38
  38. package/patternfly.css +99 -38
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/patternfly.scss +3 -1
@@ -13,4 +13,10 @@
13
13
  }
14
14
  .pf-v6-icon-set-rh-ui .pf-v6-svg .pf-v6-icon-rh-ui {
15
15
  display: revert;
16
+ }
17
+
18
+ .pf-v6-icon-rh-standard {
19
+ width: 3rem;
20
+ height: 3rem;
21
+ color: var(--pf-t--global--icon--color--brand--accent--default);
16
22
  }
@@ -20,3 +20,9 @@
20
20
  display: revert;
21
21
  }
22
22
  }
23
+
24
+ .#{$pf-prefix}icon-rh-standard {
25
+ width: 3rem;
26
+ height: 3rem;
27
+ color: var(--pf-t--global--icon--color--brand--accent--default);
28
+ }
@@ -8,7 +8,7 @@
8
8
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9
9
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
10
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
12
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
13
13
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
14
14
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -16,6 +16,8 @@
16
16
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
17
17
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
18
18
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
19
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
20
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
19
21
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
20
22
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
21
23
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -44,6 +46,10 @@
44
46
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
45
47
  display: inline-flex;
46
48
  }
49
+ .pf-v6-c-clipboard-copy.pf-m-readonly {
50
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
51
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
52
+ }
47
53
 
48
54
  .pf-v6-c-clipboard-copy__group {
49
55
  display: flex;
@@ -13,7 +13,7 @@
13
13
  --#{$clipboard-copy}__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
14
14
  --#{$clipboard-copy}__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
15
  --#{$clipboard-copy}__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
16
- --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16
+ --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
17
  --#{$clipboard-copy}__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
18
18
  --#{$clipboard-copy}__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
19
19
  --#{$clipboard-copy}__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -22,6 +22,10 @@
22
22
  --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
23
23
  --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
24
24
 
25
+ // Readonly
26
+ --#{$clipboard-copy}--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
27
+ --#{$clipboard-copy}--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
28
+
25
29
  // Group
26
30
  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
27
31
 
@@ -62,6 +66,11 @@
62
66
  display: inline-flex;
63
67
  }
64
68
  }
69
+
70
+ &.pf-m-readonly {
71
+ --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--#{$clipboard-copy}--m-readonly__expandable-content--BackgroundColor);
72
+ --#{$clipboard-copy}__expandable-content--BorderColor: var(--#{$clipboard-copy}--m-readonly__expandable-content--BorderColor);
73
+ }
65
74
  }
66
75
 
67
76
 
@@ -43,6 +43,7 @@
43
43
  --pf-v6-c-page__sidebar--TranslateZ: 0;
44
44
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
45
45
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
46
+ --pf-v6-c-page__sidebar--MarginBlockStart: 0;
46
47
  --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
47
48
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
48
49
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
@@ -60,6 +61,20 @@
60
61
  }
61
62
  }
62
63
  .pf-v6-c-page {
64
+ --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
65
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
66
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
67
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
68
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
69
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
70
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
71
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
72
+ --pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
73
+ --pf-v6-c-page__sidebar-main--BackdropFilter: none;
74
+ --pf-v6-c-page__sidebar-main--BorderWidth: 0;
75
+ --pf-v6-c-page__sidebar-main--BorderColor: transparent;
76
+ --pf-v6-c-page__sidebar-main--BorderRadius: 0;
77
+ --pf-v6-c-page__sidebar-main--BoxShadow: none;
63
78
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
64
79
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
65
80
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -130,6 +145,10 @@
130
145
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
131
146
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
132
147
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
148
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
149
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
150
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
151
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
133
152
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
134
153
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
135
154
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -172,11 +191,54 @@
172
191
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
173
192
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
174
193
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
194
+ --pf-v6-c-page--BackgroundColor--glass: transparent;
195
+ --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
196
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
197
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
198
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
199
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
200
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
201
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
202
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
203
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
204
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
205
+ --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
206
+ --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
207
+ --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
208
+ --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
209
+ --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
210
+ --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
211
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
212
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
213
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
214
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
175
215
  }
176
216
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
177
- --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
178
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
179
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
217
+ --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
218
+ --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
219
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
220
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
221
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
222
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
223
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
224
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
225
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
226
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
227
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
228
+ --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
229
+ --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
230
+ --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
231
+ --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
232
+ --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
233
+ --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
234
+ }
235
+ @media (min-width: 75rem) {
236
+ .pf-v6-c-page {
237
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
238
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
239
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
240
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
241
+ }
180
242
  }
181
243
 
182
244
  .pf-v6-c-page {
@@ -189,9 +251,6 @@
189
251
  max-height: 100%;
190
252
  background-color: var(--pf-v6-c-page--BackgroundColor);
191
253
  }
192
- :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
193
- background-color: transparent;
194
- }
195
254
  @media (min-width: 75rem) {
196
255
  .pf-v6-c-page {
197
256
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
@@ -341,6 +400,7 @@
341
400
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
342
401
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
343
402
  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
403
+ margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
344
404
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
345
405
  overflow-x: hidden;
346
406
  overflow-y: auto;
@@ -372,44 +432,33 @@
372
432
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
373
433
  min-height: 0;
374
434
  padding: 0;
375
- overflow: visible;
435
+ overflow: revert;
376
436
  background: transparent;
377
437
  }
378
438
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
379
439
  box-shadow: none;
380
440
  }
381
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
382
- padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
383
- padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
384
- padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
385
- margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
386
- margin-block-end: var(--pf-t--global--spacer--md);
387
- margin-inline-start: var(--pf-t--global--spacer--md);
388
- margin-inline-end: var(--pf-t--global--spacer--md);
441
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
389
442
  overflow: auto;
390
- background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
391
- backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
392
- border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
393
- border-radius: var(--pf-t--global--border--radius--glass--default);
394
- box-shadow: var(--pf-t--global--box-shadow--glass--default);
395
- }
396
- @media (min-width: 75rem) {
397
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
398
- margin-block-start: 0;
399
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
400
- margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
401
- margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
402
- }
403
- }
404
-
405
- .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
406
- overflow: revert;
407
443
  }
408
444
 
409
445
  .pf-v6-c-page__sidebar-main {
410
446
  display: flex;
411
447
  flex-grow: 1;
412
448
  flex-direction: column;
449
+ padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
450
+ padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
451
+ padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
452
+ padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
453
+ margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
454
+ margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
455
+ margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
456
+ margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
457
+ background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
458
+ backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
459
+ border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
460
+ border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
461
+ box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
413
462
  }
414
463
 
415
464
  .pf-v6-c-page__sidebar-header {
@@ -837,8 +886,8 @@
837
886
  }
838
887
  .pf-v6-c-page__main-section.pf-m-secondary {
839
888
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
840
- border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
841
- border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
889
+ border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
890
+ border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
842
891
  }
843
892
  .pf-v6-c-page__main-section.pf-m-padding {
844
893
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -62,6 +62,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
62
62
  --#{$page}__sidebar--TranslateZ: 0;
63
63
  --#{$page}__sidebar--m-expanded--TranslateX: 0;
64
64
  --#{$page}__sidebar--xl--TranslateX: 0;
65
+ --#{$page}__sidebar--MarginBlockStart: 0;
65
66
  --#{$page}__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
66
67
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
67
68
  --#{$page}__sidebar--PaddingInlineStart: 0;
@@ -77,6 +78,22 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
77
78
  --#{$page}__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
78
79
  }
79
80
 
81
+ // Sidebar main
82
+ --#{$page}__sidebar-main--PaddingBlockStart: 0;
83
+ --#{$page}__sidebar-main--PaddingBlockEnd: 0;
84
+ --#{$page}__sidebar-main--PaddingInlineStart: 0;
85
+ --#{$page}__sidebar-main--PaddingInlineEnd: 0;
86
+ --#{$page}__sidebar-main--MarginBlockStart: 0;
87
+ --#{$page}__sidebar-main--MarginBlockEnd: 0;
88
+ --#{$page}__sidebar-main--MarginInlineStart: 0;
89
+ --#{$page}__sidebar-main--MarginInlineEnd: 0;
90
+ --#{$page}__sidebar-main--BackgroundColor: transparent;
91
+ --#{$page}__sidebar-main--BackdropFilter: none;
92
+ --#{$page}__sidebar-main--BorderWidth: 0;
93
+ --#{$page}__sidebar-main--BorderColor: transparent;
94
+ --#{$page}__sidebar-main--BorderRadius: 0;
95
+ --#{$page}__sidebar-main--BoxShadow: none;
96
+
80
97
  // Sidebar header
81
98
  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
82
99
  --#{$page}__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -148,6 +165,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
148
165
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
149
166
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
150
167
  --#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
168
+ --#{$page}__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
169
+ --#{$page}__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
170
+ --#{$page}__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
171
+ --#{$page}__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
172
+
151
173
 
152
174
  // Limit width
153
175
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
@@ -209,10 +231,54 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
209
231
  --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
210
232
  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
211
233
 
234
+ // Glass theme
235
+ --#{$page}--BackgroundColor--glass: transparent;
236
+ --#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
237
+ --#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
238
+ --#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
239
+ --#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
240
+ --#{$page}__sidebar-main--PaddingInlineStart--glass: var(--#{$page}__sidebar--PaddingInlineStart);
241
+ --#{$page}__sidebar-main--PaddingInlineEnd--glass: var(--#{$page}__sidebar--PaddingInlineEnd);
242
+ --#{$page}__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
243
+ --#{$page}__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
244
+ --#{$page}__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
245
+ --#{$page}__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
246
+ --#{$page}__sidebar-main--BackgroundColor--glass: var(--#{$page}__sidebar--BackgroundColor);
247
+ --#{$page}__sidebar-main--BackdropFilter--glass: var(--#{$page}__sidebar--BackdropFilter);
248
+ --#{$page}__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
249
+ --#{$page}__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
250
+ --#{$page}__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
251
+ --#{$page}__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
252
+ --#{$page}__sidebar-main--xl--MarginBlockStart--glass: 0;
253
+ --#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
254
+ --#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
255
+ --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
256
+
212
257
  :where(.pf-v6-theme-glass) & {
213
- --#{$page}__sidebar--Width--base: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
214
- --#{$page}__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
215
- --#{$page}__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
258
+ --#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
259
+ --#{$page}__sidebar--Width--base: var(--#{$page}__sidebar--Width--base--glass);
260
+ --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--PaddingInlineStart--glass);
261
+ --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--PaddingInlineEnd--glass);
262
+ --#{$page}__sidebar-main--PaddingBlockEnd: var(--#{$page}__sidebar-main--PaddingBlockEnd--glass);
263
+ --#{$page}__sidebar-main--PaddingInlineStart: var(--#{$page}__sidebar-main--PaddingInlineStart--glass);
264
+ --#{$page}__sidebar-main--PaddingInlineEnd: var(--#{$page}__sidebar-main--PaddingInlineEnd--glass);
265
+ --#{$page}__sidebar-main--MarginBlockStart: var(--#{$page}__sidebar-main--MarginBlockStart--glass);
266
+ --#{$page}__sidebar-main--MarginBlockEnd: var(--#{$page}__sidebar-main--MarginBlockEnd--glass);
267
+ --#{$page}__sidebar-main--MarginInlineStart: var(--#{$page}__sidebar-main--MarginInlineStart--glass);
268
+ --#{$page}__sidebar-main--MarginInlineEnd: var(--#{$page}__sidebar-main--MarginInlineEnd--glass);
269
+ --#{$page}__sidebar-main--BackgroundColor: var(--#{$page}__sidebar-main--BackgroundColor--glass);
270
+ --#{$page}__sidebar-main--BackdropFilter: var(--#{$page}__sidebar-main--BackdropFilter--glass);
271
+ --#{$page}__sidebar-main--BorderWidth: var(--#{$page}__sidebar-main--BorderWidth--glass);
272
+ --#{$page}__sidebar-main--BorderColor: var(--#{$page}__sidebar-main--BorderColor--glass);
273
+ --#{$page}__sidebar-main--BorderRadius: var(--#{$page}__sidebar-main--BorderRadius--glass);
274
+ --#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
275
+ }
276
+
277
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
278
+ --#{$page}__sidebar-main--MarginBlockStart--glass: var(--#{$page}__sidebar-main--xl--MarginBlockStart--glass);
279
+ --#{$page}__sidebar-main--MarginBlockEnd--glass: var(--#{$page}__sidebar-main--xl--MarginBlockEnd--glass);
280
+ --#{$page}__sidebar-main--MarginInlineStart--glass: var(--#{$page}__sidebar-main--xl--MarginInlineStart--glass);
281
+ --#{$page}__sidebar-main--MarginInlineEnd--glass: var(--#{$page}__sidebar-main--xl--MarginInlineEnd--glass);
216
282
  }
217
283
  }
218
284
 
@@ -229,10 +295,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
229
295
  max-height: 100%;
230
296
  background-color: var(--#{$page}--BackgroundColor);
231
297
 
232
- :where(:root.pf-v6-theme-glass) & {
233
- background-color: transparent;
234
- }
235
-
236
298
  @media (min-width: $pf-v6-global--breakpoint--xl) {
237
299
  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
238
300
 
@@ -384,6 +446,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
384
446
  padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
385
447
  padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
386
448
  padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
449
+ margin-block-start: var(--#{$page}__sidebar--MarginBlockStart);
387
450
  margin-inline-end: var(--#{$page}__sidebar--MarginInlineEnd);
388
451
  overflow-x: hidden;
389
452
  overflow-y: auto;
@@ -419,49 +482,41 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
419
482
  overflow: hidden;
420
483
  }
421
484
 
422
- @at-root :where(.pf-v6-theme-glass) & {
423
- min-height: 0;
424
- padding: 0;
425
- overflow: visible;
426
- background: transparent;
485
+ @at-root :where(.pf-v6-theme-glass) {
486
+ .#{$page}__sidebar {
487
+ min-height: 0;
488
+ padding: 0;
489
+ overflow: revert;
490
+ background: transparent;
427
491
 
428
- &.pf-m-expanded {
429
- box-shadow: none;
492
+ &.pf-m-expanded {
493
+ box-shadow: none;
494
+ }
430
495
  }
431
496
 
432
497
  .#{$page}__sidebar-main {
433
- padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
434
- padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
435
- padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
436
- margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
437
- margin-block-end: var(--pf-t--global--spacer--md);
438
- margin-inline-start: var(--pf-t--global--spacer--md);
439
- margin-inline-end: var(--pf-t--global--spacer--md);
440
498
  overflow: auto;
441
- background-color: var(--#{$page}__sidebar--BackgroundColor);
442
- backdrop-filter: var(--#{$page}__sidebar--BackdropFilter);
443
- border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
444
- border-radius: var(--pf-t--global--border--radius--glass--default);
445
- box-shadow: var(--pf-t--global--box-shadow--glass--default);
446
-
447
- @media (min-width: $pf-v6-global--breakpoint--xl) {
448
- margin-block-start: 0;
449
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
450
- margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
451
- margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
452
- }
453
499
  }
454
500
  }
455
-
456
- &:has(> .#{$page}__sidebar-main) {
457
- overflow: revert;
458
- }
459
501
  }
460
502
 
461
503
  .#{$page}__sidebar-main {
462
504
  display: flex;
463
505
  flex-grow: 1;
464
506
  flex-direction: column;
507
+ padding-block-start: var(--#{$page}__sidebar-main--PaddingBlockStart);
508
+ padding-block-end: var(--#{$page}__sidebar-main--PaddingBlockEnd);
509
+ padding-inline-start: var(--#{$page}__sidebar-main--PaddingInlineStart);
510
+ padding-inline-end: var(--#{$page}__sidebar-main--PaddingInlineEnd);
511
+ margin-block-start: var(--#{$page}__sidebar-main--MarginBlockStart);
512
+ margin-block-end: var(--#{$page}__sidebar-main--MarginBlockEnd);
513
+ margin-inline-start: var(--#{$page}__sidebar-main--MarginInlineStart);
514
+ margin-inline-end: var(--#{$page}__sidebar-main--MarginInlineEnd);
515
+ background-color: var(--#{$page}__sidebar-main--BackgroundColor);
516
+ backdrop-filter: var(--#{$page}__sidebar-main--BackdropFilter);
517
+ border: var(--#{$page}__sidebar-main--BorderWidth) solid var(--#{$page}__sidebar-main--BorderColor);
518
+ border-radius: var(--#{$page}__sidebar-main--BorderRadius);
519
+ box-shadow: var(--#{$page}__sidebar-main--BoxShadow);
465
520
  }
466
521
 
467
522
  .#{$page}__sidebar-header {
@@ -747,8 +802,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
747
802
  &.pf-m-secondary {
748
803
  --#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
749
804
 
750
- border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
751
- border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
805
+ border-block-start: var(--#{$page}__main-section--m-secondary--BorderBlockStartWidth) solid var(--#{$page}__main-section--m-secondary--BorderBlockStartColor);
806
+ border-block-end: var(--#{$page}__main-section--m-secondary--BorderBlockEndWidth) solid var(--#{$page}__main-section--m-secondary--BorderBlockEndColor);
752
807
  }
753
808
 
754
809
  @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
@@ -64,7 +64,7 @@
64
64
  --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
65
65
  --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
66
66
  --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
67
- --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
67
+ --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
68
68
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
69
69
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
70
70
  --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -159,7 +159,7 @@
159
159
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
160
160
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
161
161
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
162
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
162
+ --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
163
163
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
164
164
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
165
165
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
@@ -99,7 +99,7 @@
99
99
  --#{$table}__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
100
100
  --#{$table}__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
101
101
  --#{$table}__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
102
- --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--small);
102
+ --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
103
103
  --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
104
104
  --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
105
105
 
@@ -251,7 +251,7 @@
251
251
  --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
252
252
 
253
253
  // * Table striped
254
- --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
254
+ --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
255
255
 
256
256
  // * Table sticky header
257
257
  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);