feat: Better support for multiple themes

[xitij2000]

This change adds support for two CLI options to the build-tokens command.

The first, --all-themes makes the build-tokens command process all themes in the source directory as opposed to specifying all the names via --theme.

Secondly, --base-theme allows you to have multiple themes derived from the same common base. If specified, you can have a derived theme that still loads tokens from the light theme. For example, you can have a site theme called 'theme-one' and set the base theme to light so it will reuse the core light theme tokens and layer on changes from 'theme-one'.

Testing instructions:

• Create a base tokens directory structure from which tokens will be loaded, this will involve creating an empty directory with a folder called 'themes' inside which there will be multiple folders, with names other than 'light' i.e. test1, test2. So you have folders called 'test1' and 'test2' inside '/tmp/pr-2792/themes/' for example.
• Just for test purposes create some tokens in both directories. You can just create a file called `colors.json' with the following contents:

  {
      "color": {
          "test-color": {
              "value": "#112233"
          }
      }
  }
  

  You can use different color values or variable names to see if things are really working as expected.
• You can now build tokens using ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1 --themes test2. You will need to specify both themes since currently, if you specify only one it will fail.
• You should see build directory inside /tmp/pr-2792 that a core an themes directory where the themes directory in turn will have a variables.css file with the variable defined above, and utility-classes.css will be empty. Delete this directory.
• Check out this branch and try the following:
  • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1: This would error before but will work now.
  • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --all-themes: This will build all themes without specifying a name.
  • ./bin/paragon-scripts.js build-tokens --source /tmp/pr-2792 --build-dir /tmp/pr-2792/build --themes test1 --base-theme light: This will compile the test1 theme using the light theme as a base. So utility-classes.css will not longer be empty but contain styles from the light theme.

[openedx-webhooks]

Thanks for the pull request, @xitij2000!

What's next?

Please work through the following steps to get your changes ready for engineering review:

:radio_button: Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

:radio_button: Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

:radio_button: Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

:radio_button: Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/paragon-working-group. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

:bulb: As a result it may take up to several weeks or months to complete a review and merge your PR.

[netlify[bot]]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	fd4d634c9df33aa085182020e50342ca30d43d1f
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/65966f92f4a3dd0008de8fd2
😎 Deploy Preview	https://deploy-preview-2792--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (ca2154e) 93.48% compared to head (fd4d634) 93.48%.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #2792   +/-   ##
=======================================
  Coverage   93.48%   93.48%           
=======================================
  Files         216      216           
  Lines        3671     3671           
  Branches      902      902           
=======================================
  Hits         3432     3432           
  Misses        234      234           
  Partials        5        5           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[mphilbrick211]

Hi @adamstankiewicz! Would you mind reviewing for us? Thanks!

[mphilbrick211]

Hi @brian-smith-tcril! Are you able to review / merge this for us?

[xitij2000]

Sure, I can clarify the interactions.

First, the --base-theme option:

This option is to allow creating theme variants. Currently, you can create your own light theme, Paragon will load the light theme tokens from the Paragon package, and overlay the branding version on top. However, if you use any other theme name, for example, "theme-a", then Paragon will try to load the corresponding theme-a tokens from Paragon and that won't work. We'd like the ability to have theme variants. For instance, if a site wants to support multiple light themes or have multiple themes for different microsites.

With the --base-theme option, you can tell paragon that all the themes being specified on the command line are to use that theme as the base theme. For instance, if you wanted to create a high-contrast version of the light theme, you could do:

paragon build-tokens --source ./tokens --build-dir ./paragon/css --source-tokens-only --themes high-contrast-light --base-theme light

Here it would pull the tokens from the high-contrast-light directory of the tokens folder but combine it with the light tokens from the Paragon package. This will apply to all themes supplied via this command line, whether via --theme or --all-themes.

Second, the interaction between themes and all-themes:

If --all-themes is supplied, then it will iterate over all the theme directories in the tokens path and ignore the themes option, since it overrides that. If the all-themes option is absent and themes is provided, then it will only process the themes specified via the themes option.

[mphilbrick211]

Sure, I can clarify the interactions.

First, the --base-theme option:

This option is to allow creating theme variants. Currently, you can create your own light theme, Paragon will load the light theme tokens from the Paragon package, and overlay the branding version on top. However, if you use any other theme name, for example, "theme-a", then Paragon will try to load the corresponding theme-a tokens from Paragon and that won't work. We'd like the ability to have theme variants. For instance, if a site wants to support multiple light themes or have multiple themes for different microsites.

With the --base-theme option, you can tell paragon that all the themes being specified on the command line are to use that theme as the base theme. For instance, if you wanted to create a high-contrast version of the light theme, you could do:

paragon build-tokens --source ./tokens --build-dir ./paragon/css --source-tokens-only --themes high-contrast-light --base-theme light

Here it would pull the tokens from the high-contrast-light directory of the tokens folder but combine it with the light tokens from the Paragon package. This will apply to all themes supplied via this command line, whether via --theme or --all-themes.

Second, the interaction between themes and all-themes:

If --all-themes is supplied, then it will iterate over all the theme directories in the tokens path and ignore the themes option, since it overrides that. If the all-themes option is absent and themes is provided, then it will only process the themes specified via the themes option.

Flagging this, @brian-smith-tcril, just in case you're still able to review.

[PKulkoRaccoonGang]

@xitij2000 Thanks for your improvements! We need to solve the problem of specifying specific themes. I like the shorter declaration format you proposed and the flexibility we can provide to consumers.

Unfortunately, I was not able to test this locally (maybe I missed something). We may still have a problem with tokensSource.

[xitij2000]

@xitij2000 Thanks for your improvements! We need to solve the problem of specifying specific themes. I like the shorter declaration format you proposed and the flexibility we can provide to consumers.

Unfortunately, I was not able to test this locally (maybe I missed something). We may still have a problem with tokensSource.

Could you tell me what didn't work when testing? Were you getting an error?

I've added test instructions in the PR description above. Do tell me if those steps do not work.

[mphilbrick211]

@xitij2000 @PKulkoRaccoonGang just following up on this :)

[mphilbrick211]

@xitij2000 @PKulkoRaccoonGang just following up on this :)

Friendly ping, @PKulkoRaccoonGang @xitij2000!