From d006f96fb31d4023e2dddc372aaec264a2906c5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 29 Jan 2021 11:46:19 +0100
Subject: [PATCH] black to white

---
 docs/src/components/Demo/style.scss           |  3 +-
 docs/src/components/PageNavigation/style.scss |  6 +--
 docs/src/layouts/App/base.scss                | 44 +---------------
 docs/src/layouts/App/style.scss               | 30 +++++------
 docs/src/templates/DocPage/style.scss         | 50 ++++++++-----------
 docs/src/variables.scss                       |  2 +-
 6 files changed, 44 insertions(+), 91 deletions(-)

diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 69530caf..2cbbaf35 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -12,10 +12,11 @@
     max-height: 50rem;
     overflow: auto;
     scroll-behavior: smooth;
+    border: 1px solid rgba($colorBlack, 0.1);
   }
 
   &__source {
-    border: 1px solid rgba($colorWhite, 0.1);
+    border: 1px solid rgba($colorBlack, 0.1);
     background-color: $colorBlack;
   }
 
diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss
index 1583320c..a0e51f6f 100644
--- a/docs/src/components/PageNavigation/style.scss
+++ b/docs/src/components/PageNavigation/style.scss
@@ -4,13 +4,13 @@
   padding: 1.5rem 0;
 
   &__link {
-    color: rgba($colorWhite, 0.6);
+    color: rgba($colorBlack, 0.6);
     padding: 0.25rem 0.5rem;
     border-radius: 5px;
 
     &:hover {
-      color: $colorWhite;
-      background-color: rgba($colorWhite, 0.05);
+      color: $colorBlack;
+      background-color: rgba($colorBlack, 0.05);
     }
   }
 }
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index adb77670..f6e645e6 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -55,7 +55,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.7;
   font-feature-settings: 'cv05' 1;
-  background-color: $colorBlack;
+  background-color: $colorWhite;
   color: $colorText;
 }
 
@@ -75,7 +75,7 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: $colorWhite;
+    color: $colorBlack;
   }
 }
 
@@ -91,46 +91,6 @@ code {
   color: white;
 }
 
-// TODO: Move to examples
-// .ProseMirror {
-//   > * + * {
-//     margin-top: 0.75em;
-//   }
-
-//   ul,
-//   ol {
-//     padding: 0 1rem;
-//   }
-
-//   pre {
-//     background: $colorBlack;
-//     color: $colorWhite;
-//     font-family: 'JetBrainsMono', monospace;
-//     padding: 0.75rem 1rem;
-//     border-radius: 0.5rem;
-
-//     code {
-//       color: inherit;
-//       background: none;
-//       font-size: 0.8rem;
-//     }
-//   }
-
-//   img {
-//     max-width: 100%;
-//     height: auto;
-//   }
-
-//   hr {
-//     margin: 1rem 0;
-//   }
-
-//   blockquote {
-//     padding-left: 1rem;
-//     border-left: 2px solid rgba($colorBlack, 0.1);
-//   }
-// }
-
 .DocSearch,
 .DocSearch-Container {
   filter: saturate(0);
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 256e9a9c..7c648ac6 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -16,7 +16,7 @@ $menuBreakPoint: 800px;
     display: inline-flex;
     align-items: center;
     font-weight: 600;
-    color: $colorWhite;
+    color: $colorBlack;
     font-size: 1.5rem;
 
     &::after {
@@ -27,7 +27,7 @@ $menuBreakPoint: 800px;
       letter-spacing: 0.05rem;
       text-transform: uppercase;
       border-radius: 5px;
-      border: 1px solid $colorWhite;
+      border: 1px solid $colorBlack;
       padding: 0 0.4em;
     }
   }
@@ -51,13 +51,13 @@ $menuBreakPoint: 800px;
     height: 3rem;
     overflow: hidden;
     background-color: transparent;
