@patternfly/patternfly 5.0.0-prerelease.1 → 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 (45) 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/CalendarMonth/calendar-month.css +3 -0
  6. package/components/CalendarMonth/calendar-month.scss +2 -0
  7. package/components/CalendarMonth/themes/dark/calendar-month.scss +4 -0
  8. package/components/Masthead/masthead.css +2 -6
  9. package/components/Masthead/masthead.scss +1 -7
  10. package/components/Masthead/themes/dark/masthead.scss +1 -0
  11. package/components/MenuToggle/menu-toggle.css +13 -11
  12. package/components/MenuToggle/menu-toggle.scss +14 -12
  13. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  14. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  15. package/docs/demos/Alert/examples/Alert.md +126 -2322
  16. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  17. package/docs/demos/Banner/examples/Banner.md +84 -1588
  18. package/docs/demos/CardView/examples/CardView.md +42 -774
  19. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  20. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  21. package/docs/demos/DataList/examples/DataList.md +191 -3119
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  23. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  24. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  25. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  26. package/docs/demos/Modal/examples/Modal.md +252 -4644
  27. package/docs/demos/Nav/examples/Nav.md +336 -6192
  28. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  29. package/docs/demos/Page/examples/Page.md +378 -6966
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  31. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  32. package/docs/demos/Table/examples/Table.md +752 -11732
  33. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  34. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  35. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  36. package/package.json +1 -1
  37. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  38. package/patternfly-base-no-globals.css +6 -6
  39. package/patternfly-base-theme-dark-unversioned.css +6 -6
  40. package/patternfly-base.css +6 -6
  41. package/patternfly-no-globals.css +24 -23
  42. package/patternfly-theme-dark-unversioned.css +24 -23
  43. package/patternfly.css +24 -23
  44. package/patternfly.min.css +1 -1
  45. 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.1",
4
+ "version": "5.0.0-prerelease.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -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
  }
@@ -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
  }
@@ -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,
@@ -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,
@@ -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
  }
@@ -7503,6 +7503,7 @@ button.pf-v5-c-breadcrumb__link {
7503
7503
  }
7504
7504
 
7505
7505
  .pf-v5-c-calendar-month {
7506
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7506
7507
  --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
7507
7508
  --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
7508
7509
  --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -7560,6 +7561,7 @@ button.pf-v5-c-breadcrumb__link {
7560
7561
  flex-direction: column;
7561
7562
  padding: var(--pf-v5-c-calendar-month--PaddingTop) var(--pf-v5-c-calendar-month--PaddingRight) var(--pf-v5-c-calendar-month--PaddingBottom) var(--pf-v5-c-calendar-month--PaddingLeft);
7562
7563
  font-size: var(--pf-v5-c-calendar-month--FontSize);
7564
+ background-color: var(--pf-v5-c-calendar-month--BackgroundColor);
7563
7565
  }
7564
7566
 
7565
7567
  .pf-v5-c-calendar-month__header {
@@ -7704,6 +7706,7 @@ button.pf-v5-c-breadcrumb__link {
7704
7706
  }
7705
7707
 
7706
7708
  :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
7709
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
7707
7710
  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
7708
7711
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
7709
7712
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
@@ -17023,8 +17026,6 @@ ul.pf-v5-c-list {
17023
17026
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17024
17027
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17025
17028
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17026
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17027
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17028
17029
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17029
17030
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17030
17031
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17129,10 +17130,7 @@ ul.pf-v5-c-list {
17129
17130
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17130
17131
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17131
17132
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17132
- }
17133
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17134
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17135
- --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;
17136
17134
  }
17137
17135
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17138
17136
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17603,6 +17601,7 @@ ul.pf-v5-c-list {
17603
17601
 
17604
17602
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
17605
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);
17606
17605
  color: var(--pf-v5-global--Color--100);
17607
17606
  }
17608
17607
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18271,6 +18270,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18271
18270
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18272
18271
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18273
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);
18274
18274
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18275
18275
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18276
18276
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18391,6 +18391,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18391
18391
  display: inline-block;
18392
18392
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18393
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
+ }
18394
18405
  .pf-v5-c-menu-toggle:hover {
18395
18406
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18396
18407
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18429,16 +18440,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18429
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 {
18430
18441
  border: 0;
18431
18442
  }
18432
- .pf-v5-c-menu-toggle.pf-m-full-height {
18433
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18434
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18435
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18436
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18437
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18438
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18439
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18440
- height: 100%;
18441
- }
18442
18443
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18443
18444
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18444
18445
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18626,7 +18627,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18626
18627
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18627
18628
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18628
18629
  }
18629
- :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 {
18630
18631
  background: transparent;
18631
18632
  }
18632
18633
 
@@ -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,
@@ -7620,6 +7620,7 @@ button.pf-v5-c-breadcrumb__link {
7620
7620
  }
7621
7621
 
