Improve dark mode contrast (#1010)

* Dark mode contrast fix

* Remove lightened text for strong in dark mode

* Remove duplicate gray for dark mode tuning

* Update modal css to match

Author: sfc-gh-dmatthews

components/blocks/autofunction.module.css

@@ -35,7 +35,7 @@
 }
 
 :global(.dark) .Select {
-  @apply bg-gray-100 text-white;
+  @apply bg-gray-100 text-gray-40;
 }
 
 :global(.old-version) .Select {

components/blocks/callout.module.css

@@ -19,5 +19,5 @@
 }
 
 :global(.dark) .Container p {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }

components/blocks/cloud.module.css

@@ -15,5 +15,5 @@
 }
 
 :global(.dark) .Caption {
-  @apply text-white;
+  @apply text-gray-40;
 }

components/blocks/codeTile.module.css

@@ -22,7 +22,7 @@
 
 :global(.dark) .Container section pre {
   @apply bg-gray-100;
-  @apply text-white;
+  @apply text-gray-40;
 }
 
 .Container h1,

components/blocks/dataSourcesCard.module.css

@@ -33,11 +33,11 @@
 :global(.dark) .Container h6,
 :global(.dark) .Container p,
 :global(.dark) .Container a {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 :global(.dark) .Container section div pre {
-  @apply bg-gray-90 text-white;
+  @apply bg-gray-90 text-gray-40;
 }
 
 :global(.dark) .Container img {

components/blocks/iconHeader.module.css

@@ -77,5 +77,5 @@
 }
 
 :global(.dark) .IndigoText {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }

components/blocks/image.module.css

@@ -19,7 +19,7 @@
 }
 
 :global(.dark) .Caption {
-  @apply text-white;
+  @apply text-gray-40;
 }
 
 .LightBox {
@@ -44,5 +44,5 @@
 }
 
 :global(.dark) .CloseButton {
-  @apply bg-gray-90 text-white;
+  @apply bg-gray-90 text-gray-40;
 }

components/blocks/inlineCallout.module.css

