Skip to content

Commit 2b1f07e

Browse files
Rachel RoppoloRachel Roppolo
Rachel Roppolo
authored and
Rachel Roppolo
committed
Merge branch 'release/1.21.0' into main
2 parents 268a510 + 680341f commit 2b1f07e

File tree

4 files changed

+30
-31
lines changed

4 files changed

+30
-31
lines changed

‎scss/global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700:latin');
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
22
@import './theme';
33
@import './baseline';

‎scss/typography.scss‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,51 @@
1-
$font-family: Lato, Arial, sans-serif;
2-
//TODO Use font-weight variables in mixins https://github.com/user-interviews/ui-design-system/issues/57
1+
$font-family: DM Sans, sans-serif;
32
$font-weight-light: 300;
43
$font-weight-normal: 400;
54
$font-weight-bold: 700;
65
$font-size-base: 0.875rem;
76

87
@mixin font-type-10() {
98
font-size: .625rem;
10-
font-weight: 400;
9+
font-weight: $font-weight-normal;
1110
letter-spacing: 0.0625rem;
1211
line-height: 0.875rem;
1312
text-transform: uppercase;
1413
}
1514

1615
@mixin font-type-20() {
1716
font-size: .75rem;
18-
font-weight: 400;
17+
font-weight: $font-weight-normal;
1918
line-height: 1rem;
2019
}
2120

2221
@mixin font-type-30() {
2322
font-size: 0.875rem;
24-
font-weight: 400;
23+
font-weight: $font-weight-normal;
2524
line-height: 1.25rem;
2625
}
2726

2827
@mixin font-type-40() {
2928
// font-size: $font-size-base; -- should base be changed to 1 rem?
3029
font-size: 1rem;
31-
font-weight: 400;
30+
font-weight: $font-weight-normal;
3231
line-height: 1.375rem;
3332
}
3433

3534
@mixin font-type-50() {
3635
font-size: 1.125rem;
37-
font-weight: 400;
36+
font-weight: $font-weight-normal;
3837
line-height: 1.5rem;
3938
}
4039

4140
@mixin font-type-60() {
4241
font-size: 1.25rem;
43-
font-weight: 400;
42+
font-weight: $font-weight-normal;
4443
line-height: 1.625rem;
4544
}
4645

4746
@mixin font-type-70() {
4847
font-size: 1.5rem;
49-
font-weight: 400;
48+
font-weight: $font-weight-normal;
5049
line-height: 2rem;
5150
}
5251

@@ -57,7 +56,7 @@ $font-size-base: 0.875rem;
5756

5857
@mixin font-type-10--light() {
5958
@include font-type-10;
60-
font-weight: 300;
59+
font-weight: $font-weight-light;
6160
}
6261

