Update design-tokens & build script to support new border-radius tokens

[mimarz]

No description provided.

[Febakke]

New Tokens on components

Small

• Avatar (Square)
• Checkbox
• Tag

Medium

• Alert
• Accordion
• Dropdown
• Popover
• Text area
• Chip with checkbox
• Textfield
• Select
• Combobox
  • Hover on elements inside list has small
• Table with border

Large

• Card
• Error summary
• Sceleton (rectangle)
• Modal

Default

• Button
• Search
• Tooltip
• Textfield

Full

• Avatar (Circle)
• Badge
• Chip
• Helptext ("?" circle)
• Radio (circle)
• Switch
• Skeleton circle and text

[Febakke]

After meeting with @Thunear

Moved the default scale down one step
medium 12 -> 8
large 24-> 20

Text-field now use medium instead of default

[unekinn]

@Febakke some questions:

Components not mentioned in the comment above

Should these be unchanged?

• Chip with checkbox: large
• Helptext: full
• Radio: hardcoded to 50%
• Select: medium
• Switch: full
• Table with border: medium
• Tabs: full
• Tag: small
• Toggle group: medium
• Tooltip: default

Other questions

• Shouldn't all form elements have the same radius? Now Combobox had default radius, while Select, Textfield and TextArea have medium
• Search and Textfield have different radius, is this intentional?

[unekinn]

Fairly certain "Chip with checkbox" needs to have medium radius for the chip and small radius for the checkbox, so I'm implementing that.

[Febakke]

@unekinn
I updated the comment over here with the components that where missing. But ill have a summary here as well

Some comments

• Chip with checkbox: I agree, it should have medium border-radius as you pointed out
• Helptext, I believe you are talking about the iconbutton? Yes it should be full
• Radio, Im not sure what 50% means, but it should always be a circle and have full border radius
• Select should have medium
  • After a discussion with @Thunear we agreed that textfield should not become round as I first wrote. The reason is that it will not look right in form context. (How it aligns with the label) I think all the "form" fields should have medium border-radius. Search is a different story and can and often has a circular look. So it should use default.
• Switch, Always full
• Table with border. If there are noe border on the table there is no point in having a border-radius. In Figma this is something you have to set up yourself. But if we need a default value i would use medium
• Tabs, there are no border around tabs. Where is this applied?
• Tag should always keep their square shape. small
• Toggle group, Ill write more about this further down 👇 But I think toggle group can be full
• Tooltip can be circular. full

Logic for nicer components

I have seen an issue with components that has elements inside other elements where radius is applied to both. When design components like this you often apply more radius to the outer element. Lets use toggle groups as an example.

Here both buttonand the togglegroup border use 8 border-radius. It looks kind of weird.

In this example we use 8 for button and 12 for the outside border. If you add the distance from the inner element to the border of the outside and add them together you get the correct border-radius. I havent though of this issue before and this is not the worst example. This will also cause "design" issues with our focus indicator.

The best case would be to handle this with tokens in some way. That means we could replicate correctly in Figma, but i fear this might be to complex.

[unekinn]

Tabs, there are no border around tabs. Where is this applied?

The radius is on the line under current tab and hovered tabs. As detailed in Slack this is incorrectly implemented currently, because of a typo(?), so there is currently no rounding in the React component.

Tooltip can be circular. full

Like this?

Toggle group, Ill write more about this further down 👇 But I think toggle group can be full

Since your example is using the button (which has default radius) as reference, I assume it should be border-radius.default + spacing.1 and not full?

[unekinn]

Someone also needs to decide what tokens to use for these values in storefront, as they don't exist after these border-radius changes

[Febakke]

Tabs, there are no border around tabs. Where is this applied?

The radius is on the line under current tab and hovered tabs. As detailed in Slack this is incorrectly implemented currently, because of a typo(?), so there is currently no rounding in the React component.

Tooltip can be circular. full

Like this?

Toggle group, Ill write more about this further down 👇 But I think toggle group can be full

Since your example is using the button (which has default radius) as reference, I assume it should be border-radius.default + spacing.1 and not full?

I think tooltip can be full yes, are there any issues with doing this?

Togglegroup
We might have an issue here, I see three ways the border-radius can go

1. border-radius.default + spacing.1 In most cases this will be correct
2. border-radius.default=0 now we have an issue. If border radius is set to 0 on button then it should be 0 on the whole togglegroup
3. border-radius.default=9999 Is there a problem with border-radius being set to 10 003? 😄

[Febakke]

Someone also needs to decide what tokens to use for these values in storefront, as they don't exist after these border-radius changes

Im not sure what elements they are referencing, but I would guess that they should be set to large