1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
@use '../../sass-utilities' as *;
@include pf-root($title) {
--#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
// SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
// 4xl
--#{$title}--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
--#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
// 3xl
--#{$title}--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
--#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
// 2xl
--#{$title}--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
--#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
// xl
--#{$title}--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
--#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
// lg
--#{$title}--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
--#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading--default);
// md
--#{$title}--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
--#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);
// HEADING modifiers
// h1
--#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
--#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
// h2
--#{$title}--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
--#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
// h3
--#{$title}--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
--#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
// h4
--#{$title}--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
--#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
// h5
--#{$title}--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
--#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
// h6
--#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
--#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
--#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
// Page title
--#{$title}--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
}
.#{$title} {
font-family: var(--#{$title}--FontFamily);
word-break: break-word;
&.pf-m-4xl {
font-size: var(--#{$title}--m-4xl--FontSize);
font-weight: var(--#{$title}--m-4xl--FontWeight);
line-height: var(--#{$title}--m-4xl--LineHeight);
}
&.pf-m-3xl {
font-size: var(--#{$title}--m-3xl--FontSize);
font-weight: var(--#{$title}--m-3xl--FontWeight);
line-height: var(--#{$title}--m-3xl--LineHeight);
}
&.pf-m-2xl {
font-size: var(--#{$title}--m-2xl--FontSize);
font-weight: var(--#{$title}--m-2xl--FontWeight);
line-height: var(--#{$title}--m-2xl--LineHeight);
}
&.pf-m-xl {
font-size: var(--#{$title}--m-xl--FontSize);
font-weight: var(--#{$title}--m-xl--FontWeight);
line-height: var(--#{$title}--m-xl--LineHeight);
}
&.pf-m-lg {
font-size: var(--#{$title}--m-lg--FontSize);
font-weight: var(--#{$title}--m-lg--FontWeight);
line-height: var(--#{$title}--m-lg--LineHeight);
}
&.pf-m-md {
font-size: var(--#{$title}--m-md--FontSize);
font-weight: var(--#{$title}--m-md--FontWeight);
line-height: var(--#{$title}--m-md--LineHeight);
}
&.pf-m-h1 {
font-size: var(--#{$title}--m-h1--FontSize);
font-weight: var(--#{$title}--m-h1--FontWeight);
line-height: var(--#{$title}--m-h1--LineHeight);
}
&.pf-m-h2 {
font-size: var(--#{$title}--m-h2--FontSize);
font-weight: var(--#{$title}--m-h2--FontWeight);
line-height: var(--#{$title}--m-h2--LineHeight);
}
&.pf-m-h3 {
font-size: var(--#{$title}--m-h3--FontSize);
font-weight: var(--#{$title}--m-h3--FontWeight);
line-height: var(--#{$title}--m-h3--LineHeight);
}
&.pf-m-h4 {
font-size: var(--#{$title}--m-h4--FontSize);
font-weight: var(--#{$title}--m-h4--FontWeight);
line-height: var(--#{$title}--m-h4--LineHeight);
}
&.pf-m-h5 {
font-size: var(--#{$title}--m-h5--FontSize);
font-weight: var(--#{$title}--m-h5--FontWeight);
line-height: var(--#{$title}--m-h5--LineHeight);
}
&.pf-m-h6 {
font-size: var(--#{$title}--m-h6--FontSize);
font-weight: var(--#{$title}--m-h6--FontWeight);
line-height: var(--#{$title}--m-h6--LineHeight);
}
&.pf-m-page-title {
font-weight: var(--#{$title}--m-page-title--FontWeight);
}
}
|
