`defineTheme()` function

[Sandros94]

Description

Just out of curiosity, taking the accordion theme as an example, could a function like following defineTheme be possible?

import { colors } from '#ui/theme'

export default defineTheme({
  slots: {
    root: 'w-full',
    item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0',
    header: 'flex',
    trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
    content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
    leadingIcon: 'shrink-0 size-5',
    trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
    label: 'truncate'
  },
  variants: {
    colors,
    disabled: {
      true: {
        trigger: 'cursor-not-allowed opacity-75'
      }
    }
  }
})

The idea is to both simplifying module/layer authors in creating new components, integrating things like colors (and sizes if #52 works), as well solving #35 (if I understand HMR correctly).

Additional context

No response

[benjamincanac]

Not sure to understand, what would this function do? 🤔 The colors object is defined differently for each component. Also, we can't import from #ui at this point as it has not been built yet.

[Sandros94]

Not sure to understand, what would this function do? 🤔

Lets say I want to create a layer to further customize nuxt ui (or, if you want, nuxt ui pro as an example), and I would like to keep most of the same functionalities when adding new components (like having a default theme and being able to customize it via app.config or :ui prop). If that component has multiple colors (inherited by nuxt ui) then I would be forced to define each one in the static theme or create a local module with a template (much like you did here). Wouldn't it be possible to define a small utility function (defineTheme) that would help with this? Or am I mismatching concepts?

The colors object is defined differently for each component.

Ah, you are right, because one could need a bg-${color}-500 but another text-${color}-500.

Also, we can't import from #ui at this point as it has not been built yet.

You mean in the lifecycle of the module?

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.