primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

Add font-weight-medium to marketing styles, and use it in the type scale (#1497)

Browse Source 
* Add and use medium

* Use $font-weight-extrabold instead of hard-coded 800 weight

* Formatting

* Create forty-buses-serve.md

* Add text-medium utility

* Add $font-weight-extrabold

* Bump extra bold to 800
This commit is contained in:
Tobias Ahlin 2021-07-14 16:18:57 +02:00 committed by GitHub
parent e072734aa1
commit 84bbd501a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/forty-buses-serve.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": minor
---
Add font-weight-medium to marketing styles, and use it in the type scale.

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

@ -3,11 +3,14 @@
$marketing-font-path: "/fonts/" !default;
$font-mktg: $body-font !default;
$font-weight-medium: 450 !default;
$font-weight-extrabold: 800 !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-large: $font-weight-extrabold !default;
$mktg-header-weight-default: $font-weight-bold !default;
$mktg-header-weight-threshold: 24px !default;

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

@ -27,9 +27,11 @@
@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 !important;
}
@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;
}
@ -40,9 +42,11 @@
@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 !important;
}
@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;
}
@ -78,11 +82,13 @@
@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-body-spacing-threshold and map-get($pairing, "size") < $mktg-body-spacing-threshold) {
letter-spacing: $mktg-body-spacing-large !important;
}
@if (map-get($pairing-md, "size") >= $mktg-body-weight-threshold and map-get($pairing, "size") < $mktg-body-weight-threshold) {
font-weight: $font-weight-semibold;
font-weight: $font-weight-medium;
}
}
}
@ -91,17 +97,23 @@
@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-body-spacing-threshold and map-get($pairing-md, "size") < $mktg-body-spacing-threshold) {
letter-spacing: $mktg-body-spacing-large !important;
}
@if (map-get($pairing-lg, "size") >= $mktg-body-weight-threshold and map-get($pairing-md, "size") < $mktg-body-weight-threshold) {
font-weight: $font-weight-semibold;
font-weight: $font-weight-medium;
}
}
}
}
}
.text-medium {
font-weight: $font-weight-medium !important;
}
// Pullquote
@mixin pullquote {