@digdir/designsystemet 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/src/init/createTokensPackage.js

@@ -2,229 +2,249 @@ import path from "node:path";
 import fs from "node:fs/promises";
 import chalk from "chalk";
 import prompts from "prompts";
-import packageJsonTemplate from "./template/template-files/package.json" with {
-    type: 'json'
-};
+import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
 import generateMetadata from "./generateMetadataJson.js";
 import generateThemes from "./generateThemesJson.js";
 import { toGeneratedCssFileName, normalizeTokenSetName, toValidPackageName } from "./utils.js";
 import { nextStepsMarkdown } from "./nextStepsMarkdown.js";
-const MODES = [
-    'Light',
-    'Dark',
-    'Contrast'
-];
+const MODES = ["Light", "Dark", "Contrast"];
 const promptOptions = {
-    onCancel: ()=>{
-        console.log(`${chalk.red('✖')} Operation cancelled`);
-        process.exit();
-    }
+  onCancel: () => {
+    console.log(`${chalk.red("\u2716")} Operation cancelled`);
+    process.exit();
+  }
 };
-export async function createTokensPackage(targetDir) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const DIRNAME = import.meta.dirname || __dirname;
-    const DEFAULT_FILES_PATH = path.join(DIRNAME, './template/default-files');
-    const TOKEN_TEMPLATE_FILES_PATH = path.join(DIRNAME, './template/template-files/design-tokens');
-    const TARGET_DIR = path.resolve(process.cwd(), targetDir);
-    const initialPackageName = toValidPackageName(path.basename(TARGET_DIR));
-    // Check target directory contents
-    let isTargetDirEmpty = true;
-    try {
-        const files = await fs.readdir(TARGET_DIR);
-        isTargetDirEmpty = files.length === 0;
-    } catch (err) {
-        if (err.code === 'ENOENT') {
-        // Directory doesn't exist, so we're good
-        } else {
-            console.error(err);
-            console.log('Continuing...');
-        }
+async function createTokensPackage(targetDir) {
+  const DIRNAME = import.meta.dirname || __dirname;
+  const DEFAULT_FILES_PATH = path.join(DIRNAME, "./template/default-files");
+  const TOKEN_TEMPLATE_FILES_PATH = path.join(DIRNAME, "./template/template-files/design-tokens");
+  const TARGET_DIR = path.resolve(process.cwd(), targetDir);
+  const initialPackageName = toValidPackageName(path.basename(TARGET_DIR));
+  let isTargetDirEmpty = true;
+  try {
+    const files = await fs.readdir(TARGET_DIR);
+    isTargetDirEmpty = files.length === 0;
+  } catch (err) {
+    if (err.code === "ENOENT") {
+    } else {
+      console.error(err);
+      console.log("Continuing...");
     }
-    const { directoryAction } = await prompts({
-        name: 'directoryAction',
-        type: isTargetDirEmpty ? null : 'select',
-        message: 'Target directory is not empty. How should we proceed?',
-        choices: [
-            {
-                title: 'Clean',
-                value: 'clean',
-                description: 'Empty the directory and continue'
-            },
-            {
-                title: 'Ignore',
-                value: 'ignore',
-                description: 'Keep directory as is. Files may be overwritten with new output.'
-            },
-            {
-                title: 'Exit',
-                value: 'exit',
-                description: 'Exit without doing anything.'
-            }
-        ]
-    }, promptOptions);
-    if (directoryAction === 'exit') {
-        process.exit();
-    }
-    const { packageName } = await prompts([
+  }
+  const { directoryAction } = await prompts(
+    {
+      name: "directoryAction",
+      type: isTargetDirEmpty ? null : "select",
+      message: "Target directory is not empty. How should we proceed?",
+      choices: [
         {
-            name: 'packageName',
-            type: 'text',
-            message: 'Enter a package name (for package.json)',
-            initial: initialPackageName
-        }
-    ], promptOptions);
-    const { modes, themeCount, tokensDir } = await prompts([
+          title: "Clean",
+          value: "clean",
+          description: "Empty the directory and continue"
+        },
         {
-            name: 'themeCount',
-            type: 'number',
-            message: 'How many themes do you want?',
-            initial: 1,
-            min: 1
+          title: "Ignore",
+          value: "ignore",
+          description: "Keep directory as is. Files may be overwritten with new output."
         },
         {
-            name: 'modes',
-            type: 'multiselect',
-            choices: MODES.filter((x)=>x !== 'Light').map((mode)=>({
-                    title: mode,
-                    value: mode
-                })),
-            message: 'Which color modes do you want?',
-            instructions: `
+          title: "Exit",
+          value: "exit",
+          description: "Exit without doing anything."
+        }
+      ]
+    },
+    promptOptions
+  );
+  if (directoryAction === "exit") {
+    process.exit();
+  }
+  const { packageName } = await prompts(
+    [
+      {
+        name: "packageName",
+        type: "text",
+        message: "Enter a package name (for package.json)",
+        initial: initialPackageName
+      }
+    ],
+    promptOptions
+  );
+  const { modes, themeCount, tokensDir } = await prompts(
+    [
+      {
+        name: "themeCount",
+        type: "number",
+        message: "How many themes do you want?",
+        initial: 1,
+        min: 1
+      },
+      {
+        name: "modes",
+        type: "multiselect",
+        choices: MODES.filter((x) => x !== "Light").map((mode) => ({
+          title: mode,
+          value: mode
+        })),
+        message: "Which color modes do you want?",
+        instructions: `
   Instructions:
-    ↑/↓: Highlight option
-    ←/→/[space]: Toggle selection
+    \u2191/\u2193: Highlight option
+    \u2190/\u2192/[space]: Toggle selection
     a: Toggle all
     enter/return: Complete answer
-${chalk.green('◉')}   Light ${chalk.dim('- This is the default mode, and cannot be disabled')}`,
-            onState: (obj)=>{
-                obj.value.unshift({
-                    title: 'Light',
-                    value: 'Light',
-                    selected: true
-                });
-            }
-        },
+${chalk.green("\u25C9")}   Light ${chalk.dim("- This is the default mode, and cannot be disabled")}`,
+        onState: (obj) => {
+          obj.value.unshift({ title: "Light", value: "Light", selected: true });
+        }
+      },
+      {
+        name: "tokensDir",
+        type: "text",
+        initial: "design-tokens",
+        message: `Enter the desired path for the design tokens`
+      }
+    ],
+    promptOptions
+  );
+  const themes = [];
+  const TOKENS_TARGET_DIR = path.join(TARGET_DIR, tokensDir);
+  for (let n = 1; n <= themeCount; n++) {
+    const theme = await prompts(
+      [
         {
-            name: 'tokensDir',
-            type: 'text',
-            initial: 'design-tokens',
-            message: `Enter the desired path for the design tokens`
+          name: "name",
+          type: "text",
+          message: `Enter the name of the ${ordinal(n)} theme`,
+          validate: (value) => isValidThemeName(themes, value)
         }
-    ], promptOptions);
-    const themes = [];
-    const TOKENS_TARGET_DIR = path.join(TARGET_DIR, tokensDir);
-    for(let n = 1; n <= themeCount; n++){
-        const theme = await prompts([
-            {
-                name: 'name',
-                type: 'text',
-                message: `Enter the name of the ${ordinal(n)} theme`,
-                validate: (value)=>isValidThemeName(themes, value)
-            }
-        ], promptOptions);
-        themes.push(theme.name);
-    }
-    const { defaultTheme = themes[0] } = await prompts({
-        name: 'defaultTheme',
-        type: themeCount === 1 ? null : 'select',
-        message: 'Select the default theme to export in package.json',
-        choices: themes.map((theme)=>({
-                title: theme,
-                value: theme
-            })),
-        initial: 0
-    }, promptOptions);
-    console.log(`
+      ],
+      promptOptions
+    );
+    themes.push(theme.name);
+  }
+  const { defaultTheme = themes[0] } = await prompts(
+    {
+      name: "defaultTheme",
+      type: themeCount === 1 ? null : "select",
+      message: "Select the default theme to export in package.json",
+      choices: themes.map((theme) => ({ title: theme, value: theme })),
+      initial: 0
+    },
+    promptOptions
+  );
+  console.log(
+    `
 Will now create the following:
-  ${chalk.bold('Package name')}: ${packageName}
-  ${chalk.bold('Directory')}: ${TARGET_DIR}
-  ${chalk.bold('Tokens directory')}: ${TOKENS_TARGET_DIR}
-  ${chalk.bold('Themes')}: ${themes.join(', ')}
-  ${chalk.bold('Default theme')}: ${defaultTheme}
-  ${chalk.bold('Color modes')}: ${modes.join(', ')}
-`);
-    if (directoryAction === 'clean') {
-        console.log(chalk.bold.red(`Warning: Contents of ${TARGET_DIR} will be deleted`));
-    }
-    if (directoryAction === 'ignore') {
-        console.log(chalk.bold.yellow(`Warning: Existing files in ${TARGET_DIR} may be overwritten`));
+  ${chalk.bold("Package name")}: ${packageName}
+  ${chalk.bold("Directory")}: ${TARGET_DIR}
+  ${chalk.bold("Tokens directory")}: ${TOKENS_TARGET_DIR}
+  ${chalk.bold("Themes")}: ${themes.join(", ")}
+  ${chalk.bold("Default theme")}: ${defaultTheme}
+  ${chalk.bold("Color modes")}: ${modes.join(", ")}
+`
+  );
+  if (directoryAction === "clean") {
+    console.log(chalk.bold.red(`Warning: Contents of ${TARGET_DIR} will be deleted`));
+  }
+  if (directoryAction === "ignore") {
+    console.log(chalk.bold.yellow(`Warning: Existing files in ${TARGET_DIR} may be overwritten`));
+  }
+  const res = await prompts(
+    {
+      name: "proceed",
+      type: "confirm",
+      message: "Proceed?",
+      initial: directoryAction === void 0
+      // default to proceeding if the output directory is empty
+    },
+    promptOptions
+  );
+  if (!res.proceed) {
+    process.exit();
+  }
+  if (directoryAction === "clean") {
+    await fs.rm(TARGET_DIR, { recursive: true });
+  }
+  await fs.cp(DEFAULT_FILES_PATH, path.join(TARGET_DIR), {
+    recursive: true
+  });
+  if (tokensDir !== "design-tokens") {
+    await fs.rename(path.join(TARGET_DIR, "design-tokens"), path.join(TOKENS_TARGET_DIR));
+  }
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "themes"));
+  } catch {
+  }
+  for (const theme of themes.map(normalizeTokenSetName)) {
+    for (const mode of modes.map(normalizeTokenSetName)) {
+      await fs.cp(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`),
+        { recursive: true }
+      );
+      const template2 = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`)
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`),
+        template2.toString("utf-8").replaceAll("<theme>", theme)
+      );
     }
-    const res = await prompts({
-        name: 'proceed',
-        type: 'confirm',
-        message: 'Proceed?',
-        initial: directoryAction === undefined
-    }, promptOptions);
-    if (!res.proceed) {
-        process.exit();
-    }
-    if (directoryAction === 'clean') {
-        await fs.rm(TARGET_DIR, {
-            recursive: true
-        });
-    }
-    await fs.cp(DEFAULT_FILES_PATH, path.join(TARGET_DIR), {
-        recursive: true
-    });
-    if (tokensDir !== 'design-tokens') {
-        await fs.rename(path.join(TARGET_DIR, 'design-tokens'), path.join(TOKENS_TARGET_DIR));
-    }
-    try {
-        await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'themes'));
-    } catch  {
-    // Directory creation failed, probably because the directory already exists
-    }
-    for (const theme of themes.map(normalizeTokenSetName)){
-        for (const mode of modes.map(normalizeTokenSetName)){
-            // Copy the global file for the color mode
-            await fs.cp(path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`), path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`), {
-                recursive: true
-            });
-            // Create theme primitives for the color mode
-            const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`));
-            await fs.writeFile(path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`), template.toString('utf-8').replaceAll('<theme>', theme));
-        }
-        // Create main theme token set
-        const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`));
-        await fs.writeFile(path.join(TOKENS_TARGET_DIR, `themes/${theme}.json`), template.toString('utf-8').replaceAll('<theme>', theme));
-        await fs.writeFile(path.join(TOKENS_TARGET_DIR, '$metadata.json'), JSON.stringify(generateMetadata(modes, themes), undefined, 2));
-        await fs.writeFile(path.join(TOKENS_TARGET_DIR, '$themes.json'), JSON.stringify(generateThemes(modes, themes), undefined, 2));
-    }
-    // Configure package.json file
-    packageJsonTemplate.name = packageName;
-    packageJsonTemplate.main = packageJsonTemplate.main.replace('<default-theme>', toGeneratedCssFileName(defaultTheme));
-    await fs.writeFile(path.join(TARGET_DIR, 'package.json'), JSON.stringify(packageJsonTemplate, undefined, 2));
-    const readmePath = path.join(TARGET_DIR, 'README.md');
-    const currentReadme = await fs.readFile(readmePath);
-    await fs.writeFile(readmePath, [
-        currentReadme.toString('utf-8'),
-        nextStepsMarkdown(themes, modes, tokensDir, packageName)
-    ].join('\n'));
-    console.log('🎉 Files successfully generated!');
-    console.log(`Read about the next steps in the generated README at ${readmePath}`);
+    const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`));
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, `themes/${theme}.json`),
+      template.toString("utf-8").replaceAll("<theme>", theme)
+    );
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, "$metadata.json"),
+      JSON.stringify(generateMetadata(modes, themes), void 0, 2)
+    );
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, "$themes.json"),
+      JSON.stringify(generateThemes(modes, themes), void 0, 2)
+    );
+  }
+  packageJsonTemplate.name = packageName;
+  packageJsonTemplate.main = packageJsonTemplate.main.replaceAll(
+    "<default-theme>",
+    toGeneratedCssFileName(defaultTheme)
+  );
+  await fs.writeFile(path.join(TARGET_DIR, "package.json"), JSON.stringify(packageJsonTemplate, void 0, 2));
+  const readmePath = path.join(TARGET_DIR, "README.md");
+  const currentReadme = await fs.readFile(readmePath);
+  await fs.writeFile(
+    readmePath,
+    [currentReadme.toString("utf-8"), nextStepsMarkdown(themes, modes, tokensDir, packageName)].join("\n")
+  );
+  console.log("\u{1F389} Files successfully generated!");
+  console.log(`Read about the next steps in the generated README at ${readmePath}`);
 }
 function isValidThemeName(themes, value) {
-    const s = value.trim();
-    if (s.length === 0) {
-        return 'Theme name cannot be empty.';
-    }
-    if (themes.includes(s)) {
-        return 'Theme names must be unique.';
-    }
-    if (/[^a-zæøå0-9 _-]/i.test(s)) {
-        return 'Theme name can only contain letters, numbers, dashes and underscores.';
-    }
-    return true;
+  const s = value.trim();
+  if (s.length === 0) {
+    return "Theme name cannot be empty.";
+  }
+  if (themes.includes(s)) {
+    return "Theme names must be unique.";
+  }
+  if (/[^a-zæøå0-9 _-]/i.test(s)) {
+    return "Theme name can only contain letters, numbers, dashes and underscores.";
+  }
+  return true;
 }
 function ordinal(n) {
-    switch(n){
-        case 1:
-            return '1st';
-        case 2:
-            return '2nd';
-        case 3:
-            return '3rd';
-        default:
-            return `${n}th`;
-    }
+  switch (n) {
+    case 1:
+      return "1st";
+    case 2:
+      return "2nd";
+    case 3:
+      return "3rd";
+    default:
+      return `${n}th`;
+  }
 }
+export {
+  createTokensPackage
+};

package/dist/src/init/generateMetadataJson.js

@@ -1,16 +1,21 @@
 import { normalizeTokenSetName } from "./utils.js";
-export default function generateMetadataJson(modes, themes) {
-    return {
-        tokenSetOrder: [
-            'primitives/globals',
-            'primitives/typography/default',
-            ...modes.flatMap((mode)=>[
-                    `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-                    ...themes.map((theme)=>`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`)
-                ]),
-            ...themes.map((theme)=>`themes/${normalizeTokenSetName(theme)}`),
-            'semantic/color',
-            'semantic/style'
-        ]
-    };
+function generateMetadataJson(modes, themes) {
+  return {
+    tokenSetOrder: [
+      "primitives/globals",
+      "primitives/typography/default",
+      ...modes.flatMap((mode) => [
+        `primitives/colors/${normalizeTokenSetName(mode)}/global`,
+        ...themes.map(
+          (theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
+        )
+      ]),
+      ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
+      "semantic/color",
+      "semantic/style"
+    ]
+  };
 }
+export {
+  generateMetadataJson as default
+};

package/dist/src/init/generateThemesJson.js

@@ -1,50 +1,59 @@
 import { randomUUID } from "node:crypto";
 import { TokenSetStatus } from "@tokens-studio/types";
 import { normalizeTokenSetName } from "./utils.js";
-export default function generateThemesJson(modes, themes) {
-    return [
-        ...generateModesGroup(modes, themes),
-        ...generateThemesGroup(themes),
-        generateSemanticGroup()
-    ];
+function generateThemesJson(modes, themes) {
+  return [
+    ...generateModesGroup(modes, themes),
+    ...generateThemesGroup(themes),
+    generateSemanticGroup()
+  ];
 }
 function generateModesGroup(modes, themes) {
-    return modes.map((mode)=>({
-            id: randomUUID(),
-            name: mode,
-            selectedTokenSets: Object.fromEntries([
-                [
-                    `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-                    TokenSetStatus.ENABLED
-                ],
-                ...themes.map((theme)=>[
-                        `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
-                        TokenSetStatus.ENABLED
-                    ])
-            ]),
-            group: 'Mode'
-        }));
+  return modes.map(
+    (mode) => ({
+      id: randomUUID(),
+      name: mode,
+      selectedTokenSets: Object.fromEntries([
+        [
+          `primitives/colors/${normalizeTokenSetName(mode)}/global`,
+          TokenSetStatus.ENABLED
+        ],
+        ...themes.map(
+          (theme) => [
+            `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+            TokenSetStatus.ENABLED
+          ]
+        )
+      ]),
+      group: "Mode"
+    })
+  );
 }
 function generateThemesGroup(themes) {
-    return themes.map((theme)=>({
-            id: randomUUID(),
-            name: theme,
-            selectedTokenSets: {
-                [`themes/${normalizeTokenSetName(theme)}`]: TokenSetStatus.ENABLED
-            },
-            group: 'Theme'
-        }));
+  return themes.map(
+    (theme) => ({
+      id: randomUUID(),
+      name: theme,
+      selectedTokenSets: {
+        [`themes/${normalizeTokenSetName(theme)}`]: TokenSetStatus.ENABLED
+      },
+      group: "Theme"
+    })
+  );
 }
 function generateSemanticGroup() {
-    return {
-        id: randomUUID(),
-        name: 'Semantic',
-        selectedTokenSets: {
-            'semantic/style': TokenSetStatus.ENABLED,
-            'semantic/color': TokenSetStatus.ENABLED,
-            'primitives/globals': TokenSetStatus.SOURCE,
-            'primitives/typography/default': TokenSetStatus.SOURCE
-        },
-        group: 'Semantic'
-    };
+  return {
+    id: randomUUID(),
+    name: "Semantic",
+    selectedTokenSets: {
+      "semantic/style": TokenSetStatus.ENABLED,
+      "semantic/color": TokenSetStatus.ENABLED,
+      "primitives/globals": TokenSetStatus.SOURCE,
+      "primitives/typography/default": TokenSetStatus.SOURCE
+    },
+    group: "Semantic"
+  };
 }
+export {
+  generateThemesJson as default
+};

package/dist/src/init/index.js

@@ -1,7 +1,10 @@
 import { Argument } from "@commander-js/extra-typings";
 import { createTokensPackage } from "./createTokensPackage.js";
-export function makeInitCommand(command) {
-    return command.showHelpAfterError().description('create an initial token structure for Designsystemet').addArgument(new Argument('<targetDir>', 'Target directory for the generated code')).action(async (targetDir)=>{
-        await createTokensPackage(targetDir);
-    });
+function makeInitCommand(command) {
+  return command.showHelpAfterError().description("create an initial token structure for Designsystemet").addArgument(new Argument("<targetDir>", "Target directory for the generated code")).action(async (targetDir) => {
+    await createTokensPackage(targetDir);
+  });
 }
+export {
+  makeInitCommand
+};

package/dist/src/init/nextStepsMarkdown.js

@@ -1,12 +1,11 @@
 import { normalizeTokenSetName, toGeneratedCssFileName } from "./utils.js";
-export function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
-    const themeModeCombinations = themes.flatMap((theme)=>modes.map((mode)=>[
-                theme,
-                mode
-            ]));
-    const themeOrThemes = `theme${themes.length > 1 ? 's' : ''}`;
-    const isOrAre = themes.length > 1 ? 'are' : 'is';
-    return `
+function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
+  const themeModeCombinations = themes.flatMap(
+    (theme) => modes.map((mode) => [theme, mode])
+  );
+  const themeOrThemes = `theme${themes.length > 1 ? "s" : ""}`;
+  const isOrAre = themes.length > 1 ? "are" : "is";
+  return `
 ## Next steps
 
 ### Using the ${themeOrThemes} in Figma
@@ -23,14 +22,14 @@ export function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
 
 1. Go to https://theme.designsystemet.no and set up a color theme
 2. Press "Kopier tema"
-3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to
+3. Under "Json til Figma", copy the contents under ${modes.join(" / ")} to
    the corresponding file under \`${tokensTargetDir}\`:  
-${themeModeCombinations.map(([theme, mode])=>`     **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.
-   This is the same as the json filename without extension (e.g. ${themes.map((x)=>`\`${normalizeTokenSetName(x)}\``).join(', ')}).
-${themes.length > 1 ? '5. Repeat steps 1—4 for the remaining themes' : ''}
+   This is the same as the json filename without extension (e.g. ${themes.map((x) => `\`${normalizeTokenSetName(x)}\``).join(", ")}).
+${themes.length > 1 ? "5. Repeat steps 1\u20144 for the remaining themes" : ""}
 
 ### Using the correct ${themeOrThemes} in Figma components
 
@@ -86,5 +85,8 @@ ${themes.length > 1 ? `
 \`\`\`js
 import '${packageName}/${toGeneratedCssFileName(themes[1])}';
 \`\`\`
-`.trim() : ''}`;
+`.trim() : ""}`;
 }
+export {
+  nextStepsMarkdown
+};