Add new marketing type scale #1379

tobiasahlin · 2021-05-03T13:01:50Z

This PR implements the new marketing type scale, as outlined in Gloss.

New styles for .h0-mktg through .h6-mktg
.h000-mktg, .h00-mktg, and .lead-mktg has been deprecated
.f0-mktg through .f6-mktg has been added for body content
Documentation has been updated to reflect these changes

All of the utility classes are responsive, and are defined through an array of font-size / line-height pairings, ranging from 0 to 10 for headers, and 0-8 for body content:

// 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;
// etc

// 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;
// etc

This is done to expose all of these values as variables, so that they can be overridden as easily as possible. These variables are then used to create a map of font-size and line-height pairings:

$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)
  // etc
);

These pairings are then used to define the responsive utility classes. Here, the first number in each list is desktop, second is tablet, and third is mobile:

$mktg-headers: (
  0: [0, 1, 4],
  1: [1, 3, 5],
  2: [2, 4, 6],
  3: [4, 5, 7],
  4: [6, 7, 8],
  5: [8, 8, 9],
  6: [9, 9, 10]
);

We then loop through this map in typography.scss to create the utility classes (note that we check if sequential size steps are identical, and if they are, we skip defining the same styles again for the breakpoint that follows):

@each $header, $sizes in $mktg-headers {
  .h#{$header}-mktg {
    $pairing: map-get($mktg-header-pairings, nth($sizes, 3));
    font-size: map-get($pairing, "size") !important;
    line-height: map-get($pairing, "lh") !important;
    letter-spacing: $mktg-header-spacing-default;

    @if (nth($sizes, 3) != nth($sizes, 2)) {
      @include breakpoint(md) {
        $pairing: map-get($mktg-header-pairings, nth($sizes, 2));
        font-size: map-get($pairing, "size") !important;
        line-height: map-get($pairing, "lh") !important;
        @if (map-get($pairing, "size") >= 48px) {
          letter-spacing: $mktg-header-spacing-large;
        }
      }
    }

    @if (nth($sizes, 2) != nth($sizes, 1)) {
      @include breakpoint(lg) {
        $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
        font-size: map-get($pairing, "size") !important;
        line-height: map-get($pairing, "lh") !important;
        @if (map-get($pairing, "size") >= 48px) {
          letter-spacing: $mktg-header-spacing-large;
        }
      }
    }
  }
}

We use the same technique for the .fX-mktg body content classes. The raw output as of now for both of these are:

