Skip to content

Commit 3f3b8b8

Browse files
tobiasahlintobiasahlin
committed
Add body content utilities
1 parent 80b24b5 commit 3f3b8b8

File tree

3 files changed

+97
-2
lines changed

3 files changed

+97
-2
lines changed

‎docs/content/utilities/marketing-type.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,27 @@ Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on m
2222
<p class="h6-mktg">Heading 6</p>
2323
```
2424

25+
## Body content utilities
26+
27+
Use `.f0-mktg` – `.f6-mktg` to change an element's body font, size, and weight on marketing pages.
28+
29+
```html live title="Heading Utilities"
30+
<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
31+
32+
<p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
33+
34+
<p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
35+
36+
<p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
37+
38+
<p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
39+
40+
<p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
41+
42+
<p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
43+
```
44+
45+
2546
## Typographic Utilities
2647

2748
These utilities are meant to be used in addition to Primer CSS's core utilities.

‎src/marketing/support/variables.scss‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
$marketing-font-path: "/fonts/" !default;
33

44
$font-mktg: $body-font !default;
5-
$mktg-header-spacing-large: -3% !default;
6-
$mktg-header-spacing-default: -1% !default;
5+
$mktg-header-spacing-large: -0.03em !default;
6+
$mktg-header-spacing-default: -0.01em !default;
77

88
// Header size steps
99
$mktg-h-size-0: 96px !default;
@@ -56,7 +56,52 @@ $mktg-headers: (
5656
6: [9, 9, 10]
5757
);
5858

59+
// Body size steps
60+
$mktg-body-size-0: 48px !default;
61+
$mktg-body-size-1: 40px !default;
62+
$mktg-body-size-2: 32px !default;
63+
$mktg-body-size-3: 28px !default;
64+
$mktg-body-size-4: 24px !default;
65+
$mktg-body-size-5: 20px !default;
66+
$mktg-body-size-6: 16px !default;
67+
$mktg-body-size-7: 14px !default;
68+
$mktg-body-size-8: 12px !default;
5969

70+
// body Line-height steps
71+
$mktg-body-lh-0: 64px !default;
72+
$mktg-body-lh-1: 52px !default;
73+
$mktg-body-lh-2: 44px !default;
74+
$mktg-body-lh-3: 40px !default;
75+
$mktg-body-lh-4: 32px !default;
76+
$mktg-body-lh-5: 28px !default;
77+
$mktg-body-lh-6: 24px !default;
78+
$mktg-body-lh-7: 20px !default;
79+
$mktg-body-lh-8: 20px !default;
80+
81+
$mktg-body-pairings: (
82+
0: (size: $mktg-body-size-0, lh: $mktg-body-lh-0),
83+
1: (size: $mktg-body-size-1, lh: $mktg-body-lh-1),
84+
2: (size: $mktg-body-size-2, lh: $mktg-body-lh-2),
85+
3: (size: $mktg-body-size-3, lh: $mktg-body-lh-3),
86+
4: (size: $mktg-body-size-4, lh: $mktg-body-lh-4),
87+
5: (size: $mktg-body-size-5, lh: $mktg-body-lh-5),
88+
6: (size: $mktg-body-size-6, lh: $mktg-body-lh-6),
89+
7: (size: $mktg-body-size-7, lh: $mktg-body-lh-7),
90+
8: (size: $mktg-body-size-8, lh: $mktg-body-lh-8)
91+
);
92+
93+
// Responsive headers, where first number is desktop, second is tablet, and third is mobile
94+
$mktg-body-spacing-large: -0.01em !default;
95+
96+
$mktg-bodies: (
97+
0: [0, 1, 3],
98+
1: [2, 3, 4],
99+
2: [4, 5, 5],
100+
3: [5, 5, 6],
101+
4: [6, 6, 6],
102+
5: [7, 7, 7],
103+
6: [8, 8, 8]
104+
);
60105

61106
// Animations
62107
$transition-time: 0.4s !default;

‎src/marketing/type/typography.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,35 @@
3838
}
3939
}
4040

41+
@each $body, $sizes in $mktg-bodies {
42+
.f#{$body}-mktg {
43+
$pairing: map-get($mktg-body-pairings, nth($sizes, 3));
44+
font-size: map-get($pairing, "size") !important;
45+
line-height: map-get($pairing, "lh") !important;
46+
@if (map-get($pairing, "size") >= 28px) {
47+
letter-spacing: $mktg-body-spacing-large;
48+
}
49+
50+
@include breakpoint(md) {
51+
$pairing: map-get($mktg-body-pairings, nth($sizes, 2));
52+
font-size: map-get($pairing, "size") !important;
53+
line-height: map-get($pairing, "lh") !important;
54+
@if (map-get($pairing, "size") >= 28px) {
55+
letter-spacing: $mktg-body-spacing-large;
56+
}
57+
}
58+
59+
@include breakpoint(lg) {
60+
$pairing: map-get($mktg-body-pairings, nth($sizes, 1));
61+
font-size: map-get($pairing, "size") !important;
62+
line-height: map-get($pairing, "lh") !important;
63+
@if (map-get($pairing, "size") >= 28px) {
64+
letter-spacing: $mktg-body-spacing-large;
65+
}
66+
}
67+
}
68+
}
69+
4170
// Pullquote
4271

4372
@mixin pullquote {

0 commit comments

Comments
 (0)