@@ -17,7 +17,7 @@
 }
 
 :global(.dark) .Text {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 :global(.dark) .Container {

components/blocks/newsEntry.module.css

@@ -28,7 +28,7 @@
 
 :global(.dark) .Title,
 :global(.dark) .Text {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .Text {

components/blocks/refCard.module.css

@@ -52,7 +52,7 @@
 }
 
 :global(.dark) .Container i {
-  @apply text-white;
+  @apply text-gray-40;
 }
 
 :global(.dark) .Container h1,
@@ -63,11 +63,11 @@
 :global(.dark) .Container h6,
 :global(.dark) .Container p,
 :global(.dark) .Container a {
-  @apply text-white;
+  @apply text-gray-40;
 }
 
 :global(.dark) .Container section div {
-  @apply bg-gray-90 text-white;
+  @apply bg-gray-90 text-gray-40;
 }
 
 :global(.dark) .Container img {

components/blocks/table.module.css

@@ -19,11 +19,11 @@
 }
 
 :global(.dark) .HeadingRow {
-  @apply bg-darkBlue-100/60 text-white;
+  @apply bg-darkBlue-100/60 text-gray-40;
 }
 
 :global(.dark) .Row td {
-  @apply text-white;
+  @apply text-gray-40;
 }
 
 .Cell {

components/blocks/tile.module.css

@@ -92,5 +92,5 @@
 :global(.dark) .TransparentBackground i,
 :global(.dark) .TransparentBackground h4,
 :global(.dark) .TransparentBackground p {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }

components/blocks/youtube.module.css

@@ -15,5 +15,5 @@
 }
 
 :global(.dark) .Caption {
-  @apply text-white;
+  @apply text-gray-40;
 }

components/navigation/arrowLink.js

@@ -51,7 +51,7 @@ const ArrowLink = ({ children, link, type, content, target }) => {
             width="14"
             height="14"
             viewBox="0 0 14 14"
-            fill="text-gray-90 dark:text-white"
+            fill="text-gray-90 dark:text-gray-40"
             xmlns="http://www.w3.org/2000/svg"
             className={`
               ${styles.Icon}

components/navigation/arrowLink.module.css

@@ -11,7 +11,7 @@
 }
 
 :global(.dark) .Link {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .NextLink {

components/navigation/footer.module.css

@@ -23,7 +23,7 @@
 }
 
 :global(.dark) .Link {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .SocialNetworks {

components/navigation/header.module.css

@@ -37,7 +37,7 @@
 }
 
 :global(.dark) .LogoText {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .NavigationContainer {

components/navigation/mobileNav.module.css

@@ -12,5 +12,5 @@
 }
 
 :global(.dark) .Icon {
-  @apply text-white;
+  @apply text-gray-40;
 }

components/navigation/navChild.module.css

@@ -1,5 +1,5 @@
 .Container {
-  @apply text-sm tracking-tight dark:text-white mb-4;
+  @apply text-sm tracking-tight dark:text-gray-40 mb-4;
 }
 
 .List {
@@ -29,7 +29,7 @@
 :global(.dark) .ExternalIcon,
 :global(.dark) .ActivePage,
 :global(.dark) .ActivePage ~ .Icon {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .LinkContainer {
@@ -71,7 +71,7 @@
 }
 
 :global(.dark) .PageName:not(.ActivePage) {
-  @apply text-gray-40 !important;
+  @apply text-gray-50 !important;
 }
 
 .ActivePage {

components/navigation/navItem.module.css

@@ -57,7 +57,7 @@
 }
 
 :global(.dark) .CategoryName {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .CondensedCategoryName {

components/utilities/download.module.css

@@ -4,5 +4,5 @@
 }
 
 :global(.dark) .Link {
-  @apply text-white border-b-white !important;
+  @apply text-gray-40 border-b-white !important;
 }

components/utilities/floatingNav.module.css

@@ -32,11 +32,11 @@
 }
 
 .activeLink {
-  @apply text-gray-90 !important;
+  @apply text-gray-100 !important;
 }
 
 :global(.dark) .activeLink {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 /* Paddings for different title hierarchies */

components/utilities/gdpr.module.css

@@ -25,18 +25,18 @@
 
 :global(.dark) .Markdown p,
 :global(.dark) .Markdown p a {
-  @apply text-gray-20;
+  @apply text-gray-40;
 }
 
 :global(.dark) .Link,
 :global(.dark) .Button {
-  @apply text-gray-20;
+  @apply text-gray-40;
 }
 
 :global(.dark) .Button {
   @apply border-gray-80;
 }
 
 :global(.dark) .Markdown h1 {
-  @apply text-white;
+  @apply text-gray-40;
 }

components/utilities/headerLink.module.css

@@ -27,7 +27,7 @@ h1.HeaderContainer {
 :global(.dark) .HeaderContainer,
 :global(.dark) .CopiedMessage,
 :global(.dark) .CopiedIcon {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .CopyLink {

components/utilities/helpful.module.css

@@ -70,12 +70,12 @@
 :global(.dark) .ImproveTitle,
 :global(.dark) .ImproveText,
 :global(.dark) .Label {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 :global(.dark) .Button {
   @apply bg-gray-80;
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 :global(.dark) .Icon {

components/utilities/psa.module.css

@@ -12,7 +12,7 @@
 }
 
 :global(.dark) .Icon {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .Title {
@@ -23,7 +23,7 @@
 :global(.dark) .Title,
 :global(.dark) .Text,
 :global(.dark) .Link {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .Text {

components/utilities/search.module.css

@@ -21,7 +21,7 @@
 }
 
 :global(.dark) .SearchBar {
-  @apply text-white bg-gray-90 !important;
+  @apply text-gray-40 bg-gray-90 !important;
 }
 
 .SearchIcon {
@@ -42,7 +42,7 @@
 :global(.dark) .HotKey,
 :global(.dark) .SearchText,
 :global(.dark) .SearchIcon {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 /* Hits */
@@ -94,5 +94,5 @@
 }
 
 :global(.dark) .HitTitle {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }

components/utilities/searchModal.css

@@ -7,7 +7,7 @@
 }
 
 .ais-InstantSearch .ais-SearchBox-form input {
-  @apply h-16 w-full bg-gray-10 dark:bg-gray-90 border-b border-b-gray-40 text-gray-90 rounded-none pl-20 pr-4 text-base focus:outline-none focus:border-b-2 focus:border-b-yellow-90 dark:border-b-gray-80 dark:text-white;
+  @apply h-16 w-full bg-gray-10 dark:bg-gray-90 border-b border-b-gray-40 text-gray-90 rounded-none pl-20 pr-4 text-base focus:outline-none focus:border-b-2 focus:border-b-yellow-90 dark:border-b-gray-80 dark:text-gray-40;
 }
 
 .ais-InstantSearch .ais-SearchBox-form #search-clear,

components/utilities/socialCallout.module.css

@@ -6,7 +6,7 @@
 :global(.dark) .Title,
 :global(.dark) .Subtitle,
 :global(.dark) .Text {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .ListContainer {

components/utilities/themeToggle.module.css

@@ -17,7 +17,7 @@
 }
 
 :global(.dark) .Icon {
-  @apply text-white !important;
+  @apply text-gray-40 !important;
 }
 
 .DarkIcon {

styles/lists.scss

@@ -1,7 +1,7 @@
 /* Styles for nested lists inside markdown */
 ol,
 ul {
-  @apply my-0 mx-6 p-0 mt-4 text-gray-90 dark:text-white;
+  @apply my-0 mx-6 p-0 mt-4 text-gray-90 dark:text-gray-40;
 }
 
 ol li,

styles/tables.scss

@@ -5,7 +5,7 @@
 
 #content-container table:not(.full-width) tr th,
 #content-container table:not(.full-width) tr td {
-  @apply border-t border-t-gray-20 py-3 text-xs leading-loose tracking-normal text-gray-90 dark:text-white;
+  @apply border-t border-t-gray-20 py-3 text-xs leading-loose tracking-normal text-gray-90 dark:text-gray-40;
 }
 
 #content-container table:not(.full-width) tr th a,