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! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

supporting documentation
Open edX discussion forum threads
timeline information ("this must be merged by XX date", and why that is)
partner information ("this is a course on edx.org")
any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

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.

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

openedx-webhooks commented Nov 9, 2023 •

edited

netlify bot commented Nov 9, 2023 •

edited

codecov bot commented Nov 14, 2023 •

edited

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

xitij2000 commented May 17, 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

openedx-webhooks commented Nov 9, 2023 • edited

netlify bot commented Nov 9, 2023 • edited

✅ Deploy Preview for paragon-openedx ready!

codecov bot commented Nov 14, 2023 • edited

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

xitij2000 commented May 17, 2024

xitij2000 commented Nov 9, 2023 •

edited

openedx-webhooks commented Nov 9, 2023 •

edited

netlify bot commented Nov 9, 2023 •

edited

codecov bot commented Nov 14, 2023 •

edited

PKulkoRaccoonGang commented May 10, 2024 •

edited