Setting component to transparent in theme.json file

General
, ,
1

I’m trying to set this header to be a bit transparent.

header I want to change.png
header I want to change.png1056×263 31 KB

This is the JSON file I want to use to make the header transparent.

{
    "base": {
        "palette": {
            "app-background": "#daf5f3"
        },
    "transparency":{
      "transparent-1": 0.3
    }
    },
    "components": {
        "app-shell": {
            "nav": {
                "background-color": "#7c3f00"
            },
        
        "header":{"transparent":"0.3"}
        },
        "card":{"border-radius":"92rem"}
    }
}

The error I get states header has no property transparent.

This record has 1 error(s) in 1 place(s) .
JSON.components['app-shell'].header should NOT have additional properties - transparency

Below are some of the options I have tried, they all give me the same error, that header does not have the property i’m trying to use.


"header":{"transparency":"0.3"}

"header":{"transparent":"0.3"}

"header":{"transparent-1"}
    
"header":{"base.transparency.transparent-1":0.3}

"header":{"Transparency":"base.transparency.transparent-1"}

"header":{"transparency":"base.transparency.transparent-1"}

The documentation doesn’t really show a use case for transparency for a component.

What should i do to make the header transparent with my theme.JSON file?

What more information should I provide to help answer the question?

2

@JackF17108719 please log a support INC if you need further help with this issue if it is not working as documented.

3

@JackF17108719 - Try adding using branding color as below.

“brand-primary”:{“transparency”:“0.3”}

Thank you.