@indielayer/ui 1.3.0 → 1.5.0

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -2,30 +2,44 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+
+      return classes
+    },
 
     box: ({ props }) => {
-      const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
+      if (props.size === 'lg') classes.push('h-5 w-5')
       else if (props.size === 'xl') classes.push('h-6 w-6')
-      else classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
+
+      return classes
+    },
+
+    content: ({ props }) => {
+      const classes = ['flex items-baseline']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
 
       return classes
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      if (props.size === 'lg') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-4 w-4')
-      else classes.push('h-3 w-3')
+      else classes.push('h-2.5 w-2.5')
 
       return classes
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
+      const classes = ['inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -2,10 +2,16 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
 
     box: ({ props }) => {
-      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-5 w-5')
@@ -14,8 +20,16 @@ const theme: CheckboxTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white dark:text-secondary-900']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
       else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
@@ -25,7 +39,7 @@ const theme: CheckboxTheme = {
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm']
+      const classes = ['text-secondary-800 dark:text-secondary-200 pl-2 text-sm']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/container/Container.vue

@@ -4,6 +4,10 @@ const containerProps = {
     type: String,
     default: 'div',
   },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>

package/src/components/container/theme/Container.base.theme.ts

@@ -2,7 +2,13 @@ import type { ContainerTheme } from '../Container.vue'
 
 const theme: ContainerTheme = {
   classes: {
-    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+    wrapper: ({ props }) => {
+      const classes = ['px-4 md:px-6']
+
+      if (!props.fluid) classes.push('max-w-screen-lg mx-auto')
+
+      return classes
+    },
   },
 }
 

package/src/components/divider/Divider.vue

@@ -40,7 +40,7 @@ const { styles, classes, className } = useTheme('Divider', {}, props)
     ></div>
     <div
       v-if="label"
-      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      class="font-medium text-sm text-secondary-600 dark:text-secondary-300"
       :class="[
         classes.label,
         {

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,9 +4,9 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
+    label: 'font-medium text-sm text-secondary-600 dark:text-secondary-300',
 
-    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
+    line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
   },
 }
 

package/src/components/drawer/Drawer.vue

@@ -155,7 +155,7 @@ function onEnter(el: Element, done: () => void) {
   }
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.add('bg-gray-500/30')
+    if (props.backdrop) el.classList.add('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = '0'
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
     else if (props.position === 'left') (el as HTMLElement).style.left = '0'
@@ -168,7 +168,7 @@ function onBeforeLeave(el: Element) {}
 function onLeave(el: Element, done: () => void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.remove('bg-gray-500/30')
+    if (props.backdrop) el.classList.remove('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
     else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -2,7 +2,7 @@ import type { DrawerTheme } from '../Drawer.vue'
 
 const theme: DrawerTheme = {
   classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-secondary-800',
 
     backdrop: 'duration-150 ease-in-out',
   },

package/src/components/form/Form.vue

@@ -13,6 +13,12 @@ const formProps = {
     type: [Array, Object] as PropType<[FormError[], FormError]>,
     default: () => ([]),
   },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type FormProps = ExtractPublicPropTypes<typeof formProps>
@@ -35,12 +41,11 @@ export type FormInput = {
   setError: (val: string) => void;
 }
 
-type InternalClasses = 'wrapper'
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer'
 export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
 
 export default {
   name: 'XForm',
-  inheritAttrs: false,
 }
 </script>
 
@@ -73,8 +78,10 @@ provide(injectFormKey, {
   isInsideForm: true,
 })
 
-onMounted(() => {
-  if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+onMounted(async () => {
+  if (props.autoFocus && inputs && inputs.length > 0) {
+    setTimeout(inputs[0].focus, 50)
+  }
 })
 
 watch(() => props.errors, (errors) => {
@@ -131,8 +138,22 @@ const { styles, classes, className } = useTheme('Form', {}, props)
     ]"
     @submit="submit"
   >
-    <fieldset :disabled="disabled">
+    <slot name="header">
+      <div v-if="title || description" class="mb-6">
+        <p v-if="title" :class="classes.title">{{ title }}</p>
+        <p v-if="description" :class="classes.description">{{ description }}</p>
+      </div>
+    </slot>
+
+    <fieldset :disabled="disabled" :class="classes.content">
       <slot></slot>
     </fieldset>
+
+    <slot v-if="hasFooter" name="footer">
+      <div :class="classes.footer">
+        <slot name="primary-action"></slot>
+        <slot name="secondary-action"></slot>
+      </div>
+    </slot>
   </form>
 </template>

package/src/components/form/theme/Form.base.theme.ts

@@ -2,7 +2,15 @@ import type { FormTheme } from '../Form.vue'
 
 const theme: FormTheme = {
   classes: {
-    wrapper: '',
+    wrapper: 'relative',
+
+    content: '',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-secondary-500',
+
+    footer: 'space-x-4 mt-4',
   },
 }
 

package/src/components/form/theme/Form.carbon.theme.ts

@@ -1,7 +1,17 @@
 import type { FormTheme } from '../Form.vue'
 
-import BaseTheme from './Form.base.theme'
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
 
-const theme: FormTheme = BaseTheme
+    content: 'grid',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-secondary-500',
+
+    footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
+  },
+}
 
 export default theme

package/src/components/formGroup/FormGroup.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+const formGroupProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
+
+export type FormGroupInjection = {
+  registerInputGroup: (name: string, focus: () => void) => void;
+  unregisterInputGroup: (name: string) => void;
+  setValue: (val: string | number | string[] | number[]) => void;
+  value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+  isInsideFormGroup: boolean;
+}
+
+export type FormGroupInput = {
+  name: string;
+  focus: () => void;
+}
+
+type InternalClasses = 'wrapper'
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XFormGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { injectFormGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(formGroupProps)
+
+const inputs: FormGroupInput[] = []
+
+const value = computed<string | number | string[] | number[]>(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (typeof props.modelValue === 'number') return props.modelValue
+  if (Array.isArray(props.modelValue)) return props.modelValue
+
+  return ''
+})
+
+provide(injectFormGroupKey, {
+  registerInputGroup: (name: string, focus: () => void) => {
+    inputs.push({ name, focus })
+  },
+  unregisterInputGroup: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  setValue: (val) => {
+    emit('update:modelValue', val)
+  },
+  isInsideFormGroup: true,
+  value,
+})
+
+function focus() {
+  inputs[0]?.focus()
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const listeners = {
+  change: (event: Event) => {
+    if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+  },
+}
+
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+    ]"
+    :tooltip="tooltip"
+    v-on="listeners"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormGroup from '../FormGroup.vue'
+
+describe('FormGroup', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(FormGroup)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/formGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue'
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue'

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-1')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-3')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/icon/theme/Icon.base.theme.ts

@@ -3,14 +3,14 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
       else if (props.size === 'sm') return classes + ' h-4 w-4'
       else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'xl') return classes + ' h-7 w-7'
 
-      return classes + ' h-5 w-5'
+      return classes + ' h-4 w-4'
     },
   },
 }

package/src/components/icon/theme/Icon.carbon.theme.ts

@@ -3,12 +3,11 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
-      else if (props.size === 'sm') return classes + ' h-4 w-4'
-      else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'lg') return classes + ' h-5 w-5'
+      else if (props.size === 'xl') return classes + ' h-8 w-8'
 
       return classes + ' h-4 w-4'
     },

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './alert'
 export * from './avatar'
 export * from './badge'
@@ -6,11 +7,11 @@ export * from './button'
 export * from './card'
 export * from './carousel'
 export * from './checkbox'
-export * from './collapse'
 export * from './container'
 export * from './divider'
 export * from './drawer'
 export * from './form'
+export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
@@ -31,6 +32,7 @@ export * from './skeleton'
 export * from './slider'
 export * from './spacer'
 export * from './spinner'
+export * from './stepper'
 export * from './tab'
 export * from './table'
 export * from './tag'

package/src/components/input/Input.vue

@@ -8,8 +8,6 @@ const inputProps = {
     type: Boolean,
     default: true,
   },
-  helper: String,
-  label: String,
   dir: {
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
@@ -91,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -115,6 +114,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <div class="relative">
       <slot name="prefix">
@@ -128,13 +128,14 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
 
       <input
+        :id="id"
         ref="elRef"
         :class="[
           classes.input,
           type === 'password' ? 'pr-10' : '',
           // error
           errorInternal
-            ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+            ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
             '!pl-10': iconLeft,
@@ -176,6 +177,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/input/theme/Input.base.theme.ts

@@ -5,9 +5,9 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
       else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
@@ -16,13 +16,13 @@ const theme: InputTheme = {
       else classes.push('px-3 py-2')
 
       classes.push(props.disabled
-        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        ? 'bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed'
+        : 'bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/input/theme/Input.carbon.theme.ts

@@ -5,26 +5,26 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
       else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
       else classes.push('py-2.5')
 
       if (props.disabled) {
-        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+        classes.push('bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed')
       } else if (props.readonly) {
-        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+        classes.push('bg-white dark:bg-secondary-900 text-secondary-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
       }
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -2,9 +2,9 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1rem] text-sm mt-1',
-    helperText: 'text-gray-500 dark:text-gray-400',
-    errorText: 'text-red-500 dark:text-red-400',
+    wrapper: 'min-h-[1.3rem] text-xs mt-1',
+    helperText: 'text-secondary-500 dark:text-secondary-400',
+    errorText: 'text-error-500 dark:text-error-400',
   },
 }
 

package/src/components/inputFooter/theme/InputFooter.carbon.theme.ts

@@ -2,9 +2,9 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1rem] text-xs mt-1',
-    helperText: 'text-gray-500 dark:text-gray-400',
-    errorText: 'text-red-500 dark:text-red-400',
+    wrapper: 'text-xs mt-1',
+    helperText: 'text-secondary-500 dark:text-secondary-400',
+    errorText: 'text-error-500 dark:text-error-400',
   },
 }