NO BUG: Colors only showing in builder and not in frontend

[ori]

Browser: Chrome
OS: Windows
from builder:

from frontend:

note that colours do apply if the vars colors are not being used.

css color var name is correct but the color is incorrect.

what happened is I tried to apply colour from my colour palette of I made previously and whenever I apply these colours in the builder they do not apply on the frontend.

note that after trying it with icons fill colour I tried with a heading and the result was the same.
after deleting the variable in the variable manager screen (which also has a bug - if you save with empty vars it gives a confirmation as if it saved but it will only save if vars exists meaning I cannot delete all vars)
I imported the vars again via json and via css with semicolons - result is the same.
the only thing that worked was changing the variable names and importing them again which is no solution for me.
now my desired naming is tainted and cannot be used.

[timmse]

Hi ori,
Thanks so much for your report!

Unfortunately, I can only make assumptions about the issue, but I think it’s similar to this report:

@timmse

Is it possible that your variables were saved in a color palette, but the palette itself no longer exists, and you have now defined the colors somewhere else (in the variable manager, for example)?

If so, this is because each color palette color is assigned a unique ID. This ID is also saved in the element settings to which you assigned the color. If you delete the palette, the color ID will remain in the element settings, which will probably lead to the problem.

If that’s not the case, can you give me specific steps to reproduce the problem?

Best regards,
timmse

[ori]

this does not seem to the issue described in the the thread you linked.
I reproduced this issue on 1.9.8 in an attempt to so if this version is less buggy but I experienced the same result, to reproduce:

1. create a fresh project, install bricks and bricks child theme
2. import color vars using a JSON file generated by the bricks UI( I will include the original file I used)
3. set a color from the default menu that comes when installing bricks, in my case - orange.
4. create a new color palette and a new color using one of the variables:
   
5. save in the builder, color looks fine:
   
6. go to the frontend and it looks like this:
   
   
   
   css styling from this div:
   
   as can be seen the var name is there and exists only it has the wrong value.

the JSON file I used:

{
  "variables": [
    {
      "id": "aroljr",
      "name": "spacing-small",
      "value": "2rem",
      "category": "bmulrw"
    },
    {
      "id": "bwtdal",
      "name": "spacing-medium",
      "value": "3rem",
      "category": "bmulrw"
    },
    {
      "id": "eaaxgm",
      "name": "spacing-large",
      "value": "4rem",
      "category": "bmulrw"
    },
    {
      "id": "qwosxn",
      "name": "spacing-extra-large",
      "value": "5rem",
      "category": "bmulrw"
    },
    {
      "id": "vsfkdh",
      "name": "spacing-extra-small",
      "value": "1rem",
      "category": "bmulrw"
    },
    {
      "id": "piubfr",
      "name": "icon-small",
      "value": "1rem",
      "category": "vcaoht"
    },
    {
      "id": "rboidx",
      "name": "icon-small-plus",
      "value": "1.5rem",
      "category": "vcaoht"
    },
    {
      "id": "oirzys",
      "name": "icon-medium",
      "value": "2rem",
      "category": "vcaoht"
    },
    {
      "id": "mfdlqw",
      "name": "icon-medium-plus",
      "value": "2.5rem",
      "category": "vcaoht"
    },
    {
      "id": "dqmfsv",
      "name": "icon-large",
      "value": "3rem",
      "category": "vcaoht"
    },
    {
      "id": "jpvxbl",
      "name": "icon-large-plus",
      "value": "3.5rem",
      "category": "vcaoht"
    },
    {
      "id": "vcmrsm",
      "name": "icon-very-large",
      "value": "4rem",
      "category": "vcaoht"
    },
    {
      "name": "text-xs",
      "value": "clamp(0.79rem, -0.01vi + 0.79rem, 0.78rem)",
      "id": "rnfdzs",
      "category": "npjbwj"
    },
    {
      "name": "text-s",
      "value": "clamp(0.89rem, 0.08vi + 0.87rem, 0.94rem)",
      "id": "ukajgm",
      "category": "npjbwj"
    },
    {
      "name": "text-m",
      "value": "clamp(1rem, 0.21vi + 0.96rem, 1.13rem)",
      "id": "qgumpc",
      "category": "npjbwj"
    },
    {
      "name": "text-l",
      "value": "clamp(1.13rem, 0.37vi + 1.05rem, 1.35rem)",
      "id": "gswsdh",
      "category": "npjbwj"
    },
    {
      "name": "text-xl",
      "value": "clamp(1.27rem, 0.59vi + 1.15rem, 1.62rem)",
      "id": "hxbvxa",
      "category": "npjbwj"
    },
    {
      "name": "text-xxl",
      "value": "clamp(1.42rem, 0.87vi + 1.25rem, 1.94rem)",
      "id": "tsxcqy",
      "category": "npjbwj"
    },
    {
      "name": "heading-6",
      "value": "clamp(0.78rem, -0.01vi + 0.78rem, 0.77rem)",
      "id": "hjuaxq",
      "category": "jaqixe"
    },
    {
      "name": "heading-5",
      "value": "clamp(0.94rem, 0.16vi + 0.91rem, 1.03rem)",
      "id": "zxwtbp",
      "category": "jaqixe"
    },
    {
      "name": "heading-4",
      "value": "clamp(1.13rem, 0.42vi + 1.04rem, 1.38rem)",
      "id": "poxidt",
      "category": "jaqixe"
    },
    {
      "name": "heading-3",
      "value": "clamp(1.35rem, 0.8vi + 1.19rem, 1.83rem)",
      "id": "ogdyln",
      "category": "jaqixe"
    },
    {
      "name": "heading-2",
      "value": "clamp(1.62rem, 1.37vi + 1.35rem, 2.44rem)",
      "id": "eibkee",
      "category": "jaqixe"
    },
    {
      "name": "heading-1",
      "value": "clamp(1.94rem, 2.19vi + 1.51rem, 3.26rem)",
      "id": "ssrgpy",
      "category": "jaqixe"
    },
    {
      "name": "heading-title",
      "value": "clamp(2.33rem, 3.35vi + 1.66rem, 4.34rem)",
      "id": "ksmypg",
      "category": "jaqixe"
    },
    {
      "name": "primary-color-main",
      "value": "#5399D1",
      "id": "shlchc",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-ultra-light",
      "value": "#d7e7f4",
      "id": "fyajov",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-light",
      "value": "#afcfe9",
      "id": "xydyun",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-medium",
      "value": "#4a93cf",
      "id": "cbqwmh",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-dark",
      "value": "#1b4365",
      "id": "dslypb",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-ultra-dark",
      "value": "#0b1b28",
      "id": "mjmyco",
      "category": "rrrfyb"
    },
    {
      "name": "primary-color-hover",
      "value": "#82bceb",
      "id": "drdodd",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color",
      "value": "#009183",
      "id": "tczwqv",
      "category": "rrrfyb"
    },
    {
      "name": "third-color",
      "value": "#00554D",
      "id": "vcsvlj",
      "category": "rrrfyb"
    },
    {
      "name": "fourth-color",
      "value": "#0A211F",
      "id": "djzquu",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-ultra-light",
      "value": "#ccfffa",
      "id": "mqyrvz",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-light",
      "value": "#99fff5",
      "id": "lwkvet",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-medium",
      "value": "#19ffe8",
      "id": "emmkpb",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-dark",
      "value": "#007f73",
      "id": "mdnwvb",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-ultra-dark",
      "value": "#00332e",
      "id": "abhedp",
      "category": "rrrfyb"
    },
    {
      "name": "secondary-color-hover",
      "value": "#00ccb5",
      "id": "ctbduu",
      "category": "rrrfyb"
    },
    {
      "id": "kqqkub",
      "name": "base-color-white",
      "value": "#FFFFFF",
      "category": "rrrfyb"
    },
    {
      "id": "uulqtq",
      "name": "base-color-black",
      "value": "#000000",
      "category": "rrrfyb"
    }
  ],
  "categories": [
    {
      "id": "bmulrw",
      "name": "spacing"
    },
    {
      "id": "vcaoht",
      "name": "svg sizing"
    },
    {
      "id": "npjbwj",
      "name": "text-typography"
    },
    {
      "id": "jaqixe",
      "name": "heading-typography"
    },
    {
      "id": "rrrfyb",
      "name": "colors"
    }
  ]
}```

[timmse]

Hey ori,
Thanks a million for the steps!

The problem arises from steps 4 and 5. Your variable in the variable manager already has a value (blue/#5399D1). To add it to the color palette, enter the variable name in the raw field and press save. I have summarized this here again as a video: CleanShot 2024-06-26 at 10.47.12 · CleanShot Cloud

What you do is assign a second value to your variable by filling the HEX field (screenshot 4), or picking a color (yellow/#ffc107), and then saving it in the palette. It now has two values: your variable value from the variable manager (blue), plus the hex value (yellow).

The color (blue or yellow) depends on which variable is output last. This is why you get different results within the palette, on the canvas, and in the front end. Basically, the same color should be displayed everywhere—even if it is the “wrong” one (yellow). We have already fixed this problem in our dev version.

However, this does not prevent you from assigning two values to your variable. We will soon publish a detailed article in the Academy on color palettes, explaining the color palette in as much detail as possible.

[ori]

there’s an additional issue for me. bricks state got dirty, I deleted all the colors from the variable manager in bricks builder, moved everything to a css file in the child theme yet still bricks overrides my color that is assigned with a class - not the bricks color palette system
At this point, I can’t even make bricks forget my colors - I deleted the whole palette - its not the problem
the problem is for some reason it overrides the color variable values with old values.

I would like to ask to set a meeting in discord or w/e platform so I can showcase my problem and fix it asap, I have clients waiting and i’m stuck trying to debug bricks…

edit:
after refreshing bricks, I found the color variables were not deleted even though it showed me in the UI that it did the first time even when reopening.
now I successfully deleted the colors and can manage my colors in a css file.

[timmse]

@ori

I found the color variables were not deleted

Yes, you can’t delete all variables or classes. This is a security measure to prevent the unintentional deletion of all classes or variables. You must keep at least one to be able to remove the others. We are working on a solution.

[BGdev]

This issue is still happening! I cannot get back my --primary color no matter how many methods I try!
This happened after deleting all global classes with Advanced Themer (I wanted to start fresh)… the basic text element was still using --primary color, now it is locked to #000000 and NOTHING I do in the UI will let me change this.
I really need a fix for this asap, or point me to where this is in the DB, PLEASE.

[timmse]

Hi Bryant,
Without a live link, I can’t tell you where and how you defined the color variable.

[maximebeguin]

It’s probably because you activated the dark mode in theme settings → global colors in AT without assigning a dark variation to your color palette. You can either deactivate the dark mode in the settings if you don’t plan to implement a dark mode on your site, or start configuring your dark variations using the global color manager of AT.

[BGdev]

Sorry, this is local dev. Trying to create various blueprints.

[BGdev]

Hey Max, thanks for taking a moment to respond. I’ve since done a WP Reset, luckily this wasn’t prod or even staging site… I was just setting up some various blueprints and setting up variables when this happened.
I will definitely keep in mind what you explained here. When I inspected the text that was --primary while in light mod on the front-end to see where / how #000 was set, I do remember seeing Light & Dark, but I didn’t focus on that. I wish I had looked closer.

Sidenote… I did in fact activate dark mode in the settings. But having NOT set a dark variation for --primary, would cause --primary in light mode to default to AND be locked to #000?