heroui-inc/heroui

[BUG] - Color palette classname appears wrong for custom colors

Closed this issue · 3 comments

choneas commented

NextUI Version

2.4.8

Describe the bug

I am setting up my custom colors in taildwind.config.ts but my theme colors are not showing up correctly in some of nextui's components, for example I am passing color=primary to the component and then in the actual rendering it may have a class name of text-primary-100 but the hue is not like my custom primary color, but blue (common color), and the same goes for the other colors as well

Your Example Website or App

https://codesandbox.io/p/github/Choneas/next-choneas/main?workspaceId=ec97bfd1-0fc3-46e6-8089-e6c95c9878d6&embed=1

Steps to Reproduce the Bug or Issue

  1. Configuring custom colors for nextui in tailwind.config.ts
  2. Import a NextUI component, e.g. Select, Chip, Button.
  3. Set the color for it, e.g. primary secondary

Expected behavior

I expect the component's color (text-primary-100, etc.) to be based on my primary or secondary color, but I'm seeing it based on a weird I-didn't-define-it color like blue or purple.

Screenshots or Videos

attach.mp4

Operating System Version

  • OS: Windows

Browser

Edge

choneas commented

This one may shouldn't be a bug.

choneas commented

To solve the problem, you can only add the numeric variant for each colour using the color palette website or by your self.

plugins: [heroui({
    themes: {
      light: {
        colors: {
          background: "#FFF8F6",
          foreground: "#231918",
          content1: "#FFF8F6",
          primary: {
            50: "#faf5f2",
            100: "#f3e8e1",
            200: "#e6cfc2",
            300: "#d6b09b",
            400: "#c58a72",
            500: "#b97056",
            600: "#ab5d4b",
            700: "#904b40",
            800: "#743e38",
            900: "#5e3530",
            950: "#321a18",
            foreground: "#FFFFFF",
            DEFAULT: "#904B40"
          },
          . . .