feat(Theme): override component prop defaults

playgrounds/nuxt/app/pages/components/button.vue

@@ -24,8 +24,12 @@
   </Navbar>
 
   <Matrix v-slot="props" :attrs="attrs">
-    <UButton label="Button" v-bind="props" />
-    <UButton label="Link" to="/" v-bind="props" />
+    <UTheme :variants="{ button: { variant: 'soft', color: 'warning' } }" :ui="{ button: { base: 'font-bold' } }">
+      <UButton label="Button" v-bind="props" />
+
+      <UButton label="Link" to="/" v-bind="props" />
+    </UTheme>
+
     <UButton label="Disabled" disabled v-bind="props" />
     <UButton label="Disabled link" to="#" disabled v-bind="props" />
     <UButton label="Loading" loading v-bind="props" />

src/runtime/components/Button.vue

@@ -48,6 +48,7 @@ import { defu } from 'defu'
 import { useForwardProps } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../composables/useComponentUI'
+import { useComponentVariant } from '../composables/useComponentVariant'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
@@ -64,6 +65,8 @@ const slots = defineSlots<ButtonSlots>()
 
 const appConfig = useAppConfig() as Button['AppConfig']
 const uiProp = useComponentUI('button', props)
+const variantProp = useComponentVariant('button', props)
+
 const { orientation, size: buttonSize } = useFieldGroup<ButtonProps>(props)
 
 const linkProps = useForwardProps(pickLinkProps(props))
@@ -104,12 +107,12 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.button || {})
 })({
-  color: props.color,
-  variant: props.variant,
+  color: variantProp.value.color,
+  variant: variantProp.value.variant,
   size: buttonSize.value,
   loading: isLoading.value,
-  block: props.block,
-  square: props.square || (!slots.default && !props.label),
+  block: variantProp.value.block,
+  square: variantProp.value.square || (!slots.default && !props.label),
   leading: isLeading.value,
   trailing: isTrailing.value,
   fieldGroup: orientation.value

src/runtime/components/Theme.vue

@@ -2,9 +2,11 @@
 import { computed } from 'vue'
 import { provideThemeContext } from '../composables/useComponentUI'
 import type { ThemeUI } from '../composables/useComponentUI'
+import { provideVariantContext, type VariantUI } from '../composables/useComponentVariant'
 
 export interface ThemeProps {
-  ui: ThemeUI
+  ui?: ThemeUI
+  variants?: VariantUI
 }
 
 export interface ThemeSlots {
@@ -16,7 +18,11 @@
 const props = defineProps<ThemeProps>()
 
 provideThemeContext({
-  ui: computed(() => props.ui)
+  ui: computed(() => props.ui ?? {}),
+})
+
+provideVariantContext({
+  variant: computed(() => props.variants ?? {})
 })
 </script>
 

src/runtime/composables/useComponentUI.ts

@@ -22,11 +22,11 @@ export type ThemeUI = {
   [K in keyof typeof ui]?: ThemeSlotOverrides<(typeof ui)[K]>
 }
 
-export type ThemeRootContext = {
+export type ThemeUIContext = {
   ui: ComputedRef<ThemeUI>
 }
 
-const [injectThemeContext, provideThemeContext] = createContext<ThemeRootContext>('UTheme', 'RootContext')
+const [injectThemeContext, provideThemeContext] = createContext<ThemeUIContext>('UThemeUI', 'RootContext')
 
 export { provideThemeContext }
 

src/runtime/composables/useComponentVariant.ts

@@ -0,0 +1,40 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import defu from 'defu'
+import { createContext } from 'reka-ui'
+import type { ComponentConfig, TVConfig } from '../types/tv'
+import type * as ui from '#build/ui'
+import { get } from '../utils'
+import type { AppConfig } from '@nuxt/schema'
+
+type UIConfig = TVConfig<typeof ui>
+type ComponentVariants<C extends keyof UIConfig> = ComponentConfig<(typeof ui)[C], AppConfig, C>['variants']
+
+type VariantValue<V> = [V] extends ['true' | 'false'] ? boolean : V
+type ThemeVariantOverrides<T> = {
+    [K in keyof T]?: VariantValue<T[K]>
+};
+
+export type ThemeVariantContext = {
+  variant: ComputedRef<VariantUI>
+}
+
+export type VariantUI = {
+    [K in keyof UIConfig]?: ThemeVariantOverrides<ComponentVariants<K>>
+}
+
+const [injectVariantContext, provideVariantContext] = createContext<ThemeVariantContext>('UThemeVariant', 'RootContext')
+
+export { provideVariantContext }
+
+type ComponentVariantProps<C extends keyof UIConfig> = ThemeVariantOverrides<ComponentVariants<C>>
+
+export function useComponentVariant<C extends keyof UIConfig>(name: C, props: ComponentVariantProps<C>): ComputedRef<ThemeVariantOverrides<ComponentVariants<C>>> {
+  const { variant } = injectVariantContext({ variant: computed(() => ({})) })
+
+  return computed(() => {
+    const themeOverrides = (get(variant.value, name as string) || {})
+
+    return defu(props.variants ?? {}, themeOverrides)
+  })
+}