From 818e2244413e477cd1f748fb8bb28dade14b9561 Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Wed, 17 Oct 2018 17:18:38 -0500 Subject: [PATCH 1/9] Replace Roboto with Inter and include new sizing --- .../lib/variables.scss | 21 +++- .../primer-marketing-type/lib/typography.scss | 116 ++++++++---------- 2 files changed, 69 insertions(+), 68 deletions(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 21f0ddb24d..4e0581eb52 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -1,6 +1,23 @@ // Type -$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; -$alt-mono-font: $mono-font; +@font-face { + font-family: InterUI; + font-style: normal; + font-weight: $font-weight-normal; + src: local("InterUI"), local("InterUI-Regular"), url("Inter-UI-Regular.woff") format("woff"); +} + +@font-face { + font-family: InterUI; + font-style: normal; + font-weight: $font-weight-semibold; + src: local("InterUI Medium"), local("InterUI-Medium"), url("Inter-UI-Medium.woff") format("woff"); +} + +$font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; + +// Builds upon primer-support/variables/typography.scss +$h000-size: 64px !default; +$h000-size-mobile: 48px !default; // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12 // i.e. After 40px, we have 48, 64, 80, 96, etc. diff --git a/modules/primer-marketing-type/lib/typography.scss b/modules/primer-marketing-type/lib/typography.scss index e1b2a39ca2..afa69e3253 100644 --- a/modules/primer-marketing-type/lib/typography.scss +++ b/modules/primer-marketing-type/lib/typography.scss @@ -1,95 +1,79 @@ -// Marketing font utility class - -.alt-mono-font { - font-family: $alt-mono-font; -} - -// // Headings -.alt-h0, -.alt-h1, -.alt-h2, -.alt-h3, -.alt-h4, -.alt-h5, -.alt-h6, -.alt-lead { - -webkit-font-smoothing: antialiased; - font-family: $alt-body-font; +.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 alt-h0 { - font-size: $h00-size; - font-weight: $font-weight-light; - @include breakpoint(md) { font-size: 54px; } - @include breakpoint(lg) { font-size: 72px; } +@mixin h000-mktg { + font-size: $h000-size-mobile !important; + @include breakpoint(md) { font-size: $h000-size !important; } } -.alt-h0 { - @include alt-h0; -} +.h000-mktg { @include h00-mktg; } -@mixin alt-h1 { - font-size: 36px; - font-weight: $font-weight-light; - @include breakpoint(md) { font-size: $h00-size; } - @include breakpoint(lg) { font-size: 54px; } +@mixin h00-mktg { + font-size: $h00-size-mobile !important; + @include breakpoint(md) { font-size: $h00-size !important; } } -.alt-h1 { - @include alt-h1; -} +.h00-mktg { @include h00-mktg; } -@mixin alt-h2 { - font-size: 28px; - font-weight: $font-weight-light; - @include breakpoint(md) { font-size: 34px; } - @include breakpoint(lg) { font-size: 38px; } +@mixin h0-mktg { + font-size: $h0-size-mobile !important; + @include breakpoint(md) { font-size: $h0-size !important; } } -.alt-h2 { - @include alt-h2; +.h0-mktg { @include h0-mktg; } + +@mixin h1-mktg { + font-size: $h1-size-mobile !important; + @include breakpoint(md) { font-size: $h1-size !important; } } -@mixin alt-h3 { - font-size: 18px; - font-weight: $font-weight-normal; - @include breakpoint(md) { font-size: $h3-size; } - @include breakpoint(lg) { font-size: 22px; } +.h1-mktg { @include h1-mktg; } + +@mixin h2-mktg { + font-size: $h2-size-mobile !important; + @include breakpoint(md) { font-size: $h2-size !important; } } -.alt-h3 { - @include alt-h3; +.h2-mktg { @include h2-mktg; } + +@mixin h3-mktg { + font-size: $h3-size-mobile !important; + @include breakpoint(md) { font-size: $h3-size !important; } } -.alt-h4 { - font-size: $h4-size; - font-weight: $font-weight-semibold; +.h3-mktg { @include h3-mktg; } + +.h4-mktg { + font-size: $h4-size !important; } -.alt-h5 { - font-size: $h5-size; - font-weight: $font-weight-semibold; +.h5-mktg { + font-size: $h5-size !important; } -.alt-h6 { - font-size: $h6-size; - font-weight: $font-weight-semibold; +.h6-mktg { + font-size: $h6-size !important; } // Big opening paragraphs -@mixin alt-lead { - -webkit-font-smoothing: antialiased; - font-size: 21px; - font-weight: $font-weight-light; - @include breakpoint(md) { font-size: $h2-size; } - @include breakpoint(lg) { font-size: 26px; } +@mixin lead-mktg { + font-size: $h3-size; + font-weight: $font-weight-normal; } -.alt-lead { - @include alt-lead; -} +.lead-mktg { @include lead-mktg; } // For small text @@ -104,7 +88,7 @@ padding-bottom: 0; padding-left: $spacer; margin-bottom: $spacer-4; - font-family: $alt-mono-font; + font-family: $mono-font; font-size: $h4-size; line-height: 1.4; color: $text-gray; From c74df8e8852fa78e50cce389b9d701eea6d4abcd Mon Sep 17 00:00:00 2001 From: Sophie Shepherd Date: Wed, 17 Oct 2018 17:41:13 -0500 Subject: [PATCH 2/9] Delete alt-text-small --- modules/primer-marketing-type/lib/typography.scss | 6 ------ modules/primer-utilities/docs/box-shadow.md | 4 ++-- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/modules/primer-marketing-type/lib/typography.scss b/modules/primer-marketing-type/lib/typography.scss index afa69e3253..20e30d2cc7 100644 --- a/modules/primer-marketing-type/lib/typography.scss +++ b/modules/primer-marketing-type/lib/typography.scss @@ -75,12 +75,6 @@ .lead-mktg { @include lead-mktg; } -// For small text - -.alt-text-small { - font-size: 14px !important; -} - // Pullquote @mixin pullquote { diff --git a/modules/primer-utilities/docs/box-shadow.md b/modules/primer-utilities/docs/box-shadow.md index b7805b1e45..ce63eba4d3 100644 --- a/modules/primer-utilities/docs/box-shadow.md +++ b/modules/primer-utilities/docs/box-shadow.md @@ -27,7 +27,7 @@ These types of shadows are typically applied to elements with borders, like [`Bo

Organization

-

+

Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.

@@ -55,7 +55,7 @@ Medium box shadows are typically used on editorialized content that needs to app

Serverless architecture

-

+

Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.