StackExchange / Stacks

Stack Overflowโ€™s Design System
https://stackoverflow.design
MIT License
602 stars 90 forks source link

fix(notice): improve contrast of inline code #1677

Closed hamvocke closed 3 months ago

hamvocke commented 3 months ago

The s-notice component currently has insufficient color contrast when used in combination with inline code elements. Here's what it looks like in dark mode, for example:

image

Screenshot 2024-03-11 091710

I'm opening this PR to give us a playground to discuss and fix this problem. I tried to play around with various color combinations for the background and text colors myself but quickly realized that I've got no idea what we're aiming for from a visual perspective. I could tweak the colors until I hit the right color contrast, obviously, but I really need some guidance on the visual design, too.

CGuindon commented 3 months ago

I had previously figured out the color combos needed for the comment box โ€” so these should work for the blue notice. To do the other colors, we'll some design time and that's not going to happen until the end of this quarter (we have bug bash I can assign this to someone). You can also verify if the the other colors work with the same color stops but I bet there will be issues with red and yellow.

Screenshot 2024-03-11 at 1 59 40 PM
dancormier commented 3 months ago

Merging this since the changes here are really just from https://github.com/StackExchange/Stacks/pull/1678 which has been reviewed and approved. ๐Ÿšข

netlify[bot] commented 3 months ago

Deploy Preview for stacks ready!

Name Link
Latest commit fa2e4699fd3a8e90ea1807278df0275c9bbfedcf
Latest deploy log https://app.netlify.com/sites/stacks/deploys/65f327946f41a40008ca16e7
Deploy Preview https://deploy-preview-1677--stacks.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.