Merge pull request #31 from Brightspace/dbatiste/update-base-font-size

Updating base font-size, heading sizes, etc. to align with latest des…

test/unit/typographySpec.js

@@ -81,7 +81,7 @@
 			} );
 
 			it( 'applies the font size', function() {
-				expect( heading ).toHaveFontSize( '28px' );
+				expect( heading ).toHaveFontSize( '29px' );
 			} );
 
 			it( 'applies the font weight', function() {
@@ -144,7 +144,7 @@
 			} );
 
 			it( 'applies the font size', function() {
-				expect( text ).toHaveFontSize( '14px' );
+				expect( text ).toHaveFontSize( '13px' );
 			} );
 
 			it( 'applies the font weight', function() {
@@ -165,7 +165,7 @@
 			} );
 
 			it( 'applies the font size', function() {
-				expect( text ).toHaveFontSize( '14px' );
+				expect( text ).toHaveFontSize( '13px' );
 			} );
 
 			it( 'applies the font weight', function() {

typography.scss

@@ -2,14 +2,14 @@
 @import 'px-to-rem.scss';
 @import 'fonts.scss';
 
-$vui-base-fontSize: 19px;
+$vui-base-fontSize: 20px;
 
 @mixin vui-typography() {
 
 	@include vui-typography-font();
 
 	& p {
-		margin: 1rem 0;
+		margin: 1.5rem 0;
 	}
 
 }
@@ -51,9 +51,9 @@ $vui-base-fontSize: 19px;
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(38px, $vui-base-fontSize);
+	font-size: 2rem;
 	font-weight: 300;
-	line-height: 2rem;
+	line-height: 3rem;
 	letter-spacing: px-to-rem(-0.5px, $vui-base-fontSize);
 	margin: 1.5rem 0 1.5rem 0;
 
@@ -63,46 +63,46 @@ $vui-base-fontSize: 19px;
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(28px, $vui-base-fontSize);
+	font-size: 1.5rem;
 	font-weight: 300;
-	line-height: 2rem;
+	line-height: 2.25rem;
 	letter-spacing: px-to-rem(-0.3px, $vui-base-fontSize);
-	margin: 1rem 0 1rem 0;
+	margin: 1.5rem 0 1.5rem 0;
 
 }
 
 @mixin vui-typography-heading3() {
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(19px, $vui-base-fontSize);
+	font-size: 1rem;
 	font-weight: 700;
-	line-height: 2rem;
+	line-height: 1.5rem;
 	letter-spacing: px-to-rem(0.5px, $vui-base-fontSize);
-	margin: 1rem 0 1rem 0;
+	margin: 1.5rem 0 1.5rem 0;
 
 }
 
 @mixin vui-typography-heading4() {
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(19px, $vui-base-fontSize);
+	font-size: 1rem;
 	font-weight: 400;
-	line-height: 2rem;
-	letter-spacing: px-to-rem(0.5px, $vui-base-fontSize);
-	margin: 1rem 0 1rem 0;
+	line-height: 1.5rem;
+	letter-spacing: px-to-rem(0.4px, $vui-base-fontSize);
+	margin: 1.5rem 0 1.5rem 0;
 
 }
 
 @mixin vui-typography-small-text() {
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(14px, $vui-base-fontSize);
+	font-size: 0.7rem;
 	font-weight: 400;
 	line-height: 1rem;
-	letter-spacing: px-to-rem(0.2px, $vui-base-fontSize);
+	letter-spacing: px-to-rem(0.4px, $vui-base-fontSize);
 	margin: 1rem 0 1rem 0;
 
 }
@@ -111,7 +111,7 @@ $vui-base-fontSize: 19px;
 
 	color: $vui-color-ferrite;
 	font-family: inherit;
-	font-size: px-to-rem(14px, $vui-base-fontSize);
+	font-size: 0.7rem;
 	font-weight: 700;
 	line-height: 1rem;
 	letter-spacing: px-to-rem(0.4px, $vui-base-fontSize);