Page MenuHomePhabricator

Create visalization for borders
Closed, ResolvedPublic

Event Timeline

Related to our upcoming discussion on how to display tokens with the two levels of granularity:

Ideally, the Border page should contain two different sections:

  • (h2) Border style (which contains: border style (global tokens), and border widths and border radius (alias tokens))
  • (h2) Border colors: this section should display color swatches

Adding a suggestion here: we could improve this visualization by applying every border color to the border rather than to the background of the presenter. To make sure the border color is perceivable, that border should be 2px.

@Sarai-WMDE

Adding a suggestion here: we could improve this visualization by applying every border color to the border rather than to the background of the presenter. To make sure the border color is perceivable, that border should be 2px.

Few questions:

  • would that be for border colors only, or for all presentations of colors?
  • does "rather than to the background of the presenter" (emphasis mine) mean that the background should not be colored (how ever that would look like)?
  • if the border is in the color of the token value, how do we solve the problem of tokens holding the same color as the background of the pages (e.g. "white on white")? Relying on the box-shadow only?

@Sarai-WMDE

Adding a suggestion here: we could improve this visualization by applying every border color to the border rather than to the background of the presenter. To make sure the border color is perceivable, that border should be 2px.

Few questions:

  • would that be for border colors only, or for all presentations of colors?
  • does "rather than to the background of the presenter" (emphasis mine) mean that the background should not be colored (how ever that would look like)?
  • if the border is in the color of the token value, how do we solve the problem of tokens holding the same color as the background of the pages (e.g. "white on white")? Relying on the box-shadow only?

Popular design systems seem to do it like suggested https://www.lightningdesignsystem.com/design-tokens/#category-border-color
I guess having a white border with white background rectangle is a problem. We don't have that in the tokens so far and I'd be curious to hear if that's even possible (from a design perspective).

I guess having a white border with white background rectangle is a problem. We don't have that in the tokens so far and I'd be curious to hear if that's even possible (from a design perspective).

I was referring to the situation as seen in https://5efdb3b5f65950002286285d-pvfnemnefl.chromatic.com/?path=/docs/design-tokens-borders--page#border-color-neutral-focus

Sorry, I'm only reading these comments now. My inbox is swamped.

would that be for border colors only, or for all presentations of colors?

Borders only. It visually supports the tokens semantics

does "rather than to the background of the presenter" (emphasis mine) mean that the background should not be colored (how ever that would look like)?

I thought that the default bg color of the ColorItem in Storybook would be white, but it seems to be transparent. That transparent bg, againts the alternating gray rows in our tables, may cause the border colors to be less visible (or entirely disappear, like "border-color-neutral-quiet-hover") due to low contrast. On that basis, and to unify the appearance of these presenters, I would suggest applying a white background to this component if possible.

if the border is in the color of the token value, how do we solve the problem of tokens holding the same color as the background of the pages (e.g. "white on white")? Relying on the box-shadow only?

There's one token specifying a white background at the moment, but that is actually a mistake (I will submit a correction asap). In case a token for a white border is added in the future (could be possible), I would say that we can rely on the name and the box-shadow to correctly support the visualization of this instance. I understand the contradiction with regard to the previous point, but gray borders are already present and are more numerous (many different values).

Sorry, I'm only reading these comments now. My inbox is swamped.

would that be for border colors only, or for all presentations of colors?

Borders only. It visually supports the tokens semantics

does "rather than to the background of the presenter" (emphasis mine) mean that the background should not be colored (how ever that would look like)?

I thought that the default bg color of the ColorItem in Storybook would be white, but it seems to be transparent. That transparent bg, againts the alternating gray rows in our tables, may cause the border colors to be less visible (or entirely disappear, like "border-color-neutral-quiet-hover") due to low contrast. On that basis, and to unify the appearance of these presenters, I would suggest applying a white background to this component if possible.

if the border is in the color of the token value, how do we solve the problem of tokens holding the same color as the background of the pages (e.g. "white on white")? Relying on the box-shadow only?

There's one token specifying a white background at the moment, but that is actually a mistake (I will submit a correction asap). In case a token for a white border is added in the future (could be possible), I would say that we can rely on the name and the box-shadow to correctly support the visualization of this instance. I understand the contradiction with regard to the previous point, but gray borders are already present and are more numerous (many different values).

https://github.com/wmde/wikit/pull/61

@Sarai-WMDE Kindly take a look at the storybook linked in https://github.com/wmde/wikit/pull/61.

Looking good 😄 ✅

darthmon_wmde closed this task as Resolved.Wed, Jul 15, 1:50 PM