bug/feat: additional colors support

[sandros94]

Ability to add additional colors like secondary, accent, success, info, warning, danger.

Is your feature request related to a problem? Please describe.

Partially.
Following the docs I see that it should be already possible to use any colors that gets defined within tailwind.config. But it isn't currently working:

While creating a stackblitz repro I've noticed that I even get a validation error on the 'color' prop (EDIT: I get the vue warn in local dev too). But compared to running locally the component gets displayed in white.

[Vue warn]: Invalid prop: custom validator check failed for prop "color".

Additionally: How could we make them possible to be edited at runtime inside app.config.ts?

Describe the solution you'd like

1. Defining any custom colors inside tailwind.config (either being inside nuxt.config.ts or tailwind.config.js), with their respective default values.
2. Being able to have them available inside the app.config.ts to be changed at runtime.

Additional context

The ability to change at runtime for colors such 'success', 'info', 'warning' and 'danger' is particularly useful for platforms with colorblindness support.

[sandros94]

While reading this comment:

I'd also suggest using colors that have all the shades as our components use lots of them. You could however override all the presets that use a -{color}- or -primary- class through your app.config.ts.

made me realize that you indeed need multiple shades, so wouldn't it be easier (from an end-DX perspective) for the color prop to fetch any colors under ui inside the app.config.ts and automagically use whatever color is set inthere?

Example:

export default defineAppConfig({
    ui: {
        primary: 'purple',
        gray: 'neutral',
        secondary: 'pink',
        success: 'green',
        info: 'sky',
        warning: 'yellow',
        danger: 'red',
    },
});

[CareTiger]

i was thinking more prop - #208

Will see what they come up with. clearly this is a big UX need and whatever solution they come up with probably going to be elegant.

[sandros94]

@CareTiger true, excellent use case for the toast.

[benjamincanac]

In your reproduction, the secondary and info colors need to be defined inside your tailwind.config under theme.extend.colors:

import type { Config } from 'tailwindcss'
import colors from 'tailwindcss/colors'

export default <Partial<Config>> {
  theme: {
    extend: {
      colors: {
        secondary: colors.pink,
        info: colors.sky
      }
    }
  }
}

[sandros94]

Sorry, I should have replied even though I didn't have the time for testing.

As you explained in my nuxt.config.ts I'm able to do so:

import colors from 'tailwindcss/colors';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxthq/ui'],
  tailwindcss: {
    config: {
      content: [],
      plugins: [require('@tailwindcss/typography')],
      theme: {
        extend: {
          colors: {
            secondary: colors.pink,
            info: colors.sky,
          },
          fontFamily: {
            sans: ['Montserrat'],
            mono: ['"Fira Mono"', '"Fira Code"'],
          },
        },
      },
    },
  },
});

But yet I'm not able to edit them at runtime in my app.config.ts afterwards:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool',
    secondary: 'blue',
    info: 'green',
  },
});

I'm getting only the colors defined in the nuxt.config.ts:

[TechAkayy]

Im still trying to grasp the apis. Meanwhile, from my experience in #232 (comment), adding any other palette colors (like secondary etc) other than setting primary seems to break something, so runtime customisation of anything other than primary & gray is probably not supported. Will wait for the author to advise on this.

[PuxianAlHazred]

up

[sandros94]

@PuxianAlHazred keep an eye on #1289 since the module's rewrite for v3.0 will be based on Tailwind V4 and could introduce some changes into how this works

[dimunyo]

up

[sandros94]

@dimunyo what issue are you experiencing?