From 29563723cf229a9169d0c78a0174a8dbc8029861 Mon Sep 17 00:00:00 2001 From: Ben Christel Date: Thu, 4 Jan 2024 09:33:46 -0800 Subject: [PATCH] Change table zebra-stripe color to Wonder Blocks offWhite (#908) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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`. Screen Shot 2024-01-03 at 3 44 35 PM 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: https://github.com/Khan/perseus/pull/908 --- .changeset/dry-mugs-camp.md | 10 ++++++++++ packages/perseus/src/styles/perseus-renderer.less | 2 +- packages/perseus/src/styles/variables.less | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .changeset/dry-mugs-camp.md diff --git a/.changeset/dry-mugs-camp.md b/.changeset/dry-mugs-camp.md new file mode 100644 index 0000000000..d1aaffa4a1 --- /dev/null +++ b/.changeset/dry-mugs-camp.md @@ -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. diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less index c6fbb4b0d6..cf542324cf 100644 --- a/packages/perseus/src/styles/perseus-renderer.less +++ b/packages/perseus/src/styles/perseus-renderer.less @@ -314,7 +314,7 @@ tr:nth-child(odd) { // Doesn't work in IE8 :( td { - background-color: #ededed; + background-color: @offWhite; } } } diff --git a/packages/perseus/src/styles/variables.less b/packages/perseus/src/styles/variables.less index bbfd5c1a4d..e782327206 100644 --- a/packages/perseus/src/styles/variables.less +++ b/packages/perseus/src/styles/variables.less @@ -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;