Double-box style for focus halos: Sketch update

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website

https://design.va.gov

36 stars 55 forks source link

Double-box style for focus halos: Sketch update #805

Open k80bowman opened 2 years ago

k80bowman commented 2 years ago

Description

Development work is being completed in #654.

We need to update the Sketch library to match the change in the focus halo styling.

Steps to complete

[x] Document (in this ticket) places in Sketch library that will need to be updated with new focus style
[x] Review examples of new focus halo style with DST
[ ] Make updates to Sketch library

Acceptance criteria

[ ] Focus halos in the DS Sketch library match the double-box style shown in #654.

Mockups

Sketch mockups with two color variations for focus halo

GnatalieH commented 2 years ago

Symbols/components that will need to be updated in the Sketch library (list may grow):

Action links (primar, secondary, reverse)
Accordion (closed and open)
Additional info (closed and open)
Back to top
Breadcrumb
Button (primary and secondary)
Checkbox
Header (desktop and mobile)
Radio button
Search input (input, button, list item)
Select box (closed, list item)
Text input (including number input)

GnatalieH commented 2 years ago

Note: per @humancompanion-usds we will be using either the USWDS colors gold-40v #C2850C or gold-50v #936F38 rather than the olive color specified in the linked ticket.

Mockups are here in Sketch for Teams.

humancompanion-usds commented 2 years ago

@GnatalieH - Looks okay to me but, going back to issue https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/359, have you verified that gold-40v meets a 3:1 contrast ratio on a white background? I'm also curious if it passes on a gray background. If it doesn't pass on gray then I question why we're switching it from the current gold given that on a darker background we need the inner white box to pass anyway. Let me know what the test results are, but if gold-40v passes on white and gray at 3:1 then go forth!

GnatalieH commented 2 years ago

@humancompanion-usds only gold-50v is above the 3:1 contrast ratio on a gray background. Thanks for reminding me to check. gold-50v is the color that is more like the original olive color mentioned in #359, anyway. So, can I use gold-50v + the white box?

humancompanion-usds commented 2 years ago

Yes, use gold-50v.

GnatalieH commented 2 years ago

Based on this conversation thread in Slack, @humancompanion-usds would like us to do testing before we commit to a new focus style. @k80bowman do you think I should close this ticket, or move it back to the backlog? Thx.

caw310 commented 2 years ago

Pausing for now as Matt would like to do user testing on this.