feat: align all input elements font size and weight

discue · Sep 2, 2023 · 0316200 · 0316200
1 parent a93f452
commit 0316200
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/src/components/form-immutable-text.vue b/src/components/form-immutable-text.vue
@@ -3,20 +3,22 @@
         :focus-input-callback="focusInput" :force-show-error-message="true" :id="id" :input-invalid="copyToClipboardFailure"
         :label="label" :show-pattern-hint="false" :show-format-hint="false" :value="modelValue">
 
-        <div class="relative px-3 my-2 flex flex-row items-center">
-            <div class="mr-8">
-                <Text :id="id">{{ text }}</Text>
+        <div class="relative px-3 mt-4 mb-1 flex flex-row items-center">
+            <div class="mr-8" :class="textClazz">
+                <Text :id="id" :inherit-font-size="true">{{ text }}</Text>
             </div>
 
             <button v-if="showClipboardButton"
                 class="absolute bg-transparent right-0 p-2 text-gray-700 cursor-pointer transform transition-transform hover:-translate-y-1 outline-none"
                 @click.prevent="copyKeyToClipboard">
                 <ClipboardIcon class="h-6 w-6 stroke-2" />
             </button>
-            <button click.prevent v-if="copyToClipboardSuccess" class="absolute bg-transparent right-0 p-2 text-green-700 outline-none">
+            <button click.prevent v-if="copyToClipboardSuccess"
+                class="absolute bg-transparent right-0 p-2 text-green-700 outline-none">
                 <ClipboardDocumentCheckIcon class="h-6 w-6" />
             </button>
-            <button click.prevent v-if="copyToClipboardFailure" class="absolute bg-transparent right-0 p-2 text-attention outline-none">
+            <button click.prevent v-if="copyToClipboardFailure"
+                class="absolute bg-transparent right-0 p-2 text-attention outline-none">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="2">
                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -30,10 +32,10 @@
 <script setup>
 import { ClipboardDocumentCheckIcon, ClipboardIcon } from '@heroicons/vue/24/outline';
 import { computed, ref } from 'vue';
+import { FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT, FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT, getThemeProperty } from '../theme.js';
 import FormElementContainerWithLabel from './form-element-container-with-label.vue';
 import Text from './text.vue';
 
