@patternfly/patternfly 5.0.0-prerelease.2 → 5.0.0-prerelease.3

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 (42) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-variables.css +0 -6
  5. package/components/Masthead/masthead.css +2 -6
  6. package/components/Masthead/masthead.scss +1 -7
  7. package/components/Masthead/themes/dark/masthead.scss +1 -0
  8. package/components/MenuToggle/menu-toggle.css +13 -11
  9. package/components/MenuToggle/menu-toggle.scss +14 -12
  10. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  11. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  12. package/docs/demos/Alert/examples/Alert.md +126 -2322
  13. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  14. package/docs/demos/Banner/examples/Banner.md +84 -1588
  15. package/docs/demos/CardView/examples/CardView.md +42 -774
  16. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  17. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  18. package/docs/demos/DataList/examples/DataList.md +191 -3119
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  20. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  23. package/docs/demos/Modal/examples/Modal.md +252 -4644
  24. package/docs/demos/Nav/examples/Nav.md +336 -6192
  25. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  26. package/docs/demos/Page/examples/Page.md +378 -6966
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  28. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  29. package/docs/demos/Table/examples/Table.md +752 -11732
  30. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  31. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  32. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  33. package/package.json +1 -1
  34. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  35. package/patternfly-base-no-globals.css +6 -6
  36. package/patternfly-base-theme-dark-unversioned.css +6 -6
  37. package/patternfly-base.css +6 -6
  38. package/patternfly-no-globals.css +21 -23
  39. package/patternfly-theme-dark-unversioned.css +21 -23
  40. package/patternfly.css +21 -23
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-prerelease.2",
4
+ "version": "5.0.0-prerelease.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -250,12 +250,6 @@
250
250
  --pf-v5-global--target-size--MinHeight: 44px;
251
251
  }
252
252
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
253
  :where(.pf-theme-dark) {
260
254
  --pf-v5-global--palette--black-50: #e0e0e0;
261
255
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -475,6 +469,12 @@
475
469
  font-variant-numeric: tabular-nums;
476
470
  }
477
471
 
472
+ .pf-v5-m-vf-font {
473
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
474
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
475
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
476
+ }
477
+
478
478
  :where(.pf-theme-dark) {
479
479
  color-scheme: dark;
480
480
  }
package/patternfly-base-no-globals.css CHANGED
@@ -250,12 +250,6 @@
250
250
  --pf-v5-global--target-size--MinHeight: 44px;
251
251
  }
252
252
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
253
  :where(.pf-v5-theme-dark) {
260
254
  --pf-v5-global--palette--black-50: #e0e0e0;
261
255
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -475,6 +469,12 @@
475
469
  font-variant-numeric: tabular-nums;
476
470
  }
477
471
 
472
+ .pf-v5-m-vf-font {
473
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
474
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
475
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
476
+ }
477
+
478
478
  :where(.pf-v5-theme-dark) {
479
479
  color-scheme: dark;
480
480
  }
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -250,12 +250,6 @@
250
250
  --pf-v5-global--target-size--MinHeight: 44px;
251
251
  }
252
252
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
253
  :where(.pf-theme-dark) {
260
254
  --pf-v5-global--palette--black-50: #e0e0e0;
261
255
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -475,6 +469,12 @@
475
469
  font-variant-numeric: tabular-nums;
476
470
  }
477
471
 
472
+ .pf-v5-m-vf-font {
473
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
474
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
475
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
476
+ }
477
+
478
478
  :where(html,
479
479
  body,
480
480
  p,
package/patternfly-base.css CHANGED
@@ -250,12 +250,6 @@
250
250
  --pf-v5-global--target-size--MinHeight: 44px;
251
251
  }
252
252
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
253
  :where(.pf-v5-theme-dark) {
260
254
  --pf-v5-global--palette--black-50: #e0e0e0;
261
255
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -475,6 +469,12 @@
475
469
  font-variant-numeric: tabular-nums;
476
470
  }
477
471
 
