search

sul-dlss / argo

The administrative discovery interface for Stanford's Digital Object Registry
Other
20 stars 5 forks source link

Update button visual design in Argo (this is a design component) #4530

Closed astridu closed 1 month ago

astridu commented 1 month ago

Current buttons

  1. Primary filled

    image

  2. Secondary outline

    image

  3. Primary disabled

    image

  4. Secondary disabled

    image

Proposed buttons

  1. Primary filled buttons (digital blue base 006CB8, on hover = digital blue dark 00548F) They have a default state and hover state. (the mockup below shows an icon which is optional)

    image

  2. Secondary outline buttons (digital blue base 006CB8, on hover = digital blue dark 00548F)They have a default state and hover state. (the mockup below shows an icon which is optional)

    image

  3. Primary disabled: Same button as described in 1 above, but no interactive elements (no hover or while pressing states). Background color is 50% black.

    image

  4. Secondary outline buttons: Same button as described in 2 above, but no interactive elements (no hover or while pressing states). Outline is 50% black and text is 50% black, no fill.

    image
astridu commented 1 month ago

Saw these on stage, and they look really good. Sorry to do this to you, but we made a couple tweaks to the hover state for the blue buttons, and also refined the colors for the disabled buttons.

  1. Hover state for filled button now has an underline:

    image

  2. Hover state for outline button now has an underline:

    image

  3. Primary disabled: Same button as described in 1 above, but no interactive elements (no hover or while pressing states). Text is 80% black, Background color is 10% black, Stroke is 20% black.

    image

  4. Secondary outline buttons: Same button as described in 2 above, but no interactive elements (no hover or while pressing states). Outline is 50% black and text is 60% black, white fill.

    image

Thank you for your patience!

jcoyne commented 1 month ago

@astridu is there a reason these designs to not match the DLSS components? Are we no longer trying to have a component library? https://www.figma.com/design/K1syTsalaB1nlRftgOi0Pw/DLSS-Components?node-id=9-729&t=IVwOqWSNzSAHAPGu-0 My mistake, those designs were updated.

astridu commented 1 month ago

@justinlittman I just checked the buttons on stage, and the disabled button colors look just slightly off. Is it better if I define them as hex colors? Or maybe you haven't gotten to updating the colors yet. In any case, here are hex colors if that's easier. -Primary filled buttons - disabled: Stroke=C0C0BF ; Fill=EAEAEA ; Text=585754 -Secondary outline buttons - disabled: Stroke=979694 ; Fill=FFFFFF ; Text=767674 Apologies, and thank you for your continued patience.

jcoyne commented 1 month ago

We may want to look at this https://github.com/sul-dlss/argo/pull/4539 to get all of the new component styles at once.

jcoyne commented 1 month ago

@astridu what should active buttons (e.g. open dropdown buttons) look like? How about :focus-visible buttons?

astridu commented 1 month ago

Great questions. We just covered this in our DLUX meeting an hour ago. We decided on the following:

  1. Active buttons will look like the hover state (the darker color)
  2. We decided to use the browser default for focus on buttons, unless you have another suggestion.
jcoyne commented 1 month ago

@astridu For focus on buttons, bootstrap already overrides the focus state, so we have to pick something. We can't rely on a default.