Background
As a result of T341487: TextInput and TextArea: check the color contrast between default border and background we found that many interactive styles across components, mainly form elements, were not utilizing interactive tokens as intended in addition to potentially empty inputs not having enough contrast to meet accessibility criteria. 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: Make focus appearance consistent across Codex. 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 | |
| background-color-error-subtle--hover | new | - | red100 | |
| background-color-error-subtle--active | new | - | red200 | |
| border-color-interactive--hover | new | - | gray800 | |
| border-color-interactive--active | new | - | gray900 | |
| border-color-error--hover | updated | red600 | red800 | |
| border-color-error--active | updated | red700 | red900 | |
| color-error--hover | new | - | red800 | |
| color-error--active | new | - | red900 | |
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 | |
| background-color-error-subtle--hover | new | - | red800 | |
| background-color-error-subtle--active | new | - | red700 | |
| 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 | - | gray300 | |
| border-color-interactive--active | new | - | gray200 | |
| border-color-error--hover | new | - | gray300 | |
| border-color-error--active | new | - | gray200 | |
| color-error--hover | new | - | red300 | |
| color-error--active | new | - | red200 | |
Acceptance criteria
Design
- Update the tokens and styles within components in Figma
Code
- Update the tokens and styles within components in Code (patch)
