mirror of
https://github.com/primer/css.git
synced 2024-12-25 23:23:47 +03:00
Merge pull request #1379 from primer/tobiasahlin/marketing-new-typescale
Add new marketing type scale
This commit is contained in:
simurai
GitHub
commit
a6397d81b0
5
.changeset/nasty-lobsters-lick.md
Normal file
5
.changeset/nasty-lobsters-lick.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@primer/css": major
|
||||||
|
---
|
||||||
|
|
||||||
|
Add new marketing type scale
|
||||||
@ -5,6 +5,14 @@
|
|||||||
*/
|
*/
|
||||||
const versionDeprecations = {
|
const versionDeprecations = {
|
||||||
'17.0.0': [
|
'17.0.0': [
|
||||||
|
{
|
||||||
|
selectors: [
|
||||||
|
'.h000-mktg',
|
||||||
|
'.h00-mktg',
|
||||||
|
'.lead-mktg'
|
||||||
|
],
|
||||||
|
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
|
||||||
|
},
|
||||||
{
|
{
|
||||||
selectors: [
|
selectors: [
|
||||||
'.p-7',
|
'.p-7',
|
||||||
|
|||||||
@ -10,29 +10,43 @@ The typography for our marketing pages differs from Primer CSS's core—it is re
|
|||||||
|
|
||||||
## Heading Utilities
|
## 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"
|
```html live title="Heading Utilities"
|
||||||
<p class="h000-mktg">Heading 000</p>
|
<p class="h0-mktg">This is a heading 0</p>
|
||||||
<p class="h00-mktg">Heading 00</p>
|
<p class="h1-mktg">This is a heading 1</p>
|
||||||
<p class="h0-mktg">Heading 0</p>
|
<p class="h2-mktg">This is a heading 2</p>
|
||||||
<p class="h1-mktg">Heading 1</p>
|
<p class="h3-mktg">This is a heading 3</p>
|
||||||
<p class="h2-mktg">Heading 2</p>
|
<p class="h4-mktg">This is a heading 4</p>
|
||||||
<p class="h3-mktg">Heading 3</p>
|
<p class="h5-mktg">This is a heading 5</p>
|
||||||
<p class="h4-mktg">Heading 4</p>
|
<p class="h6-mktg">This is a heading 6</p>
|
||||||
<p class="h5-mktg">Heading 5</p>
|
|
||||||
<p class="h6-mktg">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
|
## Typographic Utilities
|
||||||
|
|
||||||
These utilities are meant to be used in addition to Primer CSS's core utilities.
|
These utilities are meant to be used in addition to Primer CSS's core utilities.
|
||||||
|
|
||||||
```html live title="Typographic 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>
|
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,10 +1,112 @@
|
|||||||
|
// Typography
|
||||||
$marketing-font-path: "/fonts/" !default;
|
$marketing-font-path: "/fonts/" !default;
|
||||||
|
|
||||||
$font-mktg: $body-font !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
|
// Header size steps
|
||||||
$h000-size: 64px !default;
|
$mktg-h-size-0: 96px !default;
|
||||||
$h000-size-mobile: 48px !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
|
// Animations
|
||||||
$transition-time: 0.4s !default;
|
$transition-time: 0.4s !default;
|
||||||
|
|||||||
@ -1,79 +1,96 @@
|
|||||||
// Headings
|
// Headings
|
||||||
.h000-mktg,
|
|
||||||
.h00-mktg,
|
|
||||||
.h0-mktg,
|
.h0-mktg,
|
||||||
.h1-mktg,
|
.h1-mktg,
|
||||||
.h2-mktg,
|
.h2-mktg,
|
||||||
.h3-mktg,
|
.h3-mktg,
|
||||||
.h4-mktg,
|
.h4-mktg,
|
||||||
.h5-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 {
|
.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
|
@each $header, $sizes in $mktg-headers {
|
||||||
@mixin lead-mktg {
|
.h#{$header}-mktg {
|
||||||
font-size: $h3-size;
|
$pairing: map-get($mktg-header-pairings, nth($sizes, 1));
|
||||||
font-weight: $font-weight-normal;
|
$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
|
// Pullquote
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user