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 - https://github.com/nuxtlabs/ui/issues/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 https://github.com/nuxtlabs/ui/issues/232#issuecomment-1564122929, 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?

[rnambs]

@Sandros94 I'm having the same issue where I'm getting console errors when settings default colors. im setting colors in tailwind.config.js like so:

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        'custom': {
          50: '#f6f5f5',
          100: '#e8e6e5',
          200: '#d3d0ce',
          300: '#b4afac',
          400: '#8e8782',
          500: '#736c67',
          600: '#625c58',
          700: '#534f4b',
          800: '#484542',
          900: '#2f2d2b',
          950: '#3f3d3a'
        }
      }
    }
  }
}

then settings colors in app.config.ts like so:

ui: {
    primary: 'violet',
    gray: 'cool',
    colors: ['custom', 'old-lace', 'buttons'],
    .... other components
    

still getting the same error, and components using these custom colors either don't appear or default to white

[sandros94]

@rnambs Could you share the console error you are getting?

Edit

did you also safelist the custom colors in your nuxt.config.ts (more on this in the docs)?

export default defineNuxtConfig({
  ui: {
    safelistColors: ['orange']
  }
})

[rnambs]

@Sandros94 I have safelisted the colors in nuxt config, but still receive these errors:

[Vue warn]: Invalid prop: custom validator check failed for prop "color". 
  at <Button color="buttons-200" variant="ghost" class="w-full"  ... > 

[sandros94]

Doing something like <Button color="buttons-200" ... /> will output something like bg-button-200-500 dark:bg-button-200-400. You should specify the desired shade in the color prop, if you need so you should customize the ui prop if you need to edit that specific button, or within the app.config.ts for the whole project.

When using custom colors, and after safelisting them, each component will dynamically use them based on a bg-{color}-500 dark:bg-{color}-400 logic. The color prop of each component doesn't let you control which shade to use

[rnambs]

That makes a lot of sense, thank you so much! @Sandros94