expose variables for typography sizes (#9693)

This will allow usage in areas where getting the line-height, etc
of the typography settings will introduce issues. The mixins have been
updated to references these variables so that they can be changed in
one place in the future
feature/default_network_editable
Brad Decker 4 years ago committed by GitHub
parent 5b67cf1009
commit 96717cc9e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 36
      ui/app/css/design-system/typography.scss

@ -69,11 +69,22 @@ $fa-font-path: 'fonts/fontawesome';
$font-family: Euclid, Roboto, Helvetica, Arial, sans-serif; $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.125rem;
$font-size-h5: 1rem;
$font-size-h6: 0.875rem;
$font-size-paragraph: 1rem;
$font-size-h7: 0.75rem;
$font-size-h8: 0.625rem;
$font-size-h9: 0.5rem;
// Typography // Typography
@mixin H1 { @mixin H1 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 2.5rem; font-size: $font-size-h1;
font-family: $font-family; font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@ -82,7 +93,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H2 { @mixin H2 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 2rem; font-size: $font-size-h2;
font-family: $font-family; font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@ -90,7 +101,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H3 { @mixin H3 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1.5rem; font-size: $font-size-h3;
font-family: $font-family; font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@ -98,7 +109,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H4 { @mixin H4 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1.125rem; font-size: $font-size-h4;
font-family: $font-family; font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@ -106,46 +117,41 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H5 { @mixin H5 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1rem; font-size: $font-size-h5;
font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@mixin H6 { @mixin H6 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 0.875rem; // 14px @default font-size: $font-size-h6; // 14px @default
line-height: 140%; line-height: 140%;
} }
@mixin Paragraph { @mixin Paragraph {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1rem; font-size: $font-size-paragraph;
font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@mixin H7 { @mixin H7 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 0.75rem; font-size: $font-size-h7;
font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@mixin H8 { @mixin H8 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 0.625rem; font-size: $font-size-h8;
font-family: $font-family;
line-height: 140%; line-height: 140%;
} }
@mixin H9 { @mixin H9 {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 0.5rem; font-size: $font-size-h9;
font-family: $font-family;
line-height: 140%; line-height: 140%;
} }

Loading…
Cancel
Save