Bill
(Bill)
4 October 2024 23:50
1
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 ?
upssjw
(Steve W)
5 October 2024 06:14
2
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
dan
(Dan C.)
5 October 2024 12:06
3
@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