Skip to content

Commit

Permalink
Merge pull request #75 from BrightspaceUI/US79943
Browse files Browse the repository at this point in the history 
US79943: Update typography styles according to new guidance.
  • Loading branch information
@njostonehouse
njostonehouse authored Nov 29, 2016
2 parents 51a8ae2 + ef0fa6e commit 398b5da
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 73 deletions.
14 changes: 8 additions & 6 deletions d2l-typography-shared-styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,22 @@
<template>
<style>
:root {
--d2l-body-standard-text: {
font-size: 0.95rem;
font-weight: 400;
line-height: 1.4rem;
};

--d2l-body-compact-text: {
font-family: inherit;
font-size: 0.8rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.005rem;
line-height: 1.2rem;
};

--d2l-body-small-text: {
font-family: inherit;
font-size: 0.7rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.015rem;
line-height: 1.05rem;
margin: auto;
};
}
Expand Down
57 changes: 26 additions & 31 deletions d2l-typography.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,39 @@
<style include="d2l-colors d2l-typography-shared-styles">

.d2l-typography,
.d2l-typography .d2l-body-standard,
.vui-typography,
.vui-typography .d2l-body-standard {
.vui-typography {
color: var(--d2l-color-ferrite);
display: block;
font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
letter-spacing: 0.015rem;
letter-spacing: 0.01rem;
@apply(--d2l-body-standard-text);
@apply(--d2l-font-custom);
}

.d2l-typography .d2l-body-standard {
@apply(--d2l-body-standard-text);
}

.d2l-typography .d2l-body-compact {
@apply(--d2l-body-compact-text);
}

.d2l-typography .d2l-body-small {
@apply(--d2l-body-small-text);
}

.d2l-typography p,
.vui-typography p {
margin: 1.5rem 0;
margin: 1rem 0;
@apply(--d2l-font-paragraph-custom);
}

.d2l-typography.d2l-dyslexic,
.d2l-typography .d2l-dyslexic,
.vui-typography.vui-dyslexic,
.vui-typography .vui-dyslexic {
font-weight: 400;
font-family: 'Open Dyslexic', sans-serif;
font-weight: 400;
@apply(--d2l-font-dyslexic-custom);
}

Expand Down Expand Up @@ -74,19 +74,17 @@
.vui-typography .vui-heading-1,
.d2l-typography .d2l-heading-1 {
font-size: 2rem;
font-weight: 300;
line-height: 2.5rem;
letter-spacing: -0.025rem;
font-weight: 400;
line-height: 2.4rem;
margin: 1.5rem 0 1.5rem 0;
@apply(--d2l-heading-1-custom);
}

.vui-typography .vui-heading-2,
.d2l-typography .d2l-heading-2 {
font-size: 1.5rem;
font-weight: 300;
line-height: 2rem;
letter-spacing: -0.015rem;
font-weight: 400;
line-height: 1.8rem;
margin: 1.5rem 0 1.5rem 0;
@apply(--d2l-heading-2-custom);
}
Expand All @@ -96,17 +94,15 @@
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
letter-spacing: 0.025rem;
margin: 1.5rem 0 1.5rem 0;
@apply(--d2l-heading-3-custom);
}

.vui-typography .vui-heading-4,
.d2l-typography .d2l-heading-4 {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
letter-spacing: 0.02rem;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2rem;
margin: 1.5rem 0 1.5rem 0;
@apply(--d2l-heading-4-custom);
}
Expand All @@ -115,35 +111,34 @@
.d2l-typography .d2l-heading-1,
.d2l-typography .vui-heading-1 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
line-height: 1.8rem;
}
.d2l-typography .d2l-heading-2,
.d2l-typography .vui-heading-2 {
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
}
.d2l-typography .d2l-heading-3,
.d2l-typography .vui-heading-3,
.d2l-typography .d2l-heading-4,
.d2l-typography .vui-heading-4 {
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2rem;
}
.d2l-typography .d2l-body-standard {
font-size: 0.7rem;
font-weight: 400;
line-height: 1.1rem;
letter-spacing: 0;
font-size: 0.8rem;
line-height: 1.2rem;
}
.d2l-typography .d2l-body-compact {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02rem;
font-size: 0.8rem;
line-height: 1.2rem;
}
.d2l-typography .d2l-body-small {
font-size: 0.6rem;
line-height: 0.8rem;
letter-spacing: 0.015rem;
line-height: 0.9rem;
}
}

