Design Token Request: colorBackgroundWeak

[mannehedlund]

Hello,

I'm using a Box to make a line (not using Separator component for unrelated issues). I'm currently using colorBackgroundStronger token for this (gray-50), whereas my design calls for gray-30 such as colorBorderWeak. Something like a colorBackgroundWeak design token would be perfect -- perhaps others would benefit from this as well.

Here is my desired result (no background color design token for it).

And here is my current result.

[shleewhite]

Hi @mannehedlund! Does the toke colorBackgroundStrong work for your use case? It is gray-20.

[shleewhite]

Following up from office hours today, I remember you saying that you couldn’t use <Separator> because it was the wrong color. Looking at the Separator code, it seems like it does use colorBorderWeak which is gray-30 .

If that doesn't work, we would actually prefer you to use <Box> to create your own separator like this (should also fix the vertical alignment problem):

<Box
  as="hr"
  aria-orientation="horizontal"
  margin="space0"
  borderColor="colorBorderWeak" //or any other border token
  borderStyle="solid"
  borderWidth="borderWidth0"
  borderBottomWidth="borderWidth10"
  width="auto"
/>

Thanks for coming to talk with us today, please let me know if you have any additional questions!

[mannehedlund]

Yeah, Paste Separator actually worked for achieving the above desired result. However, I will also need identical separators that are red, which is where the Paste Separator no longer works, as the border is hard-coded. I should've clarified that hard-coded color didn't work -- my bad. The code you gave is essentially what I used, except the height=1px instead of borderBottom. The 1px off center is still an issue, but I can probably find a workaround.

Does this mean that you will not be adding a custom color option to the Separator component?

[shleewhite]

Ahhh, I see. Yeah, we talked about it further after office hours and decided to hold off because we are not sure it is appropriate for all use cases.

For the text being 1px off center, can you send a screenshot of what it looks like?

[mannehedlund]

You know what, you're right, it looks the same. Did not consider box-sizing: border-box which your Box component is. It is center and the right color now using the border. Thanks for the help! :)

[shleewhite]

Woo! Glad we could come up with a solution!