.h0-mktg {
  font-size: 48px !important;
  line-height: 52px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h0-mktg {
    font-size: 72px !important;
    line-height: 76px !important;
    letter-spacing: -.03em
  }
}
@media (min-width: 1012px) {
  .h0-mktg {
    font-size: 96px !important;
    line-height: 100px !important;
    letter-spacing: -.03em
  }
}
.h1-mktg {
  font-size: 40px !important;
  line-height: 44px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h1-mktg {
    font-size: 56px !important;
    line-height: 60px !important;
    letter-spacing: -.03em
  }
}
@media (min-width: 1012px) {
  .h1-mktg {
    font-size: 72px !important;
    line-height: 76px !important;
    letter-spacing: -.03em
  }
}
.h2-mktg {
  font-size: 32px !important;
  line-height: 36px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h2-mktg {
    font-size: 48px !important;
    line-height: 52px !important;
    letter-spacing: -.03em
  }
}
@media (min-width: 1012px) {
  .h2-mktg {
    font-size: 64px !important;
    line-height: 64px !important;
    letter-spacing: -.03em
  }
}
.h3-mktg {
  font-size: 28px !important;
  line-height: 32px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h3-mktg {
    font-size: 40px !important;
    line-height: 44px !important
  }
}
@media (min-width: 1012px) {
  .h3-mktg {
    font-size: 48px !important;
    line-height: 52px !important;
    letter-spacing: -.03em
  }
}
.h4-mktg {
  font-size: 24px !important;
  line-height: 28px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h4-mktg {
    font-size: 28px !important;
    line-height: 32px !important
  }
}
@media (min-width: 1012px) {
  .h4-mktg {
    font-size: 32px !important;
    line-height: 36px !important
  }
}
.h5-mktg {
  font-size: 20px !important;
  line-height: 24px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h5-mktg {
    font-size: 24px !important;
    line-height: 28px !important
  }
}
.h6-mktg {
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .h6-mktg {
    font-size: 20px !important;
    line-height: 24px !important
  }
}
.f0-mktg {
  font-size: 28px !important;
  line-height: 40px !important;
  letter-spacing: -.01em
}
@media (min-width: 768px) {
  .f0-mktg {
    font-size: 40px !important;
    line-height: 52px !important;
    letter-spacing: -.01em
  }
}
@media (min-width: 1012px) {
  .f0-mktg {
    font-size: 48px !important;
    line-height: 64px !important;
    letter-spacing: -.01em
  }
}
.f1-mktg {
  font-size: 24px !important;
  line-height: 32px !important
}
@media (min-width: 768px) {
  .f1-mktg {
    font-size: 28px !important;
    line-height: 40px !important;
    letter-spacing: -.01em
  }
}
@media (min-width: 1012px) {
  .f1-mktg {
    font-size: 32px !important;
    line-height: 44px !important;
    letter-spacing: -.01em
  }
}
.f2-mktg {
  font-size: 20px !important;
  line-height: 28px !important
}
@media (min-width: 1012px) {
  .f2-mktg {
    font-size: 24px !important;
    line-height: 32px !important
  }
}
.f3-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
@media (min-width: 768px) {
  .f3-mktg {
    font-size: 20px !important;
    line-height: 28px !important
  }
}
.f4-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
.f5-mktg {
  font-size: 14px !important;
  line-height: 20px !important
}
.f6-mktg {
  font-size: 12px !important;
  line-height: 20px !important
}

Preview, headers:

Preview, body content:

changeset-bot · 2021-05-03T13:01:52Z

🦋 Changeset detected

Latest commit: 22a98b5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…teps are identical)

simurai

Generally LGTM. Just a couple open questions:

Should the variables like $mktg-h-size-0 be suffixed with -mktg 👉 $h-size-0-mktg so it matches the utility classes. I kinda like the mktg as a prefix more, but that could be a separate effort to change it everywhere.

These pairings are then used to define the responsive utility classes. Here, the first number in each list is desktop, second is tablet, and third is mobile:

Should the order be switched to be "mobile first" and follow the sm -> md -> lg breakpoints order?

$mktg-header-spacing-large: -0.03em !default;

Is this optimized for Alliance to tweak its kerning or is it something we also should keep for the system fonts?

tobiasahlin · 2021-05-04T09:23:32Z

Is this optimized for Alliance to tweak its kerning or is it something we also should keep for the system fonts?

@simurai It is optimized for Alliance, but maybe this also makes sense for the system fonts… @trosage @ajashams do you want to weigh in here? 🙏 If this letter spacing doesn't make sense for the system fonts we could default this variable to a no-change value, and then change this value as we change the font to Alliance.

Should the order be switched to be "mobile first" and follow the sm -> md -> lg breakpoints order?

Yeah that makes sense, I'll reverse it 🙏 the loop currently using these numbers/indexes in reverse is kind of weird (Edit: ✅ fixed below)

Should the variables like $mktg-h-size-0 be suffixed with -mktg 👉 $h-size-0-mktg so it matches the utility classes. I kinda like the mktg as a prefix more, but that could be a separate effort to change it everywhere.

My thinking was to align this with the naming scheme that we used as we just added color variables in css/primitives:

// -------- Marketing --------
$mktg-blue-primary:     #4969ed;
$mktg-blue-secondary:   #3355e0;
$mktg-green-primary:    #2ea44f;
$mktg-green-secondary:  #22863a;
$mktg-purple-primary:   #6f57ff;
$mktg-purple-secondary: #614eda;

Currently it's a bit all over the place… we have e.g.:

$mktg-purple-secondary (prepend)
$font-mktg (append)
$marketing-position-variants (prepend long)
$transition-time (no namespace, yet exclusive to marketing)

