Skip to content

Commit 3b092b4

Browse files
stephaniehobsonstephaniehobson
committed
typography v1
1 parent d650b24 commit 3b092b4

File tree

6 files changed

+188
-289
lines changed

6 files changed

+188
-289
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
## Migration Tips
1212

13+
* Dropped support for font-sizes in pixels, all font-sizes are in rem now.
1314
* See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
1415

1516
# 19.3.0

‎assets/sass/protocol/base/utilities/_titles.scss‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,73 +10,41 @@
1010
.mzp-u-title-2xl {
1111
@include text-title-2xl;
1212
font-family: $title-font-family;
13-
14-
@supports (--css: variables) {
15-
font-family: var(--title-font-family);
16-
}
1713
}
1814

1915
.mzp-u-title-xl {
2016
@include text-title-xl;
2117
font-family: $title-font-family;
22-
23-
@supports (--css: variables) {
24-
font-family: var(--title-font-family);
25-
}
2618
}
2719

2820
.mzp-u-title-lg {
2921
@include text-title-lg;
3022
font-family: $title-font-family;
31-
32-
@supports (--css: variables) {
33-
font-family: var(--title-font-family);
34-
}
3523
}
3624

3725
.mzp-u-title-md {
3826
@include text-title-md;
3927
font-family: $title-font-family;
40-
41-
@supports (--css: variables) {
42-
font-family: var(--title-font-family);
43-
}
4428
}
4529

4630
.mzp-u-title-sm {
4731
@include text-title-sm;
4832
font-family: $title-font-family;
49-
50-
@supports (--css: variables) {
51-
font-family: var(--title-font-family);
52-
}
5333
}
5434

5535
.mzp-u-title-xs {
5636
@include text-title-xs;
5737
font-family: $title-font-family;
58-
59-
@supports (--css: variables) {
60-
font-family: var(--title-font-family);
61-
}
6238
}
6339

6440
.mzp-u-title-2xs {
6541
@include text-title-2xs;
6642
font-family: $title-font-family;
67-
68-
@supports (--css: variables) {
69-
font-family: var(--title-font-family);
70-
}
7143
}
7244

7345
.mzp-u-title-3xs {
7446
@include text-title-3xs;
7547
font-family: $title-font-family;
76-
77-
@supports (--css: variables) {
78-
font-family: var(--title-font-family);
79-
}
8048
}
8149

8250
// Utility class for centered text.

‎assets/sass/protocol/includes/mixins/_typography.scss‎

Lines changed: 31 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@use '../themes-sass' as themes;
99
@use '../functions';
1010

11+
1112
// * -------------------------------------------------------------------------- */
1213
// Font families
1314
@mixin font-base {
@@ -23,9 +24,9 @@
2324
}
2425

2526
// * -------------------------------------------------------------------------- */
26-
// A mixin to output font-size in rems with a px fallback for old browsers.
27+
// A mixin to output font-size in rems.
2728
// Declare sizes in pixels for ease and clarity, the mixin does the math.
28-
// Requires: remify(), pixify() - defined in includes/themes.scss.
29+
// Requires: remify() - defined in includes/themes.scss.
2930
// Usage:
3031
// .foo { @include font-size(24px); }
3132

@@ -34,7 +35,6 @@
3435

3536
@if math.unit($size) == 'px' {
3637
font-size: $size;
37-
font-size: functions.remify($size);
3838
}
3939

4040
// When unit is not pixels, show an error
@@ -43,218 +43,79 @@
4343
}
4444
}
4545

46-
// * -------------------------------------------------------------------------- */
47-
// Consistent font sizes. Avoid sizing text arbitrarily and use this
48-
// set of predefined sizes. Sizes adapt at common breakpoints, and
49-
// there's some redundancy at smaller sizes because we don't want things
50-
// getting too tiny.
51-
5246
// Example usage:
5347
// .title { @include text-title-xl; }
5448
// .subtitle { @include text-title-lg; }
5549
// .intro { @include text-body-lg; }
5650

