Skip to content

Commit

Permalink
Convert typography to use rem units with px fallbacks (#2302)
Browse files Browse the repository at this point in the history
* add temp vars

* base styles

* lint

* cleanup

* lint

* Create nervous-experts-camp.md

* lint

* Stylelint auto-fixes

* Update nervous-experts-camp.md

Co-authored-by: Actions Auto Build <actions@github.com>
  • Loading branch information
langermank and actions-user authored Nov 21, 2022
1 parent 3b397d9 commit 412d782
Show file tree
Hide file tree
Showing 7 changed files with 204 additions and 88 deletions.
5 changes: 5 additions & 0 deletions .changeset/nervous-experts-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": minor
---

Convert typography to use `rem` units with `px` fallbacks
4 changes: 2 additions & 2 deletions src/base/base.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// stylelint-disable selector-max-type, selector-no-qualifying-type
// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
* {
box-sizing: border-box;
}
Expand All @@ -14,7 +14,7 @@ button {

body {
font-family: $body-font;
font-size: $body-font-size;
font-size: var(--body-font-size, $body-font-size);
line-height: $body-line-height;
color: var(--color-fg-default);
background-color: var(--color-canvas-default);
Expand Down
1 change: 1 addition & 0 deletions src/primitives/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
@import './temp-typography-tokens.scss';
22 changes: 22 additions & 0 deletions src/primitives/temp-typography-tokens.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Temporary typography vars in rem units variables
:root {
// Heading sizes - mobile
// h4-h6 remain the same size on both mobile & desktop
--h00-size-mobile: 2.5rem;
--h0-size-mobile: 2rem;
--h1-size-mobile: 1.625rem;
--h2-size-mobile: 1.375rem;
--h3-size-mobile: 1.125rem;

// Heading sizes - desktop
--h00-size: 3rem;
--h0-size: 2.5rem;
--h1-size: 2rem;
--h2-size: 1.5rem;
--h3-size: 1.25rem;
--h4-size: 1rem;
--h5-size: 0.875rem;
--h6-size: 0.75rem;
--body-font-size: 0.875rem;
--font-size-small: 0.75rem;
}
30 changes: 18 additions & 12 deletions src/support/mixins/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,57 +10,63 @@
// Heading mixins for use within components
// These match heading utilities in utilities/typography
@mixin h1 {
font-size: $h1-size;
font-size: var(--h1-size, $h1-size);
font-weight: $font-weight-bold;
}

@mixin h2 {
font-size: $h2-size;
font-size: var(--h2-size, $h2-size);
font-weight: $font-weight-bold;
}

@mixin h3 {
font-size: $h3-size;
font-size: var(--h3-size, $h3-size);
font-weight: $font-weight-bold;
}

@mixin h4 {
font-size: $h4-size;
font-size: var(--h4-size, $h4-size);
font-weight: $font-weight-bold;
}

@mixin h5 {
font-size: $h5-size;
font-size: var(--h5-size, $h5-size);
font-weight: $font-weight-bold;
}

@mixin h6 {
font-size: $h6-size;
font-size: var(--h6-size, $h6-size);
font-weight: $font-weight-bold;
}

// Responsive heading mixins
// There are no responsive mixins for h4-h6 because they are small
// and don't need to be smaller on mobile.
@mixin f1-responsive {
font-size: $h1-size-mobile;
font-size: var(--h1-size-mobile, $h1-size-mobile);

// 32px on desktop
@include breakpoint(md) { font-size: $h1-size; }
@include breakpoint(md) {
font-size: var(--h1-size, $h1-size);
}
}

@mixin f2-responsive {
font-size: $h2-size-mobile;
font-size: var(--h2-size-mobile, $h2-size-mobile);

// 24px on desktop
@include breakpoint(md) { font-size: $h2-size; }
@include breakpoint(md) {
font-size: var(--h2-size, $h2-size);
}
}

@mixin f3-responsive {
font-size: $h3-size-mobile;
font-size: var(--h3-size-mobile, $h3-size-mobile);

// 20px on desktop
@include breakpoint(md) { font-size: $h3-size; }
@include breakpoint(md) {
font-size: var(--h3-size, $h3-size);
}
}

// These use the mixins from above for responsive heading sizes.
Expand Down
8 changes: 4 additions & 4 deletions src/support/variables/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ $h6-size: 12px !default;
$font-size-small: 12px !default;

// Font weights
$font-weight-bold: 600 !default;
$font-weight-semibold: 500 !default;
$font-weight-normal: 400 !default;
$font-weight-light: 300 !default;
$font-weight-bold: var(--base-text-weight-medium, 600) !default;
$font-weight-semibold: var(--base-text-weight-semibold, 500) !default;
$font-weight-normal: var(--base-text-weight-normal, 400) !default;
$font-weight-light: var(--base-text-weight-light, 300) !default;

// Line heights
$lh-condensed-ultra: 1 !default;
Expand Down
Loading

0 comments on commit 412d782

Please sign in to comment.