472
+ .pf-v5-m-vf-font {
473
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
474
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
475
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
476
+ }
477
+
478
478
  :where(html,
479
479
  body,
480
480
  p,
package/patternfly-no-globals.css CHANGED
@@ -308,12 +308,6 @@
308
308
  --pf-v5-global--target-size--MinHeight: 44px;
309
309
  }
310
310
 
311
- .pf-m-vf-font {
312
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
313
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
314
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
315
- }
316
-
317
311
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
318
312
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
319
313
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header, :where(.pf-v5-theme-dark) .pf-v5-c-masthead, :where(.pf-v5-theme-dark) .pf-v5-c-login__header,
@@ -546,6 +540,12 @@
546
540
  font-variant-numeric: tabular-nums;
547
541
  }
548
542
 
543
+ .pf-v5-m-vf-font {
544
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
545
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
546
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
547
+ }
548
+
549
549
  :where(.pf-v5-theme-dark) {
550
550
  color-scheme: dark;
551
551
  }
@@ -17026,8 +17026,6 @@ ul.pf-v5-c-list {
17026
17026
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17027
17027
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17028
17028
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17029
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17030
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17031
17029
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17032
17030
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17033
17031
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17132,10 +17130,7 @@ ul.pf-v5-c-list {
17132
17130
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17133
17131
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17134
17132
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17135
- }
17136
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17137
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17138
- --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
17133
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
17139
17134
  }
17140
17135
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17141
17136
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17606,6 +17601,7 @@ ul.pf-v5-c-list {
17606
17601
 
17607
17602
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
17608
17603
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
17604
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
17609
17605
  color: var(--pf-v5-global--Color--100);
17610
17606
  }
17611
17607
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18274,6 +18270,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18274
18270
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18275
18271
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18276
18272
  --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
18273
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
18277
18274
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18278
18275
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18279
18276
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18394,6 +18391,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18394
18391
  display: inline-block;
18395
18392
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18396
18393
  }
18394
+ .pf-v5-c-menu-toggle.pf-m-full-height {
18395
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18396
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18397
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18398
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth);
18399
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18400
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18401
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18402
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18403
+ height: 100%;
18404
+ }
18397
18405
  .pf-v5-c-menu-toggle:hover {
18398
18406
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18399
18407
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18432,16 +18440,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18432
18440
  .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
18433
18441
  border: 0;
18434
18442
  }
18435
- .pf-v5-c-menu-toggle.pf-m-full-height {
18436
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18437
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18438
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18439
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18440
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18441
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18442
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18443
- height: 100%;
18444
- }
18445
18443
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18446
18444
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18447
18445
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18629,7 +18627,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18629
18627
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18630
18628
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18631
18629
  }
18632
- :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
18630
+ :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain, :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-full-height {
18633
18631
  background: transparent;
18634
18632
  }
18635
18633
 
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -308,12 +308,6 @@
308
308
  --pf-v5-global--target-size--MinHeight: 44px;
309
309
  }
310
310
 
