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

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

@@ -0,0 +1,112 @@
+import { TokenSetStatus } from "@tokens-studio/types";
+import chalk from "chalk";
+import { kebabCase } from "change-case";
+import * as R from "ramda";
+import { buildOptions } from "../../build.js";
+const getMultidimensionalThemes = (themes, dimensions) => {
+  const verboseLogging = buildOptions?.verbose;
+  const grouped$themes = groupThemes(themes);
+  const permutations = permutateThemes(grouped$themes);
+  const ALL_DEPENDENT_ON = ["theme"];
+  const keys = R.keys(grouped$themes);
+  const nonDependentKeys = keys.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
+  if (verboseLogging) {
+    console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
+    console.log(chalk.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
+  }
+  return permutations.filter((val) => {
+    const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
+    return filters.every((x) => x);
+  });
+};
+const processed = Symbol("Type brand for ProcessedThemeObject");
+function isProcessed(theme) {
+  return Boolean(theme[processed]);
+}
+function processThemeObject(theme) {
+  if (isProcessed(theme)) {
+    return theme;
+  }
+  const result = { ...theme, [processed]: true };
+  if (result.group) {
+    result.group = kebabCase(result.group);
+  }
+  result.name = kebabCase(result.name);
+  return result;
+}
+function groupThemes(themes) {
+  const groups = {};
+  for (const rawTheme of themes) {
+    const theme = processThemeObject(rawTheme);
+    if (theme.group) {
+      const groupKey = theme.group;
+      groups[groupKey] = [...groups[groupKey] ?? [], theme];
+    } else {
+      throw new Error(
+        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
+      );
+    }
+  }
+  return groups;
+}
+const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
+function permutateThemes(groups) {
+  const separator = "_";
+  const permutations = cartesian(Object.values(groups));
+  const permutatedThemes = permutations.map((perm) => {
+    const permutatedTheme = perm.reduce(
+      (acc, theme) => {
+        const { group, name, selectedTokenSets } = theme;
+        let updatedPermutation = acc.permutation;
+        if (group) {
+          const groupProp = R.lensProp(group);
+          updatedPermutation = R.set(groupProp, name, updatedPermutation);
+        }
+        const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
+        const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
+        return {
+          permutation: updatedPermutation,
+          name: updatedName,
+          selectedTokenSets: sets
+        };
+      },
+      {
+        name: "",
+        selectedTokenSets: [],
+        permutation: {
+          mode: "unknown",
+          "main-color": "unknown",
+          "support-color": "unknown",
+          theme: "unknown",
+          semantic: "unknown",
+          size: "unknown",
+          typography: "unknown"
+        }
+      }
+    );
+    if (hasUnknownProps(permutatedTheme)) {
+      throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
+    }
+    const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
+    return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
+  });
+  return permutatedThemes;
+}
+function filterTokenSets(tokensets) {
+  return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
+    if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
+      return -1;
+    }
+    if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
+      return 1;
+    }
+    return 0;
+  }).map((entry) => entry[0]);
+}
+function cartesian(a) {
+  return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
+}
+export {
+  getMultidimensionalThemes,
+  processThemeObject
+};

package/dist/src/tokens/build/utils/noCase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noCase.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/noCase.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACtE;AAQD;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,OAAY,UAkB1D"}

package/dist/{types/src → src}/tokens/build/utils/utils.d.ts

@@ -22,4 +22,7 @@ export declare const getValue: <T>(token: TransformedToken | DesignToken) => T;
  */
 export declare const typeEquals: import("ts-toolbelt/out/Function/Curry").Curry<(types: string[] | string, token: TransformedToken) => boolean>;
 export declare const pathStartsWithOneOf: import("ts-toolbelt/out/Function/Curry").Curry<(paths: string[], token: TransformedToken) => boolean>;
+export declare function isSemanticToken(token: TransformedToken): boolean;
+export declare function isGlobalColorToken(token: TransformedToken): boolean;
+export declare function isColorCategoryToken(token: TransformedToken, category?: 'main' | 'support'): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/src/tokens/build/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM5E;;;;GAIG;AACH,eAAO,MAAM,OAAO,UAAW,gBAAgB,WAAkD,CAAC;AAElG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,gBAAgB,GAAG,WAAW,KAAG,CAAuC,CAAC;AAE5G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,yDAAmB,MAAM,EAAE,GAAG,MAAM,SAAS,gBAAgB,aAMlF,CAAC;AAEH,eAAO,MAAM,mBAAmB,yDAAmB,MAAM,EAAE,SAAS,gBAAgB,aASlF,CAAC;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEhE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAKpG"}

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

