@digdir/designsystemet 0.1.0-alpha.9 → 0.1.0-next.21

package/dist/src/init/createTokensPackage.js

@@ -0,0 +1,250 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import chalk from "chalk";
+import prompts from "prompts";
+import generateMetadata from "./generateMetadataJson.js";
+import generateThemes from "./generateThemesJson.js";
+import { nextStepsMarkdown } from "./nextStepsMarkdown.js";
+import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
+import { normalizeTokenSetName, toGeneratedCssFileName, toValidPackageName } from "./utils.js";
+const MODES = ["Light", "Dark", "Contrast"];
+const promptOptions = {
+  onCancel: () => {
+    console.log(`${chalk.red("\u2716")} Operation cancelled`);
+    process.exit();
+  }
+};
+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(
+    [
+      {
+        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:
+    \u2191/\u2193: Highlight option
+    \u2190/\u2192/[space]: Toggle selection
+    a: Toggle all
+    enter/return: Complete answer
+${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: "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(
+    `
+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`));
+  }
+  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 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;
+}
+function ordinal(n) {
+  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

@@ -0,0 +1,19 @@
+import { normalizeTokenSetName } from "./utils.js";
+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

@@ -0,0 +1,52 @@
+import { randomUUID } from "node:crypto";
+import { TokenSetStatus } from "@tokens-studio/types";
+import { normalizeTokenSetName } from "./utils.js";
+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"
+    })
+  );
+}
+function generateThemesGroup(themes) {
+  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"
+  };
+}
+export {
+  generateThemesJson as default
+};

package/dist/src/init/index.js

@@ -0,0 +1,10 @@
+import { Argument } from "@commander-js/extra-typings";
+import { createTokensPackage } from "./createTokensPackage.js";
+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

@@ -0,0 +1,92 @@
+import { normalizeTokenSetName, toGeneratedCssFileName } from "./utils.js";
+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
+
+1. Initialise a git repository in the current directory
+2. Push the tokens to GitHub, GitLab or Azure DevOps
+3. [Open the Figma component library](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) and save it to your project
+4. Install the [Tokens Studio plugin](https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)) in Figma
+5. [Set up sync](https://docs.tokens.studio/sync/sync) in Tokens Studio for Figma
+6. Use the ["Create variables" action](https://docs.tokens.studio/variables/creating-variables) in Tokens Studio
+7. Push the resulting variables from Tokens Studio to Git
+
+### Customizing the ${themeOrThemes}
+
+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
+   the corresponding file under \`${tokensTargetDir}\`:  
+${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\u20144 for the remaining themes" : ""}
+
+### Using the correct ${themeOrThemes} in Figma components
+
+The "Designsystemet - Core UI Kit" component library is set up with the themes
+"Theme1" and "Theme2" by default. To ensure our custom ${themeOrThemes} ${isOrAre} used, follow these steps:
+
+1. Open your copy of "Designsystemet - Core UI Kit" in Figma
+2. Pull any changes from Git using Tokens Studio
+3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
+4. Access the [Variables modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables)
+5. Select the "Theme" collection in the upper left dropdown
+6. Select "All variables"
+7. Right click the modes "Theme1" and click "Delete mode"
+8. Repeat for "Theme2"
+9. Publish the library
+
+### Updating the Figma components after theme changes
+
+1. Open your copy of "Designsystemet - Core UI Kit" in Figma
+2. Pull any changes from Git using Tokens Studio
+3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
+4. Publish the library
+
+### Using the ${themeOrThemes} in code
+
+The current directory is set up to easily publish the ${themeOrThemes} as an npm package.
+
+1. Check that the package.json file is set up to your liking
+2. \`npm install\`
+3. \`npm run build\` - builds the css files for each theme and outputs them to \`./dist\`
+4. \`npm publish\`   - publishes the package to npm as \`${packageName}\`, unless you manually changed \`package.json\`
+
+In a different npm package (e.g. a frontend web app), follow the "Get started"
+instructions at https://github.com/digdir/designsystemet but replace
+\`@digdir/designsystemet-theme\` with \`${packageName}\`. In short:
+
+#### Install packages
+
+\`\`\`
+npm i ${packageName} @digdir/designsystemet-css @digdir/designsystemet-react
+\`\`\`
+
+#### Import the default theme and use components
+
+\`\`\`js
+import '${packageName}';
+import '@digdir/designsystemet-css';
+import { Button } from '@digdir/designsystemet-react';
+\`\`\`
+
+${themes.length > 1 ? `
+#### Or import a specific theme
+\`\`\`js
+import '${packageName}/${toGeneratedCssFileName(themes[1])}';
+\`\`\`
+`.trim() : ""}`;
+}
+export {
+  nextStepsMarkdown
+};

package/dist/src/init/template/default-files/README.md

@@ -0,0 +1,10 @@
+# Design tokens for @digdir/designsystemet
+
+## Getting started
+
+```
+npm install
+npm run build
+```
+
+The package is set up for publishing as an NPM library with `npm publish`. Ensure `package.json` is satisfactory before you do this.

package/dist/src/init/template/default-files/design-tokens/README.md

@@ -0,0 +1,3 @@
+# Design tokens
+
+Design tokens structure from [Designsystemet](https://github.com/digdir/designsystemet)

package/dist/src/init/template/default-files/design-tokens/primitives/globals.json

@@ -0,0 +1,197 @@
+{
+  "border-width": {
+    "1": {
+      "type": "borderWidth",
+      "value": "1px"
+    },
+    "2": {
+      "type": "borderWidth",
+      "value": "2px"
+    }
+  },
+  "shadow": {
+    "100": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "200": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.15)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.1)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "300": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.14)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "400": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "3",
+          "blur": "5",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "6",
+          "blur": "12",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.14)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "500": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "12",
+          "blur": "24",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow"
+        }
+      ]
+    }
+  },
+  "border-radius": {
+    "2": {
+      "type": "borderRadius",
+      "value": "2"
+    },
+    "4": {
+      "type": "borderRadius",
+      "value": "4"
+    },
+    "8": {
+      "type": "borderRadius",
+      "value": "8"
+    },
+    "12": {
+      "type": "borderRadius",
+      "value": "12"
+    },
+    "16": {
+      "type": "borderRadius",
+      "value": "16"
+    },
+    "24": {
+      "type": "borderRadius",
+      "value": "24"
+    },
+    "32": {
+      "type": "borderRadius",
+      "value": "32"
+    },
+    "9999": {
+      "type": "borderRadius",
+      "value": "9999"
+    }
+  },
+  "opacity": {
+    "30": {
+      "type": "opacity",
+      "value": "30%"
+    }
+  },
+  "sizing": {
+    "base": {
+      "type": "sizing",
+      "value": "4"
+    }
+  }
+}