@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/base/_globals.scss CHANGED
@@ -33,10 +33,8 @@
33
33
  // Normalize
34
34
  @if $pf-v5-global--enable-normalize {
35
35
  *,
36
- :where(
37
- *::before,
38
- *::after
39
- ) {
36
+ *::before,
37
+ *::after {
40
38
  box-sizing: border-box;
41
39
  }
42
40
 
@@ -47,7 +45,6 @@
47
45
  height: 100%;
48
46
  }
49
47
 
50
- // TODO
51
48
  :where(body) {
52
49
  font-family: var(--pf-t--global--font--family--body);
53
50
  font-size: var(--pf-t--global--font--size--body);
@@ -139,9 +136,3 @@
139
136
  }
140
137
  }
141
138
 
142
- // stylelint-disable no-invalid-position-at-import-rule
143
- @import "./themes/dark/globals";
144
-
145
- @include pf-v5-theme-dark {
146
- @include pf-v5-theme-dark-globals;
147
- }
package/base/patternfly-globals.css CHANGED
@@ -26,8 +26,8 @@ h6) {
26
26
  }
27
27
 
28
28
  *,
29
- :where(*::before,
30
- *::after) {
29
+ *::before,
30
+ *::after {
31
31
  box-sizing: border-box;
32
32
  }
33
33
 
@@ -112,8 +112,4 @@ pre) {
112
112
  :where(a,
113
113
  button) {
114
114
  cursor: pointer;
115
- }
116
-
117
- :where(.pf-v5-theme-dark) {
118
- color-scheme: dark;
119
115
  }
package/base/patternfly-variables.css CHANGED
@@ -799,14 +799,14 @@
799
799
  --pf-t--global--font--size--heading--100: 16px;
800
800
  --pf-t--global--font--size--heading--200: 18px;
801
801
  --pf-t--global--font--size--heading--300: 20px;
802
- --pf-t--global--font--size--heading--400: 24px;
802
+ --pf-t--global--font--size--heading--400: 22px;
803
803
  --pf-t--global--font--size--heading--500: 28px;
804
804
  --pf-t--global--font--size--heading--600: 36px;
805
805
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
806
806
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
807
807
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
808
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
809
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
808
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
809
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
810
810
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
811
811
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
812
812
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
package/base/tokens/_tokens-font.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  --pf-t--global--font--size--heading--100: 16px;
21
21
  --pf-t--global--font--size--heading--200: 18px;
22
22
  --pf-t--global--font--size--heading--300: 20px;
23
- --pf-t--global--font--size--heading--400: 24px;
23
+ --pf-t--global--font--size--heading--400: 22px;
24
24
  --pf-t--global--font--size--heading--500: 28px;
25
25
  --pf-t--global--font--size--heading--600: 36px;
26
26
 
@@ -28,8 +28,8 @@
28
28
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
29
29
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
30
30
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
31
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
32
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
31
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
32
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
33
33
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
34
34
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
35
35
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
package/components/List/list.css CHANGED
@@ -1,21 +1,21 @@
1
1
  .pf-v5-c-list {
2
- --pf-v5-c-list--PaddingLeft: var(--pf-v5-global--spacer--lg);
3
- --pf-v5-c-list--nested--MarginTop: var(--pf-v5-global--spacer--sm);
4
- --pf-v5-c-list--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
2
+ --pf-v5-c-list--PaddingLeft: var(--pf-t--global--spacer--lg);
3
+ --pf-v5-c-list--nested--MarginTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-list--nested--MarginLeft: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-list--ul--ListStyle: var(--pf-v5-global--ListStyle);
6
- --pf-v5-c-list--li--MarginTop: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-v5-global--spacer--lg);
8
- --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
12
- --pf-v5-c-list__item-icon--MarginTop: 0.375rem;
13
- --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
14
- --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--dark);
15
- --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
16
- --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--lg);
17
- --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-v5-global--spacer--md);
18
- --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
6
+ --pf-v5-c-list--li--MarginTop: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-list--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
8
+ --pf-v5-c-list--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);
9
+ --pf-v5-c-list--m-bordered--li--BorderBottomColor: var(--pf-t--global--border--color--default);
10
+ --pf-v5-c-list--m-bordered--li--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
11
+ --pf-v5-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
12
+ --pf-v5-c-list__item-icon--MarginTop: var(--pf-t--global--spacer--xs);
13
+ --pf-v5-c-list__item-icon--MarginRight: var(--pf-t--global--spacer--sm);
14
+ --pf-v5-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
15
+ --pf-v5-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
16
+ --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
17
+ --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-t--global--spacer--md);
18
+ --pf-v5-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
19
19
  padding-inline-start: var(--pf-v5-c-list--PaddingLeft);
