fix: fixed font loading order

favware · Jun 11, 2020 · 8f98a43 · 8f98a43 · vercel · Jun 11, 2020
1 parent ab291e6
commit 8f98a43
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/packages/core/src/components/syntax-highlighter.scss b/packages/core/src/components/syntax-highlighter.scss
@@ -1,3 +1,5 @@
+@import './themes/variables';
+
 syntax-highlighter {
 	.syntaxhighlighter__hidden {
 		display: none;
@@ -71,7 +73,7 @@ syntax-highlighter {
 					box-shadow: none;
 					border-radius: 5px;
 					margin-right: 10px;
-					font-family: monospace;
+					font-family: $codingFonts;
 				}
 
 				.syntaxhighlighter__language-label:hover {
@@ -110,7 +112,7 @@ syntax-highlighter {
 					box-shadow: none;
 					border-radius: 5px;
 					margin-right: 10px;
-					font-family: monospace;
+					font-family: $codingFonts;
 
 					border: none;
 					cursor: pointer;

diff --git a/packages/core/src/components/themes/_variables.scss b/packages/core/src/components/themes/_variables.scss
@@ -0,0 +1 @@
+$codingFonts: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;
diff --git a/packages/core/src/components/themes/dark.scss b/packages/core/src/components/themes/dark.scss
@@ -4,12 +4,14 @@
  * @author ocodia
  */
 
-code[class*="language-"],
-pre[class*="language-"] {
+@import './themes/variables';
+
+code[class*='language-'],
+pre[class*='language-'] {
 	color: #f8f8f2;
 	background: none;
 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-family: $codingFonts;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
@@ -28,22 +30,22 @@ pre[class*="language-"] {
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
 	padding: 1em;
-	margin: .5em 0;
+	margin: 0.5em 0;
 	overflow: auto;
 	border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
 	background: #272822;
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
 	white-space: normal;
 }
 
@@ -59,7 +61,7 @@ pre[class*="language-"] {
 }
 
 .namespace {
-	opacity: .7;
+	opacity: 0.7;
 }
 
 .token.property,

diff --git a/packages/core/src/components/themes/light.scss b/packages/core/src/components/themes/light.scss
@@ -4,12 +4,14 @@
  * @author Lea Verou
  */
 
-code[class*="language-"],
-pre[class*="language-"] {
+@import './themes/variables';
+
+code[class*='language-'],
+pre[class*='language-'] {
 	color: black;
 	background: none;
 	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-family: $codingFonts;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
@@ -27,41 +29,45 @@ pre[class*="language-"] {
 	hyphens: none;
 }
 
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }
 
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }
 
 @media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
+	code[class*='language-'],
+	pre[class*='language-'] {
 		text-shadow: none;
 	}
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
 	padding: 1em;
-	margin: .5em 0;
+	margin: 0.5em 0;
 	overflow: auto;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
 	background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
 	white-space: normal;
 }
 
@@ -77,7 +83,7 @@ pre[class*="language-"] {
 }
 
 .namespace {
-	opacity: .7;
+	opacity: 0.7;
 }
 
 .token.property,
@@ -105,7 +111,7 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string {
 	color: #9a6e3a;
-	background: hsla(0, 0%, 100%, .5);
+	background: hsla(0, 0%, 100%, 0.5);
 }
 
 .token.atrule,
@@ -116,7 +122,7 @@ pre[class*="language-"] {
 
 .token.function,
 .token.class-name {
-	color: #DD4A68;
+	color: #dd4a68;
 }
 
 .token.regex,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		$codingFonts: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;