Page Comparison

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