@patternfly/patternfly 6.0.0-alpha.15 → 6.0.0-alpha.17

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 (21) hide show
  1. package/base/_globals.scss +2 -11
  2. package/base/patternfly-globals.css +2 -6
  3. package/base/patternfly-variables.css +3 -3
  4. package/base/tokens/_tokens-font.scss +3 -3
  5. package/components/List/list.css +16 -16
  6. package/components/List/list.scss +17 -17
  7. package/components/Page/page.css +5 -3
  8. package/components/Page/page.scss +5 -3
  9. package/components/Title/title.css +70 -19
  10. package/components/Title/title.scss +90 -20
  11. package/docs/components/Title/examples/Title.md +18 -0
  12. package/package.json +1 -1
  13. package/patternfly-base-no-globals-theme-dark-unversioned.css +3 -7
  14. package/patternfly-base-no-globals.css +3 -7
  15. package/patternfly-base-theme-dark-unversioned.css +5 -9
  16. package/patternfly-base.css +5 -9
  17. package/patternfly-no-globals.css +94 -45
  18. package/patternfly-theme-dark-unversioned.css +96 -47
  19. package/patternfly.css +96 -47
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -889,14 +889,14 @@
889
889
  --pf-t--global--font--size--heading--100: 16px;
890
890
  --pf-t--global--font--size--heading--200: 18px;
891
891
  --pf-t--global--font--size--heading--300: 20px;
892
- --pf-t--global--font--size--heading--400: 24px;
892
+ --pf-t--global--font--size--heading--400: 22px;
893
893
  --pf-t--global--font--size--heading--500: 28px;
894
894
  --pf-t--global--font--size--heading--600: 36px;
895
895
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
896
896
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
897
897
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
898
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
899
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
898
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
899
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
900
900
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
901
901
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
902
902
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
@@ -1460,8 +1460,8 @@ h6) {
1460
1460
  }
1461
1461
 
1462
1462
  *,
1463
- :where(*::before,
1464
- *::after) {
1463
+ *::before,
1464
+ *::after {
1465
1465
  box-sizing: border-box;
1466
1466
  }
1467
1467
 
@@ -1548,10 +1548,6 @@ button) {
1548
1548
  cursor: pointer;
1549
1549
  }
1550
1550
 
1551
- :where(.pf-v5-theme-dark) {
1552
- color-scheme: dark;
1553
- }
1554
-
1555
1551
  .pf-v5-t-dark.pf-m-transparent {
1556
1552
  background-color: transparent;
1557
1553
  }
@@ -17411,23 +17407,23 @@ button.pf-v5-c-label__content:focus {
17411
17407
  }
17412
17408
 
17413
17409
  .pf-v5-c-list {
17414
- --pf-v5-c-list--PaddingLeft: var(--pf-v5-global--spacer--lg);
17415
- --pf-v5-c-list--nested--MarginTop: var(--pf-v5-global--spacer--sm);
17416
- --pf-v5-c-list--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
17410
+ --pf-v5-c-list--PaddingLeft: var(--pf-t--global--spacer--lg);
17411
+ --pf-v5-c-list--nested--MarginTop: var(--pf-t--global--spacer--sm);
17412
+ --pf-v5-c-list--nested--MarginLeft: var(--pf-t--global--spacer--sm);
17417
17413
  --pf-v5-c-list--ul--ListStyle: var(--pf-v5-global--ListStyle);
17418
- --pf-v5-c-list--li--MarginTop: var(--pf-v5-global--spacer--sm);
17419
- --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-v5-global--spacer--lg);
17420
- --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-v5-global--spacer--sm);
17421
- --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
17422
- --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
17423
- --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
17424
- --pf-v5-c-list__item-icon--MarginTop: 0.375rem;
17425
- --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
17426
- --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--dark);
17427
- --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
17428
- --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--lg);
17429
- --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-v5-global--spacer--md);
17430
- --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
17414
+ --pf-v5-c-list--li--MarginTop: var(--pf-t--global--spacer--sm);
17415
+ --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
17416
+ --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);
17417
+ --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-t--global--border--color--default);
17418
+ --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
17419
+ --pf-v5-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
17420
+ --pf-v5-c-list__item-icon--MarginTop: var(--pf-t--global--spacer--xs);
17421
+ --pf-v5-c-list__item-icon--MarginRight: var(--pf-t--global--spacer--sm);
17422
+ --pf-v5-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
17423
+ --pf-v5-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
17424
+ --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
17425
+ --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-t--global--spacer--md);
17426
+ --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
17431
17427
  padding-inline-start: var(--pf-v5-c-list--PaddingLeft);
17432
17428
  }
17433
17429
  .pf-v5-c-list ol,
@@ -21755,11 +21751,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21755
21751
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
21756
21752
  --pf-v5-c-page__sidebar--MarginRight: 0;
21757
21753
  --pf-v5-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
21758
- --pf-v5-c-page__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--lg);
21754
+ --pf-v5-c-page__sidebar--PaddingInlineStart: 0;
21759
21755
  --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
21760
21756
  --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
21761
21757
  --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
21762
21758
  --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
21759
+ --pf-v5-c-page__sidebar-title--PaddingLeft: var(--pf-t--global--spacer--lg);
21763
21760
  --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
21764
21761
  --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
21765
21762
  --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
@@ -21979,8 +21976,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21979
21976
  grid-column-start: 1;
21980
21977
  width: var(--pf-v5-c-page__sidebar--Width);
