feat(input-text): make background color customizable

discue · Apr 15, 2023 · 97f892c · 97f892c
1 parent 9818d3f
commit 97f892c
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_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_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_BACKGROUND_COLOR_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT).value,
         getThemeProperty(FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT).value

diff --git a/src/theme-keys.js b/src/theme-keys.js
@@ -27,6 +27,7 @@ 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_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'
 export const FORM_ELEMENT_SELECT_TEXT_SIZE_DEFAULT = 'formElementSelect.textSize.default'
 export const FORM_ELEMENT_SELECT_TEXT_COLOR_DEFAULT = 'formElementSelect.textColor.default'

diff --git a/src/theme.js b/src/theme.js
@@ -79,6 +79,9 @@ const theme = {
         textColor: {
             default: ref('text-gray-900')
         },
+        backgroundColor: {
+            default: ref('bg-white')
+        },
         placeholderColor: {
             default: ref('placeholder:text-gray-500')
         }