Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

\uD83D\uDDE3 Discussion topics

Time

Item

Presenter

Notes

Design Tokens

Adam Stankiewicz

  • Moving to a world where CSS is built externally.

  • Currently the MFE is responsible for building the theme

  • Design Tokens will change that, and instead pAragon compiles its own CSS outputs

  • Expose locally installed versioned of compiled CSS to MFE JS libs, etc where its needed, during webpack build process, standalone files in MFE as fallbacks in case CDN URLS fail

  • Whenever you build a new version in the alpha release, it will generate a paragon theme Json file

  • The benefit is that in frontend build, the file can be read where they are coming, and export them as standalone files that can be looked at

  • “Toggle theme” demonstration would show how dark variant can be defined and rendered

  • What needs to be defined to enable the dark mode them switch?

    • Folders for theme variants

      • Light, Dark

        • To support dark mode we would need a folder with those definitions, color values

        • We need to document the color theme variants in a list so that we can start to define a color scheme for a dark variant

        • CSS Utility classes is a good start for a list of colors that would need to be defined for a dark mode

        • Tracking segment events for preferred color scheme media queries, based on traffic at learning.edx.org, 35% of unique user have a system preference of dark mode

        • Browsers do have some automated capabilities, but we don't have a formalized official dark mode variant, so we do risk some quality control

        • Manual toggle is a nice thing to have because dark mode is not a universal standard

        • Need a design answer for where and when the learner can toggle dark mode





✅ Action items

  •  

⤴ Decisions

...