21981
21978
  padding-block-start: 0;
21982
- padding-block-end: var(--pf-t--global--spacer--lg);
21983
- padding-inline-start: var(--pf-t--global--spacer--lg);
21979
+ padding-block-end: var(--pf-v5-c-page__sidebar--PaddingBlockEnd);
21980
+ padding-inline-start: var(--pf-v5-c-page__sidebar--PaddingInlineStart);
21984
21981
  margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
21985
21982
  overflow-x: hidden;
21986
21983
  overflow-y: auto;
@@ -22014,6 +22011,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22014
22011
  }
22015
22012
 
22016
22013
  .pf-v5-c-page__sidebar-title {
22014
+ padding-inline-start: var(--pf-v5-c-page__sidebar-title--PaddingLeft);
22017
22015
  font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
22018
22016
  font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
22019
22017
  font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
@@ -30689,26 +30687,47 @@ svg.pf-v5-c-spinner.pf-m-xl {
30689
30687
  --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor);
30690
30688
  }
30691
30689
 
30690
+ :root {
30691
+ --pf-v5-c-title--FontFamily: var(--pf-t--global--font--family--heading);
30692
+ --pf-v5-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
30693
+ --pf-v5-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
30694
+ --pf-v5-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
30695
+ --pf-v5-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
30696
+ --pf-v5-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
30697
+ --pf-v5-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
30698
+ --pf-v5-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
30699
+ --pf-v5-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
30700
+ --pf-v5-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
30701
+ --pf-v5-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
30702
+ --pf-v5-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
30703
+ --pf-v5-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
30704
+ --pf-v5-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
30705
+ --pf-v5-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
30706
+ --pf-v5-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
30707
+ --pf-v5-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
30708
+ --pf-v5-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
30709
+ --pf-v5-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
30710
+ --pf-v5-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
30711
+ --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--lg);
30712
+ --pf-v5-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
30713
+ --pf-v5-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
30714
+ --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--md);
30715
+ --pf-v5-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
30716
+ --pf-v5-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
30717
+ --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--sm);
30718
+ --pf-v5-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
30719
+ --pf-v5-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
30720
+ --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--xs);
30721
+ --pf-v5-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
30722
+ --pf-v5-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
30723
+ --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--xs);
30724
+ --pf-v5-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
30725
+ --pf-v5-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
30726
+ --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--xs);
30727
+ --pf-v5-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
30728
+ }
30729
+
30692
30730
  .pf-v5-c-title {
30693
- --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
30694
- --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
30695
- --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
30696
- --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
30697
- --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
30698
- --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl);
30699
- --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
30700
- --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
30701
- --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl);
30702
- --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
30703
- --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md);
30704
- --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl);
30705
- --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
30706
- --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md);
30707
- --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg);
30708
- --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal);
30709
- --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md);
30710
- --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md);
30711
- --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal);
30712
30731
  font-family: var(--pf-v5-c-title--FontFamily);
30713
30732
  word-break: break-word;
30714
30733
  }
@@ -30742,6 +30761,36 @@ svg.pf-v5-c-spinner.pf-m-xl {
30742
30761
  font-weight: var(--pf-v5-c-title--m-md--FontWeight);
30743
30762
  line-height: var(--pf-v5-c-title--m-md--LineHeight);
30744
30763
  }
30764
+ .pf-v5-c-title.pf-m-h1 {
30765
+ font-size: var(--pf-v5-c-title--m-h1--FontSize);
30766
+ font-weight: var(--pf-v5-c-title--m-h1--FontWeight);
30767
+ line-height: var(--pf-v5-c-title--m-h1--LineHeight);
30768
+ }
30769
+ .pf-v5-c-title.pf-m-h2 {
30770
+ font-size: var(--pf-v5-c-title--m-h2--FontSize);
30771
+ font-weight: var(--pf-v5-c-title--m-h2--FontWeight);
30772
+ line-height: var(--pf-v5-c-title--m-h2--LineHeight);
30773
+ }
30774
+ .pf-v5-c-title.pf-m-h3 {
30775
+ font-size: var(--pf-v5-c-title--m-h3--FontSize);
30776
+ font-weight: var(--pf-v5-c-title--m-h3--FontWeight);
30777
+ line-height: var(--pf-v5-c-title--m-h3--LineHeight);
30778
+ }
30779
+ .pf-v5-c-title.pf-m-h4 {
30780
+ font-size: var(--pf-v5-c-title--m-h4--FontSize);
30781
+ font-weight: var(--pf-v5-c-title--m-h4--FontWeight);
30782
+ line-height: var(--pf-v5-c-title--m-h4--LineHeight);
30783
+ }
30784
+ .pf-v5-c-title.pf-m-h5 {
30785
+ font-size: var(--pf-v5-c-title--m-h5--FontSize);
30786
+ font-weight: var(--pf-v5-c-title--m-h5--FontWeight);
30787
+ line-height: var(--pf-v5-c-title--m-h5--LineHeight);
30788
+ }
30789
+ .pf-v5-c-title.pf-m-h6 {
30790
+ font-size: var(--pf-v5-c-title--m-h6--FontSize);
30791
+ font-weight: var(--pf-v5-c-title--m-h6--FontWeight);
30792
+ line-height: var(--pf-v5-c-title--m-h6--LineHeight);
30793
+ }
30745
30794
 
30746
30795
  .pf-v5-c-toggle-group {
30747
30796
  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);