Page Comparison

Masquerad Errors (light vs dark)

Ben Warzeski (Deactivated)

• App(Learning MFE)-level, not Paragon-level

• Should paragon-enabled masquerade use

  • form errors and either

    • become a light variant

    • or introduce dark components

  • or (as the learning MFE does) use a banner and maintain dark color

Notes:

• Form validation messages don't work well on dark background for a11y (we haven’t invested much in dark variants for our form controls yet).

  • Intentionally deferred awhile ago.

• Current state in learning MFE is an alert below the masquerade bar might be (imperfect) solution for now to not let form validation on dark be a blocker for Ben’s project.

Live Theming

Ben Warzeski (Deactivated)

CSS variables vs SCSS variables
RacoonGang vs OpenCraft?

Specifically: It looks like there are parallel tracks to getting us live-theming through css variables and we should try to make sure they are co-ordinated

Related:

• https://github.com/openedx/paragon/pull/1388

• https://docs.google.com/document/d/1R-f95H3Yd-L8mU7dHV10YO5OXMdeiaik7N9oA6onG_c/edit?usp=sharing

Notes:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

• Two separate teams working towards the same goal with slightly different approaches.

  • We will need to

    11:24AM

10 mins

Animation types, demo examples

Vladyslav Zadorozhnii

Demo animations for Alert, Image and Modal

Types of animations:
- fade
- collapse height
- collapse width
- position X, Y
- scale

Also includes 4 “speeds”, 100, 200, 300, and 400, and correspond to 250ms, 500ms, 750ms, and 1000ms.

Notes:

• Define animation scales

• Speeds could be adjusted to be faster

  • 100, 200, 300, 400, 500

• Should we dictate animation speeds as part of the token?

• [Jeff]: WCAG 2.1 AAA, honor requests for “prefers reduced animation” to accommodate animation that could be disorienting

  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

  • https://amberley.dev/blog/2020-07-04-ravelry-an-a11y-case-study/

  • Use caution with repeating animations

  • Need to constrain which animations/transitions are compatible with which components

    • Example: no position change allowed for dialog moving onto screen

  • Faster animation, no slower than 500ms

  • “Think like someone who has a hangover all the time”

• [Drew] “Good animation is making something feel more human”

  • Intent of user comes into play (e.g., Carousel might be intentional).