Happy to switch these new vars to use a trailing -mktg, but since we just used the prepended mktg- elsewhere, I thought it made sense to align with that, and then maybe transition everything to this naming scheme.

… class (rely on inherited values)

simurai

My thinking was to align this with the naming scheme that we used as we just added color variables in css/primitives

Oh.. right. Already forgot about that. OK, sure, we can look into namespacing another time.

simurai · 2021-05-04T12:12:39Z

These changelog names are hilarious. 😄

tobiasahlin added 10 commits April 29, 2021 11:17

Start outlining typescale

7cc9f38

Add header scale

69fa3eb

Re-structure header sizes

9c15f07

Use lists and maps instead

567520d

Remove old headers

30ca7f4

Add letter spacing based on size

e9c7312

Update documentation

80b24b5

Add body content utilities

3f3b8b8

Add deprecation for headers and lead-mktg

a366a98

Somewhat longer headers for better preview

2191cf0

tobiasahlin requested review from simurai and jonrohan May 3, 2021 13:02

Merge branch 'main' into tobiasahlin/marketing-new-typescale

9a8b16f

github-actions bot deployed to Preview May 3, 2021 14:39 View deployment

tobiasahlin changed the title ~~Add new marketing new type scale~~ Add new marketing type scale May 3, 2021

Don't use breakpoints unless we need them (check if sequential size s…

5e4f54b

…teps are identical)

github-actions bot deployed to Preview May 3, 2021 16:38 View deployment

Merge branch 'main' into tobiasahlin/marketing-new-typescale

7d00fab

github-actions bot deployed to Preview May 4, 2021 08:54 View deployment

simurai reviewed May 4, 2021

View reviewed changes

Reverse order of type scale variables

9e8291d

github-actions bot deployed to Preview May 4, 2021 10:28 View deployment

Add !default to type scale variables

9d98e62

github-actions bot deployed to Preview May 4, 2021 10:35 View deployment

tobiasahlin added 3 commits May 4, 2021 13:28

Fix correct font-weight for headers

e90451c

Use a variable for font feature settings

f1429dc

Correct font weight across all utility classes

c1174c7

github-actions bot deployed to Preview May 4, 2021 11:39 View deployment

tobiasahlin requested a review from simurai May 4, 2021 11:39

Make sure letter spacing and font weight is only set once per utility…

0e34ae9

… class (rely on inherited values)

github-actions bot deployed to Preview May 4, 2021 11:58 View deployment

Correctly expose and use variables so that they can be overridden

6b2c894

github-actions bot deployed to Preview May 4, 2021 12:05 View deployment

simurai approved these changes May 4, 2021

View reviewed changes

Create nasty-lobsters-lick.md

22a98b5

github-actions bot added the major release label May 4, 2021

simurai merged commit a6397d8 into main May 4, 2021

simurai deleted the tobiasahlin/marketing-new-typescale branch May 4, 2021 12:13

primer-css mentioned this pull request May 4, 2021

Release Tracking #1351

Merged

tobiasahlin mentioned this pull request May 5, 2021

Fix style lint errors introduced in new marketing type scale PR #1381

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new marketing type scale #1379

Add new marketing type scale #1379

tobiasahlin commented May 3, 2021 •

edited

changeset-bot bot commented May 3, 2021 •

edited

simurai left a comment

tobiasahlin commented May 4, 2021 •

edited

simurai left a comment

simurai commented May 4, 2021

Add new marketing type scale #1379

Add new marketing type scale #1379

Conversation

tobiasahlin commented May 3, 2021 • edited

changeset-bot bot commented May 3, 2021 • edited

🦋 Changeset detected

simurai left a comment

Choose a reason for hiding this comment

tobiasahlin commented May 4, 2021 • edited

simurai left a comment

Choose a reason for hiding this comment

simurai commented May 4, 2021

tobiasahlin commented May 3, 2021 •

edited

changeset-bot bot commented May 3, 2021 •

edited

tobiasahlin commented May 4, 2021 •

edited