Closed astridu closed 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.
Hover state for filled button now has an underline:
Hover state for outline button now has an underline:
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.
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.
Thank you for your patience!
@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.
@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.
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.
@astridu what should active buttons (e.g. open dropdown buttons) look like? How about :focus-visible
buttons?
Great questions. We just covered this in our DLUX meeting an hour ago. We decided on the following:
@astridu For focus on buttons, bootstrap already overrides the focus state, so we have to pick something. We can't rely on a default.
Current buttons
Primary filled
Secondary outline
Primary disabled
Secondary disabled
Proposed buttons
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)
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)
Primary disabled: Same button as described in 1 above, but no interactive elements (no hover or while pressing states). Background color is 50% black.
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.