Increase contrast on sidebar

* Regular font contrast went from 11.98 to 13.23
* Language (main) font contrast went from 5.13 to 7.97

We introduced a new color between --gray100 and --gray200.
--gray100 is our base white and having the menu using it
was too jarring.

Author: josevalim

assets/css/custom-props/common.css

@@ -13,11 +13,12 @@
   --baseLineHeight: 1.5em;
 
   /* Colours */
-  --gray50-lightened-2:      hsl(207,  43%,  98%      );
+  --gray25:                  hsl(207,  43%,  98%      );
   --gray50:                  hsl(207,  43%,  96%      );
   --gray100:                 hsl(212,  33%,  91%      );
-  --gray200:                 hsl(210,  26%,  84%      );
-  --gray300:                 hsl(210,  21%,  64%      );
+  --gray200:                 hsl(210,  29%,  88%      );
+  --gray300:                 hsl(210,  26%,  84%      );
+  --gray400:                 hsl(210,  21%,  64%      );
   --gray500:                 hsl(210,  21%,  34%      );
   --gray600:                 hsl(210,  27%,  26%      );
   --gray700:                 hsl(212,  35%,  17%      );

assets/css/custom-props/theme-dark.css

@@ -54,7 +54,7 @@ body.dark {
   --settingsInputBorder:         var(--gray700);
   --settingsSectionBorder:       var(--gray700);
 
-  --quickSwitchInput:            var(--gray200);
+  --quickSwitchInput:            var(--gray300);
   --quickSwitchContour:          var(--gray500);
 
   --success:                     var(--green-lightened-10);

assets/css/custom-props/theme-light.css

@@ -4,7 +4,7 @@
   --textBody:                    var(--gray700);
   --textHeaders:                 var(--gray800);
   --textDetailBackground:        var(--coldGrayFaint);
-  --textFooter:                  var(--coldGray);
+  --textFooter:                  var(--gray600);
 
   --links:                       var(--black);
   --linksVisited:                var(--black);
@@ -37,11 +37,11 @@
   --fnDeprecated:                var(--yellowLight);
   --blink:                       var(--yellowLight);
 
-  --codeBackground:              var(--gray50-lightened-2);
+  --codeBackground:              var(--gray25);
   --codeBorder:                  var(--gray100);
   --inlineCodeBackground:        var(--codeBackground);
   --inlineCodeBorder:            var(--codeBorder);
-  --codeScrollThumb:             var(--gray300);
+  --codeScrollThumb:             var(--gray400);
   --codeScrollBackground:        var(--codeBorder);
 
   --bottomActionsBtnBorder:      var(--black-opacity-10);
@@ -51,14 +51,14 @@
 
   --settingsInput:               var(--gray500);
   --settingsInputBackground:     var(--white);
-  --settingsInputBorder:         var(--gray200);
-  --settingsSectionBorder:       var(--gray200);
+  --settingsInputBorder:         var(--gray300);
+  --settingsSectionBorder:       var(--gray300);
 
   --quickSwitchInput:            var(--gray500);
   --quickSwitchContour:          var(--coldGray);
 
   --success:                     var(--green);
 
-  --sidebarButton:               var(--gray100);
+  --sidebarButton:               var(--gray50);
   --sidebarButtonBackground:     linear-gradient(180deg, var(--white) 20%, var(--white-opacity-50) 70%, var(--white-opacity-0) 100%);
 }

assets/css/print-cheatsheet.css

@@ -3,7 +3,7 @@
   /* Remove background colors and set border colors */
   .page-cheatmd .content-inner * {
     background-color: transparent !important;
-    border-color: var(--gray300) !important;
+    border-color: var(--gray400) !important;
   }
 
   /* Basic layout and columns */
@@ -58,7 +58,7 @@
 
   .page-cheatmd .content-inner h3::after {
     height: 2px;
-    background-color: var(--gray300);
+    background-color: var(--gray400);
   }
 
   .page-cheatmd .content-inner section.h3 {

assets/css/print.css

@@ -45,25 +45,25 @@
   }
 
   .content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) {
-    border: 2px solid var(--gray300);
+    border: 2px solid var(--gray400);
   }
 
   .content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) {
     color: var(--textHeaders);
-    border-bottom: 2px solid var(--gray300);
+    border-bottom: 2px solid var(--gray400);
   }
 
   .content-inner pre code.makeup {
-    border-color: var(--gray300);
+    border-color: var(--gray400);
     white-space: break-spaces;
     break-inside: avoid;
   }
 
   .content-inner blockquote code.inline {
-    border-color: var(--gray300);
+    border-color: var(--gray400);
   }
 
   .content-inner code.inline {
-    border-color: var(--gray300);
+    border-color: var(--gray400);
   }
 }

assets/css/settings.css

@@ -22,7 +22,7 @@
   border-color: var(--main);
 }
 #settings-modal-content .input::placeholder {
-  color: var(--gray300);
+  color: var(--gray400);
 }
 
 #settings-modal-content .switch-button-container {

assets/css/sidebar.css

@@ -285,7 +285,7 @@
   font-weight: bold;
   font-size: .9em;
   line-height: 1.8em;
-  color: var(--gray300);
+  color: var(--gray400);
   padding-left: 15px;
 }
 
@@ -295,7 +295,7 @@
   font-size: .8em;
   margin: 2em 0 0;
   line-height: 1.8em;
-  color: var(--gray300);
+  color: var(--gray400);
   padding-left: 15px;
 }
 
@@ -318,23 +318,23 @@
 }
 
 .sidebar #full-list li .current-section > a {
-  color: var(--main);
+  color: var(--main-lightened-10);
 }
 
 .sidebar #full-list > li > a:hover {
-  border-left: 3px solid var(--main-lightened-10);
+  border-left: 3px solid var(--main);
   padding-left: 12px;
 }
 
 .sidebar #full-list > li.current-page > a {
-  color: var(--main);
+  color: var(--main-lightened-10);
   border-left: 3px solid var(--main);
   padding-left: 12px;
 }
 
 .sidebar #full-list > li.current-page > a:after,
 .sidebar #full-list > li.current-page {
-  color: var(--main);
+  color: var(--main-lightened-10);
 }
 
 .sidebar #full-list > li:last-child {
@@ -361,19 +361,19 @@
 }
 
 .sidebar #full-list ul li.current-hash {
-  color: var(--main);
+  color: var(--main-lightened-10);
 }
 
 .sidebar #full-list ul li.current-hash > a {
-  color: var(--main);
+  color: var(--main-lightened-10);
 }
 
 .sidebar #full-list ul li.current-hash > a:before,
 .sidebar #full-list > li > ul > li > a:hover:before {
   content: "\2022";
   position: absolute;
   margin-left: -15px;
-  color: var(--main);
+  color: var(--main-lightened-10);
 }
 
 .sidebar #full-list ul li a {
@@ -410,12 +410,12 @@
 }
 
 .sidebar #full-list ul li ul li.current-hash > a {
-  color: var(--main);
+  color: var(--main-lightened-10);
   border-color: var(--main);
 }
 
 .sidebar #full-list ul li ul li.current-hash > a {
-  color: var(--main);
+  color: var(--main-lightened-10);
   margin-left: 0;
 }
 
@@ -434,11 +434,10 @@
 }
 
 .sidebar-button {
-  --sidebar-button-x-padding: 11px;
   cursor: pointer;
   background-color: transparent;
   border: none;
-  padding: 15px var(--sidebar-button-x-padding);
+  padding: 15px 11px;
   font-size: 16px;
 }