@digdir/designsystemet 1.0.0-next.34 → 1.0.0-next.35

package/dist/bin/designsystemet.js

@@ -11,12 +11,13 @@ program.name("Designsystemet").description("CLI for working with Designsystemet"
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
   const DEFAULT_TOKENSDIR = "./design-tokens";
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
     const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENSDIR;
     const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
     const preview = opts.preview;
+    const verbose = opts.verbose;
     console.log(`Bulding tokens in ${chalk.green(tokens)}`);
-    return buildTokens({ tokens, out, preview });
+    return buildTokens({ tokens, out, preview, verbose });
   });
   tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption("-a, --accent <number>", `Accent hex color`).requiredOption("-n, --neutral <number>", `Neutral hex color`).requiredOption("-b1, --brand1 <number>", `Brand1 hex color`).requiredOption("-b2, --brand2 <number>", `Brand2 hex color`).requiredOption("-b3, --brand3 <number>", `Brand3 hex color`).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
     const { theme, fontFamily } = opts;

package/dist/src/tokens/build/configs.js

@@ -48,7 +48,6 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
   const layer = `ds.theme.color-mode.${mode}`;
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -83,7 +82,6 @@ const semanticVariables = ({ outPath, theme }) => {
   const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing", "border-radius"], token);
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -116,7 +114,6 @@ const semanticVariables = ({ outPath, theme }) => {
 const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       ts: {
@@ -151,7 +148,6 @@ const typographyVariables = ({ outPath, theme, typography }) => {
   const layer = `ds.theme.typography.${typography}`;
   return {
     usesDtcg: true,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     expand: {
       include: ["typography"],
@@ -196,7 +192,7 @@ const typographyVariables = ({ outPath, theme, typography }) => {
     }
   };
 };
-const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutatedThemes.map((permutatedTheme) => {
+const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes, logVerbosity) => permutatedThemes.map((permutatedTheme) => {
   const {
     selectedTokenSets = [],
     mode = "unknown",
@@ -220,6 +216,10 @@ const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutat
   });
   const config = {
     ...config_,
+    log: {
+      ...config_?.log,
+      verbosity: logVerbosity
+    },
     source,
     include
   };

package/dist/src/tokens/build/formats/css.js

@@ -87,7 +87,6 @@ const typography = {
       format: "css",
       usesDtcg
     });
-    console.log("dictionary.allTokens", dictionary.allTokens);
     const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
     const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {

package/dist/src/tokens/build/utils/entryfile.js

@@ -1,14 +1,40 @@
+import chalk from "chalk";
 import glob from "fast-glob";
 import fs from "fs-extra";
 import * as R from "ramda";
-const sortLightmodeFirst = R.sortWith([R.descend(R.includes("light")), R.descend(R.includes("secondary"))]);
+const sortOrder = [
+  "color-mode/light",
+  "typography/secondary",
+  "semantic",
+  "color-mode/dark",
+  "color-mode/contrast",
+  "typography/primary"
+];
+const sortByDefinedOrder = R.sortBy((fileName) => {
+  const sortIndex = sortOrder.findIndex((sortElement) => fileName.includes(`${sortElement}.css`));
+  if (sortIndex === -1) {
+    console.error(
+      chalk.yellow("WARNING: CSS section does not have a defined sort order:", fileName.replace(".css", ""))
+    );
+    console.log(
+      chalk.dim(
+        `
+A Digdir developer should define its order in the sortOrder array in entryfile.ts.
+The section will currently be added to the end of the entry file, but the exact
+order may change due to nondeterminism.`.trim()
+      )
+    );
+    console.log();
+    return Infinity;
+  }
+  return sortIndex;
+});
 const header = `@charset "UTF-8";
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
 `;
-const sortAndConcat = R.pipe(
-  sortLightmodeFirst,
+const concat = R.pipe(
   R.map((file) => {
     try {
       const content = fs.readFileSync(file, "utf-8").toString();
@@ -23,7 +49,8 @@ const sortAndConcat = R.pipe(
 const makeEntryFile = async ({ outPath, buildPath, theme }) => {
   const writePath = `${outPath}/${theme}.css`;
   const files = await glob(`**/*`, { cwd: buildPath });
-  const content = header + sortAndConcat(files.map((file) => `${buildPath}/${file}`));
+  const sortedFileNames = sortByDefinedOrder(files);
+  const content = header + concat(sortedFileNames.map((file) => `${buildPath}/${file}`));
   await fs.writeFile(writePath, content);
 };
 export {

package/dist/src/tokens/build.js

@@ -8,76 +8,90 @@ import { makeEntryFile } from "./build/utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function buildTokens(options) {
+  const verbosity = options.verbose ? "verbose" : "silent";
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
   const outPath = path.resolve(options.out);
   const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), "utf-8"));
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo("")(theme.group));
-    if (group === "size" && theme.name !== "default") return false;
+    if (group === "size" && theme.name.toLowerCase() !== "default") return false;
     return true;
   });
   const themes = permutateThemes(relevant$themes);
   const typographyThemes = R.filter((val) => val.mode === "light", themes);
   const colormodeThemes = R.filter((val) => val.typography === "primary", themes);
   const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes);
-  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes);
-  const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes);
-  const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
-  if (typographyConfigs.length > 0) {
-    console.log(`
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes, verbosity);
+  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes, verbosity);
+  const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes, verbosity);
+  const storefrontConfigs = getConfigs(
+    configs.typescriptTokens,
+    storefrontOutDir,
+    tokensDir,
+    colormodeThemes,
+    verbosity
+  );
+  try {
+    if (typographyConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("typography")}`);
-    await Promise.all(
-      typographyConfigs.map(async ({ theme, typography, config }) => {
-        console.log(`\u{1F477} ${theme} - ${typography}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
-  if (colorModeConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        typographyConfigs.map(async ({ theme, typography, config }) => {
+          console.log(`\u{1F477} ${theme} - ${typography}`);
+          const typographyClasses = await sd.extend(config);
+          return typographyClasses.buildAllPlatforms();
+        })
+      );
+    }
+    if (colorModeConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("color-mode")}`);
-    await Promise.all(
-      colorModeConfigs.map(async ({ theme, mode, config }) => {
-        console.log(`\u{1F477} ${theme} - ${mode}`);
-        const themeVariablesSD = await sd.extend(config);
-        return themeVariablesSD.buildAllPlatforms();
-      })
-    );
-  }
-  if (semanticConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        colorModeConfigs.map(async ({ theme, mode, config }) => {
+          console.log(`\u{1F477} ${theme} - ${mode}`);
+          const themeVariablesSD = await sd.extend(config);
+          return themeVariablesSD.buildAllPlatforms();
+        })
+      );
+    }
+    if (semanticConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("semantic")}`);
-    await Promise.all(
-      semanticConfigs.map(async ({ theme, config, semantic }) => {
-        console.log(`\u{1F477} ${theme} - ${semantic}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
-  if (storefrontConfigs.length > 0 && options.preview) {
-    console.log(`
+      await Promise.all(
+        semanticConfigs.map(async ({ theme, config, semantic }) => {
+          console.log(`\u{1F477} ${theme} - ${semantic}`);
+          const typographyClasses = await sd.extend(config);
+          return typographyClasses.buildAllPlatforms();
+        })
+      );
+    }
+    if (storefrontConfigs.length > 0 && options.preview) {
+      console.log(`
 \u{1F371} Building ${chalk.green("Storefront preview tokens")}`);
-    await Promise.all(
-      storefrontConfigs.map(async ({ theme, mode, config }) => {
-        console.log(`\u{1F477} ${theme} - ${mode}`);
-        const storefrontSD = await sd.extend(config);
-        return storefrontSD.buildAllPlatforms();
-      })
-    );
-  }
-  if (semanticConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        storefrontConfigs.map(async ({ theme, mode, config }) => {
+          console.log(`\u{1F477} ${theme} - ${mode}`);
+          const storefrontSD = await sd.extend(config);
+          return storefrontSD.buildAllPlatforms();
+        })
+      );
+    }
+    if (semanticConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("CSS file")}`);
-    await Promise.all(
-      semanticConfigs.map(async ({ theme }) => {
-        console.log(`\u{1F477} ${theme}.css`);
-        return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
-      })
-    );
+      await Promise.all(
+        semanticConfigs.map(async ({ theme }) => {
+          console.log(`\u{1F477} ${theme}.css`);
+          return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
+        })
+      );
+    }
+  } catch (err) {
+    if (err instanceof Error) {
+      err.message = err.message.replace('log.verbosity "verbose" or use ', "");
+    }
+    throw err;
   }
 }
 export {

package/dist/src/tokens/design-tokens/default/semantic/style.json

@@ -72,49 +72,17 @@
         }
       }
     },
-    "ingress": {
-      "lg": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.8}",
-          "letterSpacing": "{letter-spacing.8}"
-        }
-      },
-      "md": {
+    "body": {
+      "xl": {
         "$type": "typography",
         "$value": {
           "fontFamily": "{font.family}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
+          "lineHeight": "{line-height.md}",
           "fontSize": "{font-size.7}",
           "letterSpacing": "{letter-spacing.8}"
         }
       },
-      "sm": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.6}",
-          "letterSpacing": "{letter-spacing.7}"
-        }
-      },
-      "xs": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.5}",
-          "letterSpacing": "{letter-spacing.6}"
-        }
-      }
-    },
-    "paragraph": {
       "lg": {
         "$type": "typography",
         "$value": {
@@ -156,6 +124,16 @@
         }
       },
       "short": {
+        "xl": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{font.family}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.sm}",
+            "fontSize": "{font-size.7}",
+            "letterSpacing": "{letter-spacing.8}"
+          }
+        },
         "lg": {
           "$type": "typography",
           "$value": {
@@ -198,6 +176,16 @@
         }
       },
       "long": {
+        "xl": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{font.family}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.lg}",
+            "fontSize": "{font-size.7}",
+            "letterSpacing": "{letter-spacing.8}"
+          }
+        },
         "lg": {
           "$type": "typography",
           "$value": {