-
 const props = defineProps({
     enableCopyToClipboard: {
         type: Boolean,
@@ -54,6 +56,10 @@ const copyToClipboardSuccess = ref(false)
 const copyToClipboardFailure = ref(false)
 const copyToClipboardErrorMsg = ref()
 
+const textClazz = computed(() => {
+    return [getThemeProperty(FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT).value, getThemeProperty(FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT).value]
+})
+
 const showClipboardButton = computed(() => {
     return props.text && // do we have a text?
         props.enableCopyToClipboard && // does our parent want us to allow copying?

diff --git a/src/components/form-input-radio.vue b/src/components/form-input-radio.vue
@@ -8,7 +8,7 @@
                     :id="'radio_' + id + '_' + option.value + '_id'" autocomplete="off" type="radio"
                     :checked="option.default === true || modelValue == option.value" :required="required" :name="name"
                     :value="option.value" :disabled="disabled"
-                    class="hidden peer checked:bg-gray-900 rounded text-lg outline-none text-gray-100 placeholder:text-gray-300 py-2 px-3 leading-8"
+                    class="hidden peer checked:bg-gray-900 rounded outline-none text-gray-100 placeholder:text-gray-300 py-2 px-3 leading-8"
                     @input="onInput($event)">
 
                 <label v-if="(disabled && modelValue == option.value) || !disabled" :class="labelClazz"
@@ -27,7 +27,7 @@
                         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M8  01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    <Text class="pb-0.5" :highlight="modelValue == option.value" :inherit-color="true">{{ option.label }}</Text>
+                    <Text class="pb-0.5" :highlight="modelValue == option.value" :inherit-font-size="true" :inherit-color="true">{{ option.label }}</Text>
                 </label>
             </div>
         </div>
@@ -36,7 +36,7 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import { FORM_ELEMENT_RADIO_TEXT_COLOR_DEFAULT, FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED, getThemeProperty } from '../theme.js';
+import { FORM_ELEMENT_RADIO_TEXT_COLOR_DEFAULT, FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED, FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT, getThemeProperty } from '../theme.js';
 import FormElementContainerWithLabel from './form-element-container-with-label.vue';
 import Text from './text.vue';
 
@@ -88,7 +88,7 @@ const error = computed(() => {
 })
 
 const labelClazz = computed(() => {
-    const clazz = ['flex flex-row items-center w-full space-x-2 px-3 py-1 leading-7 text-xl']
+    const clazz = ['flex flex-row items-center w-full space-x-2 px-3 py-1 leading-7', getThemeProperty(FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT).value]
     if (props.disabled) {
         clazz.push(`disabled ${getThemeProperty(FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED).value} cursor-not-allowed`)
     } else {

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_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 { FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT, FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT, FORM_ELEMENT_INPUT_FONT_WEIGHT_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';
 
@@ -112,7 +112,8 @@ const inputClazz = computed(() => {
         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
+        getThemeProperty(FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT).value,
+        getThemeProperty(FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT).value,
     ]
     if (props.disabled) {
         clazz.push('cursor-not-allowed')

diff --git a/src/theme-keys.js b/src/theme-keys.js
@@ -26,14 +26,17 @@ export const TEXT_COLOR_LIGHT = 'text.color.light'
 export const TEXT_COLOR_HIGHLIGHT = 'text.color.highlight'
 export const TEXT_WEIGHT_DEFAULT = 'text.weight.default'
 export const TEXT_WEIGHT_HIGHLIGHT = 'text.weight.highlight'
+export const FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT = 'formElementInput.fontWeight.default'
 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'
-export const FORM_ELEMENT_SELECT_TEXT_SIZE_DEFAULT = 'formElementSelect.textSize.default'
 export const FORM_ELEMENT_SELECT_FONT_WEIGHT_DEFAULT = 'formElementSelect.fontWeight.default'
+export const FORM_ELEMENT_SELECT_TEXT_SIZE_DEFAULT = 'formElementSelect.textSize.default'
 export const FORM_ELEMENT_SELECT_TEXT_COLOR_DEFAULT = 'formElementSelect.textColor.default'
+export const FORM_ELEMENT_RADIO_FONT_WEIGHT_DEFAULT = 'formElementRadio.fontWeight.default'
+export const FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT = 'formElementRadio.textSize.default'
 export const FORM_ELEMENT_RADIO_TEXT_COLOR_DEFAULT = 'formElementRadio.textColor.default'
 export const FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED = 'formElementRadio.textColor.disabled'
 export const BUTTON_BACKGROUND_DEFAULT = 'button.background.default'

diff --git a/src/theme.js b/src/theme.js
@@ -1,5 +1,8 @@
 import { ref } from 'vue'
 
+const FORM_ELEMENT_INPUT_TEXT_SIZE = ref('text-lg')
+const FORM_ELEMENT_INPUT_FONT_WEIGHT = ref('font-medium')
+
 // add only computed properties here to allow for reactivity
 const theme = {
     backToTop: {
@@ -78,8 +81,11 @@ const theme = {
         }
     },
     formElementInput: {
+        fontWeight: {
+            'default': FORM_ELEMENT_INPUT_FONT_WEIGHT
+        },
         textSize: {
-            default: ref('text-lg')
+            default: FORM_ELEMENT_INPUT_TEXT_SIZE
         },
         caretColor: {
             default: ref('caret-gray-900 dark:text-gray-400')
@@ -95,17 +101,23 @@ const theme = {
         }
     },
     formElementSelect: {
-        textSize: {
-            default: ref('text-lg')
-        },
         fontWeight: {
-            'default': ref('font-medium'),
+            'default': FORM_ELEMENT_INPUT_FONT_WEIGHT
+        },
+        textSize: {
+            default: FORM_ELEMENT_INPUT_TEXT_SIZE
         },
         textColor: {
             default: ref('text-gray-900 dark:text-gray-400')
         },
     },
     formElementRadio: {
+        fontWeight: {
+            'default': FORM_ELEMENT_INPUT_FONT_WEIGHT
+        },
+        textSize: {
+            default: FORM_ELEMENT_INPUT_TEXT_SIZE
+        },
         textColor: {
             default: ref('text-gray-900 dark:text-gray-500'),
             disabled: ref('text-gray-500 dark:text-gray-800')