Runtime theming with CSS variables and design tokens

• It seems that the RG design tokens (with style-dictionary) should meet all the

• Open Craft’s immediate need is theming on a per-organization level

  • Each org has a theme

  • 1 instance

  • runtime theming enables swapping out one stylesheet (CSS variables) for another organization.

  • Currently requires a re-build of all MFEs for every theme change.

  • Maintaining consistent theme across multiple MFEs

• Goal: UI to change colors in the theme

  • 2U tool focused on around theming for “verticals” that allows partners to customize theme.

  • This is already built; could we leverage it?

    • Could we just use the frontend side of this and the storage (not the backend APIs)?

  • Open Craft also has a tool for managing Open edX instances, which has a branding tool that compiles into variables.

  • Spin this component out into a separate MFE/service.

• How can we best reorganize our efforts to lose as little work as possible?

• We plan to release an alpha/beta NPM release of this.

• Is there a “sandbox” here?

• Some sort of way to QA this outside of devstack/production.
  
  

Dark vs. light theme

• Dark theme driven by CSS variables as much as possible

• Component props (e.g., variant) should be treated as an override if needed.

• How can we beta test a new theme?

• Dark theme may require some design resources/thinking.

Tokens → runtime theme-ability driven by a UI → light/dark → other themes.

Bootstrap challenges

• Should we copy/paste Bootstrap to get around SCSS / CSS variables calc issue?

How can we best reorganize our efforts to lose as little work as possible?

How can make these 2 work streams not collide?

• Let’s have another sync about Open Craft’s ongoing work.

  • OC was

• Let’s collaborate on #paragon-working-group Slack channel (connected across 3 Slack workspaces).

•