fix(LEMS-2083): fix color contrast issues

[anakaren-rojas]

Summary:

• Removes hover color from math input tabs
• Adds white border to open math keyboard button to increase contrast between icon and active state border

Issue: LEMS-2083

Test plan:

1. Navigate to Math Input in storybook
2. Open the expression widget
3. Hover over tabs
4. Close expression widget

Expected behavior

(Step 3)

• On Hover, tabs should not have a background color

(Step 4)

• Focus state (active) for math keyboard button should have extra white space between the border of the input and the icon

Screenshots

Before

Screen.Recording.2024-08-08.at.3.40.26.PM.mov

After

Screen.Recording.2024-08-08.at.3.36.51.PM.mov

[github-actions]

Size Change: +2.75 kB (+0.32%)

Total Size: 856 kB

Filename	Size	Change
packages/math-input/dist/es/index.js	80.2 kB	-48 B (-0.06%)
packages/perseus-editor/dist/es/index.js	275 kB	+1.4 kB (+0.51%)
packages/perseus/dist/es/index.js	414 kB	+1.4 kB (+0.34%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.29 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.76%. Comparing base (2ebbc19) to head (8f24178).
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1501      +/-   ##
==========================================
+ Coverage   70.03%   70.76%   +0.73%     
==========================================
  Files         511      516       +5     
  Lines      105590   106101     +511     
  Branches     5405    10878    +5473     
==========================================
+ Hits        73949    75084    +1135     
+ Misses      31524    31017     -507     
+ Partials      117        0     -117     

Files	Coverage Δ
packages/math-input/src/components/tabbar/item.tsx	100.00% <ø> (+0.58%)	⬆️
packages/perseus/src/components/math-input.tsx	81.12% <100.00%> (+1.89%)	⬆️

... and 150 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2ebbc19...8f24178. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/smooth-hornets-march.md, packages/perseus/src/components/math-input.tsx, packages/math-input/src/components/tabbar/item.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (8f24178) and published it to npm. You
can install it using the tag PR1501.

Example:

yarn add @khanacademy/perseus@PR1501

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1501

[handeyeco]

Just some small tweak suggestions. Thanks for addressing this.