From 09df23dff82eb4a9f427391f68da51c2ec9fdfcc Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:02:18 -0500
Subject: [PATCH] Use theme properties for color picker border (#449)

---
 src/components/color-picker/color-picker.css | 4 ++--
 src/styles/native/color-picker.css           | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css
index bb341f9c4..d1ce7a419 100644
--- a/src/components/color-picker/color-picker.css
+++ b/src/components/color-picker/color-picker.css
@@ -317,8 +317,8 @@
   border-radius: inherit;
   background-color: currentColor;
   box-shadow:
-    inset 0 0 0 0.0625rem var(--wa-form-control-border-color),
-    inset 0 0 0 0.25rem var(--wa-color-surface-default);
+    inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
+    inset 0 0 0 calc(var(--border-width) * 2) var(--wa-color-surface-default);
 }
 
 .trigger--empty:before {
diff --git a/src/styles/native/color-picker.css b/src/styles/native/color-picker.css
index f13752007..73f4af527 100644
--- a/src/styles/native/color-picker.css
+++ b/src/styles/native/color-picker.css
@@ -2,12 +2,11 @@ input[type='color'] {
   display: block;
   border-radius: calc(infinity * 1px);
   background: transparent;
-  padding: 3px;
+  padding: var(--wa-form-control-border-width);
   width: calc(var(--wa-form-control-height) - 2px);
   height: calc(var(--wa-form-control-height) - 2px);
-  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-form-control-border-color);
+  border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
   cursor: pointer;
-  margin-block-start: 3px;
   forced-color-adjust: none;
 
   &::-webkit-color-swatch-wrapper {