From 1b484c4fc99d9b25b78ee49e43eec6f21fa0382d Mon Sep 17 00:00:00 2001
From: Victoria Karpova <121668368+victoriakaropva@users.noreply.github.com>
Date: Mon, 11 Dec 2023 18:56:08 +0300
Subject: [PATCH] fix: dark theme style Input, Select, Button (+active style),
 Alert (#35)

---
 src/components/BuiAlert/BuiAlert.vue       |  2 +-
 src/components/BuiButton/BuiButton.vue     | 42 +++++++++++++---------
 src/components/BuiInput/BuiInput.spec.ts   |  4 +--
 src/components/BuiInput/BuiInput.story.vue | 14 ++++----
 src/components/BuiInput/BuiInput.vue       |  6 ++--
 src/components/BuiModal/BuiModal.vue       |  2 +-
 src/components/BuiSelect/BuiSelect.vue     |  4 +--
 7 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/components/BuiAlert/BuiAlert.vue b/src/components/BuiAlert/BuiAlert.vue
index c642f2c..fe46333 100644
--- a/src/components/BuiAlert/BuiAlert.vue
+++ b/src/components/BuiAlert/BuiAlert.vue
@@ -12,7 +12,7 @@ withDefaults(
 
 <template>
   <div
-    class="bg-red-200 text-red-300 py-2 px-5 border-l border-red-300 rounded flex items-center justify-start"
+    class="bg-red-300/[.16] text-red-300 py-2 px-5 border-l border-red-300 rounded flex items-center justify-start"
   >
     <slot name="icon" v-if="icon || $slots.alert">
       <svg class="w-4 h-4 mr-2" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/BuiButton/BuiButton.vue b/src/components/BuiButton/BuiButton.vue
index 95a9552..c49b586 100644
--- a/src/components/BuiButton/BuiButton.vue
+++ b/src/components/BuiButton/BuiButton.vue
@@ -21,36 +21,41 @@ const baseClasses = 'font-medium rounded text-sm focus:outline-none flex'
 // Style Classes
 
 const primaryButtonClasses = {
-  base: 'bg-primary-500 dark:bg-primary-500 text-white',
-  hover: 'hover:bg-primary-550 dark:hover:bg-primary-600',
-  focus: 'dark:focus:ring-primary-400 focus:bg-primary-575',
+  base: 'bg-primary-500 text-white',
+  hover: 'hover:bg-primary-550',
+  focus: 'focus:bg-primary-550',
+  active: 'dark:active:ring-primary-400 active:bg-primary-575',
   disabled:
-    'border-slate-300 hover:border-slate-300 bg-gray-150 dark:bg-primary-600 hover:bg-gray-150 text-gray-400 hover:text-gray-400 cursor-not-allowed'
+    'border-slate-300 hover:border-slate-300 focus:border-slate-300 bg-gray-150 dark:bg-primary-600 hover:bg-gray-150 focus:bg-gray-150 text-gray-400 hover:text-gray-400 focus:text-gray-400 cursor-not-allowed'
 }
 const secondaryButtonClasses = {
   base: 'bg-transparent text-primary-550',
-  hover: 'hover:bg-primary-150 dark:hover:bg-primary-650',
-  focus: 'dark:focus:ring-primary-300 focus:bg-primary-175',
-  disabled: 'text-primary-250 hover:bg-white cursor-not-allowed'
+  hover: 'hover:bg-primary-500/[.08]',
+  focus: 'focus:bg-primary-500/[.08] focus:ring-primary-300',
+  active: ' active:bg-primary-500/[.16]',
+  disabled: 'text-primary-250 hover:bg-transparent focus:bg-transparent cursor-not-allowed'
 }
 const textButtonClasses = {
   base: 'text-primary-500 dark:text-primary-225 bg-transparent',
   hover: 'dark:hover:text-primary-400',
-  focus: '',
+  focus: 'dark:focus:text-primary-400',
+  active: '',
   disabled:
-    'text-primary-250 dark:text-primary-175 dark:hover:text-primary-175 bg-white hover:bg-white dark:bg-transparent cursor-not-allowed'
+    'text-primary-250 dark:text-primary-175 dark:hover:text-primary-175  dark:focus:text-primary-175  bg-white hover:bg-white dark:bg-transparent cursor-not-allowed'
 }
 const outlineButtonClasses = {
   base: 'text-primary-500 bg-transparent border border-primary-500 dark:border:primary-400 dark:text-primary-400',
-  hover: 'hover:bg-primary-150 dark:hover:text-primary-500 dark:hover:bg-primary-650',
-  focus: 'focus:bg-primary-175 dark:focus:bg-primary-625',
+  hover: 'hover:bg-primary-500/[.08] dark:hover:text-primary-500 ',
+  focus: 'focus:bg-primary-500/[.08] dark:focus:text-primary-500 ',
+  active: 'active:bg-primary-500/[.16]',
   disabled:
-    'text-primary-250 border-primary-250 bg-primary-100 dark:bg-transparent hover:bg-primary-100 cursor-not-allowed dark:border-primary-590 dark:text-primary-590 dark:hover:text-primary-590'
+    'text-primary-250 border-primary-250 bg-primary-500/[0.04] dark:bg-transparent hover:bg-primary-500/[0.04] dark:hover:bg-transparent cursor-not-allowed dark:border-primary-590 dark:text-primary-590 dark:hover:text-primary-590'
 }
 const iconButtonClasses = {
-  base: 'bg-primary-150 dark:bg-primary-650',
-  hover: 'hover:bg-primary-150 dark:hover:bg-primary-650',
-  focus: 'dark:focus:ring-primary-300 focus:bg-primary-175',
+  base: 'bg-primary-500/[.08]',
+  hover: 'hover:bg-primary-500/[.08]',
+  focus: 'focus:bg-primary-500/[.08] dark:focus:ring-primary-300',
+  active: ' active:bg-primary-500/[.16]',
   disabled: 'text-primary-250 cursor-not-allowed'
 }
 const colorClasses = computed((): Record<ButtonColor, string> => {
@@ -59,30 +64,35 @@ const colorClasses = computed((): Record<ButtonColor, string> => {
       primaryButtonClasses.base,
       primaryButtonClasses.hover,
       primaryButtonClasses.focus,
+      primaryButtonClasses.active,
       props.disabled && primaryButtonClasses.disabled
     ),
     secondary: twJoin(
       secondaryButtonClasses.base,
       secondaryButtonClasses.hover,
       secondaryButtonClasses.focus,
+      secondaryButtonClasses.active,
       props.disabled && secondaryButtonClasses.disabled
     ),
     text: twJoin(
       textButtonClasses.base,
       textButtonClasses.hover,
       textButtonClasses.focus,
+      textButtonClasses.active,
       props.disabled && textButtonClasses.disabled
     ),
     outline: twJoin(
       outlineButtonClasses.base,
       outlineButtonClasses.hover,
       outlineButtonClasses.focus,
+      outlineButtonClasses.active,
       props.disabled && outlineButtonClasses.disabled
     ),
     icon: twJoin(
       iconButtonClasses.base,
-      iconButtonClasses.focus,
       iconButtonClasses.hover,
+      iconButtonClasses.focus,
+      iconButtonClasses.active,
       props.disabled && iconButtonClasses.disabled
     )
   }
diff --git a/src/components/BuiInput/BuiInput.spec.ts b/src/components/BuiInput/BuiInput.spec.ts
index 65e4206..cf0c0c9 100644
--- a/src/components/BuiInput/BuiInput.spec.ts
+++ b/src/components/BuiInput/BuiInput.spec.ts
@@ -52,7 +52,7 @@ describe('BuiInput', () => {
     createComponent({ propsData: { validationStatus: 'error', hasForcedValidation: true } })
     const input = wrapper.find('input')
     expect(input.classes().join(' ')).toEqual(
-      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-red-300 focus:border-red-300 focus:ring-red-200'
+      'py-2 px-3 border bg-transparent rounded-lg focus:ring-2 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-red-300 dark:border-red-300 dark:focus:border-red-300 focus:border-red-300 focus:ring-red-300/[.16] dark:focus:ring-red-300/[.16]'
     )
   })
 
@@ -60,7 +60,7 @@ describe('BuiInput', () => {
     createComponent({ propsData: { validationStatus: 'success', hasForcedValidation: true } })
     const input = wrapper.find('input')
     expect(input.classes().join(' ')).toEqual(
-      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-green-300 focus:border-green-300 focus:ring-green-200'
+      'py-2 px-3 border bg-transparent rounded-lg focus:ring-2 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-green-300 dark:border-green-300 dark:focus:border-green-300 dark:focus:ring-green-300/[.16] focus:border-green-300 focus:ring-green-300/[.16]'
     )
   })
 
diff --git a/src/components/BuiInput/BuiInput.story.vue b/src/components/BuiInput/BuiInput.story.vue
index 768e2ab..caad871 100644
--- a/src/components/BuiInput/BuiInput.story.vue
+++ b/src/components/BuiInput/BuiInput.story.vue
@@ -105,12 +105,14 @@ const modelForDisabling = ref(false)
       </div>
     </Variant>
     <Variant title="Dynamic disabling">
-      <BuiToggle v-model="modelForDisabling" label="Disabled" />
-      <BuiInput
-        placeholder="Placeholder"
-        label="My label"
-        :disabled="modelForDisabling ? true : undefined"
-      />
+      <div class="p-2 bg-primary-800">
+        <BuiToggle v-model="modelForDisabling" label="Disabled" />
+        <BuiInput
+          placeholder="Placeholder"
+          label="My label"
+          :disabled="modelForDisabling ? true : undefined"
+        />
+      </div>
     </Variant>
   </Story>
 </template>
diff --git a/src/components/BuiInput/BuiInput.vue b/src/components/BuiInput/BuiInput.vue
index c135aeb..81c8c8f 100644
--- a/src/components/BuiInput/BuiInput.vue
+++ b/src/components/BuiInput/BuiInput.vue
@@ -92,12 +92,12 @@ const inputClasses = computed(() =>
   twMerge(
     'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
     props.validationStatus === 'success' &&
-      'border-green-300 focus:border-green-300 focus:ring-green-200',
+      'border-green-300 dark:border-green-300 dark:focus:border-green-300 dark:focus:ring-green-300/[.16] focus:border-green-300 focus:ring-green-300/[.16]',
     props.validationStatus === 'error' &&
       (!!props.hasForcedValidation || isDirty.value) &&
-      'border-red-300 focus:border-red-300 focus:ring-red-200',
+      'border-red-300 dark:border-red-300 dark:focus:border-red-300 focus:border-red-300 focus:ring-red-300/[.16] dark:focus:ring-red-300/[.16]',
     props.disabled &&
-      'bg-gray-150 placeholer:text-gray-300 dark:bg-clay-500 dark:placeholder:text-white/[.16] cursor-not-allowed'
+      'bg-gray-150 placeholer:text-gray-300 dark:bg-white/[.16] dark:placeholder:text-white/[.16] cursor-not-allowed'
   )
 )
 
diff --git a/src/components/BuiModal/BuiModal.vue b/src/components/BuiModal/BuiModal.vue
index 2b29556..fc02901 100644
--- a/src/components/BuiModal/BuiModal.vue
+++ b/src/components/BuiModal/BuiModal.vue
@@ -39,7 +39,7 @@ onBeforeUnmount(() => enableBodyScroll())
     />
     <div
       ref="modalRef"
-      class="shadow-my min-w-30 min-h-30 overflow-y-auto w-max h-max overflow-x-hidden z-50 md:inset-0 justify-center items-center flex p-8 bg-white rounded-lg"
+      class="shadow-my min-w-30 min-h-30 overflow-y-auto w-max h-max overflow-x-hidden z-50 md:inset-0 justify-center items-center flex p-8 bg-white dark:bg-primary-800 rounded-lg"
       tabindex="0"
       @keyup.esc="closeWithEsc"
     >
diff --git a/src/components/BuiSelect/BuiSelect.vue b/src/components/BuiSelect/BuiSelect.vue
index 4119338..7868208 100644
--- a/src/components/BuiSelect/BuiSelect.vue
+++ b/src/components/BuiSelect/BuiSelect.vue
@@ -98,10 +98,10 @@ const selectClasses = computed(() => {
   return twMerge(
     defaultSelectClasses,
     props.validationStatus === 'success' &&
-      'border-green-300 focus:border-green-300 focus:ring-green-200',
+      'border-green-300 focus:border-green-300 focus:ring-green-300/[.16] dark:border-green-300 dark:focus:border-green-300 dark:focus:ring-green-300/[.16]',
     props.validationStatus === 'error' &&
       (!!props.hasForcedValidation || isDirty.value) &&
-      'border-red-300 focus:border-red-300 focus:ring-red-200',
+      'border-red-300  dark:border-red-300 focus:border-red-300 dark:focus:border-red-300 focus:ring-red-300/[.16] dark:focus:ring-red-300/[.16]',
     props.disabled && disabledSelectClasses
   )
 })