From e76c1f635ed6ace2f7f08c344dbbcb146c4f70df Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 20 Mar 2022 17:07:58 +0100
Subject: [PATCH] fix: improve controls border colors

---
 .../histoire-controls/src/components/checkbox/HstCheckbox.vue   | 2 +-
 packages/histoire-controls/src/components/number/HstNumber.vue  | 2 +-
 packages/histoire-controls/src/components/text/HstText.vue      | 2 +-
 .../histoire-controls/src/components/textarea/HstTextarea.vue   | 2 +-
 .../histoire/src/client/app/components/base/BaseCheckbox.vue    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
index 6e994f55..2c1f0f54 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
@@ -51,7 +51,7 @@ watch(path, value => {
         :class="[
           modelValue
             ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg
diff --git a/packages/histoire-controls/src/components/number/HstNumber.vue b/packages/histoire-controls/src/components/number/HstNumber.vue
index e0ee807e..3ded3371 100644
--- a/packages/histoire-controls/src/components/number/HstNumber.vue
+++ b/packages/histoire-controls/src/components/number/HstNumber.vue
@@ -86,7 +86,7 @@ onUnmounted(() => {
       :class="{
         'htw-select-none': isDragging,
       }"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
     >
   </HstWrapper>
 </template>
diff --git a/packages/histoire-controls/src/components/text/HstText.vue b/packages/histoire-controls/src/components/text/HstText.vue
index 2de38bd9..37da1424 100644
--- a/packages/histoire-controls/src/components/text/HstText.vue
+++ b/packages/histoire-controls/src/components/text/HstText.vue
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       v-bind="{ ...$attrs, class: null, style: null }"
       type="text"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
   </HstWrapper>
diff --git a/packages/histoire-controls/src/components/textarea/HstTextarea.vue b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
index f655a8f7..c7da0aa9 100644
--- a/packages/histoire-controls/src/components/textarea/HstTextarea.vue
+++ b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       ref="input"
       v-bind="{ ...$attrs, class: null, style: null }"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
   </HstWrapper>
diff --git a/packages/histoire/src/client/app/components/base/BaseCheckbox.vue b/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
index 3cc82d3d..32788159 100644
--- a/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
+++ b/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
@@ -45,7 +45,7 @@ watch(path, value => {
         :class="[
           modelValue
             ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg