== 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.
{F35477989}
| [[ https://www.figma.com/proto/DOzfZ59BHKVUG0WQAsSId4/Active-Normal-buttons---T303384?node-id=1222%3A2911&scaling=min-zoom&page-id=1222%3A2005&starting-point-node-id=1222%3A2911 | Figma prototype to check the interaction ]] | [[ https://www.figma.com/file/DOzfZ59BHKVUG0WQAsSId4/Active-Normal-buttons---T303384?node-id=114%3A331 | Figma spec sheet with new value indications ]] |
=== 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?
---
=== Acceptance criteria (or Done)
**Design**
[-] Redesign normal and quiet buttons hover and active states to be consistent
[] Publish updated buttons in our [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/?node-id=4903%3A52965 | Codex library ]] Figma file
**Code**
[] **Normal buttons:**
[] Destructive: Update hover state with `background-color-destructive--subtle` #FFE7E6
[] **Quiet buttons:**
[] Progressive:
[] Hover: update background with combination of `background-color-progressive--subtle` (#EAF3FF) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-progressive--subtle` (#EAF3FF) + `opacity-medium` (0.65) and text/icon with `color-progressive--active`
[] Destructive:
[] Hover: update background with combination of `background-color-destructive--subtle` (#FFE7E6) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-destructive--subtle` (#FFE7E6) + `opacity-medium` (0.65) and text/icon with `color-destructive--active`
[] Neutral:
[] Hover: update background with combination of `background-color-interactive` (#EAECF0) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-interactive` (#EAECF0) + `opacity-medium` (0.65) and **delete border** from the active button