How to override the background color of a box?

Developer Support
1

How would I go about creating a color on this free box via the following code, where TokenDocumentation is a component in my code base generated by plasmic CLI command sync.

As you can see the TokenDocumentation Components layers show color with no value

On my page, I have all other data values coming in, just not color fill.

Any tips?

<Documentation
            {...props}
            render={(data) => {
                console.log(data)
                return data.map(
                    ({ value, color, tokenName, variant, description }: any, i: any) => {
                        return (
                            <div key={`token-docs-${i}`} style={{ padding: 8 }}>
                                 <TokenDocumentation
                                    tokenName={tokenName}
                                    textValue={value}
                                    description={description}
                                    color={color}
                                />
                            </div>
                        )
                    }
                )
            }}
        />

image.png

image.png

image.png

2

Hey @political_magpie! If you want your box to be colored with the color in color I believe you need to add CSS background-color into style attr override, like:

<TokenDocumentation
  ...
  color={{ props: { style: `background-color: ${color}` } }}
/>
3

Doesn’t appear to work.

4

I did a sync again and now see:

image.png

5

Should this be styles not style? i.e:

color={{ props: { styles: `background: ${color}` } }}
6

Even this red value doesn’t work:

color={{ props: { styles: `background-color: red` } }}
7

Sorry, it should be:

<TokenDocumentation
  ...
  color={{ props: { style: { backgroundColor: color } } }}
/>
8

OK you got it!
I just needed to change color to value

color={{ props: { style: { backgroundColor: value } } }}

Now see:

image.png

9

Thx heaps

10

BTY These colors are coming in via Figma (FigmaTokens). Super cool.