fix: dark theme style Input, Select, Button (+active style), Alert (#35)

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">

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
     )
   }

src/components/BuiInput/BuiInput.spec.ts

@@ -52,15 +52,15 @@ 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]'
     )
   })
 
   test('success classes is correct', async () => {
     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]'
     )
   })
 

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>

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'
   )
 )
 

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"
     >

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
   )
 })