20
20
  }
21
21
  .pf-v5-c-list ol,
package/components/List/list.scss CHANGED
@@ -2,29 +2,29 @@
2
2
 
3
3
  .#{$list} {
4
4
  // list
5
- --#{$list}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
6
- --#{$list}--nested--MarginTop: var(--#{$pf-global}--spacer--sm);
7
- --#{$list}--nested--MarginLeft: var(--#{$pf-global}--spacer--sm);
8
- --#{$list}--ul--ListStyle: var(--#{$pf-global}--ListStyle);
9
- --#{$list}--li--MarginTop: var(--#{$pf-global}--spacer--sm);
5
+ --#{$list}--PaddingLeft: var(--pf-t--global--spacer--lg);
6
+ --#{$list}--nested--MarginTop: var(--pf-t--global--spacer--sm);
7
+ --#{$list}--nested--MarginLeft: var(--pf-t--global--spacer--sm);
8
+ --#{$list}--ul--ListStyle: var(--#{$pf-global}--ListStyle); // TODO add token?
9
+ --#{$list}--li--MarginTop: var(--pf-t--global--spacer--sm);
10
10
 
11
11
  // inline
12
- --#{$list}--m-inline--li--MarginRight: var(--#{$pf-global}--spacer--lg);
12
+ --#{$list}--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
13
13
 
14
14
  // bordered
15
- --#{$list}--m-bordered--li--PaddingBottom: var(--#{$pf-global}--spacer--sm);
16
- --#{$list}--m-bordered--li--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
17
- --#{$list}--m-bordered--li--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
15
+ --#{$list}--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);
16
+ --#{$list}--m-bordered--li--BorderBottomColor: var(--pf-t--global--border--color--default);
17
+ --#{$list}--m-bordered--li--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
18
18
 
19
19
  // icon
20
- --#{$list}__item-icon--MinWidth: var(--#{$pf-global}--icon--FontSize--sm);
21
- --#{$list}__item-icon--MarginTop: #{pf-size-prem(6px)};
22
- --#{$list}__item-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
23
- --#{$list}__item-icon--Color: var(--#{$pf-global}--icon--Color--dark);
24
- --#{$list}__item-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
25
- --#{$list}--m-icon-lg__item-icon--MinWidth: var(--#{$pf-global}--icon--FontSize--lg);
26
- --#{$list}--m-icon-lg__item-icon--MarginRight: var(--#{$pf-global}--spacer--md);
27
- --#{$list}--m-icon-lg__item-icon--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
20
+ --#{$list}__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
21
+ --#{$list}__item-icon--MarginTop: var(--pf-t--global--spacer--xs);
22
+ --#{$list}__item-icon--MarginRight: var(--pf-t--global--spacer--sm);
23
+ --#{$list}__item-icon--Color: var(--pf-t--global--icon--color--regular);
24
+ --#{$list}__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
25
+ --#{$list}--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
26
+ --#{$list}--m-icon-lg__item-icon--MarginRight: var(--pf-t--global--spacer--md);
27
+ --#{$list}--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
28
28
 
29
29
  padding-inline-start: var(--#{$list}--PaddingLeft);
30
30
 
package/components/Page/page.css CHANGED
@@ -103,11 +103,12 @@
103
103
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
104
104
  --pf-v5-c-page__sidebar--MarginRight: 0;
105
105
  --pf-v5-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
106
- --pf-v5-c-page__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--lg);
106
+ --pf-v5-c-page__sidebar--PaddingInlineStart: 0;
107
107
  --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
108
108
  --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
109
109
  --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
110
110
  --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
111
+ --pf-v5-c-page__sidebar-title--PaddingLeft: var(--pf-t--global--spacer--lg);
111
112
  --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
112
113
  --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
113
114
  --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
@@ -327,8 +328,8 @@
327
328
  grid-column-start: 1;
328
329
  width: var(--pf-v5-c-page__sidebar--Width);
329
330
  padding-block-start: 0;