6362
@mixin font-type-20--bold() {
@@ -67,7 +66,7 @@ $font-size-base: 0.875rem;
6766

6867
@mixin font-type-20--light() {
6968
@include font-type-20;
70-
font-weight: 300;
69+
font-weight: $font-weight-light;
7170
}
7271

7372
@mixin font-type-30--bold() {
@@ -77,7 +76,7 @@ $font-size-base: 0.875rem;
7776

7877
@mixin font-type-30--light() {
7978
@include font-type-30;
80-
font-weight: 300;
79+
font-weight: $font-weight-light;
8180
}
8281

8382
@mixin font-type-40--bold() {
@@ -87,7 +86,7 @@ $font-size-base: 0.875rem;
8786

8887
@mixin font-type-40--light() {
8988
@include font-type-40;
90-
font-weight: 300;
89+
font-weight: $font-weight-light;
9190
}
9291

9392
@mixin font-type-50--bold() {
@@ -97,7 +96,7 @@ $font-size-base: 0.875rem;
9796

9897
@mixin font-type-50--light() {
9998
@include font-type-50;
100-
font-weight: 300;
99+
font-weight: $font-weight-light;
101100
}
102101

103102
@mixin font-type-60--bold() {
@@ -107,7 +106,7 @@ $font-size-base: 0.875rem;
107106

108107
@mixin font-type-60--light() {
109108
@include font-type-60;
110-
font-weight: 300;
109+
font-weight: $font-weight-light;
111110
}
112111

113112
@mixin font-type-70--bold() {
@@ -117,5 +116,5 @@ $font-size-base: 0.875rem;
117116

118117
@mixin font-type-70--light() {
119118
@include font-type-70;
120-
font-weight: 300;
119+
font-weight: $font-weight-light;
121120
}

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5309,7 +5309,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
53095309
</li>
53105310
<li>
53115311
Type:
5312-
Lato, Arial, sans-serif
5312+
DM Sans, sans-serif
53135313
</li>
53145314
<li>
53155315
Size:
@@ -5384,7 +5384,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
53845384
</li>
53855385
<li>
53865386
Type:
5387-
Lato, Arial, sans-serif
5387+
DM Sans, sans-serif
53885388
</li>
53895389
<li>
53905390
Size:
@@ -5459,7 +5459,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
54595459
</li>
54605460
<li>
54615461
Type:
5462-
Lato, Arial, sans-serif
5462+
DM Sans, sans-serif
54635463
</li>
54645464
<li>
54655465
Size:
@@ -5534,7 +5534,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
55345534
</li>
55355535
<li>
55365536
Type:
5537-
Lato, Arial, sans-serif
5537+
DM Sans, sans-serif
55385538
</li>
55395539
<li>
55405540
Size:
@@ -5609,7 +5609,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
56095609
</li>
56105610
<li>
56115611
Type:
5612-
Lato, Arial, sans-serif
5612+
DM Sans, sans-serif
56135613
</li>
56145614
<li>
56155615
Size:
@@ -5684,7 +5684,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
56845684
</li>
56855685
<li>
56865686
Type:
5687-
Lato, Arial, sans-serif
5687+
DM Sans, sans-serif
56885688
</li>
56895689
<li>
56905690
Size:
@@ -5759,7 +5759,7 @@ exports[`Storyshots Design System/Styles Typography 1`] = `
57595759
</li>
57605760
<li>
57615761
Type:
5762-
Lato, Arial, sans-serif
5762+
DM Sans, sans-serif
57635763
</li>
57645764
<li>
57655765
Size:

‎stories/Styles/Typography/Typography.stories.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -111,15 +111,15 @@ const TypographyStyle = (props) => (
111111
const presets = [
112112
{
113113
preset: 'font-type-70',
114-
font: 'Lato, Arial, sans-serif',
114+
font: 'DM Sans, sans-serif',
115115
size: '1.5rem',
116116
weight: '400 / Regular',
117117
lineHeight: '2rem',
118118
modifiers: ['font-type-70--bold', 'font-type-70--light'],
119119
},
120120
{
121121
preset: 'font-type-60',
122-
font: 'Lato, Arial, sans-serif',
122+
font: 'DM Sans, sans-serif',
123123
size: '1.25rem',
124124
weight: '400 / Regular',
125125
lineHeight: '1.625rem',
@@ -128,7 +128,7 @@ const presets = [
128128
},
129129
{
130130
preset: 'font-type-50',
131-
font: 'Lato, Arial, sans-serif',
131+
font: 'DM Sans, sans-serif',
132132
size: '1.125rem',
133133
weight: '400 / Regular',
134134
lineHeight: '1.5rem',
@@ -137,7 +137,7 @@ const presets = [
137137
},
138138
{
139139
preset: 'font-type-40',
140-
font: 'Lato, Arial, sans-serif',
140+
font: 'DM Sans, sans-serif',
141141
size: '1rem',
142142
weight: '400 / Regular',
143143
lineHeight: '1.375rem',
@@ -146,23 +146,23 @@ const presets = [
146146
},
147147
{
148148
preset: 'font-type-30',
149-
font: 'Lato, Arial, sans-serif',
149+
font: 'DM Sans, sans-serif',
150150
size: '0.875rem',
151151
weight: '400 / Regular',
152152
lineHeight: '1.25rem',
153153
modifiers: ['font-type-30--bold', 'font-type-30--light'],
154154
},
155155
{
156156
preset: 'font-type-20',
157-
font: 'Lato, Arial, sans-serif',
157+
font: 'DM Sans, sans-serif',
158158
size: '0.75rem',
159159
weight: '400 / Regular',
160160
lineHeight: '1rem',
161161
modifiers: ['font-type-20--bold', 'font-type-20--light'],
162162
},
163163
{
164164
preset: 'font-type-10',
165-
font: 'Lato, Arial, sans-serif',
165+
font: 'DM Sans, sans-serif',
166166
size: '0.625rem',
167167
weight: '400 / Regular',
168168
lineHeight: '0.875rem',

0 commit comments

Comments
 (0)