Design Tokens: Update and add new semantic tokens for borders and dividers

# Context

We (@americanrefugee and @janogarcia) have been iterating lately on how we apply color to components and containers’ borders and the more generic dividers, for better visual hierarchy and underlying logic.

- 800: interactive primary (text fields, radio, checkbox, toggle, slider... accessible border for controls that rely exclusively on its shape/outline)
- 500: interactive secondary (secondary buttons, search box, composer)
- 400: interactive tertiary (quick actions, and other overlaid buttons such as the editable avatar)
- 400: dividers primary (default divider, can also be used for generic containers up to subtle secondary background)
- 300: dividers secondary (areas with high-density of dividers such as lists, can also be as a thin divider/background when nested in secondary background containers)

# Platform

All.

```[tasklist]
# Design phase
- [ ] Tokens are added to Tokens Studio
- [ ] Tokens are published to Compound Styles Figma library
- [ ] Tokens are made available to Themer if necessary
- [ ] Tokens shareout for designers
```

```[tasklist]
# Development phase
- [ ] Tokens are generated for the target platforms
```