Hover to button with custom color

[stanislav-cervenak]

Laravel Version: 9.17.0
Nova Version: 4.8.1
PHP Version: 8.1.0
Database Driver & Version:
Operating System and Version: MacOS 12.3.1
Browser type and version: Google Chrome 102

Description:

Custom color set in ./config/nova.php

     'brand' => [
         'colors' => [
             "400" => "218, 35, 30, 0.5",
             "500" => "218, 35, 30",
             "600" => "218, 35, 30, 0.75",
         ]
     ],

After hover to button hover:bg-primary-400 is background-color transparent
In Nova 4.7.0 everything was fine

Default colors have no problem.

[bashgeek]

Having the same issue with 4.8.1, was fine with 4.7.x

[mira-thakkar]

Getting same issue with 4.8.1

[crynobone]

This might be related to changes to Tailwind 3, will investigate.

[jjjrmy]

Same issue on Login Button

[crynobone]

Tailwind 3 introduces a new opacity option for all color variants causing alpha/opacity option to become invalid. A quick fix right now is to change ${R}, ${G}, ${B}, ${A} to ${R}, ${G}, ${B} for each nova.brand.colors.*

[jimmitjoo]

Same issue for me when upgrading from 4.7 to 4.8 and upwards.

[gldrenthe89]

Same issue here

[stanislav-cervenak]

Same issue in 4.10.0

[jimmitjoo]

Tailwind 3 introduces a new opacity option for all color variants causing alpha/opacity option to become invalid. A quick fix right now is to change ${R}, ${G}, ${B}, ${A} to ${R}, ${G}, ${B} for each nova.brand.colors.*

That does work as a temporary fix for me. Thank you!

Changed the brand colors like this:

'colors' => [
    "400" => "251,154,164",
    "500" => "238,43,71",
    "600" => "245,103,118",
]

[baszach]

The problem only occurs when the opacity is set. For example "400" => "251,154,164",0.6. Like @jimmitjoo said you can choose the color codes without opacity. For example FF9900 with 50% opacity is the same as F2BE72. It's also more consistent to work with specific color codes and not opacity.

[gldrenthe89]

The problem only occurs when the opacity is set. For example "400" => "251,154,164",0.6. Like @jimmitjoo said you can choose the color codes without opacity. For example FF9900 with 50% opacity is the same as F2BE72. It's also more consistent to work with specific color codes and not opacity.

That is not a solution. You need the opacity for the colors to be more consistent when on dark or light mode. Using a hex color can result in bad styling on dark mode but good styling on light mode.

This issue just needs fixing. I dont know why this is taking them such a long time for this.

[ramsha-mt]

Tailwind 3 introduces a new opacity option for all color variants causing alpha/opacity option to become invalid. A quick fix right now is to change ${R}, ${G}, ${B}, ${A} to ${R}, ${G}, ${B} for each nova.brand.colors.*

That does work as a temporary fix for me. Thank you!

Changed the brand colors like this:

'colors' => [
    "400" => "251,154,164",
    "500" => "238,43,71",
    "600" => "245,103,118",
]

Could be a temporary fix but this needs fixing asap because the hover effect from buttons will be gone!!

[scramatte]

Hi,

Same issue here. Please fix it asap.
Regards

[davidhemphill]

This has been fixed and will be included in the next release. 👍

[jodhaakbar]

still issue on nova 4.13.0

[davidhemphill]

I confirmed this to be working on a fresh Nova application running 4.13.0. If you still have the issue, please post a new one with all the details filled in so we can replicate the issue on our end. Thanks!