Expand Down
72 changes: 36 additions & 36 deletions test/font-classes.gspec
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,72 +12,72 @@
@on desktop
heading-1:
css font-size is "40px"
css font-weight is "300"
css line-height is "50px"
css letter-spacing is "-0.5px"
css font-weight is "normal"
css line-height is "48px"
css letter-spacing matches "0\.20+.*px"
heading-2:
css font-size is "30px"
css font-weight is "300"
css line-height is "40px"
css letter-spacing matches "-0\.30+.*px"
css font-weight is "normal"
css line-height is "36px"
css letter-spacing matches "0\.20+.*px"
heading-3:
css font-size is "20px"
css font-weight is "bold"
css line-height is "30px"
css letter-spacing is "0.5px"
css letter-spacing matches "0\.20+.*px"
heading-4:
css font-size is "20px"
css font-weight is "normal"
css line-height is "30px"
css letter-spacing matches "0\.40+.*px"
css font-size is "16px"
css font-weight is "bold"
css line-height is "24px"
css letter-spacing matches "0\.20+.*px"
standard:
css font-size is "20px"
css font-weight is "300"
css line-height is "30px"
css letter-spacing matches "0\.30+.*px"
css font-size is "19px"
css font-weight is "normal"
css line-height is "28px"
css letter-spacing matches "0\.20+.*px"
compact:
css font-size is "16px"
css font-weight is "normal"
css line-height is "20px"
css letter-spacing matches "0\.10+.*px"
css line-height is "24px"
css letter-spacing matches "0\.20+.*px"
small:
css font-size is "14px"
css font-weight is "normal"
css line-height is "20px"
css letter-spacing matches "0\.30+.*px"
css line-height is "21px"
css letter-spacing matches "0\.20+.*px"
@on mobile
heading-1:
css font-size is "30px"
css font-weight is "300"
css line-height is "40px"
css letter-spacing is "-0.5px"
css font-weight is "normal"
css line-height is "36px"
css letter-spacing matches "0\.20+.*px"
heading-2:
css font-size is "20px"
css font-weight is "300"
css font-weight is "bold"
css line-height is "30px"
css letter-spacing matches "-0\.30+.*px"
css letter-spacing matches "0\.20+.*px"
heading-3:
css font-size is "16px"
css font-weight is "bold"
css line-height is "24px"
css letter-spacing is "0.5px"
css letter-spacing matches "0\.20+.*px"
heading-4:
css font-size is "16px"
css font-weight is "normal"
css font-weight is "bold"
css line-height is "24px"
css letter-spacing matches "0\.40+.*px"
css letter-spacing matches "0\.20+.*px"
standard:
css font-size is "14px"
css font-size is "16px"
css font-weight is "normal"
css line-height is "22px"
css letter-spacing is "normal"
css line-height is "24px"
css letter-spacing matches "0\.20+.*px"
compact:
css font-size is "14px"
css font-weight is "bold"
css line-height is "20px"
css letter-spacing matches "0\.40+.*px"
css font-size is "16px"
css font-weight is "normal"
css line-height is "24px"
css letter-spacing matches "0\.20+.*px"
small:
css font-size is "12px"
css font-weight is "normal"
css line-height is "16px"
css letter-spacing matches "0\.30+.*px"
css line-height is "18px"
css letter-spacing matches "0\.20+.*px"

0 comments on commit 398b5da

Please sign in to comment.