7622
7622
  .pf-v5-c-calendar-month {
7623
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7623
7624
  --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
7624
7625
  --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
7625
7626
  --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -7677,6 +7678,7 @@ button.pf-v5-c-breadcrumb__link {
7677
7678
  flex-direction: column;
7678
7679
  padding: var(--pf-v5-c-calendar-month--PaddingTop) var(--pf-v5-c-calendar-month--PaddingRight) var(--pf-v5-c-calendar-month--PaddingBottom) var(--pf-v5-c-calendar-month--PaddingLeft);
7679
7680
  font-size: var(--pf-v5-c-calendar-month--FontSize);
7681
+ background-color: var(--pf-v5-c-calendar-month--BackgroundColor);
7680
7682
  }
7681
7683
 
7682
7684
  .pf-v5-c-calendar-month__header {
@@ -7821,6 +7823,7 @@ button.pf-v5-c-breadcrumb__link {
7821
7823
  }
7822
7824
 
7823
7825
  :where(.pf-theme-dark) .pf-v5-c-calendar-month {
7826
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
7824
7827
  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
7825
7828
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
7826
7829
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
@@ -17140,8 +17143,6 @@ ul.pf-v5-c-list {
17140
17143
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17141
17144
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17145
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17143
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17144
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
17146
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17146
17147
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17147
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17246,10 +17247,7 @@ ul.pf-v5-c-list {
17246
17247
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17247
17248
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17248
17249
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17249
- }
17250
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17251
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17252
- --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;
17253
17251
  }
17254
17252
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17255
17253
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17720,6 +17718,7 @@ ul.pf-v5-c-list {
17720
17718
 
17721
17719
  :where(.pf-theme-dark) .pf-v5-c-masthead {
17722
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);
17723
17722
  color: var(--pf-v5-global--Color--100);
17724
17723
  }
17725
17724
  :where(.pf-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18388,6 +18387,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18388
18387
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18389
18388
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18390
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);
18391
18391
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18392
18392
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18393
18393
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18508,6 +18508,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18508
18508
  display: inline-block;
18509
18509
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18510
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
+ }
18511
18522
  .pf-v5-c-menu-toggle:hover {
18512
18523
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18513
18524
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18546,16 +18557,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18546
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 {
18547
18558
  border: 0;
18548
18559
  }
18549
- .pf-v5-c-menu-toggle.pf-m-full-height {
18550
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18551
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18552
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18553
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18554
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18555
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18556
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18557
- height: 100%;
18558
- }
18559
18560
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18560
18561
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18561
18562
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18743,7 +18744,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18743
18744
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18744
18745
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18745
18746
  }
18746
- :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 {
18747
18748
  background: transparent;
18748
18749
  }
18749
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,
@@ -7620,6 +7620,7 @@ button.pf-v5-c-breadcrumb__link {
7620
7620
  }
7621
7621
 
7622
7622
  .pf-v5-c-calendar-month {
7623
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7623
7624
  --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
7624
7625
  --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
7625
7626
  --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -7677,6 +7678,7 @@ button.pf-v5-c-breadcrumb__link {
7677
7678
  flex-direction: column;
7678
7679
  padding: var(--pf-v5-c-calendar-month--PaddingTop) var(--pf-v5-c-calendar-month--PaddingRight) var(--pf-v5-c-calendar-month--PaddingBottom) var(--pf-v5-c-calendar-month--PaddingLeft);
7679
7680
  font-size: var(--pf-v5-c-calendar-month--FontSize);
7681
+ background-color: var(--pf-v5-c-calendar-month--BackgroundColor);
7680
7682
  }
7681
7683
 
7682
7684
  .pf-v5-c-calendar-month__header {
@@ -7821,6 +7823,7 @@ button.pf-v5-c-breadcrumb__link {
7821
7823
  }
7822
7824
 
7823
7825
  :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
7826
+ --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
7824
7827
  --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
7825
7828
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
7826
7829
  --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
@@ -17140,8 +17143,6 @@ ul.pf-v5-c-list {
17140
17143
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
17141
17144
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
17142
17145
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
17143
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
17144
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17145
17146
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
17146
17147
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
17147
17148
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -17246,10 +17247,7 @@ ul.pf-v5-c-list {
17246
17247
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
17247
17248
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
17248
17249
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
17249
- }
17250
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
17251
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
17252
- --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;
17253
17251
  }
17254
17252
  .pf-v5-c-masthead .pf-v5-c-context-selector {
17255
17253
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -17720,6 +17718,7 @@ ul.pf-v5-c-list {
17720
17718
 
17721
17719
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
17722
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);
17723
17722
  color: var(--pf-v5-global--Color--100);
17724
17723
  }
17725
17724
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
@@ -18388,6 +18387,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18388
18387
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
18389
18388
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
18390
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);
18391
18391
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18392
18392
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
18393
18393
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -18508,6 +18508,17 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18508
18508
  display: inline-block;
18509
18509
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
18510
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
+ }
18511
18522
  .pf-v5-c-menu-toggle:hover {
18512
18523
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
18513
18524
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -18546,16 +18557,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18546
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 {
18547
18558
  border: 0;
18548
18559
  }
18549
- .pf-v5-c-menu-toggle.pf-m-full-height {
18550
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
18551
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
18552
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
18553
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
18554
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
18555
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
18556
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
18557
- height: 100%;
18558
- }
18559
18560
  .pf-v5-c-menu-toggle.pf-m-typeahead {
18560
18561
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
18561
18562
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -18743,7 +18744,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18743
18744
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
18744
18745
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18745
18746
  }
18746
- :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 {
18747
18748
  background: transparent;
18748
18749
  }
18749
18750