Skip to content

Commit a6397d8

Browse files
simuraisimurai
authored
Merge pull request #1379 from primer/tobiasahlin/marketing-new-typescale
Add new marketing type scale
2 parents c1ed343 + 22a98b5 commit a6397d8

File tree

5 files changed

+225
-79
lines changed

5 files changed

+225
-79
lines changed

‎.changeset/nasty-lobsters-lick.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": major
3+
---
4+
5+
Add new marketing type scale

‎deprecations.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
*/
66
const versionDeprecations = {
77
'17.0.0': [
8+
{
9+
selectors: [
10+
'.h000-mktg',
11+
'.h00-mktg',
12+
'.lead-mktg'
13+
],
14+
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
15+
},
816
{
917
selectors: [
1018
'.p-7',

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

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,43 @@ The typography for our marketing pages differs from Primer CSS's core—it is re
1010

1111
## Heading Utilities
1212

13-
Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
13+
Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
1414

1515
```html live title="Heading Utilities"
16-
<p class="h000-mktg">Heading 000</p>
17-
<p class="h00-mktg">Heading 00</p>
18-
<p class="h0-mktg">Heading 0</p>
19-
<p class="h1-mktg">Heading 1</p>
20-
<p class="h2-mktg">Heading 2</p>
21-
<p class="h3-mktg">Heading 3</p>
22-
<p class="h4-mktg">Heading 4</p>
23-
<p class="h5-mktg">Heading 5</p>
24-
<p class="h6-mktg">Heading 6</p>
16+
<p class="h0-mktg">This is a heading 0</p>
17+
<p class="h1-mktg">This is a heading 1</p>
18+
<p class="h2-mktg">This is a heading 2</p>
19+
<p class="h3-mktg">This is a heading 3</p>
20+
<p class="h4-mktg">This is a heading 4</p>
21+
<p class="h5-mktg">This is a heading 5</p>
22+
<p class="h6-mktg">This is a heading 6</p>
2523
```
2624

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+
2746
## Typographic Utilities
2847

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

3150
```html live title="Typographic Utilities"
32-
<p class="lead-mktg text-gray">
33-
I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round
34-
prosciutto hamburger porchetta sausage alcatra tail.
35-
</p>
36-
3751
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
3852
```

‎src/marketing/support/variables.scss‎

Lines changed: 105 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,112 @@
1+
// Typography
12
$marketing-font-path: "/fonts/" !default;
23

34
$font-mktg: $body-font !default;
5+
$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
6+
$mktg-header-spacing-large: -0.03em !default;
7+
$mktg-header-spacing-default: -0.01em !default;
8+
$mktg-header-spacing-threshold: 48px !default;
9+
$mktg-header-weight-large: 800 !default;
10+
$mktg-header-weight-default: $font-weight-bold !default;
11+
$mktg-header-weight-threshold: 24px !default;
412

5-
// Builds upon @primer/css/support/variables/typography.scss
6-
$h000-size: 64px !default;
7-
$h000-size-mobile: 48px !default;
13+
// Header size steps
14+
$mktg-h-size-0: 96px !default;
15+
$mktg-h-size-1: 72px !default;
16+
$mktg-h-size-2: 64px !default;
17+
$mktg-h-size-3: 56px !default;
18+
$mktg-h-size-4: 48px !default;
19+
$mktg-h-size-5: 40px !default;
20+
$mktg-h-size-6: 32px !default;
21+
$mktg-h-size-7: 28px !default;
22+
$mktg-h-size-8: 24px !default;
23+
$mktg-h-size-9: 20px !default;
24+
$mktg-h-size-10: 16px !default;
25+
26+
// Header Line-height steps
27+
$mktg-h-lh-0: 100px !default;
28+
$mktg-h-lh-1: 76px !default;
29+
$mktg-h-lh-2: 64px !default;
30+
$mktg-h-lh-3: 60px !default;
31+
$mktg-h-lh-4: 52px !default;
32+
$mktg-h-lh-5: 44px !default;
33+
$mktg-h-lh-6: 36px !default;
34+
$mktg-h-lh-7: 32px !default;
35+
$mktg-h-lh-8: 28px !default;
36+
$mktg-h-lh-9: 24px !default;
37+
$mktg-h-lh-10: 20px !default;
38+
39+
$mktg-header-pairings: (
40+
0: (size: $mktg-h-size-0, lh: $mktg-h-lh-0),
41+
1: (size: $mktg-h-size-1, lh: $mktg-h-lh-1),
42+
2: (size: $mktg-h-size-2, lh: $mktg-h-lh-2),
43+
3: (size: $mktg-h-size-3, lh: $mktg-h-lh-3),
44+
4: (size: $mktg-h-size-4, lh: $mktg-h-lh-4),
45+
5: (size: $mktg-h-size-5, lh: $mktg-h-lh-5),
46+
6: (size: $mktg-h-size-6, lh: $mktg-h-lh-6),
47+
7: (size: $mktg-h-size-7, lh: $mktg-h-lh-7),
48+
8: (size: $mktg-h-size-8, lh: $mktg-h-lh-8),
49+
9: (size: $mktg-h-size-9, lh: $mktg-h-lh-9),
50+
10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
51+
) !default;
52+
53+
// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
54+
$mktg-headers: (
55+
0: [4, 1, 0],
56+
1: [5, 3, 1],
57+
2: [6, 4, 2],
58+
3: [7, 5, 4],
59+
4: [8, 7, 6],
60+
5: [9, 8, 8],
61+
6: [10, 9, 9]
62+
) !default;
63+
64+
// Body size steps
65+
$mktg-body-size-0: 48px !default;
66+
$mktg-body-size-1: 40px !default;
67+
$mktg-body-size-2: 32px !default;
68+
$mktg-body-size-3: 28px !default;
69+
$mktg-body-size-4: 24px !default;
70+
$mktg-body-size-5: 20px !default;
71+
$mktg-body-size-6: 16px !default;
72+
$mktg-body-size-7: 14px !default;
73+
$mktg-body-size-8: 12px !default;
74+
75+
// Body line-height steps
76+
$mktg-body-lh-0: 64px !default;
77+
$mktg-body-lh-1: 52px !default;
78+
$mktg-body-lh-2: 44px !default;
79+
$mktg-body-lh-3: 40px !default;
80+
$mktg-body-lh-4: 32px !default;
81+
$mktg-body-lh-5: 28px !default;
82+
$mktg-body-lh-6: 24px !default;
83+
$mktg-body-lh-7: 20px !default;
84+
$mktg-body-lh-8: 20px !default;
85+
86+
$mktg-body-pairings: (
87+
0: (size: $mktg-body-size-0, lh: $mktg-body-lh-0),
88+
1: (size: $mktg-body-size-1, lh: $mktg-body-lh-1),
89+
2: (size: $mktg-body-size-2, lh: $mktg-body-lh-2),
90+
3: (size: $mktg-body-size-3, lh: $mktg-body-lh-3),
91+
4: (size: $mktg-body-size-4, lh: $mktg-body-lh-4),
92+
5: (size: $mktg-body-size-5, lh: $mktg-body-lh-5),
93+
6: (size: $mktg-body-size-6, lh: $mktg-body-lh-6),
94+
7: (size: $mktg-body-size-7, lh: $mktg-body-lh-7),
95+
8: (size: $mktg-body-size-8, lh: $mktg-body-lh-8)
96+
) !default;
97+
98+
// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
99+
$mktg-body-spacing-large: -0.01em !default;
100+
101+
$mktg-bodies: (
102+
0: [3, 1, 0],
103+
1: [4, 3, 2],
104+
2: [5, 5, 4],
105+
3: [6, 5, 5],
106+
4: [6, 6, 6],
107+
5: [7, 7, 7],
108+
6: [8, 8, 8]
109+
) !default;
8110

9111
// Animations
10112
$transition-time: 0.4s !default;

‎src/marketing/type/typography.scss‎

Lines changed: 78 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,97 @@
11
// Headings
2-
.h000-mktg,
3-
.h00-mktg,
42
.h0-mktg,
53
.h1-mktg,
64
.h2-mktg,
75
.h3-mktg,
86
.h4-mktg,
97
.h5-mktg,
10-
.h6-mktg,
11-
.lead-mktg {
8+
.h6-mktg {
129
font-family: $font-mktg;
13-
font-weight: $font-weight-semibold;
14-
}
15-
16-
@mixin h000-mktg {
17-
font-size: $h000-size-mobile !important;
18-
@include breakpoint(md) { font-size: $h000-size !important; }
19-
}
20-
21-
.h000-mktg { @include h000-mktg; }
22-
23-
@mixin h00-mktg {
24-
font-size: $h00-size-mobile !important;
25-
@include breakpoint(md) { font-size: $h00-size !important; }
26-
}
27-
28-
.h00-mktg { @include h00-mktg; }
29-
30-
@mixin h0-mktg {
31-
font-size: $h0-size-mobile !important;
32-
@include breakpoint(md) { font-size: $h0-size !important; }
33-
}
34-
35-
.h0-mktg { @include h0-mktg; }
36-
37-
@mixin h1-mktg {
38-
font-size: $h1-size-mobile !important;
39-
@include breakpoint(md) { font-size: $h1-size !important; }
40-
}
41-
42-
.h1-mktg { @include h1-mktg; }
43-
44-
@mixin h2-mktg {
45-
font-size: $h2-size-mobile !important;
46-
@include breakpoint(md) { font-size: $h2-size !important; }
10+
font-feature-settings: $mktg-font-feature-settings;
11+
font-weight: $mktg-header-weight-default !important;
12+
letter-spacing: $mktg-header-spacing-default !important;
4713
}
4814

49-
.h2-mktg { @include h2-mktg; }
50-
51-
@mixin h3-mktg {
52-
font-size: $h3-size-mobile !important;
53-
@include breakpoint(md) { font-size: $h3-size !important; }
54-
}
55-
56-
.h3-mktg { @include h3-mktg; }
57-
58-
.h4-mktg {
59-
font-size: $h4-size !important;
60-
}
61-
62-
.h5-mktg {
63-
font-size: $h5-size !important;
15+
@each $header, $sizes in $mktg-headers {
16+
.h#{$header}-mktg {
17+
$pairing: map-get($mktg-header-pairings, nth($sizes, 1));
18+
$pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
19+
$pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
20+
21+
font-size: map-get($pairing, "size") !important;
22+
line-height: map-get($pairing, "lh") !important;
23+
@if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
24+
25+
@if (nth($sizes, 1) != nth($sizes, 2)) {
26+
@include breakpoint(md) {
27+
font-size: map-get($pairing-md, "size") !important;
28+
line-height: map-get($pairing-md, "lh") !important;
29+
@if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
30+
letter-spacing: $mktg-header-spacing-large;
31+
}
32+
@if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
33+
font-weight: $mktg-header-weight-large !important;
34+
}
35+
}
36+
}
37+
38+
@if (nth($sizes, 2) != nth($sizes, 3)) {
39+
@include breakpoint(lg) {
40+
font-size: map-get($pairing-lg, "size") !important;
41+
line-height: map-get($pairing-lg, "lh") !important;
42+
@if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
43+
letter-spacing: $mktg-header-spacing-large;
44+
}
45+
@if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
46+
font-weight: $mktg-header-weight-large !important;
47+
}
48+
}
49+
}
50+
}
6451
}
6552

66-
.h6-mktg {
67-
font-size: $h6-size !important;
53+
.f0-mktg,
54+
.f1-mktg,
55+
.f2-mktg,
56+
.f3-mktg,
57+
.f4-mktg,
58+
.f5-mktg,
59+
.f6-mktg {
60+
font-family: $font-mktg;
61+
font-feature-settings: $mktg-font-feature-settings;
62+
font-weight: $font-weight-normal !important;
6863
}
6964

70-
// Big opening paragraphs
71-
@mixin lead-mktg {
72-
font-size: $h3-size;
73-
font-weight: $font-weight-normal;
65+
@each $body, $sizes in $mktg-bodies {
66+
.f#{$body}-mktg {
67+
$pairing: map-get($mktg-body-pairings, nth($sizes, 1));
68+
font-size: map-get($pairing, "size") !important;
69+
line-height: map-get($pairing, "lh") !important;
70+
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
71+
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
72+
73+
@if (nth($sizes, 1) != nth($sizes, 2)) {
74+
@include breakpoint(md) {
75+
$pairing: map-get($mktg-body-pairings, nth($sizes, 2));
76+
font-size: map-get($pairing, "size") !important;
77+
line-height: map-get($pairing, "lh") !important;
78+
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
79+
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
80+
}
81+
}
82+
83+
@if (nth($sizes, 2) != nth($sizes, 3)) {
84+
@include breakpoint(lg) {
85+
$pairing: map-get($mktg-body-pairings, nth($sizes, 3));
86+
font-size: map-get($pairing, "size") !important;
87+
line-height: map-get($pairing, "lh") !important;
88+
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
89+
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
90+
}
91+
}
92+
}
7493
}
7594

76-
.lead-mktg { @include lead-mktg; }
77-
7895
// Pullquote
7996

8097
@mixin pullquote {

0 commit comments

Comments
 (0)