From 48d3c7e92875bfed5cc4efdda5dae487d244def1 Mon Sep 17 00:00:00 2001
From: Tim McCabe <timmccabe@khanacademy.org>
Date: Tue, 26 Sep 2023 13:37:24 -0400
Subject: [PATCH] Fix how `mix` from `wonder-blocks-color` formats single-digit
 color components (#2065)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Previously, if the red, green, or blue component was less than 16, its hex digit would be repeated (e.g. `f` would become `ff`). With this change, we preserve the real value of the number by prepending a `0` instead (e.g. `f` becomes `0f`).

## Test plan:
`yarn run jest packages/wonder-blocks-color/src/util/__tests__/utils.test.ts`

Author: timmcca-be

Reviewers: somewhatabstract

Required Reviewers:

Approved By: somewhatabstract

Checks: ✅ Chromatic - Get results on non-draft regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on non-draft regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2065
---
 .changeset/afraid-rings-knock.md                             | 5 +++++
 .../wonder-blocks-color/src/util/__tests__/utils.test.ts     | 1 +
 packages/wonder-blocks-color/src/util/utils.ts               | 5 ++---
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/afraid-rings-knock.md

diff --git a/.changeset/afraid-rings-knock.md b/.changeset/afraid-rings-knock.md
new file mode 100644
index 000000000..71e8701e1
--- /dev/null
+++ b/.changeset/afraid-rings-knock.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-color": major
+---
+
+Fix how mix formats single-digit color components
diff --git a/packages/wonder-blocks-color/src/util/__tests__/utils.test.ts b/packages/wonder-blocks-color/src/util/__tests__/utils.test.ts
index f6576f8f6..fd9feb66a 100644
--- a/packages/wonder-blocks-color/src/util/__tests__/utils.test.ts
+++ b/packages/wonder-blocks-color/src/util/__tests__/utils.test.ts
@@ -76,6 +76,7 @@ describe("mix", () => {
             ["rgba(0,0,0,0.25)", "#fFfFfF", "#bfbfbf"],
             ["rgba(0,0,0,0.25)", "rgb(255,255,0)", "#bfbf00"],
             ["rgba(100,200,100,0.25)", "rgb(255,255,0)", "#d8f119"],
+            ["rgba(33,36,44,0.32)", "#00a60e", "#0b7c18"],
         ];
 
         for (const [color, background, expectation] of testpoints) {
diff --git a/packages/wonder-blocks-color/src/util/utils.ts b/packages/wonder-blocks-color/src/util/utils.ts
index 8bfbe0fb2..8ddca8497 100644
--- a/packages/wonder-blocks-color/src/util/utils.ts
+++ b/packages/wonder-blocks-color/src/util/utils.ts
@@ -61,10 +61,9 @@ const format = (color: Color): string => {
     const b = Math.round(color.b);
 
     if (color.a === 1) {
-        // @ts-expect-error [FEI-5019] - TS7006 - Parameter 'c' implicitly has an 'any' type.
-        const _s = (c) => {
+        const _s = (c: number) => {
             const asString = c.toString(16);
-            return asString.length === 1 ? asString + asString : asString;
+            return asString.length === 1 ? `0${asString}` : asString;
         };
         return `#${_s(r)}${_s(g)}${_s(b)}`;
     } else {