Add an inset to buttons when they're pressed

[tofumatt]

I think adding a one-pixel shift on click to buttons would improve accessibility. Here's a demo:

Without this only colour/border is changed onClick of a button. Even as someone without colourblindness I find this to be so subtle as to sometimes not notice. I'd think colourblind users may not notice the mild colour shift in the button as the only indicator that it was pressed. I also just think it adds more visual notification that the button is being pressed.

[aminalhazwani]

Hey @tofumatt thanks for the feedback! I think that here we have a similar issue as #264. I believe that the colors that are being used for this buttons (at least in the screenshot) are not the ones suggested by the design system. When we chose the colors we also tested them on a screen with a greyscale color space and we were content with the result, long story short the inset is not necessary.

p.s. buttons should not use the cursor: pointer property as they are actions and not links. cursor: pointer is recommend for links only.

[tofumatt]

I'm importing the colours right from photon-colors and using the ones on the design system site; if things look off maybe it's the GIF compression or something. Thanks though: I'll clear up the cursor: pointer issue.

My main issue here about adding a text shift on click though; it makes the button feel "pressed". I don't think #264 is related; this is about the 1px shift in content for all buttons.

[aminalhazwani]

Yeah sorry @tofumatt, I should have been more clear! My mention to #264 was regarding the GIF/image compression possibly making the colors look off 😅 (BTW we are very happy to see that you're pulling in colors with the NPM module).

I understand your point about making the button feel pressed but we checked with the team and it's not something that Photon wants to pursue.