How to migrate custom colors from v3 to v4?

[Nefcanto]

I read the docs. But I could not find my specific problem for using variables and opacity together. This is my withOpacity function:

const withOpacity = (colorVariable) => {
    return ({ opacityValue }) => {
        if (opacityValue !== undefined) {
            return `rgba(var(${colorVariable}), ${opacityValue})`
        }
        return `rgb(var(${colorVariable}))`
    }
}

And this is my custom colors in tailwind.config.js file:

    theme: {
        extend: {
            colors: {
                custom: {
                    color1: withOpacity("--color1"),
                    color12: withOpacity("--color12"),
                    color13: withOpacity("--color13"),
                    color2: withOpacity("--color2"),
                    color3: withOpacity("--color3"),
                    color4: withOpacity("--color4"),
                }
            }
        }
    }

And then in my website, I provide a colors.css that includes these values:

:root { 
 --color1: 209, 209, 209 ; 
 --color12: 234, 234, 234 ; 
 --color13: 245, 242, 235 ; 
 --color2: 210, 200, 165 ;
 --color3: 255, 255, 255 ;
 --color4: 77, 77, 76 ;
}

How should I migrate these custom colors to V4?

[wongjn]

Since v3, Tailwind can handle color opacity automatically for you, so you can do:

@theme {
  --color-color1: rgb(209 209 209);
  --color-color12: rgb(234 234 234);
  --color-color13: rgb(245 242 235);
  --color-color2: rgb(210 200 165);
  --color-color3: rgb(255 255 255);
  --color-color4: rgb(77 77 76);
}

[Nefcanto]

@wongjn, colors are not hard-coded. They are names of variables. We deploy one site for multiple customers each with their own set of colors.

[wongjn]

OK, then you can do:

@theme {
  --color-color1: rgb(var(--color1));
  --color-color12: rgb(var(--color12));
  --color-color13: rgb(var(--color13));
  --color-color2: rgb(var(--color2));
  --color-color3: rgb(var(--color3));
  --color-color4: rgb(var(--color4));
}

[Nefcanto]

@wongjn, thank you. I will test it.