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(
-
-
+
+
+
+
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())
/>
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
)
})