Closed laserlemon closed 2 years ago
The pressed (:active
) state of btn-primary
seems to have a gray border in "Dark high contrast":
Also @Juliusschaeper noticed that the pressed (:active
) state of btn-primary
has a gray background, but only in Safari. I guess Chrome also uses the :focus
style so it is still green? 🤔
@simurai - I was looking at the issues you posted about while working on https://github.com/github/primer/issues/263
~I can't reproduce the Safari issue, but the gray border seems to be happening on all dark modes. It looks like we just forgot to specify colors.btn.primary.activeBorder
:~ ~https://github.com/primer/primitives/blob/main/data/colors_v2/vars/component_dark.ts#L78~
~I can submit a PR to fix that as part of my work on that issue.~
Edit: Instead of adding a activeBorder
property to colors.btn.primary
, I'm just going to set the border-color in Primer CSS.
I transferred this issue to https://github.com/github/primer/issues/468 - closing as duplicate.
I put together a test page that uses Primer view components to render several variations on the
Primer::ButtonComponent
, using all three supported tags (button
,a
, andsummary
) as well as both disabled and enabled states. Forbutton
tags, I used thedisabled
attribute and fora
/summary
tags, I usedaria-disabled
.From what I can tell, there are five issues:
default
scheme buttons (for all tags) show a slight shadow as if the button is pushable. This shadow is absent fromoutline
anddanger
scheme buttons.outline
scheme buttons (forbutton
anda
tags) change the icon color on hover. Thesummary
tag button does not. I'm not sure what the intended behavior here is but there's at least a consistency problem.danger
scheme buttons (forbutton
anda
tags) change the icon color on hover. Thesummary
tag button does not. There's the same consistency problem described in number 3 and the additional problem of the icon color changing to white on hover which has sort of a disappearing effect.primary
scheme buttons (forbutton
anda
tags) show a slight shadow as if the button is pushable. This shadow is (correctly) absent fromoutline
anddanger
scheme buttons.primary
scheme buttons (for all tags) show a gray icon, which looks out of place. Should the icon preserve the white styling of the button text?Numbers 2, 3, and 5 are also problematic in dark and dimmed themes. Demo included for the dimmed theme.
Demos
Light theme, hovers
Light theme, clicks
Dimmed theme, hovers and clicks
Context
15610.4.3.1.7, 15610
I also experience these same behaviors on Firefox 87.0 and Chrome 89.0.4389.114.