How to customize colors in modules based on nuxt layer with NuxtUI?

[KonradDRAST]

Description

I can't set the primary color in an app that extends the NuxtUI layer. I've added a custom color name to the tailwind config, then changed the app.config 'ui' key to use myColor name as primary, but every primary element is transparent now. What is the correct way to deal with custom colors when extending a layer?

[noook]

Could you share a reproduction so we can understand what is missing here ?

[KonradDRAST]

App tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --wblue-50: 209 100% 80%;
    --wblue-100: 209 100% 70%;
    --wblue-200: 209 100% 60%;
    --wblue-300: 209 100% 50%;
    --wblue-400: 209 100% 38%;
    --wblue-500: 209 100% 26%;
    --wblue-600: 209 100% 18%;
    --wblue-700: 209 100% 14%;
    --wblue-800: 209 100% 10%;
    --wblue-900: 209 100% 6%;
    --wblue-950: 209 100% 3%;
  }
}

Then tailwind.config.ts

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        wblue: {
          50: 'hsl(var(--wblue-50))',
          100: 'hsl(var(--wblue-100))',
          200: 'hsl(var(--wblue-200))',
          300: 'hsl(var(--wblue-300))',
          400: 'hsl(var(--wblue-400))',
          500: 'hsl(var(--wblue-500))',
          600: 'hsl(var(--wblue-600))',
          700: 'hsl(var(--wblue-700))',
          800: 'hsl(var(--wblue-800))',
          900: 'hsl(var(--wblue-900))',
          950: 'hsl(var(--wblue-950))',
        },
      },
    },
  },
}

and finally app.config.ts

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

Then when the button is added (or any other element that uses primary color) it's transparent because bg-color has null in its value

[KonradDRAST]

This app simply extends Nuxt Layer with NuxtUI installed. Components are fine, but colors are not.

[noook]

Thanks for the details, could you create a Stackblitz so we can investigate ?

[KonradDRAST]

Thanks for the details, could you create a Stackblitz so we can investigate ?

not sure how to recreate monorepo with layers there. Sorry.

[pskclub]

:root {
  --color-primary-50: 248 248 255;
  --color-primary-100: 232 239 253;
  --color-primary-200: 190 227 248;
  --color-primary-300: 144 205 244;
  --color-primary-400: 99 179 237;
  --color-primary-500: 54 117 251;
  --color-primary-600: 0 104 254;
  --color-primary-700: 43 108 176;
  --color-primary-800: 44 82 130;
  --color-primary-900: 32 36 62;
  --color-primary-950: 32 36 62;
  --color-primary-DEFAULT: 54 117 251;
}

try something like this?

[KonradDRAST]

:root {
  --color-primary-50: 248 248 255;
...

try something like this?

This works flawlessly (except RGB values rather than HSL). Many thanks :)