@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.38

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 (46) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Form/form.css +6 -0
  12. package/components/Form/form.scss +4 -1
  13. package/components/MenuToggle/menu-toggle.css +1 -0
  14. package/components/MenuToggle/menu-toggle.scss +2 -0
  15. package/components/Popover/popover.css +0 -2
  16. package/components/Popover/popover.scss +2 -2
  17. package/components/SimpleList/simple-list.css +35 -52
  18. package/components/SimpleList/simple-list.scss +41 -51
  19. package/components/Table/table.scss +1 -0
  20. package/components/Tooltip/tooltip.css +0 -2
  21. package/components/Tooltip/tooltip.scss +3 -3
  22. package/components/Truncate/truncate.css +4 -0
  23. package/components/Truncate/truncate.scss +3 -0
  24. package/docs/components/Accordion/examples/Accordion.md +6 -6
  25. package/docs/components/Alert/examples/Alert.md +2 -2
  26. package/docs/components/Brand/examples/Brand.md +9 -33
  27. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  28. package/docs/components/Card/examples/Card.md +18 -20
  29. package/docs/components/Check/examples/Check.md +1 -0
  30. package/docs/components/Content/examples/Content.md +5 -5
  31. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  32. package/docs/components/Label/examples/Label.md +11 -11
  33. package/docs/components/Nav/examples/Navigation.css +18 -2
  34. package/docs/components/Nav/examples/Navigation.md +1 -1
  35. package/docs/components/Radio/examples/Radio.md +1 -1
  36. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  37. package/docs/components/Table/examples/Table.md +8 -8
  38. package/docs/components/Truncate/examples/Truncate.css +2 -2
  39. package/docs/layouts/Flex/examples/Flex.md +11 -11
  40. package/package.json +32 -32
  41. package/patternfly-no-globals.css +59 -62
  42. package/patternfly-theme-dark-unversioned.css +59 -62
  43. package/patternfly.css +59 -62
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
package/patternfly.css CHANGED
@@ -7456,10 +7456,14 @@ button) {
7456
7456
  }
7457
7457
  }
7458
7458
 
7459
+ :root,
7459
7460
  .pf-v5-c-backdrop {
7460
7461
  --pf-v5-c-backdrop--Position: fixed;
7461
- --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
7462
- --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
7462
+ --pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
7463
+ --pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
7464
+ }
7465
+
7466
+ .pf-v5-c-backdrop {
7463
7467
  position: var(--pf-v5-c-backdrop--Position);
7464
7468
  inset-block-start: 0;
7465
7469
  inset-inline-start: 0;
@@ -7658,6 +7662,10 @@ button) {
7658
7662
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
7659
7663
  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
7660
7664
  }
7665
+ .pf-v5-c-banner.pf-m-custom {
7666
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-custom--BackgroundColor);
7667
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-custom--Color);
7668
+ }
7661
7669
  .pf-v5-c-banner.pf-m-red {
7662
7670
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
7663
7671
  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
@@ -8747,6 +8755,9 @@ button.pf-v5-c-breadcrumb__link {
8747
8755
  background-color: var(--pf-v5-c-card--BackgroundColor);
8748
8756
  box-shadow: var(--pf-v5-c-card--BoxShadow);
8749
8757
  }
8758
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
8759
+ gap: 0;
8760
+ }
8750
8761
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
8751
8762
  isolation: isolate;
8752
8763
  box-shadow: none;
@@ -15503,6 +15514,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15503
15514
  max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
15504
15515
  }
15505
15516
 
15517
+ .pf-v5-c-form__group {
15518
+ min-width: 0;
15519
+ }
15506
15520
  .pf-v5-c-form__group.pf-m-action {
15507
15521
  margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
15508
15522
  overflow: hidden;
@@ -15591,6 +15605,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15591
15605
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
15592
15606
  }
15593
15607
 
15608
+ .pf-v5-c-form__group-control {
15609
+ min-width: 0;
15610
+ }
15594
15611
  .pf-v5-c-form__group-control.pf-m-inline {
15595
15612
  display: flex;
15596
15613
  flex-flow: row wrap;
@@ -19383,6 +19400,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19383
19400
  align-self: stretch;
19384
19401
  }
19385
19402
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
19403
+ --pf-v5-c-check__input--TranslateY: 0;
19386
19404
  align-self: center;
19387
19405
  }
19388
19406
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
@@ -23158,12 +23176,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
23158
23176
 
23159
23177
  .pf-v5-c-popover__arrow {
23160
23178
  position: absolute;
23161
- /* stylelint-disable liberty/use-logical-spec */
23162
23179
  top: var(--pf-v5-c-popover__arrow--Top, auto);
23163
23180
  right: var(--pf-v5-c-popover__arrow--Right, auto);
23164
23181
  bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
23165
23182
  left: var(--pf-v5-c-popover__arrow--Left, auto);
23166
- /* stylelint-enable */
23167
23183
  width: var(--pf-v5-c-popover__arrow--Width);
23168
23184
  height: var(--pf-v5-c-popover__arrow--Height);
23169
23185
  pointer-events: none;
@@ -24986,34 +25002,31 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24986
25002
  --pf-v5-c-sidebar__panel--FlexBasis: 100%;
24987
25003
  }
