Update syntax highlighting styles (#301)

amcdnl · jelbourn · commit bbd1849220ed · 2017-10-20T17:54:14.000-07:00
diff --git a/src/highlightjs/material-dark.css b/src/highlightjs/material-dark.css
@@ -7,8 +7,10 @@ Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme
   padding: 1em;
   background: #2B2B2D;
   color: #CDD3D8;
-  font-family: "Roboto Mono", monospace;
-  font-size: 1em;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+  font: 300 100%/1 Roboto Mono,monospace;
+  font-size: 14px;
 }
 
 .hljs > *::selection {
@@ -26,7 +28,7 @@ Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme
 
 .hljs-string,
 .hljs-subst {
-  color: #C3E88D;
+  color: #9ccc65;
 }
 
 .hljs-number,
@@ -43,10 +45,10 @@ Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme
   color: #75A5FF;
 }
 .hljs-tag {
-  color: #abb2bf;
+  color: #ce93d8;
 }
 .hljs-name {
-  color: #e06c75;
+  color: #4dd0e1;
 }
 .hljs-type {
   color: #da4939;
diff --git a/src/highlightjs/material-light.css b/src/highlightjs/material-light.css
@@ -4,9 +4,11 @@
   overflow-x: auto;
   padding: 1em;
   background: #FAFAFA;
-  color: #607D8B;
-  font-family: "Roboto Mono", monospace;
-  font-size: 1em;
+  color: #37474f;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+  font: 300 100%/1 Roboto Mono,monospace;
+  font-size: 14px;
 }
 
 .hljs > *::selection,
@@ -23,12 +25,12 @@
 .hljs-selector-tag,
 .hljs-regexp,
 .hljs-meta {
-  color: #39ADB5;
+  color: #9c27b0;
 }
 
 .hljs-string,
 .hljs-subst {
-  color: #91B859;
+  color: #0d904f;
 }
 
 .hljs-number,
@@ -41,7 +43,7 @@
 .hljs-keyword,
 .hljs-type,
 .hljs-attribute {
-  color: #7C4DFF;
+  color: #3b78e7;
 }
 
 .hljs-title,
@@ -55,11 +57,11 @@
 }
 
 .hljs-params {
-  color: #F76D47;
+  color: #d81b60;
 }
 
 .hljs-addition {
-  color: #7C4DFF;
+  color: #3b78e7;
   display: inline-block;
   width: 100%;
 }
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,7 @@
       sizes="192x192">
   <link rel="manifest" href="assets/img/favicons/manifest.json">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono:300" rel="stylesheet">
 </head>
 
 <body class="docs-app-background">
diff --git a/src/styles/_general.scss b/src/styles/_general.scss
@@ -34,6 +34,10 @@ code {
   font-size: 90%;
 }
 
+.docs-markdown-pre code {
+  font-size: 100%;
+}
+
 // These styles are for controlling SVGs without using the /deep/ selector
 
 .docs-component-category-list-card-image svg {

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,10 @@ code {`
`34`	`34`	`font-size: 90%;`
`35`	`35`	`}`
`36`	`36`
	`37`	`+.docs-markdown-pre code {`
	`38`	`+ font-size: 100%;`
	`39`	`+}`
	`40`	`+`
`37`	`41`	`// These styles are for controlling SVGs without using the /deep/ selector`
`38`	`42`
`39`	`43`	`.docs-component-category-list-card-image svg {`