@patternfly/patternfly 6.0.0-alpha.14 → 6.0.0-alpha.16

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 (22) 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/Hint/hint.css +28 -21
  6. package/components/Hint/hint.scss +28 -24
  7. package/components/List/list.css +16 -16
  8. package/components/List/list.scss +17 -17
  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 +117 -68
  18. package/patternfly-theme-dark-unversioned.css +119 -70
  19. package/patternfly.css +119 -70
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
  22. package/components/Hint/themes/dark/hint.scss +0 -8
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/Hint/hint.css CHANGED
@@ -1,19 +1,26 @@
1
- .pf-v5-c-hint {
2
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
5
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
6
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
7
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
8
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
9
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
10
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
11
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
12
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
13
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
14
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
1
+ :root {
2
+ --pf-v5-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
4
+ --pf-v5-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
6
+ --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
7
+ --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
+ --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
9
+ --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
10
+ --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
11
+ --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
13
+ --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
14
+ --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
15
+ --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16
+ --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
17
+ --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
18
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
16
20
  --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
21
+ }
22
+
23
+ .pf-v5-c-hint {
17
24
  display: grid;
18
25
  grid-template-columns: 1fr auto;
19
26
  grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
@@ -24,7 +31,7 @@
24
31
  color: var(--pf-v5-c-hint--Color);
25
32
  background-color: var(--pf-v5-c-hint--BackgroundColor);
26
33
  border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
27
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
34
+ border-radius: var(--pf-v5-c-hint--BorderRadius);
28
35
  }
29
36
  .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
30
37
  text-align: start;
@@ -47,7 +54,11 @@
47
54
  }
48
55
 
49
56
  .pf-v5-c-hint__title {
57
+ align-self: center;
58
+ font-family: var(--pf-v5-c-hint__title--FontFamily);
50
59
  font-size: var(--pf-v5-c-hint__title--FontSize);
60
+ font-weight: var(--pf-v5-c-hint__title--FontWeight);
61
+ line-height: var(--pf-v5-c-hint__title--LineHeight);
51
62
  }
52
63
 
53
64
  .pf-v5-c-hint__body {
@@ -57,12 +68,8 @@
57
68
 
58
69
  .pf-v5-c-hint__footer {
59
70
  grid-column: 1/-1;
71
+ margin-block-start: var(--pf-v5-c-hint__footer--MarginTop);
60
72
  }
61
73
  .pf-v5-c-hint__footer > :not(:last-child) {
62
74
  margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
63
- }
64
-
65
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
66
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
67
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
68
75
  }
package/components/Hint/hint.scss CHANGED
@@ -1,30 +1,36 @@
1
1
  // @debug $hint; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$hint} {
4
- --#{$hint}--GridRowGap: var(--#{$pf-global}--spacer--md);
5
- --#{$hint}--PaddingTop: var(--#{$pf-global}--spacer--lg);
6
- --#{$hint}--PaddingRight: var(--#{$pf-global}--spacer--lg);
7
- --#{$hint}--PaddingBottom: var(--#{$pf-global}--spacer--lg);
8
- --#{$hint}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
9
- --#{$hint}--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
10
- --#{$hint}--BorderColor: var(--#{$pf-global}--palette--blue-100);
11
- --#{$hint}--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$hint}--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
13
- --#{$hint}--Color: var(--#{$pf-global}--Color--100);
3
+ :root {
4
+ --#{$hint}--GridRowGap: var(--pf-t--global--spacer--sm);
5
+ --#{$hint}--PaddingTop: var(--pf-t--global--spacer--lg);
6
+ --#{$hint}--PaddingRight: var(--pf-t--global--spacer--lg);
7
+ --#{$hint}--PaddingBottom: var(--pf-t--global--spacer--lg);
8
+ --#{$hint}--PaddingLeft: var(--pf-t--global--spacer--lg);
9
+ --#{$hint}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10
+ --#{$hint}--BorderColor: var(--pf-t--global--border--color--status--info--default);
11
+ --#{$hint}--BorderWidth: var(--pf-t--global--border--width--200); // TODO - need semantic variable
12
+ --#{$hint}--BorderRadius: var(--pf-t--global--border--radius--medium);
13
+ --#{$hint}--Color: var(--pf-t--global--text--color--regular);
14
14
 
15
15
  // Hint Title
16
- --#{$hint}__title--FontSize: var(--#{$pf-global}--FontSize--lg);
16
+ --#{$hint}__title--FontFamily: var(--pf-t--global--font--family--heading);
17
+ --#{$hint}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
18
+ --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--heading);
19
+ --#{$hint}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
17
20
 
18
21
  // Hint Body
19
- --#{$hint}__body--FontSize: var(--#{$pf-global}--FontSize--md);
22
+ --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--md);
20
23
 
21
24
  // Hint Footer
22
- --#{$hint}__footer--child--MarginRight: var(--#{$pf-global}--spacer--md);
25
+ --#{$hint}__footer--MarginTop: var(--pf-t--global--spacer--sm);
26
+ --#{$hint}__footer--child--MarginRight: var(--pf-t--global--spacer--md);
23
27
 
24
28
  // Hint Actions
25
- --#{$hint}__actions--MarginLeft: var(--#{$pf-global}--spacer--2xl);
26
- --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
29
+ --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
30
+ --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO form element spacer
31
+ }
27
32
 
33
+ .#{$hint} {
28
34
  display: grid;
29
35
  grid-template-columns: 1fr auto;
30
36
  grid-row-gap: var(--#{$hint}--GridRowGap);
@@ -35,7 +41,7 @@
35
41
  color: var(--#{$hint}--Color);
36
42
  background-color: var(--#{$hint}--BackgroundColor);
37
43
  border: var(--#{$hint}--BorderWidth) solid var(--#{$hint}--BorderColor);
38
- box-shadow: var(--#{$hint}--BoxShadow);
44
+ border-radius: var(--#{$hint}--BorderRadius);
39
45
 
40
46
  // Remove this when the inline link button is updated
41
47
  .#{$button}.pf-m-link.pf-m-inline {
@@ -63,7 +69,11 @@
63
69
  }
64
70
 
65
71
  .#{$hint}__title {
72
+ align-self: center;
73
+ font-family: var(--#{$hint}__title--FontFamily);
66
74
  font-size: var(--#{$hint}__title--FontSize);
75
+ font-weight: var(--#{$hint}__title--FontWeight);
76
+ line-height: var(--#{$hint}__title--LineHeight);
67
77
  }
68
78
 
69
79
  .#{$hint}__body {
@@ -73,15 +83,9 @@
73
83
 
74
84
  .#{$hint}__footer {
75
85
  grid-column: 1 / -1;
86
+ margin-block-start: var(--#{$hint}__footer--MarginTop);
76
87
 
77
88
  > :not(:last-child) {
78
89
  margin-inline-end: var(--#{$hint}__footer--child--MarginRight);
79
90
  }
80
91
  }
81
-
82
- // stylelint-disable no-invalid-position-at-import-rule
83
- @import "themes/dark/hint";
84
-
85
- @include pf-v5-theme-dark {
86
- @include pf-v5-theme-dark-hint;
87
- }
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/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.14",
4
+ "version": "6.0.0-alpha.16",
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
  }