add basic new colors

docs/src/layouts/App/prism.scss

@@ -1,13 +1,4 @@
-$codeBackground: rgba($colorBlack, 0.9);
-$codeText: #eee;
-$codeGrey: #616161;
-$codeRed: #ff6666;
-$codeOrange: #fd9170;
-$colorYellow: #ffcb6b;
-$codeGreen: #b9ea80;
-$codeBlue: #89ddff;
-$codeTeal: #80cbc4;
-$codePurple: #c792ea;
+$codeBackground: $colorBlack;
 
 .prism-editor__textarea {
   background: transparent;
@@ -36,7 +27,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"] {
   white-space: normal;
-  color: $codeText;
+  color: $colorText;
   background: $codeBackground;
   border-radius: 0.2em;
   padding: 0.1em;
@@ -51,7 +42,7 @@ pre > code[class*="language-"] {
 pre[class*="language-"] {
   overflow: auto;
   position: relative;
-  color: $codeText;
+  color: $colorText;
   background: $codeBackground;
   padding: 1.2rem 1.5rem !important;
   border-radius: 0.5rem;
@@ -65,7 +56,7 @@ pre[class*="language-"] {
 pre[class*="language-"].language-css > code,
 pre[class*="language-"].language-sass > code,
 pre[class*="language-"].language-scss > code {
-  color: $codeOrange;
+  color: $colorOrange;
 }
 
 [class*="language-"] .namespace {
@@ -73,7 +64,7 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.atrule {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.attr-name {
@@ -81,15 +72,15 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.attr-value {
-  color: $codeGreen;
+  color: $colorGreen;
 }
 
 .token.attribute {
-  color: $codeGreen;
+  color: $colorGreen;
 }
 
 .token.boolean {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.builtin {
@@ -97,11 +88,11 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.cdata {
-  color: $codeTeal;
+  color: $colorTeal;
 }
 
 .token.char {
-  color: $codeTeal;
+  color: $colorTeal;
 }
 
 .token.class {
@@ -113,27 +104,27 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.comment {
-  color: $codeGrey;
+  color: $colorGrey;
 }
 
 .token.constant {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.deleted {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .token.doctype {
-  color: $codeGrey;
+  color: $colorGrey;
 }
 
 .token.entity {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .token.function {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.hexcode {
@@ -141,49 +132,49 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.id {
-  color: $codePurple;
+  color: $colorPurple;
   font-weight: bold;
 }
 
 .token.important {
-  color: $codePurple;
+  color: $colorPurple;
   font-weight: bold;
 }
 
 .token.inserted {
-  color: $codeTeal;
+  color: $colorTeal;
 }
 
 .token.keyword {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.number {
-  color: $codeOrange;
+  color: $colorOrange;
 }
 
 .token.operator {
-  color: $codeBlue;
+  color: $colorBlue;
 }
 
 .token.prolog {
-  color: $codeGrey;
+  color: $colorGrey;
 }
 
 .token.property {
-  color: $codeTeal;
+  color: $colorTeal;
 }
 
 .token.pseudo-class {
-  color: $codeGreen;
+  color: $colorGreen;
 }
 
 .token.pseudo-element {
-  color: $codeGreen;
+  color: $colorGreen;
 }
 
 .token.punctuation {
-  color: $codeBlue;
+  color: $colorBlue;
 }
 
 .token.regex {
@@ -191,31 +182,31 @@ pre[class*="language-"].language-scss > code {
 }
 
 .token.selector {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .token.string {
-  color: $codeGreen;
+  color: $colorGreen;
 }
 
 .token.symbol {
-  color: $codePurple;
+  color: $colorPurple;
 }
 
 .token.tag {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .token.unit {
-  color: $codeOrange;
+  color: $colorOrange;
 }
 
 .token.url {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .token.variable {
-  color: $codeRed;
+  color: $colorRed;
 }
 
 .line-highlight {