From 5b6b976416f885c08bda2ead5948fcdbe94dc380 Mon Sep 17 00:00:00 2001
From: Matthew <matthewcurtis@khanacademy.org>
Date: Tue, 13 Aug 2024 14:17:26 -0500
Subject: [PATCH] make the trig buttons real text so they can be translated
 (#1497)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
It looks basically the same, but now it can be translated.

Previously "sin", "cos", and "tan" were SVGs.

<img width="443" alt="Screenshot 2024-08-07 at 2 32 50 PM" src="https://github.com/user-attachments/assets/0fac40b5-6ab3-4639-9474-13c91d59ba66">

Issue: LEMS-1621

## Test plan:

Author: handeyeco

Reviewers: benchristel

Required Reviewers:

Approved By: benchristel

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

Pull Request URL: https://github.com/Khan/perseus/pull/1497
---
 .changeset/chilly-eagles-fry.md               |  5 ++
 .../__snapshots__/keypad.test.tsx.snap        | 80 +++++++++----------
 .../__snapshots__/mobile-keypad.test.tsx.snap | 32 ++++----
 .../src/components/keypad/button-assets.tsx   | 49 ++----------
 .../src/components/keypad/keypad-button.tsx   |  1 +
 packages/math-input/src/strings.ts            | 21 +++++
 6 files changed, 88 insertions(+), 100 deletions(-)
 create mode 100644 .changeset/chilly-eagles-fry.md

diff --git a/.changeset/chilly-eagles-fry.md b/.changeset/chilly-eagles-fry.md
new file mode 100644
index 0000000000..533fecffa2
--- /dev/null
+++ b/.changeset/chilly-eagles-fry.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Switch trig keys from SVG to text
diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
index bcb11f03e6..e149a9ebdc 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -221,7 +221,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -253,7 +253,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -285,7 +285,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -317,7 +317,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -349,7 +349,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -381,7 +381,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -413,7 +413,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -445,7 +445,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -477,7 +477,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -509,7 +509,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     data-testid="period-decimal"
@@ -542,7 +542,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -576,7 +576,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -610,7 +610,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -644,7 +644,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -684,7 +684,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -718,7 +718,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -767,7 +767,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -801,7 +801,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -835,7 +835,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_wps3dh"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_wps3dh"
                 >
                   <svg
                     fill="none"
@@ -1245,7 +1245,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1277,7 +1277,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1309,7 +1309,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1341,7 +1341,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1373,7 +1373,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1405,7 +1405,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1437,7 +1437,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1469,7 +1469,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1501,7 +1501,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1533,7 +1533,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1565,7 +1565,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     data-testid="period-decimal"
@@ -1598,7 +1598,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb"
+                  class="default_xu2jcg-o_O-base_muxx52"
                 >
                   <svg
                     fill="none"
@@ -1632,7 +1632,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1666,7 +1666,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1700,7 +1700,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1740,7 +1740,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1774,7 +1774,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1823,7 +1823,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1857,7 +1857,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1891,7 +1891,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_wps3dh"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_wps3dh"
                 >
                   <svg
                     fill="none"
diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
index d80bee5b46..37768ec67e 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -112,7 +112,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -144,7 +144,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -176,7 +176,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -208,7 +208,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -240,7 +240,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -272,7 +272,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -304,7 +304,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -336,7 +336,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -368,7 +368,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -400,7 +400,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       data-testid="period-decimal"
@@ -433,7 +433,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb"
+                    class="default_xu2jcg-o_O-base_muxx52"
                   >
                     <svg
                       fill="none"
@@ -467,7 +467,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                    class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                   >
                     <svg
                       fill="none"
@@ -501,7 +501,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                    class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                   >
                     <svg
                       fill="none"
@@ -533,7 +533,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
+                    class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                   >
                     <svg
                       fill="none"
@@ -567,7 +567,7 @@ exports[`mobile keypad should render keypad when active 1`] = `
                   class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
                 >
                   <div
-                    class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_wps3dh"
+                    class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_wps3dh"
                   >
                     <svg
                       fill="none"
diff --git a/packages/math-input/src/components/keypad/button-assets.tsx b/packages/math-input/src/components/keypad/button-assets.tsx
index e27d39368f..732efcd596 100644
--- a/packages/math-input/src/components/keypad/button-assets.tsx
+++ b/packages/math-input/src/components/keypad/button-assets.tsx
@@ -19,8 +19,8 @@ import type Key from "../../data/keys";
 
 type Props = {id: Key};
 
-export default function ButtonAsset({id}: Props): React.ReactElement {
-    const {locale} = useMathInputI18n();
+export default function ButtonAsset({id}: Props): React.ReactNode {
+    const {locale, strings} = useMathInputI18n();
     switch (id) {
         case "NUM_0":
             return (
@@ -525,50 +525,11 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                 </svg>
             );
         case "TAN":
-            return (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="40"
-                    height="40"
-                    fill="none"
-                    viewBox="0 0 40 40"
-                >
-                    <path
-                        fill="#21242C"
-                        d="M12.157 26.128c-.714 0-1.264-.2-1.648-.6-.378-.405-.568-.962-.568-1.672v-4.584h-.84a.385.385 0 0 1-.272-.104c-.074-.07-.112-.173-.112-.312v-.784l1.32-.216.416-2.24a.439.439 0 0 1 .152-.248.452.452 0 0 1 .288-.088h1.024v2.584h2.192v1.408h-2.192v4.448c0 .256.062.456.184.6a.66.66 0 0 0 .52.216.978.978 0 0 0 .304-.04 1.63 1.63 0 0 0 .216-.096c.064-.032.12-.061.168-.088a.258.258 0 0 1 .144-.048c.059 0 .107.016.144.048.038.027.078.07.12.128l.592.96c-.288.24-.618.422-.992.544-.373.123-.76.184-1.16.184Zm7.553-3.632c-.57.027-1.05.078-1.44.152-.389.07-.7.16-.936.272-.234.112-.402.243-.504.392a.852.852 0 0 0-.152.488c0 .347.102.595.304.744.208.15.478.224.808.224.406 0 .755-.072 1.048-.216.3-.15.59-.373.872-.672v-1.384Zm-4.528-3.56c.944-.864 2.08-1.296 3.408-1.296.48 0 .91.08 1.288.24a2.696 2.696 0 0 1 1.552 1.656c.14.39.208.816.208 1.28V26h-.896c-.186 0-.33-.026-.432-.08-.1-.058-.18-.173-.24-.344l-.176-.592c-.208.187-.41.352-.608.496a3.743 3.743 0 0 1-.616.352 3.14 3.14 0 0 1-.688.216 3.65 3.65 0 0 1-.8.08 3.24 3.24 0 0 1-.96-.136 2.159 2.159 0 0 1-.76-.424 1.886 1.886 0 0 1-.496-.696 2.47 2.47 0 0 1-.176-.968 1.892 1.892 0 0 1 .44-1.208c.16-.186.366-.362.616-.528a4 4 0 0 1 .92-.432 7.836 7.836 0 0 1 1.28-.296c.486-.08 1.04-.128 1.664-.144v-.48c0-.55-.117-.954-.352-1.216-.234-.266-.573-.4-1.016-.4-.32 0-.586.038-.8.112-.208.075-.392.16-.552.256-.16.09-.306.174-.44.248a.842.842 0 0 1-.432.112.585.585 0 0 1-.352-.104.956.956 0 0 1-.232-.256l-.352-.632Zm10.165-.136a5.2 5.2 0 0 1 .52-.456 3.194 3.194 0 0 1 1.248-.592 3.2 3.2 0 0 1 .768-.088c.448 0 .846.078 1.192.232.347.15.635.363.864.64.235.272.411.6.528.984.123.379.184.798.184 1.256V26h-1.976v-5.224c0-.501-.114-.888-.344-1.16-.229-.277-.578-.416-1.048-.416-.34 0-.66.078-.96.232a3.438 3.438 0 0 0-.848.632V26H23.5v-8.208h1.208c.256 0 .424.12.504.36l.136.648Z"
-                    />
-                </svg>
-            );
+            return strings.tan;
         case "COS":
-            return (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="40"
-                    height="40"
-                    fill="none"
-                    viewBox="0 0 40 40"
-                >
-                    <path
-                        fill="#21242C"
-                        d="M14.957 19.528a.918.918 0 0 1-.176.176c-.053.043-.133.064-.24.064-.1 0-.2-.03-.296-.088a5.242 5.242 0 0 0-.343-.208 2.237 2.237 0 0 0-.48-.208 2.066 2.066 0 0 0-.68-.096c-.347 0-.651.064-.913.192-.26.123-.48.301-.655.536-.171.235-.3.52-.384.856-.086.33-.128.707-.128 1.128 0 .437.045.827.135 1.168.096.341.232.63.409.864.176.23.389.405.64.528.25.117.533.176.848.176.314 0 .567-.037.76-.112.197-.08.362-.165.495-.256.134-.096.248-.181.345-.256a.53.53 0 0 1 .335-.12.4.4 0 0 1 .36.184l.568.72a3.68 3.68 0 0 1-.712.648c-.256.17-.522.31-.8.416a4.126 4.126 0 0 1-.848.216 5.897 5.897 0 0 1-.863.064c-.507 0-.984-.093-1.432-.28a3.43 3.43 0 0 1-1.177-.832 4.014 4.014 0 0 1-.8-1.328c-.192-.528-.288-1.128-.288-1.8 0-.603.086-1.16.256-1.672.176-.517.432-.963.768-1.336a3.479 3.479 0 0 1 1.248-.888c.496-.213 1.067-.32 1.712-.32.614 0 1.15.099 1.608.296.465.197.88.48 1.248.848l-.52.72Zm5.331-1.864c.608 0 1.16.099 1.656.296.5.197.928.477 1.28.84.357.363.632.805.824 1.328a5.05 5.05 0 0 1 .288 1.752 5.08 5.08 0 0 1-.288 1.76 3.742 3.742 0 0 1-.824 1.336c-.352.368-.78.65-1.28.848a4.445 4.445 0 0 1-1.656.296 4.53 4.53 0 0 1-1.672-.296 3.616 3.616 0 0 1-1.288-.848 3.897 3.897 0 0 1-.824-1.336 5.077 5.077 0 0 1-.288-1.76c0-.645.096-1.23.288-1.752a3.81 3.81 0 0 1 .824-1.328 3.668 3.668 0 0 1 1.288-.84 4.528 4.528 0 0 1 1.672-.296Zm0 6.936c.682 0 1.186-.23 1.512-.688.33-.459.496-1.13.496-2.016 0-.885-.166-1.56-.496-2.024-.326-.464-.83-.696-1.512-.696-.694 0-1.208.235-1.544.704-.331.464-.496 1.136-.496 2.016 0 .88.165 1.552.496 2.016.336.459.85.688 1.544.688Zm10.563-5.208a.574.574 0 0 1-.168.184.465.465 0 0 1-.224.048.731.731 0 0 1-.312-.08 9.204 9.204 0 0 0-.376-.176 3.15 3.15 0 0 0-.496-.184 2.311 2.311 0 0 0-.648-.08c-.39 0-.696.083-.92.248a.775.775 0 0 0-.328.648.64.64 0 0 0 .168.448c.117.117.27.221.456.312.192.09.408.173.648.248.24.07.483.147.728.232.25.085.496.184.736.296.24.107.453.245.64.416.192.165.344.365.456.6.117.235.176.517.176.848 0 .395-.072.76-.216 1.096-.139.33-.347.619-.624.864-.277.24-.621.43-1.032.568a4.51 4.51 0 0 1-1.408.2c-.283 0-.56-.027-.832-.08a4.527 4.527 0 0 1-1.464-.528 3.417 3.417 0 0 1-.552-.4l.456-.752a.644.644 0 0 1 .208-.208.583.583 0 0 1 .304-.072.62.62 0 0 1 .344.104c.112.07.24.144.384.224.144.08.312.155.504.224.197.07.445.104.744.104.235 0 .435-.027.6-.08.17-.059.31-.133.416-.224a.783.783 0 0 0 .24-.312.935.935 0 0 0 .08-.376.655.655 0 0 0-.176-.472 1.44 1.44 0 0 0-.456-.32 3.935 3.935 0 0 0-.648-.24c-.24-.075-.488-.155-.744-.24a8.006 8.006 0 0 1-.744-.296 2.725 2.725 0 0 1-.648-.44 2.054 2.054 0 0 1-.456-.648c-.112-.256-.168-.565-.168-.928 0-.336.067-.656.2-.96.133-.304.328-.568.584-.792.261-.23.584-.41.968-.544a3.99 3.99 0 0 1 1.344-.208c.565 0 1.08.093 1.544.28a3.5 3.5 0 0 1 1.16.736l-.448.712Z"
-                    />
-                </svg>
-            );
+            return strings.cos;
         case "SIN":
-            return (
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="40"
-                    height="40"
-                    fill="none"
-                    viewBox="0 0 40 40"
-                >
-                    <path
-                        fill="#21242C"
-                        d="M16.422 19.392a.57.57 0 0 1-.168.184.465.465 0 0 1-.224.048.73.73 0 0 1-.312-.08 9.34 9.34 0 0 0-.376-.176 3.15 3.15 0 0 0-.496-.184 2.314 2.314 0 0 0-.648-.08c-.39 0-.696.082-.92.248a.775.775 0 0 0-.328.648.64.64 0 0 0 .168.448c.117.117.269.221.456.312.192.09.408.173.648.248.24.07.482.146.728.232.25.085.496.184.736.296.24.106.453.245.64.416.192.165.344.365.456.6.117.234.176.517.176.848 0 .394-.072.76-.216 1.096-.14.33-.347.618-.624.864-.278.24-.622.43-1.032.568-.406.133-.875.2-1.408.2-.283 0-.56-.027-.832-.08a4.512 4.512 0 0 1-1.464-.528 3.41 3.41 0 0 1-.552-.4l.456-.752a.646.646 0 0 1 .208-.208.583.583 0 0 1 .304-.072.62.62 0 0 1 .344.104c.112.07.24.144.384.224.144.08.312.154.504.224.197.07.445.104.744.104.234 0 .434-.027.6-.08.17-.059.309-.134.416-.224a.782.782 0 0 0 .24-.312.935.935 0 0 0 .08-.376.655.655 0 0 0-.176-.472 1.443 1.443 0 0 0-.456-.32 3.953 3.953 0 0 0-.648-.24 37.95 37.95 0 0 1-.744-.24 7.978 7.978 0 0 1-.744-.296 2.722 2.722 0 0 1-.648-.44 2.054 2.054 0 0 1-.456-.648c-.112-.256-.168-.566-.168-.928 0-.336.066-.656.2-.96.133-.304.328-.568.584-.792.26-.23.584-.41.968-.544a3.985 3.985 0 0 1 1.344-.208c.565 0 1.08.093 1.544.28.464.186.85.432 1.16.736l-.448.712Zm4.071-1.6V26h-1.984v-8.208h1.984Zm.272-2.392c0 .17-.035.33-.104.48-.07.15-.163.28-.28.392a1.326 1.326 0 0 1-.4.272c-.155.064-.32.096-.496.096-.17 0-.334-.032-.488-.096a1.357 1.357 0 0 1-.664-.664 1.284 1.284 0 0 1 0-.976c.07-.155.16-.288.272-.4.112-.112.242-.2.392-.264a1.18 1.18 0 0 1 .488-.104c.176 0 .341.034.496.104.154.064.288.152.4.264.117.112.21.245.28.4.07.154.104.32.104.496Zm3.59 3.4c.166-.166.339-.318.52-.456a3.197 3.197 0 0 1 1.248-.592 3.15 3.15 0 0 1 .768-.088 2.9 2.9 0 0 1 1.192.232c.347.15.635.362.864.64.235.272.411.6.528.984.123.378.184.797.184 1.256V26h-1.976v-5.224c0-.502-.114-.888-.344-1.16-.229-.278-.578-.416-1.048-.416-.341 0-.661.077-.96.232a3.445 3.445 0 0 0-.848.632V26h-1.976v-8.208h1.208c.256 0 .424.12.504.36l.136.648Z"
-                    />
-                </svg>
-            );
+            return strings.sin;
         case "EQUAL":
             return (
                 <svg
diff --git a/packages/math-input/src/components/keypad/keypad-button.tsx b/packages/math-input/src/components/keypad/keypad-button.tsx
index 3a096f55bf..b6bb52af00 100644
--- a/packages/math-input/src/components/keypad/keypad-button.tsx
+++ b/packages/math-input/src/components/keypad/keypad-button.tsx
@@ -95,6 +95,7 @@ const styles = StyleSheet.create({
         minHeight: 42,
         minWidth: 42,
         padding: 1,
+        fontFamily: 'Lato, "Noto Sans", sans-serif',
     },
     hovered: {
         borderColor: color.blue,
diff --git a/packages/math-input/src/strings.ts b/packages/math-input/src/strings.ts
index ce77cf5eb7..e0cb861225 100644
--- a/packages/math-input/src/strings.ts
+++ b/packages/math-input/src/strings.ts
@@ -46,8 +46,11 @@ export type MathInputStrings = {
     logBase10: string;
     logCustomBase: string;
     sine: string;
+    sin: string;
     cosine: string;
+    cos: string;
     tangent: string;
+    tan: string;
     pi: string;
     theta: string;
     upArrow: string;
@@ -207,16 +210,31 @@ export const strings: {
             "A label for a button that will allow the user to input a sine function.",
         message: "Sine",
     },
+    sin: {
+        context:
+            "A label for a button that will allow the user to input a sine function (shorthand version).",
+        message: "sin",
+    },
     cosine: {
         context:
             "A label for a button that will allow the user to input a cosine function.",
         message: "Cosine",
     },
+    cos: {
+        context:
+            "A label for a button that will allow the user to input a cosine function (shorthand version).",
+        message: "cos",
+    },
     tangent: {
         context:
             "A label for a button that will allow the user to input a tangent function.",
         message: "Tangent",
     },
+    tan: {
+        context:
+            "A label for a button that will allow the user to input a tangent function (shorthand version).",
+        message: "tan",
+    },
     pi: {
         context:
             "A label for a button that will allow the user to input the mathematical constant pi (i.e., π)",
@@ -295,8 +313,11 @@ export const mockStrings: MathInputStrings = {
     logBase10: "Logarithm with base 10",
     logCustomBase: "Logarithm with custom base",
     sine: "Sine",
+    sin: "sin",
     cosine: "Cosine",
+    cos: "cos",
     tangent: "Tangent",
+    tan: "tan",
     pi: "Pi",
     theta: "Theta",
     upArrow: "Up arrow",