feat(input-text): add caret color theme property

discue · Apr 15, 2023 · 3ccaf39 · 3ccaf39
1 parent 97f892c
commit 3ccaf39
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/components/form-input.vue b/src/components/form-input.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import { FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT, FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT, FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT, FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT } from '../theme-keys.js';
+import { FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT, FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT, FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT, FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT, FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT } from '../theme-keys.js';
 import { getThemeProperty } from '../theme.js';
 import FormElementContainerWithLabel from './form-element-container-with-label.vue';
 
@@ -108,6 +108,7 @@ const invalidCharactersRegex = computed(() => {
 const inputClazz = computed(() => {
     const clazz = [
         'w-full mt-4 outline-none px-3 leading-8',
+        getThemeProperty(FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT).value,

diff --git a/src/theme-keys.js b/src/theme-keys.js
@@ -26,6 +26,7 @@ export const TEXT_COLOR_INHERIT = 'text.color.inherit'
 export const TEXT_WEIGHT_DEFAULT = 'text.weight.default'
 export const TEXT_WEIGHT_HIGHLIGHT = 'text.weight.highlight'
 export const FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT = 'formElementInput.textSize.default'
+export const FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT = 'formElementInput.caretColor.default'
 export const FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT = 'formElementInput.textColor.default'
 export const FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT = 'formElementInput.backgroundColor.default'
 export const FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT = 'formElementInput.placeholderColor.default'

diff --git a/src/theme.js b/src/theme.js
@@ -76,6 +76,9 @@ const theme = {
         textSize: {
             default: ref('text-lg')
         },
+        caretColor: {
+            default: ref('caret-gray-900')
+        },
         textColor: {
             default: ref('text-gray-900')
         },