@@ -17,9 +17,24 @@ const pathStartsWithOneOf = R.curry((paths, token) => {
   const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
   return hasAnyTruth(matchPathsStartingWith);
 });
+function isSemanticToken(token) {
+  return token.filePath.includes("semantic/");
+}
+function isGlobalColorToken(token) {
+  return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
+}
+function isColorCategoryToken(token, category) {
+  if (!category) {
+    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+  }
+  return R.startsWith(["color", category], token.path);
+}
 export {
   getType,
   getValue,
+  isColorCategoryToken,
+  isGlobalColorToken,
+  isSemanticToken,
   pathStartsWithOneOf,
   typeEquals
 };

package/dist/src/tokens/build.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_COLOR = "accent";
+type Options = {
+    /** Design tokens path */
+    tokens: string;
+    /** Output directory for built tokens */
+    out: string;
+    /** Generate preview tokens */
+    preview: boolean;
+    /** Enable verbose output */
+    verbose: boolean;
+    /** Set the default "accent" color, if not overridden with data-color */
+    accentColor?: string;
+};
+export declare let buildOptions: Options | undefined;
+export declare function buildTokens(options: Options): Promise<void>;
+export {};
+//# sourceMappingURL=build.d.ts.map

package/dist/src/tokens/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAuEjE"}

package/dist/src/tokens/build.js

@@ -1,85 +1,98 @@
-import fs from "node:fs";
+import fs from "node:fs/promises";
 import path from "node:path";
 import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
-import * as configs from "./build/configs.js";
+import { configs, getConfigsForThemeDimensions } from "./build/configs.js";
 import { makeEntryFile } from "./build/utils/entryfile.js";
-const { permutateThemes, getConfigs } = configs;
+import { processThemeObject } from "./build/utils/getMultidimensionalThemes.js";
+const DEFAULT_COLOR = "accent";
+let buildOptions;
 const sd = new StyleDictionary();
+const buildConfigs = {
+  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
+  "color-mode": { getConfig: configs.colorModeVariables, dimensions: ["mode"] },
+  "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
+  "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
+  semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] },
+  storefront: {
+    name: "Storefront preview tokens",
+    getConfig: configs.typescriptTokens,
+    dimensions: ["mode"],
+    options: { outPath: path.resolve("../../apps/storefront/tokens") },
+    enabled: () => buildOptions?.preview ?? false
+  },
+  entryFiles: {
+    name: "CSS entry files",
+    getConfig: configs.semanticVariables,
+    dimensions: ["semantic"],
+    build: async (sdConfigs, { outPath }) => {
+      await Promise.all(
+        sdConfigs.map(async ({ permutation: { theme } }) => {
+          console.log(`\u{1F477} ${theme}.css`);
+          const builtinColorsFilename = "builtin-colors.css";
+          const builtinColors = path.resolve(import.meta.dirname, "build", builtinColorsFilename);
+          await fs.copyFile(builtinColors, path.resolve(outPath, theme, builtinColorsFilename));
+          return makeEntryFile({ theme, outPath, buildPath: path.resolve(outPath, theme) });
+        })
+      );
+    }
+  }
+};
 async function buildTokens(options) {
+  buildOptions = options;
   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;
-    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(`
-\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(`
-\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(`
-\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();
-      })
-    );
+  const $themes = JSON.parse(await fs.readFile(path.resolve(`${tokensDir}/$themes.json`), "utf-8")).map(processThemeObject);
+  const relevant$themes = $themes.filter((theme) => R.not(theme.group === "size" && theme.name !== "default"));
+  if (!buildOptions.accentColor) {
+    const accentOrFirstMainColor = relevant$themes.find((theme) => theme.name === DEFAULT_COLOR) || relevant$themes.find((theme) => theme.group === "main-color");
+    buildOptions.accentColor = accentOrFirstMainColor?.name;
   }
-  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 (buildOptions.accentColor !== DEFAULT_COLOR) {
+    console.log("accent color:", buildOptions.accentColor);
   }
-  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}`) });
+  const buildAndSdConfigs = R.map(
+    (val) => ({
+      buildConfig: val,
+      sdConfigs: getConfigsForThemeDimensions(val.getConfig, relevant$themes, val.dimensions, {
+        outPath,
+        tokensDir,
+        ...val.options
       })
-    );
+    }),
+    buildConfigs
+  );
+  try {
+    for (const [key, { buildConfig, sdConfigs }] of R.toPairs(buildAndSdConfigs)) {
+      if (!(buildConfig.enabled?.() ?? true)) {
+        continue;
+      }
+      if (sdConfigs.length > 0) {
+        console.log(`
+\u{1F371} Building ${chalk.green(buildConfig.name ?? key)}`);
+        if (buildConfig.build) {
+          return await buildConfig.build(sdConfigs, { outPath, tokensDir, ...buildConfig.options });
+        }
+        await Promise.all(
+          sdConfigs.map(async ({ config, permutation }) => {
+            const modes = ["theme", ...buildConfig.dimensions];
+            const modeMessage = modes.map((x) => permutation[x]).join(" - ");
+            console.log(modeMessage);
+            return (await sd.extend(config)).buildAllPlatforms();
+          })
+        );
+      }
+    }
+  } catch (err) {
+    if (err instanceof Error) {
+      err.message = err.message.replace('log.verbosity "verbose" or use ', "");
+    }
+    throw err;
   }
 }
 export {
+  DEFAULT_COLOR,
+  buildOptions,
   buildTokens
 };