330
- padding-block-end: var(--pf-t--global--spacer--lg);
331
- padding-inline-start: var(--pf-t--global--spacer--lg);
331
+ padding-block-end: var(--pf-v5-c-page__sidebar--PaddingBlockEnd);
332
+ padding-inline-start: var(--pf-v5-c-page__sidebar--PaddingInlineStart);
332
333
  margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
333
334
  overflow-x: hidden;
334
335
  overflow-y: auto;
@@ -362,6 +363,7 @@
362
363
  }
363
364
 
364
365
  .pf-v5-c-page__sidebar-title {
366
+ padding-inline-start: var(--pf-v5-c-page__sidebar-title--PaddingLeft);
365
367
  font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
366
368
  font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
367
369
  font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
package/components/Page/page.scss CHANGED
@@ -76,7 +76,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
76
76
  --#{$page}__sidebar--xl--TranslateX: 0;
77
77
  --#{$page}__sidebar--MarginRight: 0;
78
78
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
79
- --#{$page}__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--lg);
79
+ --#{$page}__sidebar--PaddingInlineStart: 0;
80
80
 
81
81
 
82
82
  // Sidebar header
@@ -84,6 +84,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
84
84
  --#{$page}__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
85
85
  --#{$page}__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
86
86
  --#{$page}__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
87
+ --#{$page}__sidebar-title--PaddingLeft: var(--pf-t--global--spacer--lg);
87
88
  --#{$page}__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
88
89
  --#{$page}__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
89
90
  --#{$page}__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
@@ -323,8 +324,8 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
323
324
  grid-column-start: 1;
324
325
  width: var(--#{$page}__sidebar--Width);
325
326
  padding-block-start: 0;
326
- padding-block-end: var(--pf-t--global--spacer--lg);
327
- padding-inline-start: var(--pf-t--global--spacer--lg);
327
+ padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
328
+ padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
328
329
  margin-inline-end: var(--#{$page}__sidebar--MarginRight);
329
330
  overflow-x: hidden;
330
331
  overflow-y: auto;
@@ -365,6 +366,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
365
366
  }
366
367
 
367
368
  .#{$page}__sidebar-title {
369
+ padding-inline-start: var(--#{$page}__sidebar-title--PaddingLeft);
368
370
  font-family: var(--#{$page}__sidebar-title--FontFamily);
369
371
  font-size: var(--#{$page}__sidebar-title--FontSize);
370
372
  font-weight: var(--#{$page}__sidebar-title--FontWeight);
package/components/Title/title.css CHANGED
@@ -1,23 +1,44 @@
1
+ :root {
2
+ --pf-v5-c-title--FontFamily: var(--pf-t--global--font--family--heading);
3
+ --pf-v5-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
4
+ --pf-v5-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
5
+ --pf-v5-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
6
+ --pf-v5-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
7
+ --pf-v5-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
8
+ --pf-v5-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
9
+ --pf-v5-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
10
+ --pf-v5-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
11
+ --pf-v5-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
12
+ --pf-v5-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
13
+ --pf-v5-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
14
+ --pf-v5-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
15
+ --pf-v5-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
16
+ --pf-v5-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
17
+ --pf-v5-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
18
+ --pf-v5-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
19
+ --pf-v5-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
20
+ --pf-v5-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
21
+ --pf-v5-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
22
+ --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--lg);
23
+ --pf-v5-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
24
+ --pf-v5-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
25
+ --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--md);
26
+ --pf-v5-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
27
+ --pf-v5-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
28
+ --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--sm);
29
+ --pf-v5-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
30
+ --pf-v5-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
31
+ --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--xs);
32
+ --pf-v5-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
33
+ --pf-v5-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
34
+ --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--xs);
35
+ --pf-v5-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
36
+ --pf-v5-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
37
+ --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--xs);
38
+ --pf-v5-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
39
+ }
40
+
1
41
  .pf-v5-c-title {
2
- --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
3
- --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
4
- --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
5
- --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
- --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
7
- --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl);
8
- --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
9
- --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
10
- --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl);
11
- --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
12
- --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md);
13
- --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl);
14
- --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
15
- --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md);
16
- --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg);
17
- --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal);
18
- --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md);
19
- --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md);
20
- --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal);
21
42
  font-family: var(--pf-v5-c-title--FontFamily);
22
43
  word-break: break-word;
23
44
  }
