Background
Currently in Codex, we have @color- tokens for statuses including error, warning, success, and notice. These tokens are sometimes applied to text and sometimes graphical elements, i.e. icons. We need to separate these out to keep our current @color- tokens for status to be used in text, and new tokens @color-[blank]-[status] for use with graphical elements, mainly icons.
Open questions
- What should we replace "blank" with for these new tokens?
- "graphic"
- "icon"
- "nontext"
- something else?
Decision
We will use color-icon-[status] for the new application tokens name since it is the most explicit and clear for its intended use.
Acceptance criteria
- Adjust all option tokens in the 500 level to ensure accessibility on all possible backgrounds
- Add in new status application tokens in code
- Add in new status application tokens in Figma
- Reconcile/adjust any related tokens to match the updates to application tokens (i.e. background and border error tokens)
Expected changes
Application.json
| Token name | new, update, or remove? | before | after | additional notes |
| background-color-error | update | red600 | red500 | |
| background-color-error-hover | update | red500 | red600 | |
| background-color-error-active | update | red800 | red700 | |
| color-warning | update | yellow300 | yellow700 | remove token comment |
| color-success | update | green700 | green700 | same value; remove token comment |
| color-notice | update | gray900 | gray700 | |
| color-icon-error | new | red500 | ||
| color-icon-warning | new | yellow500 | ||
| color-icon-success | new | green500 | ||
| color-icon-notice | new | gray500 | ||
| border-color-error | update | red800 | red500 | |
| border-color-error-hover | update | red500 | red600 | |
| border-color-warning | update | yellow600 | yellow500 | |
| border-color-success | update | green800 | green500 | |
| border-color-notice | update | gray600 | gray500 | |
Dark.json
| Token name | new, update, or remove? | before | after | additional notes |
| background-color-error | remove | red500 | ||
| background-color-error-hover | remove | red400 | ||
| background-color-error-active | remove | red300 | ||
| color-warning | update | yellow200 | yellow400 | |
| color-notice | update | gray50 | gray400 | |
| border-color-error | remove | red500 | ||
| border-color-error-hover | remove | red400 | ||
| border-color-warning | remove | yellow200 | ||
| border-color-success | remove | green400 | ||
| border-color-notice | remove | gray300 | ||
Wikimedia-ui.json
| Token name | new, update, or remove? | before | after | additional notes |
| red500 | update | #fc493b | #f54739 | |
| orange500 | update | #d96c27 | #d46926 | |
| yellow500 | update | #b0832b | #ab7f2a | |
| lime500 | update | #269f4b | #259948 | |
| green500 | update | #099d7c | #099979 | |
| blue500 | update | #6b8edf | #6485d1 | |
| purple500 | update | #9182c2 | #8d7ebd | |
| pink500 | update | #b976a1 | #b5739e | |
| maroon500 | update | #ba7a78 | #b57775 |