Background

@border-color-progressive, as with other non-gray border colors, has used the 500 value of the color, as this provides sufficient contrast in light and dark modes, since the somewhat recent color expansion in Codex. This value is used because the border of elements using these colors (blue, green, red, yellow) are usually sitting against the subtle background version of the same color, and that works fine. However, with recent updates to ProgressBar, we are beginning to adopt a more simple visual style, where the border color matches the background color of the progress bar, both being the standard progressive blue, like in Buttons. The 500 value of the blue does not work well with this standard progressive blue, hence the need for an update, at least in light mode (the default for Codex) for now. We will likely continue to move in a more simple and logical, yet still accessible, direction for visual style updates like this, and will work to consider other border colors, colors in general, as well as dark mode.

Examples

In Codex, the only elements which use this progressive border color are Button and now ProgressBar. With the updates to ProgressBar, in light mode, the border will now match the background. And in Button (progressive normal to be exact), the border matches the text, and because the border touches the subtle background color, the change is barely noticeable to the eye.

Button before/after

before	after

Additionally, we know the @border-color-progressive token is also used in WikiStories, VE EditCheck, VE GalleryDialog, Wikibase Termbox, CheckUser, Kartographer, ContentTranslation, MediaSearch. However, we do not believe this will negatively affect the experience, as it does not decrease the visual accessibility at all in light mode, and does not change at all in dark mode.

Acceptance criteria

• Update @border-color-progressive in light mode from @blue500 to @blue700