feat(components): uniformize colors and variants (#141)

src/runtime/components/FormField.vue

@@ -93,7 +93,7 @@ provide(formFieldInjectionKey, computed(() => ({
       </p>
     </div>
 
-    <div :class="[label && ui.container()]">
+    <div :class="[label && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
       <p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">

src/runtime/components/Input.vue

@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
 
@@ -25,8 +26,10 @@ export interface InputProps extends UseComponentIconsProps {
   autofocus?: boolean
   autofocusDelay?: number
   disabled?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
   class?: any
-  ui?: Partial<typeof input.slots>
+  ui?: PartialString<typeof input.slots>
 }
 
 export interface InputEmits {
@@ -59,7 +62,7 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
@@ -71,6 +74,7 @@ const ui = computed(() => input({
   variant: props.variant,
   size: inputSize?.value,
   loading: props.loading,
+  highlight: highlight.value,
   leading: isLeading.value || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   buttonGroup: orientation.value

src/runtime/components/InputMenu.vue

@@ -81,6 +81,8 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
    */
   filter?: boolean | string[]
   items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
   class?: any
   ui?: PartialString<typeof inputMenu.slots>
 }
@@ -131,7 +133,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -142,6 +144,7 @@ const ui = computed(() => inputMenu({
   variant: props.variant,
   size: inputSize?.value,
   loading: props.loading,
+  highlight: highlight.value,
   leading: isLeading.value || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   multiple: props.multiple,

src/runtime/components/Kbd.vue

@@ -18,7 +18,7 @@ export interface KbdProps {
    */
   as?: any
   value: KbdKey | string
-  color?: KbdVariants['color']
+  variant?: KbdVariants['variant']
   size?: KbdVariants['size']
   class?: any
 }
@@ -41,7 +41,7 @@ const { getKbdKey } = useKbd()
 </script>
 
 <template>
-  <Primitive :as="as" :class="kbd({ color, size, class: props.class })">
+  <Primitive :as="as" :class="kbd({ variant, size, class: props.class })">
     <slot>
       {{ getKbdKey(value) }}
     </slot>

src/runtime/components/NavigationMenu.vue

@@ -136,7 +136,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
                     <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
                       <UBadge
                         v-if="item.badge"
-                        color="white"
+                        color="gray"
+                        variant="outline"
                         :size="(ui.linkTrailingBadgeSize() as BadgeProps['size'])"
                         v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
                         :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"

src/runtime/components/Pagination.vue

@@ -105,9 +105,9 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 
 const props = withDefaults(defineProps<PaginationProps>(), {
-  color: 'white',
-  activeColor: 'black',
-  variant: 'solid',
+  color: 'gray',
+  activeColor: 'primary',
+  variant: 'outline',
   activeVariant: 'solid',
   showControls: true
 })

src/runtime/components/Select.vue

@@ -59,6 +59,8 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
    */
   portal?: boolean
   items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
   class?: any
   ui?: PartialString<typeof select.slots>
 }
@@ -99,7 +101,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
 
-const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -110,6 +112,7 @@ const ui = computed(() => select({
   variant: props.variant,
   size: selectSize?.value,
   loading: props.loading,
+  highlight: highlight.value,
   leading: isLeading.value || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   buttonGroup: orientation.value

src/runtime/components/SelectMenu.vue

@@ -68,6 +68,8 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
    */
   filter?: boolean | string[]
   items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
   class?: any
   ui?: PartialString<typeof selectMenu.slots>
 }
@@ -115,7 +117,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -126,6 +128,7 @@ const ui = computed(() => selectMenu({
   variant: props.variant,
   size: selectSize?.value,
   loading: props.loading,
+  highlight: highlight.value,
   leading: isLeading.value || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   buttonGroup: orientation.value

src/runtime/components/Textarea.vue

@@ -26,6 +26,8 @@ export interface TextareaProps {
   rows?: number
   maxrows?: number
   autoresize?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
   ui?: Partial<typeof textarea.slots>
 }
 
@@ -57,12 +59,13 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
 
 const ui = computed(() => textarea({
   color: color.value,
   variant: props.variant,
-  size: size?.value
+  size: size?.value,
+  highlight: highlight.value
 }))
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null)