@@ -50,4 +71,34 @@
50
71
  font-size: var(--pf-v5-c-title--m-md--FontSize);
51
72
  font-weight: var(--pf-v5-c-title--m-md--FontWeight);
52
73
  line-height: var(--pf-v5-c-title--m-md--LineHeight);
74
+ }
75
+ .pf-v5-c-title.pf-m-h1 {
76
+ font-size: var(--pf-v5-c-title--m-h1--FontSize);
77
+ font-weight: var(--pf-v5-c-title--m-h1--FontWeight);
78
+ line-height: var(--pf-v5-c-title--m-h1--LineHeight);
79
+ }
80
+ .pf-v5-c-title.pf-m-h2 {
81
+ font-size: var(--pf-v5-c-title--m-h2--FontSize);
82
+ font-weight: var(--pf-v5-c-title--m-h2--FontWeight);
83
+ line-height: var(--pf-v5-c-title--m-h2--LineHeight);
84
+ }
85
+ .pf-v5-c-title.pf-m-h3 {
86
+ font-size: var(--pf-v5-c-title--m-h3--FontSize);
87
+ font-weight: var(--pf-v5-c-title--m-h3--FontWeight);
88
+ line-height: var(--pf-v5-c-title--m-h3--LineHeight);
89
+ }
90
+ .pf-v5-c-title.pf-m-h4 {
91
+ font-size: var(--pf-v5-c-title--m-h4--FontSize);
92
+ font-weight: var(--pf-v5-c-title--m-h4--FontWeight);
93
+ line-height: var(--pf-v5-c-title--m-h4--LineHeight);
94
+ }
95
+ .pf-v5-c-title.pf-m-h5 {
96
+ font-size: var(--pf-v5-c-title--m-h5--FontSize);
97
+ font-weight: var(--pf-v5-c-title--m-h5--FontWeight);
98
+ line-height: var(--pf-v5-c-title--m-h5--LineHeight);
99
+ }
100
+ .pf-v5-c-title.pf-m-h6 {
101
+ font-size: var(--pf-v5-c-title--m-h6--FontSize);
102
+ font-weight: var(--pf-v5-c-title--m-h6--FontWeight);
103
+ line-height: var(--pf-v5-c-title--m-h6--LineHeight);
53
104
  }
package/components/Title/title.scss CHANGED
@@ -1,38 +1,72 @@
1
1
  // @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$title} {
