fix: Update styles for dark backgrounds to be readable (#6066)

* Update styles for dark backgrounds to be readable

* Update tests to visit all pages and to visit them all in dark mode.

* Add back the supportFile: false config

* Set parallelism to 2

* exclude partial files from visiting

* fix lodash page

* Ensure the page visited is not the 404 page

* Add test for 404 display

.circleci/config.yml

@@ -67,7 +67,7 @@ jobs:
 
   run-tests-in-parallel:
     executor: cypress/default
-    parallelism: 6
+    parallelism: 2
     steps:
       - attach_workspace:
           at: ~/

cypress.config.ts

@@ -12,36 +12,41 @@ export default defineConfig({
     supportFile: false,
     baseUrl: "http://localhost:3000",
     setupNodeEvents(on, config) {
-      on("task", {
-        "createFileTree"({ path }) {
-          // take the given path and create an array of all file paths
-          // with each files and the directory path of the file as strings
-          // for example: given 'accessibility' return
-          // ['accessibility/get-started/introduction', 'accessibility/core-concepts/how-it-works']
-          path = 'docs/' + path;
-
-          function walk(dir: string): string[] {
-            return readdirSync(dir, { withFileTypes: true }).flatMap((file) => {
-              if (file.name.includes('_category_.json') || file.name.includes('.DS_Store')) {
-                return []
-              }
-
-              if (file.name.includes('.mdx')) {
-                // remove the .mdx file extension
-                file.name = file.name.slice(0, -4)
-              }
-
-              if (file.isDirectory()) {
-                return walk(join(dir, file.name))
-              } else {
-                return [join(dir, file.name)]
-              }
-            })
+      const path = 'docs';
+
+      function walk(dir: string): string[] {
+        return readdirSync(dir, { withFileTypes: true }).flatMap((file) => {
+          // ignore these irrelevant files with no content
+          if (file.name.includes('_category_.json') || file.name.includes('.DS_Store')) {
+            return []
+          }
+
+          if (file.name.includes('lodash')) {
+            // lodash file actually goes to _ URL
+            file.name = file.name.replace('lodash', '_')
+          }
+
+          if (file.name.includes('.mdx')) {
+            // remove the .mdx file extension
+            file.name = file.name.slice(0, -4)
           }
 
-          return walk(path).filter((file) => file !== undefined).map((file) => file.slice(5))
-        }
-      })
+          if (file.isDirectory()) {
+            if(file.name === 'partials') {
+              return []
+            }
+            return walk(join(dir, file.name))
+          } else {
+            return [join(dir, file.name)]
+          }
+        })
       }
+
+      const URLs = walk(path).filter((file) => file !== undefined).map((file) => file.slice(5))
+
+      config.env.URLs = URLs
+
+      return config
     },
-});
+  },
+})

cypress/e2e/all_pages.cy.ts

@@ -0,0 +1,15 @@
+const URLs: Array<string> = Cypress.env('URLs')
+
+// Mostly this is to get a UI Coverage and Accessibility report
+describe('Visit all pages', () => {
+  URLs.forEach((URL) => {
+    it(`Visit ${URL} `, () => {
+      cy.visit(URL)
+      cy.get('h1')
+        .should('be.visible')
+        .and('not.have.text', 'Page Not Found')
+
+      cy.get('[aria-label="Switch to dark mode"]').click()
+    })
+  })
+})

cypress/e2e/basic_tests.cy.ts

@@ -49,9 +49,11 @@ describe('Basic tests', () => {
 
   describe('Dark mode', () => {
     it('switch to dark mode when clicked', () => {
-      cy.get('[data-theme=light]').should('have.css', 'background-color', 'rgb(255, 255, 255)')  // white
+      cy.get('[data-theme=light]')
+        .should('have.css', 'background-color', 'rgb(255, 255, 255)')  // white
       cy.get('[aria-label="Switch to dark mode"]').click()
-      cy.get('[data-theme=dark]').should('have.css', 'background-color', 'rgb(27, 30, 46)') // dark gray
+      cy.get('[data-theme=dark]')
+        .should('have.css', 'background-color', 'rgb(27, 30, 46)') // dark gray
     })
   })
 
@@ -61,4 +63,14 @@ describe('Basic tests', () => {
       cy.get('.DocSearch-Modal').should('be.visible')
     })
   })
-})
+
+  describe('404', () => {
+    it('displays 404 page', () => {
+      cy.visit('/foo/bar/baz')
+      cy.get('h1')
+        .should('be.visible')
+        .and('have.text', 'Page Not Found')
+    })
+  })
+})
+

src/components/badge/style.module.css

@@ -20,10 +20,6 @@ h1 > .badge {
 .success {
   background-color: var(--ifm-color-jade-100);
   color: var(--ifm-color-jade-600);
-
-  [data-theme='dark'] & {
-    background-color: var(--ifm-color-jade-1000);
-  }
 }
 
 .danger {

src/css/custom.scss

@@ -523,7 +523,6 @@ body ul.guidesList li.card {
     display: block;
     height: 100%;
     padding: 20px 30px;
-    // border-bottom: none;
     border-radius: 4px;
     border-width: 1px;
     border-color: transparent;
@@ -539,6 +538,10 @@ body ul.guidesList li.card {
       color: var(--ifm-color-jade-400);
       height: 26px;
       width: 26px;
+
+      html[data-theme='dark'] & {
+        color: var(--ifm-color-jade-300);
+      }
     }
   }
 
@@ -547,10 +550,18 @@ body ul.guidesList li.card {
       font-size: 1.2rem;
       color: var(--ifm-color-indigo-500);
       background-size: 0 2px;
+
+      html[data-theme='dark'] & {
+        color: var(--ifm-color-indigo-50);
+      }
   }
 
   p {
     margin-bottom: 0.5em;
     color: var(--ifm-color-gray-800);
+
+    html[data-theme='dark'] & {
+      color: var(--ifm-color-gray-50);
+    }
   }
 }

src/css/markdown.scss

@@ -66,8 +66,11 @@ div.markdown {
     display: inline-block;
     margin-bottom: 2rem;
 
-    &.text-white:hover {
-      color: white;
+    &.border-indigo-500 {
+      html[data-theme='dark'] & {
+          color: var(--ifm-color-jade-100);
+          border-color:var(--ifm-color-jade-100);
+      }
     }
 
     &.border-indigo-500:hover {
@@ -78,7 +81,16 @@ div.markdown {
       }
     }
 
-
+    &.text-white {
+      html[data-theme='dark'] & {
+        color: white;
+        border-color: white;
+      }
+    }
+
+    &.text-white:hover {
+      color: white;
+    }
 
     svg {
       display: inline;