Description

Problem

On one side of the coin, some classic colors are used only for dark theme that was turned off on 2023-06-10 in #6432

On other side of the coin, accessibility guidelines are easier to reinforce via rules with as much PatternFly as possible, and even then, rarely className or color props and usually semantic color with variant prop:

• 1.4.1 Use of color
• 1.4.3 Contrast (Minimum)

Analysis

Find in Files

• useTheme() has 18 results in 18 files.
• isDarkMode has 76 results in 22 files.
• bg-base-0 has 7 results in 6 files before changes, but none after changes.
• bg-primary-100 has 8 results in 7 files before changes, but 6 results in 6 files after changes.
• bg-primary-300 has 3 results in 2 files before changes, but 2 results in 1 file after changes.

Solution

1. Delete isDarkMode conditional rendering.
2. Delete bg-primary-100 because it is stylistic variation on light background.

Residue

1. Minimize unneeded classes for classic text and background color after we fix remaining accessibility issues for 1.4.1 guideline for use of color.

User-facing documentation

• CHANGELOG update is not needed
• documentation PR is not needed

Testing and quality

• the change is production ready: the change is GA or otherwise the functionality is gated by a feature flag
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

1. npm run lint in ui/apps/platform
2. npm run build in ui/apps/platform and then compute branch - master for the following
   • wc build/static/js/*.js
     main.js -22536 = 4615497 - 4638033 some code moved to another bundle
     total -2541 = 11553577 - 11556118
   • ls -al build/static/js/*.js | wc
     files 0 = 179 - 179
3. npm run start in ui/apps/platform

Manual testing

1. Visit /main/compliance

   • With isDarkMode before changes, see presence of text-base-100 that is not used.
     

   • Without isDarkMode after changes, see absence and the usual hover background.
     

2. Visit /main/vulnerability-management/images and then click to open side panel.

   • With isDarkMode before changes, see Related entities area has blue background color.
     

   • Without isDarkMode after changes, see Related entities area has same background color as rest of side panel content.
     

   Remove ThemeProvider that dynamically sets class attribute of body element.

   • Without static class="theme-light" attribute before changes, see absence of match for some style rules.
     

   • With static class="theme-light" attribute after changes, see absence of match for some style rules.
     

3. Visit /main/configmanagement/namespaces click to open side panel and then click to visit single page.

   • With isDarkMode before changes, see presence of line break in class attribute.
     

   • Without isDarkMode after changes, see absence of line break in class attribute, but same style.