Default to primary if it's already a tailwind custom color

[TechAkayy]

This is w.r.t https://github.com/nuxtlabs/ui/commit/d93e995298b87671288c19b5465dd68d00d37064 for https://github.com/nuxtlabs/ui/issues/170.

It's quite common to have colors such as primary, secondary, info, error, warning etc already configured as a custom tailwind colors.

It might be a good idea to automatically default primary if it's already defined as a tailwind custom color. Otherwise, we might have to do like this, which is not very intuitive.

export default defineAppConfig({
  ui: {
    primary: 'primary',
    gray: 'cool',
  },
})

[TechAkayy]

Also, curious to know about when will happen if primary is defined as a custom tailwind class (and configured like above or defaulted), but not necessary has all shades (primary-50... to primary-950). Will all the shades be automatically calculated (or) a meaningful error message thrown?

[benjamincanac]

Unfortunately, as we're using CSS variables you cannot have a color named primary.

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.

[ddahan]

On the same topic, I was wondering how to mix nuxtlabs ui defineAppConfig with my custom theming which using a (kind of) primary color too.

Currently I have two files:

app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'purple',
    gray: 'cool',
  },
});

tailwind.config.js

const colors = require('tailwindcss/colors');
const ppwColor = colors.purple;

module.exports = {
  theme: {
    extend: {
      colors: {
        ppw: {
          lightest: ppwColor[50],
          lighter: ppwColor[100],
          light: ppwColor[200],
          DEFAULT: ppwColor[500],
          dark: ppwColor[800],
          darker: ppwColor[900],
          darkest: ppwColor[950],
        },
      },

It seems a little redundant to define the color I use (purple) in two files. Besides, it could be great to have a way to unify which Tailwind variants we use in the project.

[benjamincanac]

~The primary and gray are just aliases that will define colors used in the components. Once you've defined your tailwind colors, you can select them in the app.config.ts.~

export default defineAppConfig({
  ui: {
    primary: 'ppw',
    gray: 'cool'
  }
})

I misunderstood your comment, why redefine a color that already exists? This module will only work with default shades from 50 to 950 like default Tailwind colors. It would be way too complicated to re-write the entire preset with different shade IMO.