Skip to content

Commit 7ecfaf6

Browse files
dancormieraaronshekey
dancormier
and
aaronshekey
authored
Replace Less font-family (@ff-*), font-size (@fs-*), line-height (@lh-*) variables with CSS variables (#896)
* Replace font and line-height Less vars w/ CSS vars Note: This PR places these variables within `html, body`. All other variables are in the scope of `body` only, but using that context would break the changes in _stacks-body.less * Update lib/css/exports/_stacks-constants-type.less Co-authored-by: Aaron Shekey <[email protected]> * Fix merge conflict Co-authored-by: Aaron Shekey <[email protected]>
1 parent 132ccd4 commit 7ecfaf6

30 files changed

+184
-183
lines changed

‎docs/assets/less/stacks-documentation.less‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -161,14 +161,14 @@
161161
.stacks-h4 {
162162
margin-bottom: 0;
163163
font-weight: 600;
164-
line-height: @lh-sm;
164+
line-height: var(--lh-sm);
165165
color: var(--fc-dark);
166166
text-rendering: optimizeLegibility;
167167
}
168168

169169
// -- Page Title
170170
.stacks-h1 {
171-
font-size: @fs-display1;
171+
font-size: var(--fs-display1);
172172
margin-bottom: 0.5em;
173173
}
174174

@@ -179,21 +179,21 @@
179179

180180
// -- Section Title
181181
.stacks-h2 {
182-
font-size: @fs-headline1;
182+
font-size: var(--fs-headline1);
183183
padding-top: @su64 + @su24; // Hack for #anchor positioning
184184
margin-top: -@su64 + -@su24; // Hack for #anchor positioning
185185
}
186186

187187
// -- Sub-section Title
188188
.stacks-h3 {
189-
font-size: @fs-subheading;
189+
font-size: var(--fs-subheading);
190190
color: var(--fc-medium);
191191
padding-top: @su64 + @su24; // Hack for #anchor positioning
192192
margin-top: -@su64 + -@su24; // Hack for #anchor positioning
193193
}
194194

195195
.stacks-h4 {
196-
font-size: @fs-body3;
196+
font-size: var(--fs-body3);
197197
color: var(--fc-light);
198198
}
199199

@@ -202,8 +202,8 @@
202202
.stacks-copy {
203203
margin-top: 0;
204204
margin-bottom: 1em;
205-
font-size: @fs-body3;
206-
line-height: @lh-lg;
205+
font-size: var(--fs-body3);
206+
line-height: var(--lh-lg);
207207
color: var(--fc-medium);
208208

209209
strong {
@@ -212,7 +212,7 @@
212212
}
213213

214214
.stacks-copy__lg {
215-
font-size: @fs-title;
215+
font-size: var(--fs-title);
216216
}
217217

218218

@@ -222,10 +222,10 @@
222222
padding: 3px 5px @su2 @su4;
223223
border-radius: var(--br-sm);
224224
background-color: var(--black-075);
225-
font-size: @fs-caption;
225+
font-size: var(--fs-caption);
226226
font-family: var(--ff-mono);
227227
color: var(--fc-dark);
228-
line-height: @lh-xs;
228+
line-height: var(--lh-xs);
229229
vertical-align: middle;
230230
overflow-wrap: break-word;
231231
white-space: normal;
@@ -237,8 +237,8 @@
237237
// ----------------------------------------------------------------------------
238238
.stacks-list {
239239
margin-bottom: 1em;
240-
font-size: @fs-body3;
241-
line-height: @lh-lg;
240+
font-size: var(--fs-body3);
241+
line-height: var(--lh-lg);
242242
color: var(--fc-medium);
243243
}
244244

@@ -277,7 +277,7 @@
277277
border-bottom-right-radius: var(--br-md);
278278
border: 1px solid var(--bc-medium);
279279
border-top-width: 0;
280-
font-size: @fs-body1;
280+
font-size: var(--fs-body1);
281281

282282
.dark-mode({
283283
border-color: var(--bc-lighter);
@@ -323,7 +323,7 @@
323323
border: 1px solid var(--bc-medium);
324324
background-color: var(--black-075);
325325
font-family: var(--ff-mono);
326-
font-size: @fs-caption;
326+
font-size: var(--fs-caption);
327327
color: var(--fc-dark);
328328
}
329329

@@ -366,7 +366,7 @@
366366
width: auto !important;
367367
height: auto !important;
368368
padding: 5px 8px;
369-
font-size: @fs-caption !important;
369+
font-size: var(--fs-caption) !important;
370370
line-height: 1 !important;
371371
color: var(--fc-light) !important;
372372
}

‎lib/css/atomic/_stacks-typography.less‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,21 @@ p {
2626
// $ TEXT SIZES
2727
// ----------------------------------------------------------------------------
2828
// Declare font sizes
29-
.fs-display4 { font-size: @fs-display4 !important; }
30-
.fs-display3 { font-size: @fs-display3 !important; }
31-
.fs-display2 { font-size: @fs-display2 !important; }
32-
.fs-display1 { font-size: @fs-display1 !important; }
33-
.fs-headline2 { font-size: @fs-headline2 !important; }
34-
.fs-headline1 { font-size: @fs-headline1 !important; }
35-
.fs-title { font-size: @fs-title !important; }
36-
.fs-subheading { font-size: @fs-subheading !important; }
37-
.fs-body3 { font-size: @fs-body3 !important; }
38-
.fs-body2 { font-size: @fs-body2 !important; }
39-
.fs-body1 { font-size: @fs-body1 !important; }
29+
.fs-display4 { font-size: var(--fs-display4) !important; }
30+
.fs-display3 { font-size: var(--fs-display3) !important; }
31+
.fs-display2 { font-size: var(--fs-display2) !important; }
32+
.fs-display1 { font-size: var(--fs-display1) !important; }
33+
.fs-headline2 { font-size: var(--fs-headline2) !important; }
34+
.fs-headline1 { font-size: var(--fs-headline1) !important; }
35+
.fs-title { font-size: var(--fs-title) !important; }
36+
.fs-subheading { font-size: var(--fs-subheading) !important; }
37+
.fs-body3 { font-size: var(--fs-body3) !important; }
38+
.fs-body2 { font-size: var(--fs-body2) !important; }
39+
.fs-body1 { font-size: var(--fs-body1) !important; }
4040

4141
.fs-caption,
42-
.fs-category { font-size: @fs-caption !important; }
43-
.fs-fine { font-size: @fs-fine !important; }
42+
.fs-category { font-size: var(--fs-caption) !important; }
43+
.fs-fine { font-size: var(--fs-fine) !important; }
4444

4545
#stacks-internals #screen-sm({
4646
.fs-display4 { font-size: 3.8rem !important; }
@@ -77,12 +77,12 @@ p {
7777
// ============================================================================
7878
// $ LINE HEIGHTS
7979
// ----------------------------------------------------------------------------
80-
.lh-xs { line-height: @lh-xs !important; }
81-
.lh-sm { line-height: @lh-sm !important; }
82-
.lh-md { line-height: @lh-md !important; }
83-
.lh-lg { line-height: @lh-lg !important; }
84-
.lh-xl { line-height: @lh-xl !important; }
85-
.lh-xxl { line-height: @lh-xxl !important; }
80+
.lh-xs { line-height: var(--lh-xs) !important; }
81+
.lh-sm { line-height: var(--lh-sm) !important; }
82+
.lh-md { line-height: var(--lh-md) !important; }
83+
.lh-lg { line-height: var(--lh-lg) !important; }
84+
.lh-xl { line-height: var(--lh-xl) !important; }
85+
.lh-xxl { line-height: var(--lh-xxl) !important; }
8686
.lh-unset { line-height: initial !important; }
8787

8888
// ============================================================================
@@ -160,20 +160,20 @@ p {
160160

161161
.v-truncate-fade {
162162
overflow: hidden;
163-
-webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 9em, transparent);
164-
mask-image: linear-gradient(180deg, #000 @lh-md * 9em, transparent);
165-
max-height: @lh-md * 12em;
163+
-webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
164+
mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
165+
max-height: calc(var(--lh-md) * 12em);
166166

167167
&.v-truncate-fade__sm {
168-
-webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 3em, transparent);
169-
mask-image: linear-gradient(180deg, #000 @lh-md * 3em, transparent);
170-
max-height: @lh-md * 6em;
168+
-webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
169+
mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
170+
max-height: calc(var(--lh-md) * 6em);
171171
}
172172

173173
&.v-truncate-fade__lg {
174-
-webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 21em, transparent);
175-
mask-image: linear-gradient(180deg, #000 @lh-md * 21em, transparent);
176-
max-height: @lh-md * 24em;
174+
-webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
175+
mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
176+
max-height: calc(var(--lh-md) * 24em);
177177
}
178178
}
179179

‎lib/css/base/_stacks-body.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ html,
2020
body {
2121
color: var(--theme-body-font-color);
2222
font-family: var(--theme-body-font-family);
23-
font-size: @fs-base;
24-
line-height: @lh-base;
23+
font-size: var(--fs-base);
24+
line-height: var(--lh-base);
2525
}
2626

2727
#stacks-internals #screen-sm({

‎lib/css/components/_stacks-activity-indicator.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
background-color: var(--theme-secondary-400);
2222
box-shadow: 0 0 0 @su4 var(--focus-ring);
2323
border-radius: 1000px;
24-
font-size: @fs-fine;
24+
font-size: var(--fs-fine);
2525
font-weight: 600;
2626
color: @white;
2727
text-transform: uppercase;

‎lib/css/components/_stacks-badges.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
border-width: 1px;
3636
border-style: solid;
3737
border-radius: var(--br-sm);
38-
font-size: @fs-caption;
38+
font-size: var(--fs-caption);
3939
font-weight: normal;
4040
line-height: 2;
4141
text-decoration: none;
@@ -66,15 +66,15 @@
6666
align-self: flex-start;
6767
padding-right: @su4;
6868
padding-left: @su4;
69-
font-size: @fs-fine;
69+
font-size: var(--fs-fine);
7070
line-height: 1.8;
7171
}
7272

7373
.s-badge__xs {
7474
align-self: flex-start;
7575
padding-right: @su2;
7676
padding-left: @su2;
77-
font-size: @fs-fine;
77+
font-size: var(--fs-fine);
7878
line-height: 1.5;
7979
}
8080

‎lib/css/components/_stacks-banners.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
border-radius: 0;
4141
box-shadow: none;
4242
color: var(--fc-medium);
43-
font-size: @fs-body1;
43+
font-size: var(--fs-body1);
4444

4545
// If you want to hide and reveal the banner
4646
&[aria-hidden="true"] {

‎lib/css/components/_stacks-blank-states.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
margin-right: auto;
1717

1818
p {
19-
font-size: @fs-body1;
19+
font-size: var(--fs-body1);
2020
margin-bottom: @su12;
2121

2222
strong {

‎lib/css/components/_stacks-breadcrumbs.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
flex-wrap: wrap;
1313
align-items: start;
1414
color: var(--black-150);
15-
font-size: @fs-caption;
15+
font-size: var(--fs-caption);
1616

1717
.s-breadcrumbs--item {
1818
display: flex;

‎lib/css/components/_stacks-buttons.less‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
background-color: transparent;
2727
outline: none;
2828
font-family: inherit;
29-
font-size: @fs-body1;
29+
font-size: var(--fs-body1);
3030
font-weight: normal;
31-
line-height: @lh-sm;
31+
line-height: var(--lh-sm);
3232
text-align: center;
3333
text-decoration: none;
3434
cursor: pointer;
@@ -109,7 +109,7 @@
109109

110110
&.s-btn__xs {
111111
padding: 0.6em;
112-
font-size: @fs-fine;
112+
font-size: var(--fs-fine);
113113

114114
&.s-btn__dropdown {
115115
padding-right: 1.5em;
@@ -125,7 +125,7 @@
125125
}
126126

127127
&.s-btn__sm {
128-
font-size: @fs-caption;
128+
font-size: var(--fs-caption);
129129

130130
&.s-btn__dropdown {
131131
padding-right: 2.05em;
@@ -135,7 +135,7 @@
135135
&.s-btn__md {
136136
padding: 0.7em;
137137
border-radius: calc(var(--br-sm) + 1px);
138-
font-size: @fs-body3;
138+
font-size: var(--fs-body3);
139139

140140
&.s-btn__dropdown {
141141
padding-right: 1.8em;
@@ -155,8 +155,8 @@
155155
display: inline-block;
156156
border-radius: var(--br-sm);
157157
padding: @su2 (@su4 - 1px);
158-
font-size: @fs-caption;
159-
line-height: @lh-xs;
158+
font-size: var(--fs-caption);
159+
line-height: var(--lh-xs);
160160
background-color: currentColor;
161161

162162
.highcontrast-mode({ opacity: 0.8; });

‎lib/css/components/_stacks-code-blocks.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
//
99

1010
pre.s-code-block {
11-
font-size: @fs-body1;
11+
font-size: var(--fs-body1);
1212
font-family: var(--ff-mono);
13-
line-height: @lh-md;
13+
line-height: var(--lh-md);
1414
color: var(--highlight-color);
1515
background-color: var(--highlight-bg);
1616
border-radius: var(--br-md);

0 commit comments

Comments
 (0)