## Background
{F35706674}
- **Description:** current warning message `#fc3` color is not contrasted enough for both border and icon. We should update it or use other more contrast yellow so the icon is at least readable. We should implement the same systematic solution for all our messages (error, success, warning and notice)
- **History:** //describe or link to prior discussions related to this component//
- **Known use case(s):** in almost all the cases the warning message (and rest of states) appears on white background but in some cases it could appear on light gray or blue backgrounds.
- **Considerations:** we need all message states to be contrasted enough. Also we should follow the DSG if we finally redesign the warning or the rest of statesmessage component.
### User stories
//add at least one user story//- As a user I need the message box to be visible enough.
- As a user I need the feedback icon in the message to be visible enough.
### Previous implementations
- **Codex demo:** message component was created in Codex in T284843 in this [[ https://doc.wikimedia.org/codex/main/components/demos/message.html | demo page ]]
- **Design style guide:** message component was defined in the [[ https://design.wikimedia.org/style-guide/components/messages.html | design style guide ]]
- **OOUI:** you can check the [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#:~:text=for%20label%20above-,MessageWidget,-(type%3A%20%27notice%27) | OOUI demo ]]
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
| [[ https://www.figma.com/file/ZZ2EQjczUFw8afnOroiIxq/Message-component---T284843?node-id=1439%3A7081&viewport=146%2C63%2C0.15 | Component spec sheet ]] |
### Open questions
// Add here the questions to be answered in order to design and implement the component //
### Possible solutions
Some explorations to improve the warning (and the rest of message states) have been created in [[ https://www.figma.com/file/ZZ2EQjczUFw8afnOroiIxq/Message-component---T284843?node-id=1407%3A6716&viewport=623%2C388%2C0.24 | this Figma file ]]. The ones more aligned with the DSG are the following:
| {F35706679} | {F35706680} | {F35706681} |
| **Option1**: use `#ac6600` for border and icon colors | **Option2**: use a new yellow color (e.g. `#edab00`) although it's not enough contrast (2.02:1) | **Option3**: use `#ac6600` for border and the new `#edab00` for the icon |
NOTE: to get at least 3.1. contrast with yellow we should use `#bc8700` but it's too dark (brown).
{F35706689}
{F35706690}
### Acceptance criteria (or Done)
**Design**
[] Design the Figma spec sheet-] Design the new tokens structure in T322833
[-] Update the [[ https://www.figma.com/file/ZZ2EQjczUFw8afnOroiIxq/Message-component---T284843?node-id=114%3A331&viewport=146%2C63%2C0.15 | Message spec sheet ]] and add it in this task
[] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]] (if needed)
**Code**
[] Update the componenttokens for message colors in Codex (if needed)T322833
[] Update messages in Codex
[] Update the componentmessages in OOUI (if needed)