refactor(notice): generate styles programmatically; improve contrast

dancormier commented 3 months ago

[!NOTE] This PRs is targeting https://github.com/StackExchange/Stacks/pull/1677

This PR refactors the code that generates styles for the .s-notice, .s-banner, and .s-toast components. This PR also:

Unifies and improves child code element contrast
Updates notice and toast documentation to generate examples programmatically
Improves notice and toast documentation by showing examples that include code and a.s-link.s-link__inherit children where applicable
Updates notice a11y and visual regression tests to include code and a.s-link.s-link__inherit children
Updates baseline test images (hence the ~190 files changed)

Child `code` contrast

@CGuindon I saw your comment (https://github.com/StackExchange/Stacks/pull/1677#issuecomment-1989445403) right before I opened this PR 😂. I'm happy to wait to have this PR reviewed until you have the time to fully consider the design choices necessary to get this right. I know you're very busy these days, so no rush as far as I'm concerned.

Nevertheless, I took the liberty to make a few design choices for the code child element in this PR. These can be changed pretty easily, but I think I at least found a decent starting place. In this PR, all code elements within the notice component meet or exceed our accessibility contrast goals.

Screenshots

Light mode

#### Notice base styles ![image](https://github.com/StackExchange/Stacks/assets/647177/40e21877-c856-48a2-ab11-debe09748f57) #### Notice `important` variant styles ![image](https://github.com/StackExchange/Stacks/assets/647177/ff5be819-c888-45e5-963c-55f4c7620e1f)

Dark mode

#### Notice base styles ![image](https://github.com/StackExchange/Stacks/assets/647177/b0cee693-5af1-4331-887a-dee497f3a052) #### Notice `important` variant styles ![image](https://github.com/StackExchange/Stacks/assets/647177/b436acf2-fbc1-4d17-a4d4-b846834c02a1)

High contrast light mode

#### Notice base styles ![image](https://github.com/StackExchange/Stacks/assets/647177/09f5ce80-ef20-463f-9090-4dc705b394dd) #### Notice `important` variant styles ![image](https://github.com/StackExchange/Stacks/assets/647177/6e2af1d0-0c6b-4f45-bd83-45f2b9b3bd76)

High contrast dark mode

#### Notice base styles ![image](https://github.com/StackExchange/Stacks/assets/647177/7c619a75-d9d8-4e1a-8fe6-3ac6179b4796) #### Notice `important` variant styles ![image](https://github.com/StackExchange/Stacks/assets/647177/1c3eaf19-6b70-41e2-8a14-775b8d513514)

netlify[bot] commented 3 months ago

Deploy Preview for stacks ready!

Name	Link
Latest commit	6941d1e68597542d94122a2069f57345d9fc2c8c
Latest deploy log	https://app.netlify.com/sites/stacks/deploys/65f3234b0a60a90008bbe035
Deploy Preview	https://deploy-preview-1678--stacks.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

hamvocke commented 3 months ago

I love it! Not much to say on the code itself from my end, but the a11y issue I care about here is massively improved 👍

StackExchange / Stacks