Hover Color Export

I’m trying to get a hover:color on a button using this:

{
   "title": "BG Hover Color:",
   "id": "buttonbghovcolor",
   "format": "hover:{{value}}",
   "themeColor": {
     "default": {
       "name": "blue",
       "brightness": 200
     }
   }
 }

It’s exporting class as: hover:primary-200 Shouldn’t it be hover:blue-200 ?

think you need to use this code if using tailwind, might not be what you are trying so ignore if that is the case

hover:bg-{{value}}

colour always first starts with this colour for me, you then need to select the colour and change it

https://share.cleanshot.com/9qWHCn6G

@Bill Okay, there’s a few things going on here…

The next beta (beta 16) will use “brand” instead of “primary” as that is a hangover from our initial theme naming from very early betas (so that’s a bug).

To get the default value coming through you’ll need to remove and re-drag on the custom component you’re working on.

And @upssjw is correct, to set the background colour of a button you’ll need to use bg-{{value}}.

Here’s how I’d do it:

And here’s the Template code:

<div id="{{id}}" class="text-lg text-center p-10">
    <button class="{{buttonColor}} hover:{{buttonColorHover}} text-text-900 font-bold py-2 px-4 rounded">
  Click Me
</button>
</div>

And here’s the Properties code:

{
    "groups": [{
        "title": "Theme Color Example",
        "properties": [{
            "title": "Color",
            "id": "buttonColor",
            "format": "bg-{{value}}",
            "themeColor": {
                "default": {
                    "name": "red",
                    "brightness": 500
                }
            }
        },
        {
    "title": "Color",
    "id": "buttonColorHover",
    "format": "bg-{{value}}",
    "themeColor": {
        "default": {
            "name": "red",
            "brightness": 600
        }
    }
}
        ]
    }]
}

Any questions, just ask!

1 Like