-    border: 1px solid rgba($colorWhite, 0.1);
+    border: 1px solid rgba($colorBlack, 0.1);
     border-radius: 0.5rem;
     padding: 0.5rem 0.75rem;
 
     &::after {
       content: 'Search';
-      color: rgba($colorWhite, 0.5);
+      color: rgba($colorBlack, 0.5);
     }
   }
 
@@ -90,7 +90,7 @@ $menuBreakPoint: 800px;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       overscroll-behavior: contain;
-      border-right: 1px solid rgba($colorWhite, 0.1);
+      border-right: 1px solid rgba($colorBlack, 0.1);
     }
   }
 
@@ -121,7 +121,7 @@ $menuBreakPoint: 800px;
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: $colorBlack;
+      background-color: $colorWhite;
       opacity: 0.8;
       transform: translate3d(0,0,0);
       pointer-events: none;
@@ -146,7 +146,7 @@ $menuBreakPoint: 800px;
     transition: color 0.2s $ease;
 
     &:hover {
-      color: $colorWhite;
+      color: $colorBlack;
     }
 
     @media (min-width: $menuBreakPoint) {
@@ -177,7 +177,7 @@ $menuBreakPoint: 800px;
     letter-spacing: 0.025rem;
     font-size: 0.75rem;
     text-transform: uppercase;
-    color: rgba($colorWhite, 0.3);
+    color: rgba($colorBlack, 0.3);
     margin-bottom: 0.5rem;
   }
 
@@ -209,16 +209,16 @@ $menuBreakPoint: 800px;
     white-space: nowrap;
 
     &:hover {
-      color: $colorWhite;
+      color: $colorBlack;
     }
 
     &--exact {
-      color: $colorWhite;
-      background-color: rgba($colorWhite, 0.05);
+      color: $colorBlack;
+      background-color: rgba($colorBlack, 0.05);
     }
 
     &--draft {
-      color: rgba($colorWhite, 0.4);
+      color: rgba($colorBlack, 0.4);
 
       &::after {
         content: 'draft';
@@ -268,7 +268,7 @@ $menuBreakPoint: 800px;
     &--with-children::after {
       content: '›';
       font-weight: bold;
-      color: rgba($colorWhite, 0.2);
+      color: rgba($colorBlack, 0.2);
       position: absolute;
       margin-left: -1.5em;
     }
@@ -287,14 +287,14 @@ $menuBreakPoint: 800px;
   }
 
   &__page-navigation {
-    border-top: 1px solid rgba($colorWhite, 0.1);
+    border-top: 1px solid rgba($colorBlack, 0.1);
   }
 
   &__page-footer {
     font-size: 0.85rem;
     padding: 1.5rem 0;
     text-align: center;
-    border-top: 1px solid rgba($colorWhite, 0.1);
+    border-top: 1px solid rgba($colorBlack, 0.1);
 
     a {
       text-decoration: underline;
diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss
index f51005ca..ac79b5be 100644
--- a/docs/src/templates/DocPage/style.scss
+++ b/docs/src/templates/DocPage/style.scss
@@ -27,8 +27,7 @@
     > h4,
     > h5,
     > h6 {
-      font-weight: 500;
-      color: $colorWhite;
+      color: $colorBlack;
       margin-top: 3 * $spacing;
       margin-bottom: $spacing;
 
@@ -54,7 +53,7 @@
         position: absolute;
         top: 0;
         right: 100%;
-        color: rgba($colorWhite, 0.4);
+        color: rgba($colorBlack, 0.4);
         text-decoration: none;
         font-weight: 400;
         padding-right: 0.5rem;
@@ -80,7 +79,7 @@
     }
 
     > pre {
-      border: 1px solid rgba($colorWhite, 0.1);
+      border: 1px solid rgba($colorBlack, 0.1);
     }
 
     > p code,
@@ -88,8 +87,8 @@
     > ol code,
     > .table-wrapper code,
     > .remark-container code {
-      color: $colorYellow;
-      background-color: rgba($colorYellow, 0.1);
+      color: rgba($colorBlack, 0.7);
+      background-color: rgba($colorYellow, 0.3);
       box-decoration-break: clone;
     }
 
@@ -110,9 +109,10 @@
 
       & + ul {
         list-style: none;
-        border: 1px solid rgba($colorWhite, 0.1);
+        background-color: rgba($colorBlack, 0.03);
         padding: 1.25rem !important;
         border-radius: 0.5rem;
+        font-size: 0.85rem;
 
         &::before {
           display: block;
@@ -121,7 +121,7 @@
           letter-spacing: 0.025rem;
           font-size: 0.75rem;
           text-transform: uppercase;
-          color: rgba($colorWhite, 0.3);
+          color: rgba($colorBlack, 0.3);
           margin-bottom: 0.5rem;
         }
 
@@ -157,7 +157,7 @@
           display: inline-block;
           margin-right: 0.75rem;
           content: "\2022";
-          color: $colorYellow;
+          color: $colorBlack;
         }
       }
     }
@@ -180,9 +180,9 @@
           justify-content: center;
           height: 1.5rem;
           width: 1.5rem;
-          background-color: rgba($colorYellow, 0.1);
+          background-color: rgba($colorBlack, 0.1);
           border-radius: 9999px;
-          color: $colorYellow;
+          color: $colorBlack;
           font-size: 0.75rem;
           font-weight: 700;
           content: counter(item);
@@ -219,13 +219,13 @@
 
         th {
           white-space: nowrap;
-          color: $colorWhite;
+          color: $colorBlack;
           font-weight: 500;
-          border-bottom: 1px solid rgba($colorWhite, 0.2);
+          border-bottom: 1px solid rgba($colorBlack, 0.2);
         }
 
         td {
-          border-bottom: 1px solid rgba($colorWhite, 0.1);
+          border-bottom: 1px solid rgba($colorBlack, 0.1);
         }
 
         tr:last-child td {
@@ -238,7 +238,7 @@
           }
 
           &:hover {
-            background: rgba($colorWhite, 0.02);
+            background: rgba($colorBlack, 0.02);
           }
         }
       }
