Custom Component Background Opacity?

Elements API
1

@ben I have a custom component that I created for handling a copyright notice; it has always worked fine until the v3 BETA release. Now the opacity controls for the background color have no effect at all. I notice this seems to be a problem in a lot of other custom components not just my own.

I was surprised, as my component uses the Global Control for a background, where I assumed it would automatically pick up any changes, as this seems to work fine in the standard container or flex in v3.

This is how I’m handling the background in my properties.

{
      "title": "Background",
      "icon": "paintbrush.fill",
      "properties": [
          {
              "globalControl": "BackgroundContainer"
          }
      ]
    },

Is there something special I need to do to make this work?

I did try rebuilding the component in case that would pickup any changes that have been made in the upgrade to Tailwind 4.

2

@ben Any thoughts on this and how to fix opacity?

3

@handshaper

Ben’s on holiday until next week. :slightly_smiling_face:

4

Hey @handshaper,

While @ben is away, I’ll do my best to help you on this…

This is basically due to Tailwind v4 removing a few depreciated utilities, such as bg-opacity, see this for more info: Upgrade guide - Getting started - Tailwind CSS

You need to apply the opacity using another approach, there are a few different way you can do this. One way is to do the following in your properties.json:

{
  "title": "Background",
  "icon": "paintbrush.fill",
  "properties": [
    {
      "title": "Background Color",
      "id": "backgroundColor",
      "format": "bg-{{value}}/(--bg-opacity)",
      "themeColor": {
        "default": {
          "name": "surface",
          "brightness": 50
        }
      }
    },
    {
      "title": "Background Opacity",
      "id": "backgroundOpacity",
      "format": "[--bg-opacity:{{value}}%]",
      "slider": {
        "use": "Slider",
        "default": 100,
        "min": 0,
        "max": 100,
        "units": "%"
      }
    }
  ]
}

Note how the opacity is now setting a CSS Custom Property (via Tailwind’s arbitrary class syntax), and the colour is using that CSS Custom Property via the /{opacity-modifier}. The final output for these controls is now bg-surface-50/(--bg-opacity) and [--bg-opacity:100%]

Hopefully that will get you back up and running!

5

Aloha @dan

Great, I’ll try this approach.

But it still brings up the question of why the "globalControl": "BackgroundContainer" is not doing the right thing. I thought one of the reasons for using global controls was because of consistency across different components.

6

This worked great.

I found I also needed to do the same thing for the text color and opacity; I just got that sorted now. Where globalControl for text was not acting as expected.

Interestingly, the globalControl for borders does do the right thing with the opacity, so I did not need to fix that one.

7

Hi @handshaper

I’ve just published an update the rw-elements-tools package, we’re now on v1.5.0. If you update to the version and rebuild your components, all of the opacity controls should work as expected.

Give it a go and let me know how get on!

https://www.npmjs.com/package/rw-elements-tools

8

This seems to be working on the globalControls I have converted back; few more to go, but so far it’s looking promising. Thank you.