WIP: Color Palette: Variable remains if you remove it

Browser: Chrome 124
OS: Windows

Not sure if this was an issue before 1.9.8 but I just encountered it when trying to change colour. When you use the raw option on the colour pallet, once saved you cannot change from raw to a normal HEX or RGB colour away from variables. See steps below to reproduce.

  1. Have a colour global variable set in the variable manager like ‘tp-color-accent’ with colour ‘#893064’.

  2. Create a fresh colour pallet and under any element that can use colour like for a background colour use the colour pallet interface to create a new pallet colour and set the option to raw and then use the variable created from before. Should look like ‘var(–tp-color-accent)’.

  3. Now use this colour for the background and save the page to see on frontend.
    Screenshot 2024-04-24 221910

  4. Going back to the builder refresh the builder and go back to the background colour settings of that element.

  5. Now edit that colour pellet option that was just created and attempt to change the colour from raw to something else like black (#000000) then save. You will see on the backend it doesn’t change but it does change on the frontend and it even replicates the variable to overwrite it.


Screenshot 2024-04-24 222054
Screenshot 2024-04-24 222117

After refreshing the builder:

2 Likes

if you really want to change your ‘tp-color-accent’ color just double click on the color value in your variable manager…

@kostasntamas the point is once you have set raw input of a variable for colour pallet you can’t change it back to a normal colour picker input. As the default uses Bricks own css variable when saving a hex colour while when set raw it seems to not drop that value. I know you can change any value in the variables manager.

1 Like

Hi Perks,
Thanks so much for your report!

However, I don’t understand your report or missing something. When I follow your steps, I don’t get the result you report. Perhaps you could explain the steps again in a screencast (with words, please)?

Basically, I would agree with Kostas, though: you have defined the color in the variable manager and should change it there accordingly. But as I said, somehow I don’t quite understand what you’re getting at :thinking:

Best regards,
timmse

1 Like

Hi @timmse,
I will try to hopfully narrow it down better. I’m got great at explaining things, sorry about that.

So when you create a swatch in the colour pallet and use any css variable using the raw option. If you then try to change that by editing this new swatch by clicking the remove button for the raw input then using the hex option then save, the backend and frontend do not work right with that swatch when applied.

When I exported the colour pallet json it seemed to have hex and raw input as values so on the frontend it uses the hex option and on the backend it uses the raw option, and it doesn’t let you remove the raw input really as there is a placeholder.

Screenshot 2024-04-25 144316

I know in a normal workflow if you intend to use the variables manager you would then change the colour from there but when I was trying out the variables for the first time and just wanted to reset and try different colours for that swatch before finalising that is when I encountered this issue.

Now sure if this video is useful to you: Jam

1 Like

Hey Perks,
Thanks so much for the video!

Now I can see, understand, and replicate the issue and added it to the bug tracker :+1:

After reloading the builder, you can click “edit color” again, and the correct color applies.

1 Like