# Thoughts on tokens

In Figma Token Architecture examples I'm confused about the examples:

The Alert has an `Icon Information Primary` for both icons, I don't get why this isn't just an `information` colour that can then be used as `text-information` or `bg-information` for example? Also the `Text On Information` suggests that the text colour is unique to being on an information related background? That seems very specific too when it could just be set to either the default text colour or one of the other base colours. Same issue with `border information primary` why is this not just `information` or `border information`?

Similar questions with the Card example around the `Text On Primary` is that a new token? Can't it just be one of the base colours or always white for example? Could we have inverted base colours that will work with anything that is on a primary, secondary etc. colour? `primary-inverted` which could be used for anything not just text? (I realise inverted implies an inverse colour transformation but couldn't think of a better term)

Just realised there is a set of "Text On..." and a set of "Icon On..." variations, I think this is over-engineering the tokens personally

Button with a primary background colour (which you could say is "Surface Primary" although I would prefer just "Primary" and set it as a background, but is in fact called "Action Primary Default") would have text set to "Text On Primary" or white, in any other system you just set text to "White". And seeing as this is an "Action Primary Default" I would have thought that it should actually be "Text On Action Primary" which is even more of a mouthful.

I still don't understand why `interactive` has an error state, shouldn't this just be the default error states? Also what exactly does interactive cover, could be confusing because not every interactive element will use this token?

Action primary/secondary/tertiary I'm still totally confused about... if you have a button that you want to be the main action on the page do we really need a specific token to say that it is going to have the same colour as the base primary colour? Surely a set of button examples for primary/secondary and tertiary would suffice? eg. Inspect button in Figma example, background = primary, text = white
Another approach would just to use a reference so if you call something `Action Primary` it means use `Primary` color, there should never be a case where there are multiple "Primary" colours.

Why don't the base colours have the states setup so there is no repetition, primary-subdued, primary-hover etc. then you don't need action-primary-subdued just primary-subdued?

Surface neutral... I think it would be good just to have a neutral palette to reference then it doesn't have to be used as a surface it can be used in UI components such as input borders etc.?

No black and white - only surface and on surface, what about text? `text-surface` doesn't make sense

Touched on this before but there should never be multiple colour variations for a defined token concept such as `Primary`, `Secondary` etc.
If `Icon Primary` *could* be a different colour to the Base color `Primary` then it should be named something else, same goes for `Border Primary`, `Text Primary`, `Surface Primary` and `Action Primary`.

If each brand can have a set of unique design tokens, how will developers be able to build a multi-brand application. Components won't scale if there is any conditional logic needed to interpret different token names.

---

## A dev take on the examples in Figma

### Alert

| Name | Token |
| --- | --- |
| Background | bg-information-subdued |
| Icon info | text-information |
| Heading | text-black |
| Paragraph | text-black |
| Icon close | text-information |
| bottom border | border-information |

`bg-`, `text-` and `border-` classes generated from the base colours `Information Default`, `Information Subdued` and `Black`

#### current suggested implementation in Figma:

| Name | Token |
| --- | --- |
| Background | Surface Information Subdued |
| Icon info | Icon Information Primary |
| Heading | Text On Information |
| Paragraph | Text Default |
| Icon close | Icon Information Primary |
| bottom border | Border Information Primary |

---

### Card

| Name | Token |
| --- | --- |
| Background | bg-white |
| Icon | text-primary |
| Heading | text-primary |
| Paragraph | text-black |
| Button 1 | { background colour: bg-primary, text colour: text-white } |
| Button 2 | { background colour: bg-white, text colour: text-primary, border colour: border-primary } |
| bottom border | border-primary |

`bg-`, `text-` and `border-` classes generated from the base colours `primary`, `white` and `black`

#### current suggested implementation in Figma:

| Name | Token |
| --- | --- |
| Background | Surface Default |
| Icon | Icon Primary Default |
| Heading | Text Primary Default |
| Paragraph | Text Default |
| Button 1 | { background colour: Action Primary Default, text colour: Text On Primary } |
| Button 2 | { background colour: , text colour: Text Primary Default, border colour: Border Primary Default } |
| bottom border | Border Primary Default |

Still think we need a gray palette for form elements

### Input

| Name | Token |
| --- | --- |
| border colour | border-gray-2 |
| background colour | bg-white |
| border radius | border-radius-1 |

Would be nice if there was a shared method of automating colour variations (like colorjs) and could be tweaked per brand if not accessible