feat(styles): introduce heading and subheading colors and vars

Author: julie-ng

static/styles/_readme.scss

@@ -3,6 +3,7 @@
 		border-bottom: 1px solid var(--border-color);
 		margin: 1em 0;
 		padding-bottom: 0.5rem;
+		color: var(--subheading-color);
 
 		& + h3 {
 			margin-top: 0;

static/styles/_typography.scss

@@ -1,5 +1,6 @@
 h1 {
-	font-size: 2rem;
+  font-size: 2rem;
+  color: var(--heading-color);
 }
 
 h5 {
@@ -26,7 +27,7 @@ h5 {
 .subtitle {
 	font-weight: 600;
 	font-size: 1.5em;
-	color: var(--text-color);
+  color: var(--subheading-color);
 	margin: 1em 0;
 	padding: 0.4em 0;
 	border-bottom: 1px solid var(--border-color);
@@ -45,7 +46,7 @@ h5 {
   font-size: 1.4rem;
   font-family: var(--code-font);
   font-weight: 600;
-  color: var(--secondary-color);
+  color: var(--primary-color);
 
   .return-type-signature {
     color: #aaa;

static/styles/_vars.scss

@@ -10,6 +10,8 @@
   --text-color: #4a4a4a;
   --light-font-color: #999;
   --supporting-color: #7097b5;
+  --heading-color: var(--text-color);
+  --subheading-color: var(--secondary-color);
   --heading-background: #f7f7f7;
   --code-bg-color: #f8f8f8;