From b79babf003993f56ba9ac43e514ffb1adbe0a674 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Fri, 13 Jun 2025 09:04:36 -0700
Subject: [PATCH] chore(clerk-js): Add borders to color inputs

---
 .changeset/tangy-garlics-say.md         |  2 ++
 packages/clerk-js/sandbox/template.html | 12 ++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 .changeset/tangy-garlics-say.md

diff --git a/.changeset/tangy-garlics-say.md b/.changeset/tangy-garlics-say.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/tangy-garlics-say.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index b9b0b3b5b98..c89ff47aa73 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -305,6 +305,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorPrimary</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorPrimary"
             value="#2F3037"
@@ -313,6 +314,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorNeutral</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorNeutral"
             value="#000000"
@@ -321,6 +323,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorBackground</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorBackground"
             value="#ffffff"
@@ -329,6 +332,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorTextOnPrimaryBackground</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorTextOnPrimaryBackground"
             value="#ffffff"
@@ -337,6 +341,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorDanger</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorDanger"
             value="#EF4444"
@@ -345,6 +350,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorSuccess</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorSuccess"
             value="#22C543"
@@ -353,6 +359,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorWarning</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorWarning"
             value="#F36B16"
@@ -361,6 +368,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorText</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorText"
             value="#212126"
@@ -369,6 +377,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorTextSecondary</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorTextSecondary"
             value="#747686"
@@ -377,6 +386,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorInputText</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorInputText"
             value="#000000"
@@ -385,6 +395,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorInputBackground</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorInputBackground"
             value="#ffffff"
@@ -393,6 +404,7 @@
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
           <span class="font-mono text-xs">colorShimmer</span>
           <input
+            class="border border-gray-200"
             type="color"
             id="colorShimmer"
             value="#ffffff"