Repository navigation
fix: dark mode was too dim to read, and the small print too small - #109
Merged
Merged
Conversation
A customer reported dark-mode contrast that was too low, text that was too small and IBM Plex Mono that was hard to read at small sizes. Tokens: dark --text-2 #a79f9b -> #cfc8c3, dark --text-3 #857d79 -> #a8a09b and dark --grey #8f8884 -> #b0a8a3. The old dark --text-3 was 4.2:1 on --surface-2 and the old light --text-3 3.5:1, both under the 4.5:1 WCAG asks of small text, and --text-3 is what most of the labels and captions are set in. Light --text-3 becomes #6f6a65, the value manager-cloud already uses, and the alert email footer and the test that pins it follow. The ratios are written next to the tokens. Sizes: nothing is below 11.5px any more (9, 9.5, 10 and 10.5px become 11.5px) and 11px becomes 12px. Mono: uppercase column headings and section labels, timestamps, counts and other meta lines move to the sans face, with the tracking eased. Mono stays on code, hashes, IP addresses, versions, domains, rule names and sequence numbers. public/build is rebuilt. CHANGELOG.md and the version examples in the getting-started, upgrade and rollback pages move to 1.8.2.
# Conflicts: # CHANGELOG.md # public/build/assets/app-DM2hiBSX.js # public/build/assets/app-P408RwBJ.css # public/build/manifest.json
The stylesheet and script are rebuilt from a clean clone after composer install and npm ci, the way the Compiled assets check builds them, with the readability changes on top of the updated build tools.
Tailwind scans the committed public/build as well as the sources, so the stylesheet one build produces depends on the one before it. The previous commit was a build of the one before it; this is the build that rebuilds to the same file, which is what the Compiled assets check compares against.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A customer running Manager across a fleet of sites said dark mode has too little contrast, the text is too small, and IBM Plex Mono is hard to read at small sizes. This addresses all three. Patch release 1.8.2.
Contrast. The dark
--text-2,--text-3and--greytokens are brighter, and light--text-3is darker. Ratios are WCAG 2.x against--bg/--surface/--surface-2, and are written in a comment next to the tokens:--text-2#a79f9b(7.30 / 6.86 / 6.50)#cfc8c3(11.48 / 10.78 / 10.22)--text-3#857d79(4.70 / 4.42 / 4.19)#a8a09b(7.38 / 6.93 / 6.57)--grey#8f8884(5.44 / 5.11 / 4.84)#b0a8a3(8.11 / 7.62 / 7.22)--text-3#8a847f(3.39 / 3.69 / 3.52)#6f6a65(4.92 / 5.35 / 5.09)The old dark and light
--text-3both failed 4.5:1 on a card. Light--text-3is the value manager-cloud already uses. The alert email theme (manager.css) and the pinned value inMailBrandingTestmove with it; the test still checks the theme againstapp.css.Size. No text is under 11.5px any more: 9, 9.5, 10 and 10.5px become 11.5px, and 11px becomes 12px. This is a scripted replace over
resources/viewsandresources/js, then read through by hand.Mono. Uppercase column headings and section labels (all 56 of them), timestamps, counts and other meta lines are in the sans face, with the tracking eased. Mono stays on code, hashes, IP addresses, versions, domains, rule names and sequence numbers.
public/buildis rebuilt, andCHANGELOG.mdand the version examples indocs/getting-started.md,upgrade.mdandrollback.mdmove with it. A browser may need a hard refresh.Verification. In a clean clone: the Invariants suite, the full Pest suite (1471 passed), Pint and PHPStan are all green. I also rendered the Sites, site Overview, Security and Activity pages in light and dark and looked at them.