311
- .pf-m-vf-font {
312
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
313
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
314
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
315
- }
316
-
317
311
  :where(.pf-theme-dark) .pf-v5-c-wizard__header, :where(.pf-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
318
312
  :where(.pf-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
319
313
  :where(.pf-theme-dark) .pf-v5-c-page__header, :where(.pf-theme-dark) .pf-v5-c-masthead, :where(.pf-theme-dark) .pf-v5-c-login__header,
@@ -546,6 +540,12 @@
546
540
  font-variant-numeric: tabular-nums;
547
541
  }
548
542
 
543
+ .pf-v5-m-vf-font {
544
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
545
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
546
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
547
+ }
548
+
549
549
  :where(html,
550
550
  body,
551
551
  p,
@@ -17143,8 +17143,6 @@ ul.pf-v5-c-list {
17143
17143
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17144
17144
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17145
17145
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17146
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17147
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17148
17146
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17149
17147
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17150
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17249,10 +17247,7 @@ ul.pf-v5-c-list {
17249
17247
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17250
17248
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17251
17249
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17252
- }
17253
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17254
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17255
- --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
17250
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
17256
17251
  }
17257
17252
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17258
17253
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17723,6 +17718,7 @@ ul.pf-v5-c-list {
17723
17718
 
17724
17719
  :where(.pf-theme-dark) .pf-v5-c-masthead {
17725
17720
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
17721
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
17726
17722
  color: var(--pf-v5-global--Color--100);
17727
17723
  }
17728
17724
  :where(.pf-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18391,6 +18387,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18391
18387
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18392
18388
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18393
18389
  --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
18390
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
18394
18391
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18395
18392
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18396
18393
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18511,6 +18508,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18511
18508
  display: inline-block;
18512
18509
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18513
18510
  }
18511
+ .pf-v5-c-menu-toggle.pf-m-full-height {
18512
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18513
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18514
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18515
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth);
18516
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18517
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18518
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18519
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18520
+ height: 100%;
18521
+ }
18514
18522
  .pf-v5-c-menu-toggle:hover {
18515
18523
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18516
18524
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18549,16 +18557,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18549
18557
  .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
18550
18558
  border: 0;
18551
18559
  }
18552
- .pf-v5-c-menu-toggle.pf-m-full-height {
18553
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18554
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18555
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18556
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18557
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18558
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18559
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18560
- height: 100%;
18561
- }
18562
18560
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18563
18561
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18564
18562
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18746,7 +18744,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18746
18744
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18747
18745
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18748
18746
  }
18749
- :where(.pf-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
18747
+ :where(.pf-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain, :where(.pf-theme-dark) .pf-v5-c-menu-toggle.pf-m-full-height {
18750
18748
  background: transparent;
18751
18749
  }
18752
18750
 
package/patternfly.css CHANGED
@@ -308,12 +308,6 @@
308
308
  --pf-v5-global--target-size--MinHeight: 44px;
309
309
  }
310
310
 
311
- .pf-m-vf-font {
312
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
313
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
314
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
315
- }
316
-
317
311
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
318
312
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
319
313
  :where(.pf-v5-theme-dark) .pf-v5-c-page__header, :where(.pf-v5-theme-dark) .pf-v5-c-masthead, :where(.pf-v5-theme-dark) .pf-v5-c-login__header,
@@ -546,6 +540,12 @@
546
540
  font-variant-numeric: tabular-nums;
547
541
  }
548
542
 
543
+ .pf-v5-m-vf-font {
544
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
545
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
546
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
547
+ }
548
+
549
549
  :where(html,
550
550
  body,
551
551
  p,
@@ -17143,8 +17143,6 @@ ul.pf-v5-c-list {
17143
17143
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17144
17144
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17145
17145
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17146
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17147
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17148
17146
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17149
17147
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17150
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17249,10 +17247,7 @@ ul.pf-v5-c-list {
17249
17247
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17250
17248
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17251
17249
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17252
- }
17253
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17254
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17255
- --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
17250
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
17256
17251
  }
17257
17252
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17258
17253
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17723,6 +17718,7 @@ ul.pf-v5-c-list {
17723
17718
 
17724
17719
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
17725
17720
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
17721
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
17726
17722
  color: var(--pf-v5-global--Color--100);
17727
17723
  }
17728
17724
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18391,6 +18387,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18391
18387
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18392
18388
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18393
18389
  --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
18390
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
18394
18391
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18395
18392
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18396
18393
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18511,6 +18508,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18511
18508
  display: inline-block;
18512
18509
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18513
18510
  }
18511
+ .pf-v5-c-menu-toggle.pf-m-full-height {
18512
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18513
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18514
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18515
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth);
18516
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18517
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18518
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18519
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18520
+ height: 100%;
18521
+ }
18514
18522
  .pf-v5-c-menu-toggle:hover {
18515
18523
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18516
18524
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18549,16 +18557,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18549
18557
  .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
18550
18558
  border: 0;
18551
18559
  }
18552
- .pf-v5-c-menu-toggle.pf-m-full-height {
18553
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18554
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18555
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18556
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18557
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18558
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18559
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18560
- height: 100%;
18561
- }
18562
18560
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18563
18561
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18564
18562
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18746,7 +18744,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18746
18744
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18747
18745
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18748
18746
  }
18749
- :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
18747
+ :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain, :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-full-height {
18750
18748
  background: transparent;
18751
18749
  }
18752
18750