Skip to content

Commit

Permalink
Change table zebra-stripe color to Wonder Blocks offWhite (#908)
Browse files Browse the repository at this point in the history
## Summary:
This ensures that color-coded math expressions have accessible contrast
with the darker table rows.

Issue: https://khanacademy.atlassian.net/browse/LC-1577

Test plan:

Run storybook: `yarn storybook`.

Visit
`http://localhost:6006/?path=/story/perseus-renderers-item-renderer--label-image-item`

You should see a table of dog breeds. The background color of the
odd-numbered rows should be `#f7f8fa`.

<img width="230" alt="Screen Shot 2024-01-03 at 3 44 35 PM" src="https://github.com/Khan/perseus/assets/693920/834c0e30-dadd-4787-9b36-35e692082c29">

Author: benchristel

Reviewers: handeyeco, benchristel

Required Reviewers:

Approved By: handeyeco

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ gerald, ✅ Jest Coverage (ubuntu-latest, 20.x)

Pull Request URL: #908
  • Loading branch information
benchristel authored Jan 4, 2024
1 parent d633281 commit 2956372
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 1 deletion.
10 changes: 10 additions & 0 deletions .changeset/dry-mugs-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@khanacademy/perseus": patch
---

Lighten the background color for odd-numbered rows of Markdown tables on
desktop-sized screens. Previously, the color was `#ededed`; it is now
`#f7f8fa` (Wonder Blocks offWhite).

This change ensures that color-coded math expressions will have accessible
contrast with the background.
2 changes: 1 addition & 1 deletion packages/perseus/src/styles/perseus-renderer.less
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@
tr:nth-child(odd) {
// Doesn't work in IE8 :(
td {
background-color: #ededed;
background-color: @offWhite;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/perseus/src/styles/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// TODO(charlie): DRY this up. How can we keep our global palette in sync across
// repos?
@white: #ffffff;
@offWhite: #f7f8fa;
@gray98: #fafafa;
@gray97: #f6f7f7;
@gray95: #f0f1f2;
Expand Down

0 comments on commit 2956372

Please sign in to comment.