@digdir/designsystemet 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/src/colors/types.js

@@ -1 +1 @@
-//# sourceMappingURL=types.js.map
+export { };

package/dist/src/init/createTokensPackage.js

@@ -0,0 +1,230 @@
+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 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 promptOptions = {
+    onCancel: ()=>{
+        console.log(`${chalk.red('✖')} 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...');
+        }
+    }
+    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:
+    ↑/↓: Highlight option
+    ←/→/[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
+                });
+            }
+        },
+        {
+            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 === 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}`);
+}
+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`;
+    }
+}

package/dist/src/init/generateMetadataJson.js

@@ -0,0 +1,16 @@
+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'
+        ]
+    };
+}

package/dist/src/init/generateThemesJson.js

@@ -0,0 +1,50 @@
+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 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'
+    };
+}

package/dist/src/init/index.js

@@ -0,0 +1,7 @@
+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);
+    });
+}

package/dist/src/init/nextStepsMarkdown.js

@@ -0,0 +1,90 @@
+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 `
+## 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—4 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() : ''}`;
+}

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"
+    }
+  }
+}