== Background/Goal
There are some inconsistencies in our current Normal and Quiet Codex buttons on hover and active states:
===== Normal buttons:
- Destructive active uses white background while progressive and neutral use subtle flavour color backgrounds (normal-destructive should use `background-color-destructive--subtle` instead)
{F35477799}
===== Quiet buttons:
- Quiet neutral button uses subtle background with border while progressive and destructive use solid dark background (with white text).
{F35477826}
== Design proposal
The proposal is to align the normal and quiet buttons hover and active states to be consistent.
{F57746129}
| [[ https://www.figma.com/design/HBPuPFF33X9OkvXWyBeu2A/design-review-%5Bderek%5D?node-id=775-3328&t=qJOB0rgqU30xxpEB-1 | Figma ]] |
=== Open questions
- Currently the quiet-normal active button uses border. In the design specs we are proposing to delete the border from quiet buttons since the nature of these buttons is to be quiet and the text color already communicates the state change. Do we need the border/outline in the active quiet buttons for some reasons?
- Per design exploration and review we will remove the border in this instance.
---
=== Acceptance criteria (or Done)
**Design**
[x] Redesign normal and quiet buttons hover and active states to be consistent
[x] Update buttons in our [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/?node-id=4903%3A52965 | Codex library ]] Figma file
**Code**
[x] Update styles in code
==== Expected changes
**wikimedia-ui.json**
| Token name | new, update, or remove? | before | after | additional notes |
| `blend-mode.multiply` | new | - | multiply | added for use in quiet buttons hover/active |
| `blend-mode.screen` | new | - | screen | added for use in quiet buttons hover/active |
**application.json**
| Token name | new, update, or remove? | before | after | additional notes |
| `background-color-progressive-subtle--hover` | new | - | blue100 | |
| `background-color-progressive-subtle--active` | new | - | blue200 | |
| `background-color-destructive-subtle--hover` | new | - | red100 | |
| `background-color-destructive-subtle--active` | new | - | red200 | |
| `border-color-progressive` | updated | blue700 | blue500 | |
| `border-color-destructive` | updated | red700 | red500 | |
| `blend-mode-color-blend` | new | - | blend-mode.multiply | |
**dark.json**
| Token name | new, update, or remove? | before | after | additional notes |
| `background-color-progressive-subtle` | updated | blue900 | blue1000 | updated to ensure interactive states work as intended and are accessible, and create consistency and cohesion with other status subtle backgrounds |
| `background-color-progressive-subtle--hover` | new | - | blue900 | |
| `background-color-progressive-subtle--active` | new | - | blue800 | |
| `background-color-destructive-subtle` | updated | red900 | red1000 | updated to ensure interactive states work as intended and are accessible, and create consistency and cohesion with other status subtle backgrounds |
| `background-color-destructive-subtle--hover` | new | - | red900 | |
| `background-color-destructive-subtle--active` | new | - | red800 | |
| `background-color-error-subtle` | updated | red900 | red1000 | updated to ensure interactive states work as intended and are accessible, and create consistency and cohesion with other status subtle backgrounds, especially with error-subtle |
| `background-color-warning-subtle` | updated | yellow900 | yellow1000 | updated to ensure interactive states work as intended and are accessible, and create consistency and cohesion with other status subtle backgrounds |
| `background-color-success-subtle` | updated | green900 | green1000 | updated to ensure interactive states work as intended and are accessible, and create consistency and cohesion with other status subtle backgrounds |
| `border-color-progressive--hover` | new | - | blue400 | |
| `border-color-progressive--active` | new | - | blue300 | |
| `border-color-destructive--hover` | new | - | red400 | |
| `border-color-destructive--active` | new | - | red300 | |
| `border-color-interactive--hover` | updated | gray300 | gray400 | updated to match intended styles for buttons, and create more consistency with interactions in light mode |
| `border-color-interactive--active` | updated | gray200 | gray300 | updated to match intended styles for buttons, and create more consistency with interactions in light mode |
| `border-color-error--hover` | updated | red300 | red400 | updated to match intended destructive styles for buttons, and create more consistency with interactions in light mode |
| `border-color-error--active` | updated | red200 | red300 | updated to match intended destructive styles for buttons, and create more consistency with interactions in light mode |
| `mix-blend-mode-color-blend` | new | - | blend-mode.screen | |