From e22a931d987291258b66f2c80db3536970a4555d Mon Sep 17 00:00:00 2001
From: Mark Fitzgerald <13896410+mark-fitzgerald@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:48:37 -0800
Subject: [PATCH] [Numeric Input] - BUGFIX - Adjust color contrast for tooltip
 text (#1966)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
The text in the numeric input tooltip was slightly out of spec for accessibility. This change ensures that the text has a minimum 4.5:1 contrast ratio.

## Test plan:
1. Launch Storybook
2. Navigate to Perseus Editor => Editor => [Demo](http://localhost:6006/?path=/story/perseuseditor-editorpage--demo)
3. Add a Numeric Input widget
4. Configure the widget to have any number of format options
5. Place focus in the input field in the preview for the widget
6. Check the color value in the browser inspector for the text in the tooltip (it should be greater than 4.5:1)

## Affected UI:
### Before
![Color Contrast - Before](https://github.com/user-attachments/assets/2079d040-f240-45d1-91b7-a57fb062df5d)

### After
![Color Contrast - After](https://github.com/user-attachments/assets/3d064dd2-061e-4d8e-957f-3d362be01d7f)

Author: mark-fitzgerald

Reviewers: jeremywiebe, mark-fitzgerald, nishasy

Required Reviewers:

Approved By: jeremywiebe, nishasy

Checks: ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (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), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (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), ✅ gerald, ❌ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1966
---
 .changeset/poor-numbers-reflect.md                | 5 +++++
 packages/perseus/src/styles/perseus-renderer.less | 2 +-
 packages/perseus/src/styles/variables.less        | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-numbers-reflect.md

diff --git a/.changeset/poor-numbers-reflect.md b/.changeset/poor-numbers-reflect.md
new file mode 100644
index 0000000000..4830ff7a54
--- /dev/null
+++ b/.changeset/poor-numbers-reflect.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Numeric Input] - BUGFIX - Adjust color contrast of tooltip text
diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less
index 3e02cc2162..e19530ae4e 100644
--- a/packages/perseus/src/styles/perseus-renderer.less
+++ b/packages/perseus/src/styles/perseus-renderer.less
@@ -544,7 +544,7 @@
 
 .perseus-formats-tooltip {
     background: #fff;
-    color: #777;
+    color: @textSecondary;
     padding: 5px 10px;
     width: 240px;
 }
diff --git a/packages/perseus/src/styles/variables.less b/packages/perseus/src/styles/variables.less
index df1ca00076..0467ef6230 100644
--- a/packages/perseus/src/styles/variables.less
+++ b/packages/perseus/src/styles/variables.less
@@ -21,6 +21,8 @@
 @gray25: #3b3e40;
 @gray17: #21242c;
 
+@textSecondary: #717378;
+
 // Media query breakpoints
 // --------------------------------------------------