From 7be5d24a6348f05c8bffb4fae063836f4640100a Mon Sep 17 00:00:00 2001
From: Noel Stonehouse <Noel.Stonehouse@D2L.com>
Date: Mon, 28 Nov 2016 12:48:13 -0500
Subject: [PATCH 1/3] US79943: Update typography styles according to new
 guidance.

---
 d2l-typography-shared-styles.html | 14 +++---
 d2l-typography.html               | 58 ++++++++++++-------------
 test/font-classes.gspec           | 72 +++++++++++++++----------------
 3 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/d2l-typography-shared-styles.html b/d2l-typography-shared-styles.html
index be8116e..8c8d6e9 100644
--- a/d2l-typography-shared-styles.html
+++ b/d2l-typography-shared-styles.html
@@ -4,20 +4,22 @@
 	<template>
 		<style>
 			html {
+				--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;
 				};
 			}
diff --git a/d2l-typography.html b/d2l-typography.html
index ffbcdfd..3f2ec56 100644
--- a/d2l-typography.html
+++ b/d2l-typography.html
@@ -7,19 +7,20 @@
 		<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;
+				font-weight: 400;
+				letter-spacing: 0.01rem;
 				@apply(--d2l-font-custom);
 			}
 
+			.d2l-typography .d2l-body-standard,
+			.d2l-typography.d2l-body-standard {
+				@apply(--d2l-body-standard-text);
+			}
+
 			.d2l-typography .d2l-body-compact {
 				@apply(--d2l-body-compact-text);
 			}
@@ -27,10 +28,10 @@
 			.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);
 			}
 
@@ -38,8 +39,8 @@
 			.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);
 			}
 
@@ -74,9 +75,8 @@
 			.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);
 			}
@@ -84,9 +84,8 @@
 			.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);
 			}
@@ -96,17 +95,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);
 			}
@@ -115,11 +112,13 @@
 				.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,
@@ -127,23 +126,20 @@
 				.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;
 				}
 			}
 
diff --git a/test/font-classes.gspec b/test/font-classes.gspec
index 42ee51d..36a05a6 100644
--- a/test/font-classes.gspec
+++ b/test/font-classes.gspec
@@ -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"

From 750edf071fefb8b59db26970ad208655dc23df90 Mon Sep 17 00:00:00 2001
From: Noel Stonehouse <Noel.Stonehouse@D2L.com>
Date: Mon, 28 Nov 2016 14:51:22 -0500
Subject: [PATCH 2/3] US79943: Use standard font style in the root typography
 class to have less impact on consumers' current styles.

---
 d2l-typography.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/d2l-typography.html b/d2l-typography.html
index 3f2ec56..c9570ef 100644
--- a/d2l-typography.html
+++ b/d2l-typography.html
@@ -13,11 +13,11 @@
 				font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 				font-weight: 400;
 				letter-spacing: 0.01rem;
+				@apply(--d2l-body-standard-text);
 				@apply(--d2l-font-custom);
 			}
 
-			.d2l-typography .d2l-body-standard,
-			.d2l-typography.d2l-body-standard {
+			.d2l-typography .d2l-body-standard {
 				@apply(--d2l-body-standard-text);
 			}
 

From 6b2a04e6e6ed54dd7fa3094a1ffe53ed7dc487c7 Mon Sep 17 00:00:00 2001
From: Noel Stonehouse <Noel.Stonehouse@D2L.com>
Date: Mon, 28 Nov 2016 15:01:24 -0500
Subject: [PATCH 3/3] US79943: remove duplicate font weight

---
 d2l-typography.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/d2l-typography.html b/d2l-typography.html
index c9570ef..058eefd 100644
--- a/d2l-typography.html
+++ b/d2l-typography.html
@@ -11,7 +11,6 @@
 				color: var(--d2l-color-ferrite);
 				display: block;
 				font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
-				font-weight: 400;
 				letter-spacing: 0.01rem;
 				@apply(--d2l-body-standard-text);
 				@apply(--d2l-font-custom);