4
- --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading);
3
+ :root {
4
+ --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
5
5
 
6
+ // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
6
7
  // 4xl
7
- --#{$title}--m-4xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
8
- --#{$title}--m-4xl--FontSize: var(--#{$pf-global}--FontSize--4xl);
9
- --#{$title}--m-4xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
8
+ --#{$title}--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
9
+ --#{$title}--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
10
+ --#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
10
11
 
11
12
  // 3xl
12
- --#{$title}--m-3xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
13
- --#{$title}--m-3xl--FontSize: var(--#{$pf-global}--FontSize--3xl);
14
- --#{$title}--m-3xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
13
+ --#{$title}--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
14
+ --#{$title}--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
15
+ --#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
15
16
 
16
17
  // 2xl
17
- --#{$title}--m-2xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
18
- --#{$title}--m-2xl--FontSize: var(--#{$pf-global}--FontSize--2xl);
19
- --#{$title}--m-2xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
18
+ --#{$title}--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
19
+ --#{$title}--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
20
+ --#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
20
21
 
21
22
  // xl
22
- --#{$title}--m-xl--LineHeight: var(--#{$pf-global}--LineHeight--md);
23
- --#{$title}--m-xl--FontSize: var(--#{$pf-global}--FontSize--xl);
24
- --#{$title}--m-xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
23
+ --#{$title}--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
24
+ --#{$title}--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
25
+ --#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
25
26
 
26
27
  // lg
27
- --#{$title}--m-lg--LineHeight: var(--#{$pf-global}--LineHeight--md);
28
- --#{$title}--m-lg--FontSize: var(--#{$pf-global}--FontSize--lg);
29
- --#{$title}--m-lg--FontWeight: var(--#{$pf-global}--FontWeight--normal);
28
+ --#{$title}--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
29
+ --#{$title}--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
30
+ --#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
30
31
 
31
32
  // md
32
- --#{$title}--m-md--LineHeight: var(--#{$pf-global}--LineHeight--md);
33
- --#{$title}--m-md--FontSize: var(--#{$pf-global}--FontSize--md);
34
- --#{$title}--m-md--FontWeight: var(--#{$pf-global}--FontWeight--normal);
33
+ --#{$title}--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
34
+ --#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
35
+ --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
36
+
37
+ // HEADING modifiers
38
+ // h1
39
+ --#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
40
+ --#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--lg);
41
+ --#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
42
+
43
+ // h2
44
+ --#{$title}--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
45
+ --#{$title}--m-h2--FontSize: var(--pf-t--global--font--size--heading--md);
46
+ --#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
47
+
48
+ // h3
49
+ --#{$title}--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
50
+ --#{$title}--m-h3--FontSize: var(--pf-t--global--font--size--heading--sm);
51
+ --#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
52
+
53
+ // h4
54
+ --#{$title}--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
55
+ --#{$title}--m-h4--FontSize: var(--pf-t--global--font--size--heading--xs);
56
+ --#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
57
+
58
+ // h5
59
+ --#{$title}--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
60
+ --#{$title}--m-h5--FontSize: var(--pf-t--global--font--size--heading--xs);
61
+ --#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
35
62
 
63
+ // h6
64
+ --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
65
+ --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--xs);
66
+ --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
67
+ }
68
+
69
+ .#{$title} {
36
70
  font-family: var(--#{$title}--FontFamily);
37
71
  word-break: break-word;
38
72
 
@@ -71,4 +105,40 @@
71
105
  font-weight: var(--#{$title}--m-md--FontWeight);
72
106
  line-height: var(--#{$title}--m-md--LineHeight);
73
107
  }
108
+
109
+ &.pf-m-h1 {
110
+ font-size: var(--#{$title}--m-h1--FontSize);
111
+ font-weight: var(--#{$title}--m-h1--FontWeight);
112
+ line-height: var(--#{$title}--m-h1--LineHeight);
113
+ }
114
+
115
+ &.pf-m-h2 {
116
+ font-size: var(--#{$title}--m-h2--FontSize);
117
+ font-weight: var(--#{$title}--m-h2--FontWeight);
118
+ line-height: var(--#{$title}--m-h2--LineHeight);
119
+ }
120
+
121
+ &.pf-m-h3 {
122
+ font-size: var(--#{$title}--m-h3--FontSize);
123
+ font-weight: var(--#{$title}--m-h3--FontWeight);
124
+ line-height: var(--#{$title}--m-h3--LineHeight);
125
+ }
126
+
127
+ &.pf-m-h4 {
128
+ font-size: var(--#{$title}--m-h4--FontSize);
129
+ font-weight: var(--#{$title}--m-h4--FontWeight);
130
+ line-height: var(--#{$title}--m-h4--LineHeight);
131
+ }
132
+
133
+ &.pf-m-h5 {
134
+ font-size: var(--#{$title}--m-h5--FontSize);
135
+ font-weight: var(--#{$title}--m-h5--FontWeight);
136
+ line-height: var(--#{$title}--m-h5--LineHeight);
137
+ }
138
+
139
+ &.pf-m-h6 {
140
+ font-size: var(--#{$title}--m-h6--FontSize);
141
+ font-weight: var(--#{$title}--m-h6--FontWeight);
142
+ line-height: var(--#{$title}--m-h6--LineHeight);
143
+ }
74
144
  }
package/docs/components/Title/examples/Title.md CHANGED
@@ -16,6 +16,18 @@ cssPrefix: pf-v5-c-title
16
16
 
17
17
  ```
18
18
 
19
+ ### Heading level modifiers
20
+
21
+ ```html
22
+ <div class="pf-v5-c-title pf-m-h1">H1-styled title</div>
23
+ <div class="pf-v5-c-title pf-m-h2">H2-styled title</div>
24
+ <div class="pf-v5-c-title pf-m-h3">H3-styled title</div>
25
+ <div class="pf-v5-c-title pf-m-h4">H4-styled title</div>
26
+ <div class="pf-v5-c-title pf-m-h5">H5-styled title</div>
27
+ <div class="pf-v5-c-title pf-m-h6">H6-styled title</div>
28
+
29
+ ```
30
+
19
31
  ## Documentation
20
32
 
21
33
  ### Overview
@@ -44,3 +56,9 @@ The content component defines margin on headers. To regain the same spacing use,
44
56
  | `.pf-m-xl` | `.pf-v5-c-title` | Modifies for xl size |
45
57
  | `.pf-m-lg` | `.pf-v5-c-title` | Modifies for lg size |
46
58
  | `.pf-m-md` | `.pf-v5-c-title` | Modifies for md size |
59
+ | `.pf-m-h1` | `.pf-v5-c-title` | Modifies for default h1 size |
60
+ | `.pf-m-h2` | `.pf-v5-c-title` | Modifies for default h2 size |
61
+ | `.pf-m-h3` | `.pf-v5-c-title` | Modifies for default h3 size |
62
+ | `.pf-m-h4` | `.pf-v5-c-title` | Modifies for default h4 size |
63
+ | `.pf-m-h5` | `.pf-v5-c-title` | Modifies for default h5 size |
64
+ | `.pf-m-h6` | `.pf-v5-c-title` | Modifies for default h6 size |
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": "6.0.0-alpha.15",
4
+ "version": "6.0.0-alpha.17",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -826,14 +826,14 @@
826
826
  --pf-t--global--font--size--heading--100: 16px;
827
827
  --pf-t--global--font--size--heading--200: 18px;
828
828
  --pf-t--global--font--size--heading--300: 20px;
829
- --pf-t--global--font--size--heading--400: 24px;
829
+ --pf-t--global--font--size--heading--400: 22px;
830
830
  --pf-t--global--font--size--heading--500: 28px;
831
831
  --pf-t--global--font--size--heading--600: 36px;
832
832
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
833
833
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
834
834
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
835
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
836
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
835
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
836
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
837
837
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
838
838
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
839
839
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
@@ -1369,10 +1369,6 @@
1369
1369
  scale: -1 1;
1370
1370
  }
1371
1371
 
1372
- :where(.pf-theme-dark) {
1373
- color-scheme: dark;
1374
- }
1375
-
1376
1372
  .pf-t-dark.pf-m-transparent {
1377
1373
  background-color: transparent;
1378
1374
  }
package/patternfly-base-no-globals.css CHANGED
@@ -826,14 +826,14 @@
826
826
  --pf-t--global--font--size--heading--100: 16px;
827
827
  --pf-t--global--font--size--heading--200: 18px;
828
828
  --pf-t--global--font--size--heading--300: 20px;
829
- --pf-t--global--font--size--heading--400: 24px;
829
+ --pf-t--global--font--size--heading--400: 22px;
830
830
  --pf-t--global--font--size--heading--500: 28px;
831
831
  --pf-t--global--font--size--heading--600: 36px;
832
832
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
833
833
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
834
834
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
835
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
836
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
835
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
836
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
837
837
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
838
838
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
839
839
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
@@ -1369,10 +1369,6 @@
1369
1369
  scale: -1 1;
1370
1370
  }
1371
1371
 
1372
- :where(.pf-v5-theme-dark) {
1373
- color-scheme: dark;
1374
- }
1375
-
1376
1372
  .pf-v5-t-dark.pf-m-transparent {
1377
1373
  background-color: transparent;
1378
1374
  }
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -826,14 +826,14 @@
826
826
  --pf-t--global--font--size--heading--100: 16px;
827
827
  --pf-t--global--font--size--heading--200: 18px;
828
828
  --pf-t--global--font--size--heading--300: 20px;
829
- --pf-t--global--font--size--heading--400: 24px;
829
+ --pf-t--global--font--size--heading--400: 22px;
830
830
  --pf-t--global--font--size--heading--500: 28px;
831
831
  --pf-t--global--font--size--heading--600: 36px;
832
832
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
833
833
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
834
834
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
835
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
836
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
835
+ --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
836
+ --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
837
837
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
838
838
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
839
839
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
@@ -1397,8 +1397,8 @@ h6) {
1397
1397
  }
1398
1398
 
1399
1399
  *,
1400
- :where(*::before,
1401
- *::after) {
1400
+ *::before,
1401
+ *::after {
1402
1402
  box-sizing: border-box;
1403
1403
  }
1404
1404
 
@@ -1485,10 +1485,6 @@ button) {
1485
1485
  cursor: pointer;
1486
1486
  }
1487
1487
 
1488
- :where(.pf-theme-dark) {
1489
- color-scheme: dark;
1490
- }
1491
-
1492
1488
  .pf-t-dark.pf-m-transparent {
1493
1489
  background-color: transparent;
1494
1490
  }