5751
@mixin text-title-2xl {
58-
@include font-size(themes.$title-xl-size);
59-
line-height: themes.$title-xl-line-height;
60-
61-
@media #{tokens.$mq-md} {
62-
@include font-size(themes.$title-2xl-size);
63-
line-height: themes.$title-2xl-line-height;
64-
}
65-
66-
@supports (--css: variables) {
67-
font-size: var(--title-xl-size);
68-
line-height: var(--title-xl-line-height);
69-
70-
@media #{tokens.$mq-md} {
71-
font-size: var(--title-2xl-size);
72-
line-height: var(--title-2xl-line-height);
73-
}
74-
}
52+
font-size: var(--title-2xl-size);
53+
line-height: var(--title-2xl-line-height);
7554
}
7655

7756
@mixin text-title-xl {
78-
@include font-size(themes.$title-lg-size);
79-
line-height: themes.$title-lg-line-height;
80-
81-
@media #{tokens.$mq-md} {
82-
@include font-size(themes.$title-xl-size);
83-
line-height: themes.$title-xl-line-height;
84-
}
85-
86-
@supports (--css: variables) {
87-
font-size: var(--title-lg-size);
88-
line-height: var(--title-lg-line-height);
89-
90-
@media #{tokens.$mq-md} {
91-
font-size: var(--title-xl-size);
92-
line-height: var(--title-xl-line-height);
93-
}
94-
}
57+
font-size: var(--title-xl-size);
58+
line-height: var(--title-xl-line-height);
9559
}
9660

9761
@mixin text-title-lg {
98-
@include font-size(themes.$title-md-size);
99-
line-height: themes.$title-md-line-height;
100-
101-
@media #{tokens.$mq-md} {
102-
@include font-size(themes.$title-lg-size);
103-
line-height: themes.$title-lg-line-height;
104-
}
105-
106-
@supports (--css: variables) {
107-
font-size: var(--title-md-size);
108-
line-height: var(--title-md-line-height);
109-
110-
@media #{tokens.$mq-md} {
111-
font-size: var(--title-lg-size);
112-
line-height: var(--title-lg-line-height);
113-
}
114-
}
62+
font-size: var(--title-lg-size);
63+
line-height: var(--title-lg-line-height);
11564
}
11665

11766
@mixin text-title-md {
118-
@include font-size(themes.$title-sm-size);
119-
line-height: themes.$title-sm-line-height;
120-
121-
@media #{tokens.$mq-md} {
122-
@include font-size(themes.$title-md-size);
123-
line-height: themes.$title-md-line-height;
124-
}
125-
126-
@supports (--css: variables) {
127-
font-size: var(--title-sm-size);
128-
line-height: var(--title-sm-line-height);
129-
130-
@media #{tokens.$mq-md} {
131-
font-size: var(--title-md-size);
132-
line-height: var(--title-md-line-height);
133-
}
134-
}
67+
font-size: var(--title-md-size);
68+
line-height: var(--title-md-line-height);
13569
}
13670

13771
@mixin text-title-sm {
138-
@include font-size(themes.$title-xs-size);
139-
line-height: themes.$title-xs-line-height;
140-
141-
@media #{tokens.$mq-md} {
142-
@include font-size(themes.$title-sm-size);
143-
line-height: themes.$title-sm-line-height;
144-
}
145-
146-
@supports (--css: variables) {
147-
font-size: var(--title-xs-size);
148-
line-height: var(--title-xs-line-height);
149-
150-
@media #{tokens.$mq-md} {
151-
font-size: var(--title-sm-size);
152-
line-height: var(--title-sm-line-height);
153-
}
154-
}
72+
font-size: var(--title-sm-size);
73+
line-height: var(--title-sm-line-height);
15574
}
15675

