== Background
As a result of {T341487} we found that many interactive styles across components, mainly form elements, were not utilizing `interactive` tokens as intended. These tokens should be uniformly used across similar interactive components.
=== Decisions
- We should add new `interactive` tokens where they might be missing to make a complete interaction through all potential states of a component, including `hover` and `active`.
- We will focus mainly on form elements in this task, with the addition of Card as it primarily uses interactive border tokens, similarly to form elements.
-- Card should keep it's lighter border color by default, then utilize interactive tokens when interacting. This is an intentional exception since the darker border on cards is not needed by default since there will always be content within a card.
- We should ensure that `error` states match the same interactive token patterns where possible.
- We will not address `progressive` tokens in this task.
- We will use this update as an opportunity to update further styles, such as the background color of binary inputs to match the way nonbinary inputs are treated.
- We should aim to create as much consistency and cohesion between all elements affected in this task.
=== Considerations
- The patch for this task does include `border-color-interactive--active` in places where it is not technically noticeable because of how the focus style is applied on `active` in some instances. The consideration around changing this behavior will be handled in {T377727}. Though it is not noticeable in all places based on that functionality, the token is still being applied here for the sake of consistency and in case we change the focus behavior.
==== Expected changes
**Application.json**
| Token name | new, update, or remove? | before | after | additional notes |
| `background-color-interactive-subtle--hover` | new | - | gray100 | |
| `background-color-interactive-subtle--active` | new | - | gray200 | |
| `border-color-interactive-subtle--hover` | new | - | gray600 | |
| `border-color-interactive-subtle--active` | new | - | gray700 | |
**Dark.json**
| Token name | new, update, or remove? | before | after | additional notes |
| `background-color-interactive-subtle--hover` | new | - | gray800 | |
| `background-color-interactive-subtle--active` | new | - | gray700 | |
| `border-color-interactive` | removed | - | - | This is removed as it should now be the same color in light and dark modes. |
| `border-color-interactive--hover` | new | - | gray400 | |
| `border-color-interactive--active` | new | - | gray300 | |
| `border-color-error--hover` | new | - | gray400 | |
| `border-color-error--active` | new | - | gray300 | |
=== Acceptance criteria
**Design**
[] Update the tokens and styles within components in Figma
**Code**
[] Update the tokens and styles within components in Code