Page Comparison

10 5 minutes

recording?

Brian Smith

• With the new meet link in the Axim org we should have no technical issues recording the WG meetings like we do with the others.

• Does anyone object to recording the Paragon WG meetings by default?

  • We would still ask everyone before starting recording each meeting.

15 minutes

style dictionary v4

Brian Smith

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

  • We want to go to v4 before releasing design tokens paragon

    • Adopt a standard format (v4 supports it - v3 does not)

  • There should be a way to keep paragon CJS while using ESM v4 https://v4.styledictionary.com/version-4/migration/

2 min

Card component stretches image on Safari

Peter Kulko

https://github.com/openedx/paragon/issues/3187

• Safari specific - Browserstack?
  

https://paragon-openedx.netlify.app/playground?code=N4Igxg9gJgpiBcJgApkEoAEBeAfB4AOgHYYaREDOALhgNoBuAhgDYCuMANBhTFQGot2AXWwZWPAMpVGVGMgDkAcwBOMGEXloA3MVLlqGABaMiUZjADCxoopii7ufLtJkIlCOYB0zCIoXWzS2tbAEIwzR0SFx5+QTkYT2llWypPJjYYbWcAX0i9NwMASwoJAFsWZlEAMxYePNdKGmKAUQAPKmVGMorRDvZ61SpWZRJkYgAeC0ZlKGcwZkYKCgA5RlKYLAIQUoAjAFoAFi2MZwhlQvVpKkK3LGBi7uZKgH4TkHoYZWuwFmP4N8MZ0KAC83NJmFtssQcM5JtMoJ4AJLlWxTAAOzlIFGUYE2IEMVCoaIo8AA9KTCp5eBQAJ7UGSFMCeSClUkARgArGyAEwcgAcAE42aTlBTmKSdmAAGw7NkAZlJ-IA7EqAAxCvls1VigD6VVYT1a+qenmVao1Wp13NKVVVngAVmjFFtMdwcQBBZhUPFTGYYQoomAuqKkHyKCASHF4glEknk+iFRieNELMAwQHMWDKZkQVmc1XBlwYMMQT3era+qDF3wQQsYUkwqJwmaeABC0BpjaLzYRAAkYIws67SNcqOY8QAVQpjoMgYfcVg7UfjrYSRfL2euhuunueCQwMDXNwnEMuDd4-eHm4kDd10hdosYfuqDAAdzsr5MNCoEAwUGKKaMDSGA7BAVCGE+A5ZhgJhVpeR4kDsvDvuoGDIowqKMGiMGmBgABiEBgZ8rilGibiXBQXAUL+75iDwGCVp487tlAwE-jBYAsimxQQeBMieCe3akox8HXg+4zCfCbYduJjEEURygYEClwMrc9wUG0HRdOUTwYK8WyAucoJEOCfxvB8XyMr8IDZA+pDjK2rCEm4ODulex5shJjnOUQdkYA5Tk-r5bkIRg3JeYFLmwpJLbybIyiNhJlYPlkRDZGg6DZDZQA

10 minutes

Paragon Dark Mode

Gabriel Weinberg

We’re discussing dark mode as a feature within the edX.org instance of the LMS, and I suggested that we first explore this as a design system tokens project.

Is there anything in addition to runtime theming that saves engineering time if we were to use Paragon as a platform to implement dark mode in the LMS?

What is needed on the design tokens project, engineering, design and accessiblity, to enable dark mode?

Does that feel like a large scope engineering effort?

Open to discussion and feedback!

Notes and feedback from the team:

• Some components have opt in prop for “dark” but would be a CSS variable instead

• Design tokens has a concept of variant for light and dark and is baked into the architecture of the tokens project.

• Its not just light and dark, but also enables things like high contrast mode

• Is it on a component by component basis? some of them have a dark variant

• Starts with system preference, and the user can change the preference in the application, and that gets stored locally

• Design is a heavier lift because we ouwld need to look at styles and components and make decisions about colors and backgrounds with respect to contrast and other a11y principles and brand, and Figma library to support dark and light on design

• On the eng side, take what comes out of design and creating tokens out of those variants

• From the 2U side, we would want to make sure that the values we choose also are compatible with the default theme

• Dark mode is a high level user preference through an operating system, and specific mode are usually under an accessibility feature set (high contrast mode) test dark with high contrast in addition to standard mode. there is an OS-level inversion as well. Stay aware of OS and browser preferences

• There are areas of the platform such as instructor dashboard that are not MFEs and cannot consume Paragon dark mode or design tokens

• Some xblocks may or may not consume Paragon

• LTI integrations may not support dark mode inherently

• Thorough testing in the LMS is needed

• Learning MFE might have a lot of exceptions that will not easily consume dark mode bc of xblocks and LTIs, learner dash might be a lower lift