15776
@mixin text-title-xs {
158-
@include font-size(themes.$title-2xs-size);
159-
line-height: themes.$title-2xs-line-height;
160-
161-
@media #{tokens.$mq-md} {
162-
@include font-size(themes.$title-xs-size);
163-
line-height: themes.$title-xs-line-height;
164-
}
165-
166-
@supports (--css: variables) {
167-
font-size: var(--title-2xs-size);
168-
line-height: var(--title-2xs-line-height);
169-
170-
@media #{tokens.$mq-md} {
171-
font-size: var(--title-xs-size);
172-
line-height: var(--title-xs-line-height);
173-
}
174-
}
77+
font-size: var(--title-xs-size);
78+
line-height: var(--title-xs-line-height);
17579
}
17680

17781
@mixin text-title-2xs {
178-
@include font-size(themes.$title-3xs-size);
179-
line-height: themes.$title-3xs-line-height;
180-
181-
@media #{tokens.$mq-md} {
182-
@include font-size(themes.$title-2xs-size);
183-
line-height: themes.$title-2xs-line-height;
184-
}
185-
186-
@supports (--css: variables) {
187-
font-size: var(--title-3xs-size);
188-
line-height: var(--title-3xs-line-height);
189-
190-
@media #{tokens.$mq-md} {
191-
font-size: var(--title-2xs-size);
192-
line-height: var(--title-2xs-line-height);
193-
}
194-
}
82+
font-size: var(--title-2xs-size);
83+
line-height: var(--title-2xs-line-height);
19584
}
19685

19786
@mixin text-title-3xs {
198-
@include font-size(themes.$title-3xs-size);
199-
line-height: themes.$title-3xs-line-height;
200-
201-
@supports (--css: variables) {
202-
font-size: var(--title-3xs-size);
203-
line-height: var(--title-3xs-line-height);
204-
}
87+
font-size: var(--title-3xs-size);
88+
line-height: var(--title-3xs-line-height);
20589
}
20690

20791
// body copy
20892
@mixin text-body-xl {
209-
@include font-size(themes.$body-xl-size);
210-
line-height: themes.$body-line-height;
211-
212-
@supports (--css: variables) {
213-
font-size: var(--body-xl-size);
214-
line-height: var(--body-line-height);
215-
}
93+
font-size: var(--scale-body-xl);
94+
line-height: var(--title-body-line-height);
21695
}
21796

21897
@mixin text-body-lg {
219-
@include font-size(themes.$body-lg-size);
220-
line-height: themes.$body-line-height;
221-
222-
@supports (--css: variables) {
223-
font-size: var(--body-lg-size);
224-
line-height: var(--body-line-height);
225-
}
98+
font-size: var(--scale-body-lg);
99+
line-height: var(--title-body-line-height);
226100
}
227101

228102
@mixin text-body-md {
229-
@include font-size(themes.$body-md-size);
230-
line-height: themes.$body-line-height;
231-
232-
@supports (--css: variables) {
233-
font-size: var(--body-md-size);
234-
line-height: var(--body-line-height);
235-
}
103+
font-size: var(--scale-body-md);
104+
line-height: var(--title-body-line-height);
236105
}
237106

238107
@mixin text-body-sm {
239-
@include font-size(themes.$body-sm-size);
240-
line-height: themes.$body-line-height;
241-
242-
@supports (--css: variables) {
243-
font-size: var(--body-sm-size);
244-
line-height: var(--body-line-height);
245-
}
108+
font-size: var(--scale-body-sm);
109+
line-height: var(--title-body-line-height);
246110
}
247111

248112
@mixin text-body-xs {
249-
@include font-size(themes.$body-xs-size);
250-
line-height: themes.$body-line-height;
251-
252-
@supports (--css: variables) {
253-
font-size: var(--body-xs-size);
254-
line-height: var(--body-line-height);
255-
}
113+
font-size: var(--scale-body-xs);
114+
line-height: var(--title-body-line-height);
256115
}
257116

117+
118+
258119
// Aliases for backwards compatibility
259120
$text-body-line-height: themes.$body-line-height;
260121
$text-title-line-height: themes.$title-md-line-height;

0 commit comments

Comments
 (0)