@@ -246,31 +246,23 @@
 
     > .remark-container {
       padding: 1.25rem;
-      border: 1px solid rgba($colorWhite, 0.1);
       border-radius: 0.5rem;
+      color: rgba($colorBlack, 0.7);
 
       &.warning {
-        border-color: rgba($colorYellow, 0.1);
-        background-color: rgba($colorYellow, 0.1);
-        color: $colorYellow;
+        background-color: rgba($colorYellow, 0.3);
       }
 
       &.info {
-        border-color: rgba($colorBlue, 0.1);
-        background-color: rgba($colorBlue, 0.1);
-        color: $colorBlue;
+        background-color: rgba($colorBlue, 0.3);
       }
 
       &.error {
-        border-color: rgba($colorRed, 0.1);
-        background-color: rgba($colorRed, 0.1);
-        color: $colorRed;
+        background-color: rgba($colorRed, 0.3);
       }
 
       &.pro {
-        border-color: rgba($colorOrange, 0.1);
-        background-color: rgba($colorOrange, 0.1);
-        color: $colorOrange;
+        background-color: rgba($colorOrange, 0.3);
       }
 
       .remark-container-title {
@@ -280,7 +272,7 @@
 
     > blockquote {
       border-left: 1px solid rgba($colorGrey, 0.5);
-      padding-left: 2*$spacing;
+      padding-left: 2 * $spacing;
     }
 
   }
diff --git a/docs/src/variables.scss b/docs/src/variables.scss
index e2ec6e9b..1e908a11 100644
--- a/docs/src/variables.scss
+++ b/docs/src/variables.scss
@@ -1,6 +1,6 @@
 $colorWhite: #FFF;
 $colorBlack: #0D0D0D;
-$colorText: rgba($colorWhite, 0.75);
+$colorText: rgba($colorBlack, 0.8);
 $colorGrey: #616161;
 $colorPurple: #A975FF;
 $colorRed: #FB5151;