feat: Better support for multiple themes #2792

xitij2000 · 2023-11-09T12:50:59Z

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 · 2023-11-09T12:51:05Z

Thanks for the pull request, @xitij2000!

What's next?

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

🔘 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.

🔘 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

🔘 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.

🔘 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:

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

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

netlify · 2023-11-09T12:51:05Z

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`fd4d634`
🔍 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 · 2023-11-14T08:52:21Z

Codecov Report

All modified and coverable lines are covered by tests ✅

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

mphilbrick211 · 2023-11-14T19:45:10Z

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

viktorrusakov · 2023-12-22T10:20:45Z

lib/build-tokens.js

+
+  if (allThemes) {
+    themesToProcess = fs
+      .readdirSync(`${tokensSource}/themes/`, { withFileTypes: true })


This line fails for me locally when I triy to build all themes for Paragon, because tokensSource is undefined by default. I think this setting is used to overwrite default tokens which we don't need to do in Paragon, so we don't use this parameter internally in repository.

Changing this line to .readdirSync(`${tokensSource || path.resolve(__dirname, '../tokens/src')}}/themes/`, { withFileTypes: true }) seems to work for me (basically defaulting to the root folder of Paragon's tokens)

I've applied your suggestion. Do tell if there are any other changed you'd like me to make to get this merged.

@xitij2000 It seems we still have problems with the tokensSource. Could you check if everything is working correctly?

mavidser · 2024-01-04T06:02:33Z

lib/build-tokens.js

 */
 async function buildTokensCommand(commandArgs) {
  const defaultParams = {
-    themes: ['light'],
+    themes: 'light',


Any specific reason to switch from themes argument as a list, to a string and splitting it later in :48 ?

If so, please also update the @param doc in :15 to reflect the same

The reason is that currently specifying a single theme via --theme is simply broken. You will get an error if you run the command.

The reason for that is that if you specify a single theme as --theme light the value of themes above will be the string "light" and so the themes.forEach later on will fail. You'll need to either go with the default value, or specify themes twice as:

paragon build-tokens --themes light --themes dark

This change makes it possible to specify multiple themes as:

paragon build-tokens --themes "light dark"

This is also a bit clumsy, but is more consistent. I'll update the docstring and also make this more robust to support the old syntax.

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'.

mphilbrick211 · 2024-03-27T20:06:44Z

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

brian-smith-tcril

I'm not fully sure how all these new options interact with each other:

`--themes`	`--base-theme`	`--all-themes`	expected behavior
not set	not set	false	?
not set	not set	true	?
not set	set	false	?
not set	set	true	?
single theme	not set	false	?
single theme	not set	true	?
single theme	set	false	?
single theme	set	true	?
multiple themes	not set	false	?
multiple themes	not set	true	?
multiple themes	set	false	?
multiple themes	set	true	?

xitij2000 · 2024-04-01T11:21:45Z

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 · 2024-04-30T20:17:28Z

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 · 2024-05-10T09:51:43Z

@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 · 2024-05-17T07:00:57Z

@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 · 2024-07-17T13:22:43Z

@xitij2000 @PKulkoRaccoonGang just following up on this :)

mphilbrick211 · 2024-08-23T19:42:50Z

@xitij2000 @PKulkoRaccoonGang just following up on this :)

Friendly ping, @PKulkoRaccoonGang @xitij2000!

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 9, 2023

xitij2000 force-pushed the kshitij/cli-fixes branch from 3574ba7 to 9be0b1e Compare November 14, 2023 08:40

xitij2000 marked this pull request as ready for review November 14, 2023 08:41

mphilbrick211 added the waiting for eng review PR is ready for review. Review and merge it, or suggest changes. label Nov 14, 2023

mphilbrick211 requested a review from adamstankiewicz November 14, 2023 19:44

viktorrusakov reviewed Dec 22, 2023

View reviewed changes

mavidser reviewed Jan 4, 2024

View reviewed changes

xitij2000 force-pushed the kshitij/cli-fixes branch 2 times, most recently from 8128b26 to e8d15d1 Compare January 4, 2024 08:41

fixup!: Review feedback add help etc

fd4d634

xitij2000 force-pushed the kshitij/cli-fixes branch from e8d15d1 to fd4d634 Compare January 4, 2024 08:42

mphilbrick211 requested a review from brian-smith-tcril March 27, 2024 20:06

brian-smith-tcril reviewed Mar 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Better support for multiple themes #2792

feat: Better support for multiple themes #2792

xitij2000 commented Nov 9, 2023 •

edited

Loading

openedx-webhooks commented Nov 9, 2023 •

edited

Loading

netlify bot commented Nov 9, 2023 •

edited

Loading

codecov bot commented Nov 14, 2023 •

edited

Loading

mphilbrick211 commented Nov 14, 2023

viktorrusakov Dec 22, 2023

xitij2000 Jan 4, 2024

PKulkoRaccoonGang May 10, 2024

mavidser Jan 4, 2024

xitij2000 Jan 4, 2024

mphilbrick211 commented Mar 27, 2024

brian-smith-tcril left a comment

xitij2000 commented Apr 1, 2024

mphilbrick211 commented Apr 30, 2024

PKulkoRaccoonGang commented May 10, 2024 •

edited

Loading

xitij2000 commented May 17, 2024

mphilbrick211 commented Jul 17, 2024

mphilbrick211 commented Aug 23, 2024

feat: Better support for multiple themes #2792

Are you sure you want to change the base?

feat: Better support for multiple themes #2792

Conversation

xitij2000 commented Nov 9, 2023 • edited Loading

openedx-webhooks commented Nov 9, 2023 • edited Loading

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

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

Who will review my changes?

Where can I find more information?

When can I expect my changes to be merged?

netlify bot commented Nov 9, 2023 • edited Loading

✅ Deploy Preview for paragon-openedx ready!

codecov bot commented Nov 14, 2023 • edited Loading

Codecov Report

mphilbrick211 commented Nov 14, 2023

viktorrusakov Dec 22, 2023

Choose a reason for hiding this comment

xitij2000 Jan 4, 2024

Choose a reason for hiding this comment

PKulkoRaccoonGang May 10, 2024

Choose a reason for hiding this comment

mavidser Jan 4, 2024

Choose a reason for hiding this comment

xitij2000 Jan 4, 2024

Choose a reason for hiding this comment

mphilbrick211 commented Mar 27, 2024

brian-smith-tcril left a comment

Choose a reason for hiding this comment

xitij2000 commented Apr 1, 2024

mphilbrick211 commented Apr 30, 2024

PKulkoRaccoonGang commented May 10, 2024 • edited Loading

xitij2000 commented May 17, 2024

mphilbrick211 commented Jul 17, 2024

mphilbrick211 commented Aug 23, 2024

xitij2000 commented Nov 9, 2023 •

edited

Loading

openedx-webhooks commented Nov 9, 2023 •

edited

Loading

netlify bot commented Nov 9, 2023 •

edited

Loading

codecov bot commented Nov 14, 2023 •

edited

Loading

PKulkoRaccoonGang commented May 10, 2024 •

edited

Loading