Run and stop icon color contrast refactor

[Izzy-Snyder]

Increasing Access

This specific subissue aims to address the colors of the run and stop icon in the main page of the p5.js editor.

Web accessibility guidelines require color to not be the only way of conveying visual information. Currently, the button state is only distinguishable by colors that do not have sufficient contrast between each other in dark or high contrast mode.

Feature enhancement details

Change Requested

The requested change is to indicate the active/inactive states by a filled and stroke only version of the button, both using the active color. This would allow for the button states to always be distinguishable from each other without using color alone.

It would probably be good to have the button to have a primary and a secondary variant, as well as variants for disabled, hover, and active (that apply to both primary and secondary). The primary variant would be filled, and the secondary variant would be stroke only. See this article :)

However, if that’s out of your wheelhouse, this could be a more granular change since currently it only affects one button.

Visuals

Before (start/stop indicated with subtle color change alone):

Requested change (basic)

rest

• bg fill: none
• icon fill: none
• icon and button outline: toolbar-button-color

hover

• bg fill: none
• icon fill: none
• icon and button outline: button-background-active-color

active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color

Comprehensive style change:

primary, rest (used for other toolbar buttons)

• bg fill: toolbar-button-background-color
• icon fill: toolbar-button-color

primary, hover/active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color
• Files to change

secondary, rest

• bg fill: none
• icon fill: none
• icon and button outline: toolbar-button-color

secondary, hover

• bg fill: none
• icon fill: none
• icon and button outline: button-background-active-color

secondary, active

• bg fill: button-background-active-color
• icon fill: toolbar-button-color

Files to change

Client > styles > _toolbar.scss

Classes: .toolbar__play-button and .toolbar__stop-button

Under “&:disabled”:

• Remove the fill
• Change the outline to the themify variable button-background-active-color

Client > styles > abstracts > _placeholders.scss

%toolbar-button

• May need to make some changes here to the outline or fill so the square/triangle in the button has an outline of button-background-active-color
• Make sure that this does not affect the other toolbar buttons

PR Criteria

• Provide screenshots in your PR of the visual changes implemented
• Provide quality assurance steps for how reviewers can ensure your changes are made properly
• Ensure that changes to not alter other toolbar buttons

Additional Resources:

• Color Combinations for Accessibility – tool developed by @izzy-synder that generates custom color palettes for components while adhering to WCAG guidelines and p5.js styling standardizations.
• Zeplin Style Link – the p5.js editor’s styling standardizations
• Preparing a Pull Request – how-to guide on creating a Pull Request
• Style Guide Documentation (WIP), best-practices guide on implementing styling changes to the codebase.

[Son-Of-Zeus]

@Izzy-Snyder Can you please assign the issue to me

[Izzy-Snyder]

I can do that now, let me know if you have questions along the way :)

[Son-Of-Zeus]

Hi @Izzy-Snyder I'm working on this issue and have a quick question before implementing.

The issue specifies that the rest and hover states should have stroke-only icons and a button outline using the theme variables,
but I couldn't find any specific values for:

• stroke-width for the icon outlines (the triangle/square SVG shapes)
• border-width for the circular button outline

I didn't see these specified in the styling docs, Zeplin specs, or the contributor guidelines. The existing %button placeholder uses 2px borders, but the toolbar buttons currently have border: none.

Could you provide the intended values, or should I match the 2px used elsewhere in the codebase?

[Izzy-Snyder]

That's a great question! Since it's undefined, it seems like it would manly come down to aesthetics. There are a few checkboxes that use the 2px default. Would you mind sharing screenshots of the button in the context of the whole page once you're done that?

Thanks for your work on this!

[Son-Of-Zeus]

Hey @Izzy-Snyder!
Here's a screenshot showing the Play button and the stop button in the context of the whole page with 2px borders. Please let me know if this is preferred.