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,