Semantic Border-radius tokens

[Febakke]

### Tasks
- [ ] https://github.com/digdir/designsystemet/issues/2476
- [ ] https://github.com/digdir/designsystemet/issues/2455

We want better semantic border-radius tokens. Example: checkbox should always be square

Started doing some research on how we can solve this is Figma. Token Studio supports a set of math functions their might be a way to set max value to a token. This would help us in the short term. I have reach out to the Token Studio Slack for suggestions.

If we develop our own plug in, the logic to handle this must be solved in that plug in.

Success

We are able to use a min/max function in Token Studio and can create tokens with a max border radius value.

This means we can set a token on border radius for checkboxes that will have their square shape even though you set the base value very high.

Heres an illustration of what we want to create:

Theming support

• I moved base radius out of primitives/globals and into themes/theme You can now change between themes and have different border radius.
• Right now the ceiling is calculated in each theme set. ~~But I think we can move it into semantic/style Less variables to think about.~~
  • Figma variables do not support calculations. That means we need to have the ceiling to be inside every theme set 🙃
• Im still not sure about semantic naming. Is it enough with sm- md- lg or should the behavior be built into the name. Something like sm-up-to-4 But its not pretty 😄
• Expanded up to 3xl(ceiling at 32)
• How do we handle full border radius. Should the largest token go all the way up to 9999 and do we need a static token that is always 9999

Semantic names

We want to give you a size and what max border-radius you will get from this token. So the suggested token name will be lg-12 If your base border-radius goes beyond 12, this token will be 12.

Ful list of suggested tokens

As you can see there is also a static full token. This will alway give you a circle. Made for components that should always have a circular form.

Tasks

• [x] Build tokens into theme collections
• [x] Create semantic names
• [x] Expand with more sizes (up too 32)
• [ ] Discuss with developers if this is something we want to implement If yes
• [ ] Define and document rules for tokens. (What are the usecases for each one)
• [ ] Update Figma components to use correct new tokens