Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Better support for multiple themes #2792

Open
wants to merge 2 commits into
base: alpha
Choose a base branch
from
+38 −7
Open

feat: Better support for multiple themes #2792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ae8f94
feat: Better support for multiple themes
xitij2000 Nov 9, 2023
fd4d634
fixup!: Review feedback add help etc
xitij2000 Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion bin/paragon-scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,19 @@ const COMMANDS = {
},
{
name: '-t, --themes',
description: 'Specify themes to include in the token build.',
description: 'Specify themes to include in the token build. Eg. light,dark or "light dark"',
defaultValue: 'light',
},
{
name: '--base-theme',
description: 'Specify the base theme to use in the token build. For example, to build the "high-contrast" theme on top of the ligth theme use "--theme high-contrast --base-theme light".',
defaultValue: 'Same as theme',
},
{
name: '--all-themes',
description: 'Build tokens for all themes in the source directory.',
defaultValue: false,
},
],
},
'replace-variables': {
Expand Down
33 changes: 27 additions & 6 deletions lib/build-tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const fs = require('fs');
const path = require('path');
const minimist = require('minimist');
const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
Expand All @@ -9,13 +10,17 @@ const { createIndexCssFile } = require('../tokens/utils');
* @param {string[]} commandArgs - Command line arguments for building tokens.
* @param {string} [commandArgs.build-dir='./build/'] - The directory where the build output will be placed.
* @param {string} [commandArgs.source] - The source directory containing JSON token files.
* @param {string} [commandArgs.base-theme] - The base theme to use from Paragon if named differently than the theme.
* @param {boolean} [commandArgs.source-tokens-only=false] - Indicates whether to include only source tokens.
* @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens.
* @param {boolean} [commandArgs.all-themes] - Indicated whether to process all themes.
*/
async function buildTokensCommand(commandArgs) {
const defaultParams = {
themes: ['light'],
themes: 'light',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

'base-theme': null,
'build-dir': './build/',
'all-themes': false,
};

const alias = {
Expand All @@ -28,7 +33,23 @@ async function buildTokensCommand(commandArgs) {
source: tokensSource,
'source-tokens-only': hasSourceTokensOnly,
themes,
} = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
'base-theme': baseTheme,
'all-themes': allThemes,
} = minimist(commandArgs, { alias, default: defaultParams, boolean: ['source-tokens-only', 'all-themes'] });

let themesToProcess = null;

if (allThemes) {
const tokensPath = tokensSource || path.resolve(__dirname, '../tokens/src');
themesToProcess = fs
.readdirSync(`${tokensPath}/themes/`, { withFileTypes: true })
.filter(entry => entry.isDirectory())
.map(entry => entry.name);
} else if (Array.isArray(themes)) {
themesToProcess = themes;
} else {
themesToProcess = themes.split(/[\s,]/);
}

const coreConfig = {
include: [path.resolve(__dirname, '../tokens/src/core/**/*.json')],
Expand Down Expand Up @@ -65,9 +86,9 @@ async function buildTokensCommand(commandArgs) {
},
};

const getStyleDictionaryConfig = (themeVariant) => ({
const getStyleDictionaryConfig = (themeVariant, baseThemeVariant) => ({
...coreConfig,
include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`)],
include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${baseThemeVariant}/**/*.json`)],
source: tokensSource ? [`${tokensSource}/themes/${themeVariant}/**/*.json`] : [],
transform: {
'color/sass-color-functions': {
Expand Down Expand Up @@ -109,8 +130,8 @@ async function buildTokensCommand(commandArgs) {
StyleDictionary.extend(coreConfig).buildAllPlatforms();
createIndexCssFile({ buildDir, isTheme: false });

themes.forEach((themeVariant) => {
const config = getStyleDictionaryConfig(themeVariant);
themesToProcess.forEach((themeVariant) => {
const config = getStyleDictionaryConfig(themeVariant, baseTheme || themeVariant);
StyleDictionary.extend(config).buildAllPlatforms();
createIndexCssFile({ buildDir, isTheme: true, themeVariant });
});
Expand Down