Elements 3 and Pick a Card Component Issues

Elements
1

@Dan Please see short video for issue: Click Here.

2

Thanks for the video, that’s very helpful to see the bug in action. Have you tried reselecting or changing the background hover colour?

Hopefully we can work with @1LittleDesigner to get this resolved!

3

It looks to me that under the interactive state setting that the Overlay Opacity setting is not being honored possibly.

4

Yeah, we really need @1LittleDesigner to take a look at this as I don’t know what code his component is using :thinking:

5

This sounds like an issue with Tailwind 4 removing the deprecated opacity utilities like bg-opacity-*.

@1LittleDesigner If this is the case, you need to switch to using opacity modifiers as detailed here Upgrade guide - Getting started - Tailwind CSS

We had to update our components for this, and the way we did it was to set the opacity as a CSS property and then use that as the opacity modifier in the Tailwind class, here’s the code we use:

    {
        visible: "bgType == 'color'",
        title: "Color",
        id: "bgColor",
        format: "bg-{{value}}/(--bgColorOpacity)",
        themeColor: {
            default: {
                name: "surface",
                brightness: 900,
            },
        },
    },
    {
        visible: "bgType == 'color'",
        title: "Opacity",
        id: "bgColorOpacity",
        format: "[--bgColorOpacity:{{value}}%]",
        responsive: false,
        slider: {
            default: 100,
            use: "Slider",
            units: "%",
        },
    }

The key bit here are the format keys. Let me know if you have any questions on this, we’re happy to help :blush:

6

Thanks a bunch for pointing us right to the culprit. An update to fix this will be out very soon.

7

@Jon1LD I updated to the latest version of Pick a Card, but while some of it is better, there are still a lot of problems. The main one being that you cannot edit the cards, as they are not displayed in the editor. The other problem is that the only way to interact with them is by using the slider, which is now always visible and does not appear to be respecting the setting that controls it. You can no longer hover over a card to bring it to the front.