Background goal
Message border colors should use the darkest tone in T322428 in order to increase the contrast of the message on different background colors.
Also green700 color is currently #14866d and it should be replaced with #096450 in order to follow the same darkness level as in the Red and Yellow scale.
The following tokens need to be created or updated:
Option tokens:
Green:
- Rename current “green700” to green600
- Rename current “green600” to green500 (we won't use this option token as decision token at the moment, so we don't need to create it now)
- Added new green700 #096450
Decision tokens:
Message border colors will use a darker tone to increase the contrast of the border.
- border-color-success will use the new green700 #096450
- border-color-error will use red700 #b32424
- border-color-warning will use yellow700 #ac6600
- border-color-notice will use gray600 #54595d (notice will use a lighter tone to avoid using a black border for a notice message)
NOTE: We will only create as option tokens the ones that will be used as decisions. In this case, green500 won't be created as option tokens at the moment and it will be only used in design as primitive colors for other non coded elements such as illustrations.
Design spec
Acceptance criteria (or Done)
Design:
- Create new version of the colors Figma spec sheet and add it in the task
- Update and publish the colors in the Design Tokens library
Code:
- Update tokens in Codex
- Update variables in WikimediaUI-Base
- Release new WikimediaUI Base version and pull-through in OOUI