package/dist/{types/src → src}/tokens/create.d.ts

@@ -1,4 +1,9 @@
 import type { Colors, Tokens, Typography } from './types.js';
+export declare const colorCliOptions: {
+    readonly main: "main-colors";
+    readonly support: "support-colors";
+    readonly neutral: "neutral-color";
+};
 export type CreateTokensOptions = {
     colors: Colors;
     typography: Typography;

package/dist/src/tokens/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAyB,UAAU,EAAE,MAAM,YAAY,CAAC;AAEpF,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAgFF,eAAO,MAAM,YAAY,SAAU,mBAAmB,WAqBrD,CAAC"}

package/dist/src/tokens/create.js

@@ -1,4 +1,10 @@
+import * as R from "ramda";
 import { baseColors, generateScaleForColor } from "../colors/index.js";
+const colorCliOptions = {
+  main: "main-colors",
+  support: "support-colors",
+  neutral: "neutral-color"
+};
 const createColorTokens = (colorArray) => {
   const obj = {};
   const $type = "color";
@@ -42,18 +48,14 @@ const generateTypographyTokens = (themeName, { fontFamily }) => {
   };
 };
 const generateThemeTokens = (themeName, theme, colors) => {
-  const accentColors = generateScaleForColor(colors.accent, theme);
-  const neutralColors = generateScaleForColor(colors.neutral, theme);
-  const brand1Colors = generateScaleForColor(colors.brand1, theme);
-  const brand2Colors = generateScaleForColor(colors.brand2, theme);
-  const brand3Colors = generateScaleForColor(colors.brand3, theme);
+  const main = R.map((color) => createColorTokens(generateScaleForColor(color, theme)), colors.main);
+  const support = R.map((color) => createColorTokens(generateScaleForColor(color, theme)), colors.support);
+  const neutral = createColorTokens(generateScaleForColor(colors.neutral, theme));
   return {
     [themeName]: {
-      accent: createColorTokens(accentColors),
-      neutral: createColorTokens(neutralColors),
-      brand1: createColorTokens(brand1Colors),
-      brand2: createColorTokens(brand2Colors),
-      brand3: createColorTokens(brand3Colors)
+      ...main,
+      ...support,
+      neutral
     }
   };
 };
@@ -96,5 +98,6 @@ const createTokens = (opts) => {
   return tokens;
 };
 export {
+  colorCliOptions,
   createTokens
 };

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

@@ -134,12 +134,6 @@
       ]
     }
   },
-  "border-radius": {
-    "base": {
-      "$type": "borderRadius",
-      "$value": "4"
-    }
-  },
   "opacity": {
     "30": {
       "$type": "opacity",
@@ -147,13 +141,13 @@
     }
   },
   "sizing": {
-    "base": {
+    "scale": {
       "$type": "sizing",
       "$value": "4"
     }
   },
   "spacing": {
-    "base": {
+    "scale": {
       "$type": "spacing",
       "$value": "4"
     }