primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-25 15:14:59 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1379 from primer/tobiasahlin/marketing-new-typescale

Browse Source 
Add new marketing type scale
This commit is contained in:
simurai 2021-05-04 21:13:42 +09:00 committed by GitHub
commit a6397d81b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 228 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nasty-lobsters-lick.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": major
---
Add new marketing type scale

8
deprecations.js
View File

@ -5,6 +5,14 @@
*/
const versionDeprecations = {
'17.0.0': [
{
selectors: [
'.h000-mktg',
'.h00-mktg',
'.lead-mktg'
],
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
},
{
selectors: [
'.p-7',

44
docs/content/utilities/marketing-type.md
View File

@ -10,29 +10,43 @@ The typography for our marketing pages differs from Primer CSS's core—it is re
## Heading Utilities
Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
```html live title="Heading Utilities"
<p class="h000-mktg">Heading 000</p>
<p class="h00-mktg">Heading 00</p>
<p class="h0-mktg">Heading 0</p>
<p class="h1-mktg">Heading 1</p>
<p class="h2-mktg">Heading 2</p>
<p class="h3-mktg">Heading 3</p>
<p class="h4-mktg">Heading 4</p>
<p class="h5-mktg">Heading 5</p>
<p class="h6-mktg">Heading 6</p>
<p class="h0-mktg">This is a heading 0</p>
<p class="h1-mktg">This is a heading 1</p>
<p class="h2-mktg">This is a heading 2</p>
<p class="h3-mktg">This is a heading 3</p>
<p class="h4-mktg">This is a heading 4</p>
<p class="h5-mktg">This is a heading 5</p>
<p class="h6-mktg">This is a heading 6</p>
```
## Body content utilities
Use `.f0-mktg` – `.f6-mktg` to change an element's body font, size, and weight on marketing pages.
```html live title="Heading Utilities"
<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>
<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>
<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>
<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>
<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>
<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>
<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>
```
## Typographic Utilities
These utilities are meant to be used in addition to Primer CSS's core utilities.
```html live title="Typographic Utilities"
<p class="lead-mktg text-gray">
I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round
prosciutto hamburger porchetta sausage alcatra tail.
</p>
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
```

108
src/marketing/support/variables.scss
View File

@ -1,10 +1,112 @@
// Typography
$marketing-font-path: "/fonts/" !default;
$font-mktg: $body-font !default;
$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
$mktg-header-spacing-large: -0.03em !default;
$mktg-header-spacing-default: -0.01em !default;
$mktg-header-spacing-threshold: 48px !default;
$mktg-header-weight-large: 800 !default;
$mktg-header-weight-default: $font-weight-bold !default;
$mktg-header-weight-threshold: 24px !default;
// Builds upon @primer/css/support/variables/typography.scss
$h000-size: 64px !default;
$h000-size-mobile: 48px !default;
// Header size steps
$mktg-h-size-0: 96px !default;
$mktg-h-size-1: 72px !default;
$mktg-h-size-2: 64px !default;
$mktg-h-size-3: 56px !default;
$mktg-h-size-4: 48px !default;
$mktg-h-size-5: 40px !default;
$mktg-h-size-6: 32px !default;
$mktg-h-size-7: 28px !default;
$mktg-h-size-8: 24px !default;
$mktg-h-size-9: 20px !default;
$mktg-h-size-10: 16px !default;
// Header Line-height steps
$mktg-h-lh-0: 100px !default;
$mktg-h-lh-1: 76px !default;
$mktg-h-lh-2: 64px !default;
$mktg-h-lh-3: 60px !default;
$mktg-h-lh-4: 52px !default;
$mktg-h-lh-5: 44px !default;
$mktg-h-lh-6: 36px !default;
$mktg-h-lh-7: 32px !default;
$mktg-h-lh-8: 28px !default;
$mktg-h-lh-9: 24px !default;
$mktg-h-lh-10: 20px !default;
$mktg-header-pairings: (
0: (size: $mktg-h-size-0, lh: $mktg-h-lh-0),
1: (size: $mktg-h-size-1, lh: $mktg-h-lh-1),
2: (size: $mktg-h-size-2, lh: $mktg-h-lh-2),
3: (size: $mktg-h-size-3, lh: $mktg-h-lh-3),
4: (size: $mktg-h-size-4, lh: $mktg-h-lh-4),
5: (size: $mktg-h-size-5, lh: $mktg-h-lh-5),
6: (size: $mktg-h-size-6, lh: $mktg-h-lh-6),
7: (size: $mktg-h-size-7, lh: $mktg-h-lh-7),
8: (size: $mktg-h-size-8, lh: $mktg-h-lh-8),
9: (size: $mktg-h-size-9, lh: $mktg-h-lh-9),
10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
) !default;
// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
$mktg-headers: (
0: [4, 1, 0],
1: [5, 3, 1],
2: [6, 4, 2],
3: [7, 5, 4],
4: [8, 7, 6],
5: [9, 8, 8],
6: [10, 9, 9]
) !default;
// Body size steps
$mktg-body-size-0: 48px !default;
$mktg-body-size-1: 40px !default;
$mktg-body-size-2: 32px !default;
$mktg-body-size-3: 28px !default;
$mktg-body-size-4: 24px !default;
$mktg-body-size-5: 20px !default;
$mktg-body-size-6: 16px !default;
$mktg-body-size-7: 14px !default;
$mktg-body-size-8: 12px !default;
// Body line-height steps
$mktg-body-lh-0: 64px !default;
$mktg-body-lh-1: 52px !default;
$mktg-body-lh-2: 44px !default;
$mktg-body-lh-3: 40px !default;
$mktg-body-lh-4: 32px !default;
$mktg-body-lh-5: 28px !default;
$mktg-body-lh-6: 24px !default;
$mktg-body-lh-7: 20px !default;
$mktg-body-lh-8: 20px !default;
$mktg-body-pairings: (
0: (size: $mktg-body-size-0, lh: $mktg-body-lh-0),
1: (size: $mktg-body-size-1, lh: $mktg-body-lh-1),
2: (size: $mktg-body-size-2, lh: $mktg-body-lh-2),
3: (size: $mktg-body-size-3, lh: $mktg-body-lh-3),
4: (size: $mktg-body-size-4, lh: $mktg-body-lh-4),
5: (size: $mktg-body-size-5, lh: $mktg-body-lh-5),
6: (size: $mktg-body-size-6, lh: $mktg-body-lh-6),
7: (size: $mktg-body-size-7, lh: $mktg-body-lh-7),
8: (size: $mktg-body-size-8, lh: $mktg-body-lh-8)
) !default;
// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
$mktg-body-spacing-large: -0.01em !default;
$mktg-bodies: (
0: [3, 1, 0],
1: [4, 3, 2],
2: [5, 5, 4],
3: [6, 5, 5],
4: [6, 6, 6],
5: [7, 7, 7],
6: [8, 8, 8]
) !default;
// Animations
$transition-time: 0.4s !default;

145
src/marketing/type/typography.scss
View File

@ -1,79 +1,96 @@
// Headings
.h000-mktg,
.h00-mktg,
.h0-mktg,
.h1-mktg,
.h2-mktg,
.h3-mktg,
.h4-mktg,
.h5-mktg,
.h6-mktg,
.lead-mktg {
font-family: $font-mktg;
font-weight: $font-weight-semibold;
}
@mixin h000-mktg {
font-size: $h000-size-mobile !important;
@include breakpoint(md) { font-size: $h000-size !important; }
}
.h000-mktg { @include h000-mktg; }
@mixin h00-mktg {
font-size: $h00-size-mobile !important;
@include breakpoint(md) { font-size: $h00-size !important; }
}
.h00-mktg { @include h00-mktg; }
@mixin h0-mktg {
font-size: $h0-size-mobile !important;
@include breakpoint(md) { font-size: $h0-size !important; }
}
.h0-mktg { @include h0-mktg; }
@mixin h1-mktg {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}
.h1-mktg { @include h1-mktg; }
@mixin h2-mktg {
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
.h2-mktg { @include h2-mktg; }
@mixin h3-mktg {
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}
.h3-mktg { @include h3-mktg; }
.h4-mktg {
font-size: $h4-size !important;
}
.h5-mktg {
font-size: $h5-size !important;
}
.h6-mktg {
font-size: $h6-size !important;
font-family: $font-mktg;
font-feature-settings: $mktg-font-feature-settings;
font-weight: $mktg-header-weight-default !important;
letter-spacing: $mktg-header-spacing-default !important;
}
// Big opening paragraphs
@mixin lead-mktg {
font-size: $h3-size;
font-weight: $font-weight-normal;
@each $header, $sizes in $mktg-headers {
.h#{$header}-mktg {
$pairing: map-get($mktg-header-pairings, nth($sizes, 1));
$pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
$pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
@if (nth($sizes, 1) != nth($sizes, 2)) {
@include breakpoint(md) {
font-size: map-get($pairing-md, "size") !important;
line-height: map-get($pairing-md, "lh") !important;
@if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
letter-spacing: $mktg-header-spacing-large;
}
@if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
font-weight: $mktg-header-weight-large !important;
}
}
}
@if (nth($sizes, 2) != nth($sizes, 3)) {
@include breakpoint(lg) {
font-size: map-get($pairing-lg, "size") !important;
line-height: map-get($pairing-lg, "lh") !important;
@if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
letter-spacing: $mktg-header-spacing-large;
}
@if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
font-weight: $mktg-header-weight-large !important;
}
}
}
}
}
.lead-mktg { @include lead-mktg; }
.f0-mktg,
.f1-mktg,
.f2-mktg,
.f3-mktg,
.f4-mktg,
.f5-mktg,
.f6-mktg {
font-family: $font-mktg;
font-feature-settings: $mktg-font-feature-settings;
font-weight: $font-weight-normal !important;
}
@each $body, $sizes in $mktg-bodies {
.f#{$body}-mktg {
$pairing: map-get($mktg-body-pairings, nth($sizes, 1));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
@if (nth($sizes, 1) != nth($sizes, 2)) {
@include breakpoint(md) {
$pairing: map-get($mktg-body-pairings, nth($sizes, 2));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
}
}
@if (nth($sizes, 2) != nth($sizes, 3)) {
@include breakpoint(lg) {
$pairing: map-get($mktg-body-pairings, nth($sizes, 3));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; }
@if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; }
}
}
}
}
// Pullquote