24988
25004
  }
24989
- .pf-v5-c-simple-list {
24990
- --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-v5-global--spacer--xs);
24991
- --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-v5-global--spacer--md);
24992
- --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-v5-global--spacer--xs);
24993
- --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-v5-global--spacer--md);
24994
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
24995
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-global--Color--100);
24996
- --pf-v5-c-simple-list__item-link--FontSize: var(--pf-v5-global--FontSize--sm);
24997
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-global--FontWeight--normal);
24998
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--link--Color);
24999
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25000
- --pf-v5-c-simple-list__item-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
25001
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
25002
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25003
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
25004
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25005
- --pf-v5-c-simple-list__item-link--focus--FontWeight: var(--pf-v5-global--FontWeight--normal);
25006
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
25007
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25008
- --pf-v5-c-simple-list__item-link--active--FontWeight: var(--pf-v5-global--FontWeight--normal);
25009
- --pf-v5-c-simple-list__title--PaddingTop: var(--pf-v5-global--spacer--sm);
25010
- --pf-v5-c-simple-list__title--PaddingRight: var(--pf-v5-global--spacer--md);
25011
- --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-v5-global--spacer--sm);
25012
- --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-v5-global--spacer--md);
25013
- --pf-v5-c-simple-list__title--FontSize: var(--pf-v5-global--FontSize--sm);
25014
- --pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
25015
- --pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
25016
- --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
25005
+ :root, .pf-v5-c-simple-list {
25006
+ --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
25007
+ --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
25008
+ --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
25009
+ --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
25010
+ --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25011
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
25012
+ --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body);
25013
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
25014
+ --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
25015
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
25016
+ --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25017
+ --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
25018
+ --pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
25019
+ --pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
25020
+ --pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
25021
+ --pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
25022
+ --pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
25023
+ --pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
25024
+ --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
25025
+ --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
25026
+ --pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
25027
+ --pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
25028
+ --pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
25029
+ --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
25017
25030
  }
25018
25031
 
25019
25032
  .pf-v5-c-simple-list__item-link {
@@ -25024,31 +25037,28 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25024
25037
  padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
25025
25038
  padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
25026
25039
  font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
25027
- font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
25028
25040
  color: var(--pf-v5-c-simple-list__item-link--Color);
25029
25041
  text-align: start;
25042
+ text-decoration: none;
25030
25043
  background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
25031
25044
  border: none;
25045
+ border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
25046
+ }
25047
+ .pf-v5-c-simple-list__item-link.pf-m-link {
25048
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
25049
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
25050
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
25032
25051
  }
25033
- .pf-v5-c-simple-list__item-link:hover {
25052
+ .pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
25034
25053
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
25035
25054
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
25036
25055
  text-decoration: none;
25037
- }
25038
- .pf-v5-c-simple-list__item-link:focus {
25039
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
25040
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
25041
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
25042
- }
25043
- .pf-v5-c-simple-list__item-link:active {
25044
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
25045
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
25046
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
25056
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
25047
25057
  }
25048
25058
  .pf-v5-c-simple-list__item-link.pf-m-current {
25049
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
25050
25059
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
25051
25060
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
25061
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
25052
25062
  }
25053
25063
 
25054
25064
  .pf-v5-c-simple-list__title {
@@ -25065,21 +25075,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25065
25075
  margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
25066
25076
  }
25067
25077
 
25068
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
25069
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
25070
- }
25071
-
25072
- :where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
25073
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
25074
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
25075
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
25076
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
25077
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
25078
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
25079
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
25080
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
25081
- }
25082
-
25083
25078
  .pf-v5-c-skeleton {
25084
25079
  --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-150);
25085
25080
  --pf-v5-c-skeleton--Width: auto;
@@ -30893,12 +30888,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
30893
30888
 
30894
30889
  .pf-v5-c-tooltip__arrow {
30895
30890
  position: absolute;
30896
- /* stylelint-disable liberty/use-logical-spec */
30897
30891
  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
30898
30892
  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
30899
30893
  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
30900
30894
  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
30901
- /* stylelint-enable */
30902
30895
  width: var(--pf-v5-c-tooltip__arrow--Width);
30903
30896
  height: var(--pf-v5-c-tooltip__arrow--Height);
30904
30897
  pointer-events: none;
@@ -30907,9 +30900,13 @@ svg.pf-v5-c-spinner.pf-m-xl {
30907
30900
  transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
30908
30901
  }
30909
30902
 
30903
+ :root,
30910
30904
  .pf-v5-c-truncate {
30911
30905
  --pf-v5-c-truncate--MinWidth: 12ch;
30912
30906
  --pf-v5-c-truncate__start--MinWidth: 6ch;
30907
+ }
30908
+
30909
+ .pf-v5-c-truncate {
30913
30910
  display: inline-grid;
30914
30911
  grid-auto-flow: column;
30915
30912
  align-items: baseline;