Background

The refined, expanded color palette is meant to find more consistent alignment and uniformity across values and hues, as mentioned in T360494. For example, all text which uses color other than gray should be the 700 value in light mode and the 400 value in dark mode. From here, in light mode the hover and active states should then become darker values, and in dark mode they should become lighter. This ensures sufficient color contrast on all potential backgrounds in both modes. Since the same values across hues have even brightness and saturation, this system also finds more visual alignment with different colors displayed in similar ways.

An example of this would be the interactive colors, which for text, currently use blue700 for progressive then blue600 for progressive--hover then blue900 for progressive--active and red600 for destructive then red500 for destructive--hover then red800 for destructive--active. This means that the brightness and saturation of these application tokens, while applied to similar elements of different intents, come across visually different.

Goal

Revisit interactive application tokens to find more numerical/visual alignment, which will result in more visually aligned color applications, along with improving accessibility across all states. Some interactive tokens may need to be added to achieve similar styles as defined in T377977.

This scope includes elements which use progressive and destructive interactive tokens such as Buttons, Links, and binary inputs.

Expected changes

Application.json

Components.json

Dark.json

Acceptance criteria

• Make updates to tokens and styles in code
• Make updates to tokens and styles in Figma